import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import Navbar from '../components/Navbar'
import Footer from '../components/Footer'
import ProductCard from '../components/ProductCard'
import { API_BASE, getCategoryImage, type Category, type Product, type Hero } from '../types'

export default function HomePage() {
  const [categories, setCategories] = useState<Category[]>([])
  const [featuredProducts, setFeaturedProducts] = useState<Product[]>([])
  const [hero, setHero] = useState<Hero | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [catRes, prodRes, heroRes] = await Promise.all([
          fetch(`${API_BASE}/categories`),
          fetch(`${API_BASE}/products?categoryId=1`),
          fetch(`${API_BASE}/hero`),
        ])
        const cats: Category[] = await catRes.json()
        const prodsJson = await prodRes.json()
        const heroText = await heroRes.text()
        const heroData: Hero | null = heroText ? JSON.parse(heroText) : null
        
        const prods: Product[] = prodsJson.data || []
        setCategories(cats)
        setFeaturedProducts(prods.slice(0, 3))
        setHero(heroData)
      } catch (err) {
        console.error('API error:', err)
      } finally {
        setLoading(false)
      }
    }
    fetchData()
  }, [])

  return (
    <div className="min-h-screen bg-pop-bg">
      <Navbar categories={categories} />

      {/* Hero Section */}
      <section className="relative w-full min-h-[90vh] md:min-h-0 md:aspect-[21/9] flex items-center justify-center overflow-hidden bg-night-900">
        <div className="absolute inset-0 z-0">
          <img
            src={hero?.imageUrl || "/images/hero.png"}
            className="w-full h-full object-cover scale-[1.02]"
            alt="Hero Background"
            onError={(e) => {
              (e.target as HTMLImageElement).style.display = 'none'
            }}
          />
          {/* Dark gradient overlay for premium vibe */}
          <div className="absolute inset-0 bg-night-900/40"></div>
          <div className="absolute inset-0 bg-gradient-to-t from-night-900/90 via-night-900/10 to-night-900/30"></div>
        </div>

        <div className="relative z-10 text-center space-y-6 px-8 animate-fade-in max-w-4xl w-full mx-auto mt-16 md:mt-0">
          <p className="text-spa-sage font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md">
            {hero?.tagline || "Vibrant Elegance Collection"}
          </p>
          <h1 className="text-5xl md:text-7xl lg:text-8xl font-light text-white leading-tight tracking-wide drop-shadow-md font-serif">
            {hero ? (
              hero.title.split('[').map((part, i) => {
                if (part.includes(']')) {
                  const [accent, rest] = part.split(']')
                  return (
                    <span key={i}>
                      <span className="text-spa-gold font-medium italic">
                        {accent}
                      </span>
                      {rest}
                    </span>
                  )
                }
                return <span key={i}>{part}</span>
              })
            ) : (
              <>
                Inhale <span className="text-spa-gold font-medium italic">Serenity</span>
              </>
            )}
          </h1>
          <p className="text-spa-light/90 max-w-2xl mx-auto text-lg md:text-xl font-light pt-4 pb-8 drop-shadow-md">
            {hero?.description || "Crafting premium sensory experiences that transform your space into a sanctuary of peace."}
          </p>
          <div className="flex flex-col sm:flex-row gap-6 items-center justify-center">
            {/* White solid primary button */}
            <Link
              to={hero?.buttonLink || "/shop"}
              className="px-8 py-4 bg-white text-spa-forest rounded-full font-bold uppercase tracking-widest text-sm hover:bg-spa-sage hover:shadow-xl transition-all duration-300"
            >
              {hero?.buttonText || "Explore Collection"}
            </Link>
            {/* Outline secondary link */}
            <a
              href="#categories"
              className="px-8 py-4 text-white font-medium uppercase tracking-widest text-sm hover:text-spa-gold flex items-center gap-2 group transition-colors"
            >
              Learn More 
              <span className="group-hover:translate-x-1 transition-transform">&rarr;</span>
            </a>
          </div>
        </div>
      </section>

      {/* Categories Showcase */}
      <section id="categories" className="py-24 px-6 relative overflow-hidden bg-white">
        <div className="max-w-7xl mx-auto space-y-16 relative z-10">
          <div className="text-center space-y-4">
            <h2 className="text-4xl md:text-5xl font-bold tracking-tight text-pop-black">
              Our Collections
            </h2>
            <p className="text-gray-500 max-w-2xl mx-auto">Discover the perfect scent for every moment</p>
          </div>

          {loading ? (
            <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
              {Array.from({ length: 5 }).map((_, i) => (
                <div key={i} className="h-80 brutal-box bg-gray-50 animate-pulse" />
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
              {categories.map((cat) => (
                <Link
                  key={cat.id}
                  to={`/category/${cat.id}`}
                  className="relative h-80 rounded-2xl group overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent z-10 opacity-80 group-hover:opacity-100 transition-opacity" />
                  <img
                    src={getCategoryImage(cat.name)}
                    className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                    alt={cat.name}
                    onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
                  />
                  <div className="absolute bottom-6 left-6 right-6 z-20 text-white">
                    <span className="font-semibold text-xl block mb-1">
                      {cat.name}
                    </span>
                    {cat._count && (
                      <span className="text-sm font-medium text-white/80">
                        {cat._count.products} Products
                      </span>
                    )}
                  </div>
                </Link>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* Featured Products */}
      <section className="bg-pop-bg py-24 px-6 relative">
        <div className="max-w-7xl mx-auto space-y-12 relative z-10">
          <div className="flex flex-col md:flex-row justify-between items-end gap-6 border-b border-gray-200 pb-6">
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-pop-black">
                Featured Picks
              </h2>
            </div>
            <Link
              to="/shop"
              className="text-pop-pink font-medium hover:text-pop-red transition-colors flex items-center gap-2"
            >
              View All Collection &rarr;
            </Link>
          </div>

          {loading ? (
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {Array.from({ length: 3 }).map((_, i) => (
                <div key={i} className="brutal-box bg-white animate-pulse h-96" />
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {featuredProducts.map((p) => (
                <div key={p.id}>
                  <ProductCard product={p} />
                </div>
              ))}
            </div>
          )}
        </div>
      </section>

      <Footer categories={categories} />
    </div>
  )
}