import "./index.css"
import { useEffect, useRef, useState } from "react"
import { SectionNav } from "./components/SectionNav"
import { Header } from "./components/sections/Header"
import { Work } from "./components/sections/Work"
import { Connect } from "./components/sections/Connect"
import { GuestbookPage } from "./components/sections/GuestbookPage"
import { sections } from "./data/portfolio"

export function App() {
  const [activeSection, setActiveSection] = useState("")
  const [currentPath, setCurrentPath] = useState(window.location.pathname)
  const sectionsRef = useRef<(HTMLElement | null)[]>([])

  // Handle SPA navigation
  useEffect(() => {
    const handlePopState = () => setCurrentPath(window.location.pathname)
    window.addEventListener('popstate', handlePopState)
    return () => window.removeEventListener('popstate', handlePopState)
  }, [])

  useEffect(() => {
    if (currentPath === '/guestbook') return // Skip observer on guestbook page
    
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate-fade-in-up")
            setActiveSection(entry.target.id)
          }
        })
      },
      { threshold: 0.1, rootMargin: "0px 0px -5% 0px" },
    )

    sectionsRef.current.forEach((section) => {
      if (section) observer.observe(section)
    })

    return () => observer.disconnect()
  }, [currentPath])

  // Guestbook page
  if (currentPath === '/guestbook') {
    return (
      <div className="min-h-screen dark:bg-background text-foreground relative">
        <div className="fixed top-6 left-6 z-50">
          <button
            onClick={() => {
              window.history.pushState({}, '', '/')
              setCurrentPath('/')
            }}
            className="px-4 py-2 rounded-full text-sm font-medium bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 shadow-md hover:shadow-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all flex items-center gap-2"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Back
          </button>
        </div>
        <GuestbookPage />
      </div>
    )
  }

  return (
    <div className="min-h-screen dark:bg-background text-foreground relative">
      <SectionNav sections={sections} activeSection={activeSection} />

      <main>
        <div className="max-w-4xl mx-auto px-6 sm:px-8 lg:px-16">
          <Header 
            sectionRef={(el) => (sectionsRef.current[0] = el)} 
            onGuestbookClick={() => {
              window.history.pushState({}, '', '/guestbook')
              setCurrentPath('/guestbook')
            }}
          />
        </div>
        <Work sectionRef={(el) => (sectionsRef.current[1] = el)} />
        <Connect sectionRef={(el) => (sectionsRef.current[2] = el)} />
      </main>
    </div>
  )
}

export default App