import { useState } from "react";
import { toast } from "sonner";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { Separator } from "@/components/ui/separator";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
  Star, Heart, Minus, Plus, ChevronRight, Truck, RotateCcw, ShieldCheck, ShoppingBag, Flame, ZoomIn
} from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { useCart } from "@/lib/cart-context";

const thumbnails = [
  "from-rose-100 to-stone-200",
  "from-stone-100 to-rose-100",
  "from-amber-100 to-stone-100",
  "from-stone-200 to-amber-100",
];

const colors = [
  { name: "Black", class: "bg-stone-900" },
  { name: "Cognac", class: "bg-amber-700" },
  { name: "Rose", class: "bg-rose-400" },
  { name: "Stone", class: "bg-stone-400" },
];

const sizes = ["XS", "S", "M", "L", "XL", "XXL"];

const reviews = [
  { name: "Sarah M.", date: "2 weeks ago", rating: 5, text: "Absolutely stunning quality. The leather is soft yet durable and the fit is perfect. Worth every penny!", avatar: "SM" },
  { name: "James K.", date: "1 month ago", rating: 4, text: "Great jacket overall. Runs slightly large so consider sizing down. The color is rich and beautiful.", avatar: "JK" },
  { name: "Emily R.", date: "1 month ago", rating: 5, text: "This is my third purchase from StyleHaus and they never disappoint. The craftsmanship is exceptional.", avatar: "ER" },
];

const relatedProducts = [
  { id: 10, name: "Satin Blouse", price: 89, gradient: "from-rose-50 to-rose-100", rating: 4 },
  { id: 11, name: "Tailored Wool Coat", price: 385, gradient: "from-stone-200 to-stone-400", rating: 5 },
  { id: 7, name: "Organic Cotton Tee", price: 45, gradient: "from-rose-100 to-rose-200", rating: 4 },
  { id: 8, name: "Velvet Midi Skirt", price: 115, gradient: "from-stone-300 to-stone-100", rating: 5 },
];

export default function ProductDetailPage() {
  const [selectedImage, setSelectedImage] = useState(0);
  const [selectedColor, setSelectedColor] = useState("Black");
  const [selectedSize, setSelectedSize] = useState("M");
  const [quantity, setQuantity] = useState(1);
  const [wishlisted, setWishlisted] = useState(false);
  const { addItem } = useCart();

  const renderStars = (count: number) =>
    Array.from({ length: 5 }, (_, i) => (
      <Star key={i} className={\`h-4 w-4 \${i < count ? "fill-amber-400 text-amber-400" : "text-stone-300"}\`} />
    ));

  const handleAddToCart = () => {
    addItem({
      id: "leather-jacket-1",
      name: "Classic Leather Jacket",
      price: 189,
      quantity,
      size: selectedSize,
      color: selectedColor,
      image: "",
    });
    toast.success("Added to cart!");
  };

  return (
    <div className="min-h-screen bg-white text-stone-900 antialiased">
      <Header />

      <div className="mx-auto max-w-7xl px-6 pt-28 pb-20">
        {/* Breadcrumb */}
        <nav className="flex items-center gap-2 text-sm text-stone-500 mb-8">
          <Link to="/" className="hover:text-stone-900">Home</Link>
          <ChevronRight className="h-3 w-3" />
          <Link to="/products" className="hover:text-stone-900">Products</Link>
          <ChevronRight className="h-3 w-3" />
          <span className="text-stone-900">Classic Leather Jacket</span>
        </nav>

        {/* Product Layout */}
        <div className="grid lg:grid-cols-2 gap-12">
          {/* Left — Images */}
          <div className="space-y-4">
            <Dialog>
              <DialogTrigger asChild>
                <div className={\`aspect-square rounded-2xl bg-gradient-to-br \${thumbnails[selectedImage]} flex items-center justify-center text-stone-400 relative overflow-hidden animate-scale-in cursor-zoom-in group/zoom\`}>
                  <div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px)", backgroundSize: "16px 16px" }} />
                  <div className="absolute top-1/4 -left-12 h-32 w-32 rounded-full bg-white/30 blur-2xl" />
                  <div className="absolute bottom-1/4 -right-12 h-28 w-28 rounded-full bg-white/20 blur-2xl" />
                  <span className="relative">Product Image</span>
                  <div className="absolute bottom-3 right-3 h-8 w-8 rounded-full bg-white/80 backdrop-blur flex items-center justify-center opacity-0 group-hover/zoom:opacity-100 transition-opacity shadow-sm">
                    <ZoomIn className="h-4 w-4 text-stone-700" />
                  </div>
                </div>
              </DialogTrigger>
              <DialogContent className="max-w-4xl p-0 border-0 overflow-hidden">
                <div className={\`w-full aspect-square bg-gradient-to-br \${thumbnails[selectedImage]} flex items-center justify-center text-stone-400 relative overflow-hidden\`}>
                  <div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px)", backgroundSize: "16px 16px" }} />
                  <div className="absolute top-1/4 -left-12 h-32 w-32 rounded-full bg-white/30 blur-2xl" />
                  <div className="absolute bottom-1/4 -right-12 h-28 w-28 rounded-full bg-white/20 blur-2xl" />
                  <span className="relative text-lg">Product Image</span>
                </div>
              </DialogContent>
            </Dialog>
            <div className="grid grid-cols-4 gap-3">
              {thumbnails.map((grad, i) => (
                <button
                  key={i}
                  onClick={() => setSelectedImage(i)}
                  className={\`aspect-square rounded-lg bg-gradient-to-br \${grad} \${selectedImage === i ? "ring-2 ring-stone-900 ring-offset-2" : "opacity-60 hover:opacity-100"} transition-all\`}
                />
              ))}
            </div>
          </div>

          {/* Right — Details */}
          <div className="space-y-6">
            <div>
              <Badge className="bg-rose-100 text-rose-700 border-0 mb-3 animate-fade-in">Best Seller</Badge>
              <h1 className="text-3xl font-bold tracking-tight animate-fade-up">Classic Leather Jacket</h1>
              <div className="flex items-center gap-3 mt-3">
                <div className="flex items-center gap-0.5">{renderStars(5)}</div>
                <span className="text-sm text-stone-500">(128 reviews)</span>
              </div>
            </div>

            <div className="flex items-baseline gap-3">
              <span className="text-3xl font-bold">$189</span>
              <span className="text-xl text-stone-400 line-through">$249</span>
              <Badge className="bg-rose-500 text-white border-0">-24%</Badge>
            </div>

            <p className="text-stone-600 leading-relaxed">Timeless silhouette crafted from premium full-grain leather. Features a tailored fit with minimal hardware for a clean, modern aesthetic.</p>

            <Separator />

            {/* Color Selector */}
            <div>
              <h3 className="text-sm font-semibold mb-3">Color: <span className="font-normal text-stone-500">{selectedColor}</span></h3>
              <div className="flex gap-3">
                {colors.map((c) => (
                  <button
                    key={c.name}
                    onClick={() => setSelectedColor(c.name)}
                    className={\`h-9 w-9 rounded-full \${c.class} \${selectedColor === c.name ? "ring-2 ring-offset-2 ring-stone-900" : ""} transition-all\`}
                    title={c.name}
                  />
                ))}
              </div>
            </div>

            {/* Size Selector */}
            <div>
              <div className="flex items-center justify-between mb-3">
                <h3 className="text-sm font-semibold">Size</h3>
                <button className="text-xs text-rose-600 hover:underline">Size Guide</button>
              </div>
              <div className="flex flex-wrap gap-2">
                {sizes.map((s) => (
                  <Button
                    key={s}
                    variant={selectedSize === s ? "default" : "outline"}
                    size="sm"
                    className={\`min-w-[3rem] \${selectedSize === s ? "bg-stone-900" : ""}\`}
                    onClick={() => setSelectedSize(s)}
                  >
                    {s}
                  </Button>
                ))}
              </div>
            </div>

            {/* Scarcity Signal */}
            <div className="flex items-center gap-2 text-sm text-amber-600 mb-3"><Flame className="h-4 w-4" /> Selling Fast — Only 5 left in stock</div>

            {/* Quantity + Add to Cart */}
            <div className="flex items-center gap-4">
              <div className="flex items-center border rounded-full">
                <Button variant="ghost" size="icon" className="h-10 w-10 rounded-full active:scale-90 transition-transform" onClick={() => setQuantity(Math.max(1, quantity - 1))}>
                  <Minus className="h-4 w-4" />
                </Button>
                <span className="w-10 text-center font-medium">{quantity}</span>
                <Button variant="ghost" size="icon" className="h-10 w-10 rounded-full active:scale-90 transition-transform" onClick={() => setQuantity(quantity + 1)}>
                  <Plus className="h-4 w-4" />
                </Button>
              </div>
              <Button size="lg" className="flex-1 bg-stone-900 hover:bg-stone-800 rounded-full active:scale-[0.98] transition-all" onClick={handleAddToCart}>
                <ShoppingBag className="mr-2 h-4 w-4" /> Add to Cart
              </Button>
              <Button variant="outline" size="icon" className={\`h-11 w-11 rounded-full hover:scale-125 active:scale-90 transition-transform \${wishlisted ? "border-rose-300 bg-rose-50" : ""}\`} onClick={() => { if (!wishlisted) toast.success("Added to wishlist!"); setWishlisted(!wishlisted); }}>
                <Heart className={\`h-4 w-4 \${wishlisted ? "fill-rose-500 text-rose-500" : ""}\`} />
              </Button>
            </div>

            {/* Trust */}
            <div className="grid grid-cols-3 gap-4 pt-4 animate-fade-in">
              {[
                { icon: Truck, text: "Free Shipping" },
                { icon: RotateCcw, text: "Easy Returns" },
                { icon: ShieldCheck, text: "Secure Payment" },
              ].map((item) => (
                <div key={item.text} className="flex items-center gap-2 text-xs text-stone-500">
                  <item.icon className="h-4 w-4 text-rose-500 shrink-0" />
                  {item.text}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Tabs */}
        <Tabs defaultValue="description" className="mt-16">
          <TabsList className="bg-stone-100 rounded-full p-1">
            <TabsTrigger value="description" className="rounded-full text-sm">Description</TabsTrigger>
            <TabsTrigger value="reviews" className="rounded-full text-sm">Reviews (128)</TabsTrigger>
            <TabsTrigger value="shipping" className="rounded-full text-sm">Shipping Info</TabsTrigger>
          </TabsList>
          <TabsContent value="description" className="mt-6 prose prose-stone max-w-none">
            <p className="text-stone-600 leading-relaxed">Our Classic Leather Jacket is the cornerstone of any wardrobe. Made from hand-selected full-grain leather that develops a beautiful patina over time, this jacket is designed to be your companion for years to come. The tailored fit flatters every body type while allowing comfortable layering.</p>
            <ul className="mt-4 space-y-2 text-sm text-stone-600">
              <li>Premium full-grain leather construction</li>
              <li>YKK zippers with custom pulls</li>
              <li>Interior and exterior pockets</li>
              <li>Fully lined with satin finish</li>
              <li>Available in 4 colors</li>
            </ul>
          </TabsContent>
          <TabsContent value="reviews" className="mt-6 space-y-6">
            <div className="flex items-center gap-4 mb-8">
              <div className="text-4xl font-bold">4.8</div>
              <div>
                <div className="flex gap-0.5">{[...Array(5)].map((_, i) => <Star key={i} className="h-5 w-5 fill-amber-400 text-amber-400" />)}</div>
                <p className="text-sm text-muted-foreground mt-1">Based on 128 reviews</p>
              </div>
            </div>
            {reviews.map((review, i) => (
              <div key={i} className="flex gap-4 pb-6 border-b border-stone-100 last:border-0">
                <div className="h-10 w-10 rounded-full bg-gradient-to-br from-rose-400 to-amber-300 flex items-center justify-center text-white text-sm font-bold shrink-0">{review.avatar}</div>
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <h4 className="font-medium text-sm">{review.name}</h4>
                    <Badge className="bg-green-50 text-green-700 border-0 text-[10px] px-1.5 py-0">Verified Purchase</Badge>
                    <span className="text-xs text-stone-400 ml-auto">{review.date}</span>
                  </div>
                  <div className="flex items-center gap-0.5 mt-1">{renderStars(review.rating)}</div>
                  <p className="mt-2 text-sm text-stone-600">{review.text}</p>
                </div>
              </div>
            ))}
            <Button variant="outline" className="rounded-full mt-4">Write a Review</Button>
          </TabsContent>
          <TabsContent value="shipping" className="mt-6">
            <div className="space-y-4 text-sm text-stone-600">
              <div className="flex items-start gap-3">
                <Truck className="h-5 w-5 text-rose-500 mt-0.5" />
                <div>
                  <h4 className="font-medium text-stone-900">Free Standard Shipping</h4>
                  <p>On all orders over $100. Delivery in 5-7 business days.</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <RotateCcw className="h-5 w-5 text-rose-500 mt-0.5" />
                <div>
                  <h4 className="font-medium text-stone-900">30-Day Returns</h4>
                  <p>Not satisfied? Return within 30 days for a full refund.</p>
                </div>
              </div>
            </div>
          </TabsContent>
        </Tabs>

        {/* You Might Also Like */}
        <section className="py-24">
          <h2 className="text-2xl font-bold tracking-tight mb-8 animate-fade-up">You Might Also Like</h2>
          <div className="flex gap-6 overflow-x-auto pb-4 snap-x">
            {relatedProducts.map((product) => (
              <Link to="/product" key={product.id} className="group snap-start min-w-[250px]">
                <Card className="overflow-hidden border-0 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                  <div className={\`aspect-[3/4] bg-gradient-to-br \${product.gradient} flex items-center justify-center text-stone-400 text-xs relative overflow-hidden animate-scale-in\`}>
                    <div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px)", backgroundSize: "16px 16px" }} />
                    <div className="absolute top-1/4 -left-8 h-24 w-24 rounded-full bg-white/30 blur-2xl" />
                    <div className="absolute bottom-1/4 -right-8 h-20 w-20 rounded-full bg-white/20 blur-2xl" />
                    <span className="relative">Image</span>
                  </div>
                  <CardContent className="p-4">
                    <h3 className="font-medium text-sm group-hover:text-rose-600 transition-colors">{product.name}</h3>
                    <div className="flex items-center gap-0.5 mt-1">{renderStars(product.rating)}</div>
                    <p className="mt-1.5 font-semibold">\${product.price}</p>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        </section>
      </div>

      <Footer />
    </div>
  );
}