"use client"

import { useState, useEffect, useMemo } from "react"
import { PhotoGallery } from "@/components/photo-gallery"
import { PhotoModal } from "@/components/photo-modal"
import { Navigation } from "@/components/navigation"
import { FilterBar } from "@/components/filter-bar"
import { LoadingSpinner } from "@/components/loading-spinner"
import { TimelineView } from "@/components/timeline-view"
import { AboutView } from "@/components/about-view"
import { ContactView } from "@/components/contact-view"
import { usePhotos, type Photo } from "@/lib/queries"
import { useToast } from "@/components/ui/use-toast"

export default function HomePage() {
  const { data: photos = [], isLoading, error } = usePhotos()
  const { toast } = useToast()
  const [selectedPhoto, setSelectedPhoto] = useState<Photo | null>(null)
  const [activeCategory, setActiveCategory] = useState("all")
  const [activeTab, setActiveTab] = useState("gallery")

  useEffect(() => {
    if (error) {
      toast({
        title: "数据加载失败",
        description: "无法获取照片数据，请稍后重试",
        variant: "destructive",
      })
    }
  }, [error, toast])

  const filteredPhotos = useMemo(() => {
    if (activeCategory === "all") {
      return photos
    }
    return photos.filter((photo: Photo) => photo.category === activeCategory)
  }, [photos, activeCategory])

  const handleFilter = (category: string) => {
    setActiveCategory(category)
  }

  const handlePhotoClick = (photo: Photo) => {
    setSelectedPhoto(photo)
  }

  const handleCloseModal = () => {
    setSelectedPhoto(null)
  }

  const handlePrevPhoto = () => {
    if (!selectedPhoto) return
    const currentPhotos = activeTab === "gallery" ? filteredPhotos : photos
    const currentIndex = currentPhotos.findIndex((p: Photo) => p.id === selectedPhoto.id)
    const prevIndex = currentIndex > 0 ? currentIndex - 1 : currentPhotos.length - 1
    setSelectedPhoto(currentPhotos[prevIndex])
  }

  const handleNextPhoto = () => {
    if (!selectedPhoto) return
    const currentPhotos = activeTab === "gallery" ? filteredPhotos : photos
    const currentIndex = currentPhotos.findIndex((p: Photo) => p.id === selectedPhoto.id)
    const nextIndex = currentIndex < currentPhotos.length - 1 ? currentIndex + 1 : 0
    setSelectedPhoto(currentPhotos[nextIndex])
  }

  const handleTabChange = (tab: string) => {
    setActiveTab(tab)
    // Reset filters when switching tabs
    if (tab === "timeline") {
      setActiveCategory("all")
    }
  }

  const handleContactClick = () => {
    setActiveTab("contact")
  }

  const getPageTitle = () => {
    switch (activeTab) {
      case "gallery":
        return "摄影作品集"
      case "timeline":
        return "创作时间线"
      case "about":
        return "关于我"
      case "contact":
        return "联系合作"
      default:
        return "摄影作品集"
    }
  }

  const getPageDescription = () => {
    switch (activeTab) {
      case "gallery":
        return "用镜头记录世界的美好瞬间，每一张照片都是时光的诗篇"
      case "timeline":
        return "按时间顺序回顾摄影创作历程，见证技艺与视角的成长轨迹"
      case "about":
        return "分享我的摄影故事，探索光影背后的创作理念与人生感悟"
      case "contact":
        return "期待与您合作，共同创造独特而珍贵的视觉记忆"
      default:
        return "用镜头记录世界的美好瞬间，每一张照片都是时光的诗篇"
    }
  }

  if (isLoading) {
    return <LoadingSpinner />
  }

  return (
    <div className="min-h-screen bg-white">
      <Navigation activeTab={activeTab} onTabChange={handleTabChange} />

      <main className="container mx-auto px-4 py-8">
        {(activeTab === "gallery" || activeTab === "timeline") && (
          <div className="text-center mb-12">
            <h1 className="text-4xl md:text-6xl font-light text-gray-900 mb-4">{getPageTitle()}</h1>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">{getPageDescription()}</p>
          </div>
        )}

        {activeTab === "gallery" && (
          <>
            <FilterBar activeCategory={activeCategory} onFilter={handleFilter} />
            <PhotoGallery photos={filteredPhotos} onPhotoClick={handlePhotoClick} />
          </>
        )}

        {activeTab === "timeline" && <TimelineView photos={photos} onPhotoClick={handlePhotoClick} />}

        {activeTab === "about" && <AboutView onContactClick={handleContactClick} />}

        {activeTab === "contact" && <ContactView />}
      </main>

      {selectedPhoto && (
        <PhotoModal
          photo={selectedPhoto}
          onClose={handleCloseModal}
          onPrev={handlePrevPhoto}
          onNext={handleNextPhoto}
        />
      )}
    </div>
  )
}