'use client';

import React, { useEffect, useState } from 'react';
import Header from '@/components/layout/Header';
import Footer from '@/components/layout/Footer';
import { api } from '@/lib/api';
import { Product } from '@/types';
import { motion } from 'framer-motion';
import { Star, ShieldCheck, Crown } from 'lucide-react';
import ProductCard from '@/components/product/ProductCard';
import ProductCardSkeleton from '@/components/product/ProductCardSkeleton';

const PremiumShopPage = () => {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPremiumProducts = async () => {
      try {
        const response = await api.getProducts({ is_premium: true, limit: 12 });
        setProducts(response.data);
      } catch (err) {
        console.error('Error fetching premium products:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchPremiumProducts();
  }, []);

  return (
    <div className="min-h-screen bg-[#fcfcfc] text-zinc-900">
      <Header />
      
      {/* Hero Section */}
      <section className="relative min-h-[360px] md:h-[60vh] flex items-center justify-center overflow-hidden bg-white">
        <div className="absolute inset-0 bg-gradient-to-br from-emerald-50 via-white to-transparent" />
        
        <div className="relative z-10 text-center max-w-4xl px-4">
          <div className="mb-6">
            <div className="text-[10px] font-black uppercase tracking-[0.25em] text-zinc-400">Home / Premium Shop</div>
          </div>
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            className="inline-flex items-center gap-2 px-6 py-2 bg-emerald-50 border border-emerald-100 rounded-full text-emerald-700 text-[11px] font-black uppercase tracking-[0.2em] mb-6"
          >
            <Crown className="w-3.5 h-3.5" />
            The Gold Standard
          </motion.div>
          
          <motion.h1 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="text-5xl md:text-7xl font-black mb-6 tracking-tighter text-zinc-900"
          >
            Premium <span className="text-[#2b9d10]">Organic</span>
          </motion.h1>
          
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="text-lg md:text-xl text-zinc-500 font-medium max-w-2xl mx-auto leading-relaxed mb-10"
          >
            A curated selection of the world's finest organic products. 
            Sourced with integrity, delivered with excellence.
          </motion.p>

          <div className="flex items-center justify-center gap-4">
            <div className="flex gap-0.5 text-amber-400">
              {[1,2,3,4,5].map((i) => <Star key={i} className="w-4 h-4 fill-current" />)}
            </div>
            <p className="text-xs font-bold text-zinc-400 uppercase tracking-widest">2k+ Happy Members</p>
          </div>
        </div>

        {/* Decorative Elements */}
        <div className="absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-[#fcfcfc] to-transparent" />
      </section>

      {/* Benefits - Floating Cards */}
      <section className="container mx-auto px-4 -mt-16 md:-mt-20 relative z-20">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {[
            { 
              icon: ShieldCheck, 
              title: 'Certified Purity', 
              desc: 'Every item undergoes rigorous 12-point quality testing.',
              color: 'emerald'
            },
            { 
              icon: Crown, 
              title: 'Elite Sourcing', 
              desc: 'Direct partnerships with award-winning organic estates.',
              color: 'amber'
            },
            { 
              icon: Star, 
              title: 'Concierge Service', 
              desc: 'Dedicated support for all your premium requirements.',
              color: 'blue'
            },
          ].map((item, idx) => (
            <motion.div
              key={idx}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4 + (idx * 0.1) }}
              className="bg-white p-8 md:p-10 rounded-3xl border border-zinc-100 shadow-sm hover:shadow-md transition-all duration-300 group"
            >
              <div className="w-14 h-14 bg-emerald-50 rounded-2xl flex items-center justify-center text-[#2b9d10] mb-6 group-hover:scale-105 transition-transform duration-300">
                <item.icon className="w-7 h-7" />
              </div>
              <h3 className="text-lg md:text-xl font-black mb-2 text-zinc-900">{item.title}</h3>
              <p className="text-zinc-500 font-medium leading-relaxed">{item.desc}</p>
            </motion.div>
          ))}
        </div>
      </section>

      {/* Products Grid */}
      <main className="container mx-auto px-4 py-20 md:py-28">
        <div className="flex flex-col md:flex-row md:items-center justify-between mb-12 md:mb-16 gap-6 md:gap-8">
          <div>
            <div className="flex items-center gap-3 mb-4">
              <span className="w-12 h-[2px] bg-[#2b9d10]" />
              <span className="text-xs font-black uppercase tracking-[0.3em] text-[#2b9d10]">Curated Collection</span>
            </div>
            <h2 className="text-3xl md:text-5xl font-black text-zinc-900">Featured Excellence</h2>
          </div>
          <div className="flex items-center gap-4">
            <span className="text-sm font-bold text-zinc-400">Showing {products.length} exclusive products</span>
          </div>
        </div>

        {loading ? (
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
            {Array.from({ length: 8 }).map((_, i) => (
              <ProductCardSkeleton key={i} />
            ))}
          </div>
        ) : (
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
            {products.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        )}
      </main>

      {/* Luxury CTA Section */}
      <section className="container mx-auto px-4 pb-24 md:pb-32">
        <div className="relative bg-zinc-900 rounded-3xl md:rounded-[3rem] p-10 md:p-20 overflow-hidden text-center">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-emerald-800/30 via-transparent to-transparent opacity-60" />
          <div className="relative z-10 max-w-2xl mx-auto">
            <Crown className="w-12 h-12 text-[#2b9d10] mx-auto mb-6 md:mb-8" />
            <h2 className="text-3xl md:text-5xl font-black text-white mb-6 md:mb-8">Join the Elite Circle</h2>
            <p className="text-zinc-400 text-lg font-medium mb-12">
              Unlock exclusive access to seasonal harvests and priority delivery. 
              Elevate your lifestyle with our premium membership.
            </p>
            <button className="px-10 py-5 bg-[#2b9d10] text-white rounded-full font-black text-[11px] uppercase tracking-[0.2em] hover:bg-[#23820d] transition-all hover:scale-105 shadow-xl shadow-emerald-500/20">
              Apply for Membership
            </button>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
};

export default PremiumShopPage;