"use client"

import type React from "react"

import { Link } from "react-router-dom"
import {
  Search,
  Mail,
  Phone,
  MapPin,
  Facebook,
  Twitter,
  Instagram,
  Youtube,
  Clock,
  Users,
  Database,
  Award,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
import { Card, CardContent } from "@/components/ui/card"
import SearchForm from "./SearchForm"
import { useEffect, useState } from "react"
import { useNavigate } from "react-router-dom"
import ApiService from "@/services/apiService"
import type { Person } from "@/types/api"

export default function Home() {
  const [currentSlide, setCurrentSlide] = useState(0)
  const navigate = useNavigate()
  const [total, setTotal] = useState(0)
  const [migrants, setMigrants] = useState<Person[]>([])
  const API_BASE_URL = "http://localhost:8000"

  useEffect(() => {
    async function fetchData() {
      const response = await ApiService.getMigrants(1, 10)
      setMigrants(response.data || [])
      setTotal(response.total || 0)
    }
    fetchData()
  }, [])

  const backgroundImages = [
    {
      src: `${import.meta.env.BASE_URL}slide1.avif`,
      alt: "Italian countryside landscape",
    },
    {
      src: `${import.meta.env.BASE_URL}slide2.avif`,
      alt: "Vintage Italian architecture",
    },
    {
      src: `${import.meta.env.BASE_URL}slide3.avif`,
      alt: "Italian coastal town",
    },
    {
      src: `${import.meta.env.BASE_URL}slide4.avif`,
      alt: "Italian countryside with vineyards",
    },
  ]

  const galleryImages = [
    {
      src: "https://images.unsplash.com/photo-1523906834658-6e24ef2386f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
      alt: "Italian countryside village",
    },
    {
      src: "https://images.unsplash.com/photo-1515542622106-78bda8ba0e5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
      alt: "Italian landscape",
    },
    {
      src: "https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
      alt: "Italian vineyards",
    },
    {
      src: "https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
      alt: "Italian coastal town",
    },
    {
      src: "https://images.unsplash.com/photo-1581833971358-2c8b550f87b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
      alt: "Italian traditional building",
    },
  ]

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % backgroundImages.length)
    }, 5000)
    return () => clearInterval(timer)
  }, [backgroundImages.length])

  // Smooth scroll to contact section
  const scrollToContact = (e: React.MouseEvent) => {
    e.preventDefault()
    const contactSection = document.getElementById("contact")
    if (contactSection) {
      contactSection.scrollIntoView({
        behavior: "smooth",
        block: "start",
      })
    }
  }

  return (
    <div className="flex flex-col min-h-screen">
      <header className="absolute top-0 left-0 right-0 z-50 border-b border-white/20 bg-black/20 backdrop-blur-sm">
        <div className="container flex h-16 items-center justify-between px-4 md:px-6">
          <Link to="/" className="flex items-center gap-2">
            <span className="text-xl font-bold text-white">Italian Migrants NT</span>
          </Link>
          <nav className="hidden md:flex gap-6">
            <Link to="/" className="text-sm font-medium text-white hover:text-white/80 transition-colors">
              Home
            </Link>
            <a href="#about" className="text-sm font-medium text-white hover:text-white/80 transition-colors">
              About
            </a>
            <a href="#stories" className="text-sm font-medium text-white hover:text-white/80 transition-colors">
              Stories
            </a>
            <a
              href="#contact"
              onClick={scrollToContact}
              className="text-sm font-medium text-white hover:text-white/80 transition-colors"
            >
              Contact
            </a>
          </nav>
          <Button variant="outline" size="icon" className="md:hidden border-white/20 text-white hover:bg-white/10">
            <Search className="h-4 w-4" />
            <span className="sr-only">Search</span>
          </Button>
        </div>
      </header>

      <main className="flex-1">
        {/* Hero Section with Background Carousel and Search */}
        <section className="relative w-full h-screen flex items-center justify-center overflow-hidden">
          {/* Background Carousel */}
          <div className="absolute inset-0">
            {backgroundImages.map((image, index) => (
              <div
                key={index}
                className={`absolute inset-0 transition-opacity duration-1000 ${index === currentSlide ? "opacity-100" : "opacity-0"
                  }`}
              >
                <img src={image.src || `${import.meta.env.BASE_URL}placeholder.svg`} alt={image.alt} className="w-full h-full object-cover" />
                <div className="absolute inset-0 bg-black/60" />
              </div>
            ))}
          </div>

          {/* Centered Content with Search */}
          <div className="relative z-10 text-center text-white px-4 md:px-6 max-w-5xl mx-auto">
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tighter font-serif mb-4">
              Find Your Italian Heritage
            </h1>
            <p className="text-lg md:text-xl lg:text-2xl mb-8 text-white/90 max-w-3xl mx-auto leading-relaxed">
              Search our comprehensive database of Italian migrants to the Northern Territory. Discover family
              histories, personal stories, and cultural contributions spanning over a century.
            </p>

            {/* Main Search Form */}
            <div className="bg-white/95 backdrop-blur-sm rounded-2xl p-6 md:p-8 shadow-2xl mb-8 max-w-4xl mx-auto">
              <h2 className="text-2xl md:text-3xl font-bold text-[#9B2335] mb-6 font-serif">Search Migrant Database</h2>
              <SearchForm />
            </div>

            <Button
              size="lg"
              variant="outline"
              onClick={() => navigate("/search-results")}
              className="border-white text-black hover:bg-white hover:text-black px-8 py-3 text-lg"
            >
              Browse All Records
            </Button>

            {/* Quick Stats */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12 text-center">
              <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
                <div className="text-3xl font-bold text-white">{total.toLocaleString()}</div>
                <div className="text-white/80">Migrant Records</div>
              </div>
              <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
                <div className="text-3xl font-bold text-white">1880-1980</div>
                <div className="text-white/80">Years Covered</div>
              </div>
              <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
                <div className="text-3xl font-bold text-white">156</div>
                <div className="text-white/80">Italian Regions</div>
              </div>
            </div>
          </div>

          {/* Carousel Indicators */}
          <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-2">
            {backgroundImages.map((_, index) => (
              <button
                key={index}
                onClick={() => setCurrentSlide(index)}
                className={`w-3 h-3 rounded-full transition-all ${index === currentSlide ? "bg-white" : "bg-white/50"}`}
              />
            ))}
          </div>
        </section>

        {/* Quick Search Tips */}
        <section className="w-full py-12 bg-[#E8DCCA]">
          <div className="container px-4 md:px-6">
            <div className="text-center mb-8">
              <h2 className="text-2xl md:text-3xl font-bold text-[#9B2335] font-serif mb-4">Search Tips</h2>
              <p className="text-muted-foreground max-w-2xl mx-auto">
                Get the most out of your search with these helpful tips
              </p>
            </div>
            <div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
              <div className="text-center p-6 bg-white rounded-lg shadow-sm">
                <div className="w-12 h-12 bg-[#01796F] rounded-full flex items-center justify-center mx-auto mb-4">
                  <Search className="h-6 w-6 text-white" />
                </div>
                <h3 className="font-semibold text-[#9B2335] mb-2">Name Variations</h3>
                <p className="text-sm text-muted-foreground">
                  Try different spellings and shortened versions of names as they may have been anglicized upon arrival.
                </p>
              </div>
              <div className="text-center p-6 bg-white rounded-lg shadow-sm">
                <div className="w-12 h-12 bg-[#01796F] rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-white font-bold">📅</span>
                </div>
                <h3 className="font-semibold text-[#9B2335] mb-2">Date Ranges</h3>
                <p className="text-sm text-muted-foreground">
                  Use broader date ranges as exact arrival dates may not always be recorded accurately.
                </p>
              </div>
              <div className="text-center p-6 bg-white rounded-lg shadow-sm">
                <div className="w-12 h-12 bg-[#01796F] rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-white font-bold">🗺️</span>
                </div>
                <h3 className="font-semibold text-[#9B2335] mb-2">Regional Search</h3>
                <p className="text-sm text-muted-foreground">
                  Search by Italian region or province if you know your family's origin to narrow results.
                </p>
              </div>
            </div>
          </div>
        </section>

        <section id="stories" className="w-full py-12 md:py-24 lg:py-32">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl font-serif text-[#1A2A57]">
                  Featured Stories
                </h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  Discover some of the remarkable personal journeys found in our database. Each story represents
                  courage, determination, and the pursuit of a better life.
                </p>
              </div>
            </div>

            <div className="mx-auto max-w-5xl py-12">
              <Carousel className="w-full">
                <CarouselContent>
                  {migrants.map((person) => {
                    // Find the profile photo
                    const profilePhoto = person.photos?.find((photo) => photo.is_profile_photo)

                    return (
                      <CarouselItem key={person.person_id} className="md:basis-1/2 lg:basis-1/2">
                        <div className="p-2">
                          <Card className="h-full">
                            <CardContent className="p-6">
                              <div className="space-y-4">
                                <div className="aspect-video overflow-hidden rounded-lg">
                                  <img
                                    src={
                                      profilePhoto
                                        ? `${API_BASE_URL}${profilePhoto.file_path}`
                                        : "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                                    }
                                    alt={`Portrait of ${person.full_name || person.surname || "Unnamed"}`}
                                    className="object-cover w-full h-full"
                                  />
                                </div>
                                <div className="space-y-2">
                                  <h3 className="text-xl font-bold font-serif text-[#9B2335]">
                                    {person.full_name || person.surname || "Unnamed"}
                                  </h3>
                                  <p className="text-sm text-[#01796F] font-medium">
                                    Arrived{" "}
                                    {person.migration?.date_of_arrival_nt
                                      ? new Date(person.migration.date_of_arrival_nt).getFullYear()
                                      : "Unknown"}
                                  </p>
                                  <p className="text-muted-foreground text-sm leading-relaxed">
                                    {person.additional_notes || "No story available."}
                                  </p>
                                  <Button
                                    size="sm"
                                    variant="outline"
                                    className="mt-3 border-[#9B2335] text-[#9B2335] hover:bg-[#9B2335] hover:text-white"
                                    onClick={() => navigate(`/migrant-profile/${person.person_id}`)}
                                  >
                                    View Full Record
                                  </Button>
                                </div>
                              </div>
                            </CardContent>
                          </Card>
                        </div>
                      </CarouselItem>
                    )
                  })}
                </CarouselContent>
                <CarouselPrevious />
                <CarouselNext />
              </Carousel>
            </div>
          </div>
        </section>

        <section id="about" className="w-full py-12 md:py-24 lg:py-32 bg-gray-50">
          <div className="container px-4 md:px-6">
            <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
              <div className="space-y-4 text-center lg:text-left">
                <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl font-serif text-[#1A2A57]">
                  Preserving Our Heritage
                </h2>
                <p className="max-w-[600px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed mx-auto lg:mx-0">
                  This digital archive aims to preserve and celebrate the contributions of Italian migrants to the
                  Northern Territory. By documenting their stories, photographs, and historical records, we ensure that
                  their legacy continues for generations to come.
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                  <Button className="bg-[#01796F] hover:bg-[#015a54] text-white">Contribute a Story</Button>
                  <Button
                    variant="outline"
                    className="border-[#9B2335] text-[#9B2335] hover:bg-[#9B2335] hover:text-white"
                  >
                    View Gallery
                  </Button>
                </div>
              </div>
              <div className="w-full max-w-[500px] mx-auto">
                <Carousel className="w-full">
                  <CarouselContent>
                    {galleryImages.map((image, index) => (
                      <CarouselItem key={index} className="md:basis-1/2">
                        <div className="p-1">
                          <div className="overflow-hidden rounded-xl aspect-square">
                            <img
                              src={image.src || `${import.meta.env.BASE_URL}placeholder.svg`}
                              alt={image.alt}
                              className="object-cover w-full h-full hover:scale-105 transition-transform duration-300"
                            />
                          </div>
                        </div>
                      </CarouselItem>
                    ))}
                  </CarouselContent>
                  <CarouselPrevious />
                  <CarouselNext />
                </Carousel>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* Enhanced Footer with Contact Information */}
      <footer id="contact" className="bg-[#1A2A57] text-white">
        <div className="container px-4 md:px-6">
          {/* Main Footer Content */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 py-12">
            {/* About Section */}
            <div className="space-y-4">
              <h3 className="text-lg font-bold font-serif text-[#E8DCCA]">Italian Migrants NT</h3>
              <p className="text-sm text-gray-300 leading-relaxed">
                Preserving and celebrating the rich heritage of Italian migrants to the Northern Territory through
                digital archives, personal stories, and historical documentation.
              </p>
              <div className="flex items-center gap-2 text-sm text-gray-300">
                <Award className="h-4 w-4 text-[#01796F]" />
                <span>Heritage Australia Recognition</span>
              </div>
            </div>

            {/* Contact Information */}
            <div className="space-y-4">
              <h3 className="text-lg font-bold font-serif text-[#E8DCCA]">Contact Us</h3>
              <div className="space-y-3">
                <div className="flex items-start gap-3">
                  <MapPin className="h-4 w-4 text-[#01796F] mt-0.5 flex-shrink-0" />
                  <div className="text-sm text-gray-300">
                    <p>Northern Territory Archives Centre</p>
                    <p>Kelsey Crescent, Millner NT 0810</p>
                    <p>Australia</p>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <Phone className="h-4 w-4 text-[#01796F]" />
                  <span className="text-sm text-gray-300">+61 8 8924 7677</span>
                </div>
                <div className="flex items-center gap-3">
                  <Mail className="h-4 w-4 text-[#01796F]" />
                  <a
                    href="mailto:heritage@italianmigrantsnt.org.au"
                    className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"
                  >
                    heritage@italianmigrantsnt.org.au
                  </a>
                </div>
                <div className="flex items-center gap-3">
                  <Clock className="h-4 w-4 text-[#01796F]" />
                  <div className="text-sm text-gray-300">
                    <p>Mon-Fri: 9:00 AM - 5:00 PM</p>
                    <p>Sat: 10:00 AM - 2:00 PM</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Quick Links */}
            <div className="space-y-4">
              <h3 className="text-lg font-bold font-serif text-[#E8DCCA]">Quick Links</h3>
              <nav className="space-y-2">
                <Link
                  to="/search-results"
                  className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"
                >
                  Search Database
                </Link>
                <Link to="/contribute" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                  Contribute a Story
                </Link>
                <Link to="/gallery" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                  Photo Gallery
                </Link>
                <Link
                  to="/research-help"
                  className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"
                >
                  Research Help
                </Link>
                <Link to="/volunteer" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                  Volunteer
                </Link>
                <Link to="/donations" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                  Support Us
                </Link>
              </nav>
            </div>

            {/* Resources & Social */}
            <div className="space-y-4">
              <h3 className="text-lg font-bold font-serif text-[#E8DCCA]">Resources</h3>
              <nav className="space-y-2">
                <Link to="/faq" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                  FAQ
                </Link>
                <Link
                  to="/research-guides"
                  className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"
                >
                  Research Guides
                </Link>
                <Link
                  to="/historical-timeline"
                  className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"
                >
                  Historical Timeline
                </Link>
                <Link to="/partnerships" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                  Partnerships
                </Link>
              </nav>

              <div className="pt-4">
                <h4 className="text-sm font-semibold text-[#E8DCCA] mb-3">Follow Us</h4>
                <div className="flex gap-3">
                  <a
                    href="https://facebook.com/italianmigrantsnt"
                    className="text-gray-300 hover:text-[#E8DCCA] transition-colors"
                    aria-label="Follow us on Facebook"
                  >
                    <Facebook className="h-5 w-5" />
                  </a>
                  <a
                    href="https://twitter.com/italianmigrantsnt"
                    className="text-gray-300 hover:text-[#E8DCCA] transition-colors"
                    aria-label="Follow us on Twitter"
                  >
                    <Twitter className="h-5 w-5" />
                  </a>
                  <a
                    href="https://instagram.com/italianmigrantsnt"
                    className="text-gray-300 hover:text-[#E8DCCA] transition-colors"
                    aria-label="Follow us on Instagram"
                  >
                    <Instagram className="h-5 w-5" />
                  </a>
                  <a
                    href="https://youtube.com/italianmigrantsnt"
                    className="text-gray-300 hover:text-[#E8DCCA] transition-colors"
                    aria-label="Subscribe to our YouTube channel"
                  >
                    <Youtube className="h-5 w-5" />
                  </a>
                </div>
              </div>
            </div>
          </div>

          {/* Database Stats */}
          <div className="border-t border-gray-600 py-8">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
              <div className="space-y-1">
                <div className="flex items-center justify-center gap-2">
                  <Database className="h-5 w-5 text-[#01796F]" />
                  <span className="text-2xl font-bold text-[#E8DCCA]">{total.toLocaleString()}</span>
                </div>
                <p className="text-sm text-gray-300">Total Records</p>
              </div>
              <div className="space-y-1">
                <div className="flex items-center justify-center gap-2">
                  <Users className="h-5 w-5 text-[#01796F]" />
                  <span className="text-2xl font-bold text-[#E8DCCA]">2,847</span>
                </div>
                <p className="text-sm text-gray-300">Families Documented</p>
              </div>
              <div className="space-y-1">
                <div className="flex items-center justify-center gap-2">
                  <MapPin className="h-5 w-5 text-[#01796F]" />
                  <span className="text-2xl font-bold text-[#E8DCCA]">156</span>
                </div>
                <p className="text-sm text-gray-300">Italian Regions</p>
              </div>
              <div className="space-y-1">
                <div className="flex items-center justify-center gap-2">
                  <Clock className="h-5 w-5 text-[#01796F]" />
                  <span className="text-2xl font-bold text-[#E8DCCA]">100+</span>
                </div>
                <p className="text-sm text-gray-300">Years of History</p>
              </div>
            </div>
          </div>

          {/* Bottom Footer */}
          <div className="border-t border-gray-600 py-6">
            <div className="flex flex-col md:flex-row justify-between items-center gap-4">
              <div className="flex flex-col md:flex-row items-center gap-4 text-sm text-gray-300">
                <p>&copy; {new Date().getFullYear()} Italian Migrants NT. All rights reserved.</p>
                <div className="flex items-center gap-1">
                  <span>Powered by</span>
                  <span className="text-[#E8DCCA] font-semibold">Heritage Digital Archives</span>
                </div>
              </div>
              <nav className="flex gap-6">
                <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                  Terms of Service
                </a>
                <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                  Privacy Policy
                </a>
                <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                  Accessibility
                </a>
                <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                  Admin
                </a>
              </nav>
            </div>
          </div>

        </div>
      </footer>
    </div>
  )
}