"use client"

import { useState, useEffect } 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"

// Mock photo data with EXIF information
const mockPhotos = [
  {
    id: 1,
    src: "/placeholder.svg?height=600&width=800",
    title: "城市夜景",
    description: "繁华都市的霓虹夜色",
    category: "urban",
    tags: ["夜景", "城市", "建筑"],
    date: "2024-01-15",
    exif: {
      camera: "Canon EOS R5",
      lens: "24-70mm f/2.8",
      settings: "f/8, 1/60s, ISO 800",
      location: "上海外滩",
    },
  },
  {
    id: 2,
    src: "/placeholder.svg?height=800&width=600",
    title: "自然风光",
    description: "山间晨雾缭绕的美景",
    category: "nature",
    tags: ["风景", "山脉", "晨雾"],
    date: "2024-01-20",
    exif: {
      camera: "Sony A7R IV",
      lens: "70-200mm f/4",
      settings: "f/11, 1/125s, ISO 200",
      location: "黄山",
    },
  },
  {
    id: 3,
    src: "/placeholder.svg?height=600&width=800",
    title: "人像摄影",
    description: "自然光下的人像作品",
    category: "portrait",
    tags: ["人像", "自然光", "情绪"],
    date: "2024-02-01",
    exif: {
      camera: "Nikon D850",
      lens: "85mm f/1.4",
      settings: "f/2.8, 1/200s, ISO 400",
      location: "工作室",
    },
  },
  {
    id: 4,
    src: "/placeholder.svg?height=800&width=800",
    title: "街头摄影",
    description: "捕捉城市生活的瞬间",
    category: "street",
    tags: ["街头", "生活", "瞬间"],
    date: "2024-02-10",
    exif: {
      camera: "Fujifilm X-T4",
      lens: "35mm f/1.4",
      settings: "f/5.6, 1/250s, ISO 800",
      location: "北京胡同",
    },
  },
  {
    id: 5,
    src: "/placeholder.svg?height=600&width=800",
    title: "建筑摄影",
    description: "现代建筑的几何美学",
    category: "architecture",
    tags: ["建筑", "几何", "现代"],
    date: "2024-02-15",
    exif: {
      camera: "Canon EOS R6",
      lens: "16-35mm f/2.8",
      settings: "f/8, 1/100s, ISO 100",
      location: "深圳",
    },
  },
  {
    id: 6,
    src: "/placeholder.svg?height=800&width=600",
    title: "微距摄影",
    description: "花朵的细节之美",
    category: "macro",
    tags: ["微距", "花卉", "细节"],
    date: "2024-02-20",
    exif: {
      camera: "Sony A7R V",
      lens: "90mm f/2.8 Macro",
      settings: "f/5.6, 1/160s, ISO 200",
      location: "植物园",
    },
  },
  {
    id: 7,
    src: "/placeholder.svg?height=600&width=800",
    title: "日落风景",
    description: "海边的金色黄昏",
    category: "nature",
    tags: ["日落", "海景", "黄昏"],
    date: "2023-12-10",
    exif: {
      camera: "Canon EOS R5",
      lens: "24-105mm f/4",
      settings: "f/8, 1/125s, ISO 100",
      location: "三亚海滩",
    },
  },
  {
    id: 8,
    src: "/placeholder.svg?height=800&width=600",
    title: "古建筑",
    description: "传统建筑的韵味",
    category: "architecture",
    tags: ["古建筑", "传统", "文化"],
    date: "2023-11-25",
    exif: {
      camera: "Sony A7R IV",
      lens: "50mm f/1.8",
      settings: "f/5.6, 1/200s, ISO 400",
      location: "故宫",
    },
  },
]

export default function HomePage() {
  const [photos, setPhotos] = useState(mockPhotos)
  const [filteredPhotos, setFilteredPhotos] = useState(mockPhotos)
  const [selectedPhoto, setSelectedPhoto] = useState(null)
  const [isLoading, setIsLoading] = useState(true)
  const [activeCategory, setActiveCategory] = useState("all")
  const [activeTab, setActiveTab] = useState("gallery")

  useEffect(() => {
    // Simulate loading
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1500)

    return () => clearTimeout(timer)
  }, [])

  const handleFilter = (category: string) => {
    setActiveCategory(category)
    if (category === "all") {
      setFilteredPhotos(photos)
    } else {
      setFilteredPhotos(photos.filter((photo) => photo.category === category))
    }
  }

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

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

  const handlePrevPhoto = () => {
    if (!selectedPhoto) return
    const currentPhotos = activeTab === "gallery" ? filteredPhotos : photos
    const currentIndex = currentPhotos.findIndex((p) => 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) => 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")
      setFilteredPhotos(photos)
    }
  }

  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>
  )
}