"use client";

import Link from "next/link";
import Image from "next/image";
import { useParams } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Star, ShoppingBag, Check, Truck, Shield, RotateCcw, Zap, Heart, MessageCircle } from "lucide-react";
import { toast } from "sonner";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import ProductCard from "@/components/ProductCard";
import { useStore } from "@/context/StoreContext";
import { useCart } from "@/context/CartContext";
import {
  api,
  mediaOrPlaceholder,
  type AdminProductDetailsApi,
  type AdminProductVariantApi,
} from "@/lib/api";
import type { Product, ProductColor } from "@/data/products";
import { company } from "@/data/company";

const WHATSAPP_NUMBER = "92331444708";

function buildWhatsAppUrl(product: AdminProductDetailsApi, variant?: AdminProductVariantApi) {
  let message = `Hi, I'd like to order *${product.name}*`;
  if (variant?.attributes?.length) {
    const attrs = variant.attributes.map((a) => `${a.attribute_name}: ${a.value}`).join(", ");
    message += ` (${attrs})`;
  }
  const price = variant ? Number(variant.price) : Number(product.sale_price || product.selling_price);
  message += ` — Rs. ${price.toLocaleString()}`;
  message += `\n\nPlease confirm availability. Thank you!`;
  return `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(message)}`;
}

function detailToProduct(p: AdminProductDetailsApi): Product {
  const mainImg = p.images?.find((img) => Boolean(img.is_main))?.image || p.images?.[0]?.image;
  const colors: ProductColor[] =
    p.images && p.images.length > 0
      ? p.images.map((img, i) => ({
          name: Boolean(img.is_main) ? "Main" : `View ${i + 1}`,
          hex: "#9ca3af",
          image: mediaOrPlaceholder(img.image),
        }))
      : [{ name: "Default", hex: "#9ca3af", image: mediaOrPlaceholder(mainImg) }];

  const selling = Number(p.selling_price || 0);
  const sale = p.sale_price ? Number(p.sale_price) : undefined;

  return {
    id: String(p.id),
    name: p.name,
    brand: p.brand_name || "Unknown Brand",
    category: p.category_name || "Uncategorized",
    price: sale || selling,
    originalPrice: sale ? selling : undefined,
    description: p.description || "",
    longDescription: p.description || "",
    features: [],
    specifications: {},
    colors,
    rating: 4.5,
    reviews: 0,
    badge: p.featured ? "Featured" : undefined,
  };
}

export default function ProductDetailPage() {
  const params = useParams<{ id: string }>();
  const { catalogProducts } = useStore();
  const { addToCart } = useCart();

  const [details, setDetails] = useState<AdminProductDetailsApi | null | undefined>(undefined);
  const [selectedVariantIdx, setSelectedVariantIdx] = useState<number>(-1);
  const [selectedImageIdx, setSelectedImageIdx] = useState(0);
  const [activeTab, setActiveTab] = useState<"description" | "specs" | "variants">("description");
  const [quantity, setQuantity] = useState(1);
  const [liked, setLiked] = useState(false);

  useEffect(() => {
    let cancelled = false;
    void api.catalog
      .productById(params.id)
      .then((data) => {
        if (!cancelled) setDetails(data);
      })
      .catch(() => {
        if (!cancelled) setDetails(null);
      });
    return () => { cancelled = true; };
  }, [params.id]);

  const product = useMemo(() => (details ? detailToProduct(details) : null), [details]);
  const cachedProduct = catalogProducts.find((p) => p.id === params.id);

  const variants = details?.variants || [];
  const attributes = details?.attributes || [];
  const selectedVariant = selectedVariantIdx >= 0 ? variants[selectedVariantIdx] : undefined;

  const activePrice = selectedVariant
    ? Number(selectedVariant.price)
    : product
      ? product.price
      : 0;

  const variantImage = selectedVariant?.image ? mediaOrPlaceholder(selectedVariant.image) : null;

  const displayImages = useMemo(() => {
    const imgs = (details?.images || []).map((img) => mediaOrPlaceholder(img.image));
    if (variantImage && !imgs.includes(variantImage)) return [variantImage, ...imgs];
    return imgs;
  }, [details?.images, variantImage]);

  const selectVariant = (idx: number) => {
    const next = selectedVariantIdx === idx ? -1 : idx;
    setSelectedVariantIdx(next);
    if (next < 0) return;
    const v = variants[next];
    const vImg = v?.image ? mediaOrPlaceholder(v.image) : null;
    if (!vImg) return;
    const imgs = (details?.images || []).map((img) => mediaOrPlaceholder(img.image));
    const display = vImg && !imgs.includes(vImg) ? [vImg, ...imgs] : imgs;
    const imageIdx = display.indexOf(vImg);
    if (imageIdx >= 0) setSelectedImageIdx(imageIdx);
  };

  if (details === undefined) {
    return (
      <div className="min-h-screen bg-background">
        <Navbar />
        <div className="container mx-auto px-4 py-20 text-center">
          <div className="mx-auto h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
          <p className="mt-4 text-sm text-muted-foreground">Loading product details...</p>
        </div>
      </div>
    );
  }

  if (!product || !details) {
    const fallback = cachedProduct;
    if (!fallback) {
      return (
        <div className="min-h-screen bg-background">
          <Navbar />
          <div className="container mx-auto px-4 py-20 text-center">
            <h1 className="text-2xl font-bold">Product not found</h1>
            <Link href="/products" className="mt-4 inline-block text-primary hover:underline">← Back to products</Link>
          </div>
          <Footer />
        </div>
      );
    }
  }

  const discount = product!.originalPrice
    ? Math.round(((product!.originalPrice - product!.price) / product!.originalPrice) * 100)
    : 0;

  const related = catalogProducts
    .filter((p) => p.category === product!.category && p.id !== product!.id)
    .slice(0, 4);

  const handleAddToCart = () => {
    const colorName = selectedVariant?.attributes?.map((a) => a.value).join(" / ") || product!.colors[0].name;
    for (let i = 0; i < quantity; i++) {
      addToCart(product!, colorName);
    }
    toast.success(`${product!.name} added to cart`, {
      description: `${quantity}× ${colorName}`,
    });
  };

  const specEntries: [string, string][] = [
    ["Category", product!.category],
    ["Brand", product!.brand],
    ...(details!.description ? [["Description", details!.description] as [string, string]] : []),
    ...(details!.weight ? [["Weight", `${details!.weight} kg`] as [string, string]] : []),
    ...(details!.stock != null ? [["Availability", Number(details!.stock) > 0 ? `In Stock (${details!.stock} available)` : "Out of Stock"] as [string, string]] : []),
  ];

  const attrEntries = attributes.map((attr) => [
    attr.name,
    attr.values.map((v) => v.value).join(", "),
  ] as [string, string]);

  const allSpecs = [...specEntries, ...attrEntries];

  return (
    <div className="min-h-screen bg-background">
      <Navbar />

      <div className="container mx-auto px-4 py-8 lg:px-8">
        <nav className="mb-8 flex items-center gap-2 text-xs text-muted-foreground">
          <Link href="/" className="transition-colors hover:text-foreground">Home</Link>
          <span className="text-border">/</span>
          <Link href="/products" className="transition-colors hover:text-foreground">Products</Link>
          <span className="text-border">/</span>
          <Link href={`/products?category=${encodeURIComponent(product!.category)}`} className="transition-colors hover:text-foreground">{product!.category}</Link>
          <span className="text-border">/</span>
          <span className="font-medium text-foreground">{product!.name}</span>
        </nav>

        <div className="grid gap-10 lg:grid-cols-2 lg:gap-16">
          {/* Images */}
          <div className="space-y-4">
            <AnimatePresence mode="wait">
              <motion.div
                key={selectedImageIdx}
                initial={{ opacity: 0, scale: 0.97 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.97 }}
                transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
                className="relative overflow-hidden rounded-3xl border border-border/40 bg-card shadow-card"
              >
                {product!.badge && (
                  <span className="absolute left-4 top-4 z-10 rounded-lg bg-primary px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider text-primary-foreground shadow-lg">
                    {product!.badge}
                  </span>
                )}
                {discount > 0 && (
                  <span className="absolute right-4 top-4 z-10 rounded-lg bg-destructive px-3 py-1.5 text-[10px] font-bold text-primary-foreground">
                    -{discount}% OFF
                  </span>
                )}
                <button
                  onClick={() => setLiked(!liked)}
                  className="absolute bottom-4 right-4 z-10 flex h-10 w-10 items-center justify-center rounded-xl border border-border/40 bg-card/80 backdrop-blur-sm transition-colors hover:bg-card"
                >
                  <Heart className={`h-4 w-4 transition-colors ${liked ? "fill-destructive text-destructive" : "text-muted-foreground"}`} />
                </button>
                <div className="relative aspect-square w-full overflow-hidden rounded-2xl">
                  {displayImages[selectedImageIdx] ? (
                    <Image
                      src={displayImages[selectedImageIdx]}
                      alt={product!.name}
                      fill
                      className="object-cover"
                      sizes="(max-width: 1024px) 100vw, 50vw"
                      priority
                    />
                  ) : (
                    <div className="flex h-full w-full items-center justify-center bg-muted text-sm text-muted-foreground">
                      No image
                    </div>
                  )}
                </div>
              </motion.div>
            </AnimatePresence>

            {displayImages.length > 1 && (
              <div className="flex gap-3 overflow-x-auto pb-1">
                {displayImages.map((src, i) => (
                  <button
                    key={`${src}-${i}`}
                    onClick={() => setSelectedImageIdx(i)}
                    className={`relative h-20 w-20 shrink-0 overflow-hidden rounded-xl border-2 transition-all duration-200 ${
                      selectedImageIdx === i
                        ? "border-primary ring-2 ring-primary/20 shadow-md"
                        : "border-border/40 hover:border-border"
                    }`}
                  >
                    <Image src={src} alt="" fill className="object-cover" sizes="80px" />
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* Details */}
          <motion.div
            initial={{ opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}
            className="flex flex-col"
          >
            <p className="text-xs font-bold uppercase tracking-[0.2em] text-primary">{product!.brand}</p>
            <h1 className="mt-3 text-3xl font-bold leading-tight lg:text-4xl">{product!.name}</h1>

            <div className="mt-4 flex items-center gap-3">
              <div className="flex items-center gap-0.5">
                {Array.from({ length: 5 }).map((_, i) => (
                  <Star key={i} className={`h-4 w-4 ${i < Math.floor(product!.rating) ? "fill-primary text-primary" : "text-border"}`} />
                ))}
              </div>
              <span className="text-sm font-bold">{product!.rating}</span>
              {product!.reviews > 0 && (
                <>
                  <span className="h-1 w-1 rounded-full bg-border" />
                  <span className="text-sm text-muted-foreground">{product!.reviews.toLocaleString()} reviews</span>
                </>
              )}
            </div>

            <div className="mt-6 flex items-baseline gap-3">
              <span className="text-4xl font-extrabold">Rs. {activePrice.toLocaleString()}</span>
              {product!.originalPrice && !selectedVariant && (
                <>
                  <span className="text-lg text-muted-foreground line-through">Rs. {product!.originalPrice.toLocaleString()}</span>
                  <span className="rounded-lg bg-destructive/10 px-2.5 py-1 text-xs font-bold text-destructive">
                    Save Rs. {(product!.originalPrice - product!.price).toLocaleString()}
                  </span>
                </>
              )}
            </div>

            {details!.stock != null && (
              <p className={`mt-3 text-sm font-medium ${Number(details!.stock) > 0 ? "text-success" : "text-destructive"}`}>
                {Number(details!.stock) > 0 ? `✓ In Stock (${details!.stock} available)` : "✕ Out of Stock"}
              </p>
            )}

            <p className="mt-4 text-sm leading-relaxed text-muted-foreground">{product!.description}</p>

            {/* Attributes */}
            {attributes.length > 0 && (
              <div className="mt-6 space-y-4">
                {attributes.map((attr) => (
                  <div key={attr.name}>
                    <p className="mb-2 text-sm font-bold">{attr.name}</p>
                    <div className="flex flex-wrap gap-2">
                      {attr.values.map((val) => {
                        const matchingVariant = variants.find((v) =>
                          v.attributes?.some((a) => a.attribute_name === attr.name && a.value === val.value),
                        );
                        const isSelected = selectedVariant?.attributes?.some(
                          (a) => a.attribute_name === attr.name && a.value === val.value,
                        );
                        return (
                          <button
                            key={val.value}
                            onClick={() => {
                              if (matchingVariant) {
                                selectVariant(variants.indexOf(matchingVariant));
                              }
                            }}
                            className={`rounded-lg border px-4 py-2 text-sm font-medium transition-all ${
                              isSelected
                                ? "border-primary bg-primary text-primary-foreground shadow-md"
                                : "border-border bg-card hover:border-primary/40 hover:bg-primary/5"
                            }`}
                          >
                            {val.value}
                          </button>
                        );
                      })}
                    </div>
                  </div>
                ))}
              </div>
            )}

            {/* Variants as cards */}
            {variants.length > 1 && (
              <div className="mt-6">
                <p className="mb-3 text-sm font-bold">Available Variants</p>
                <div className="grid gap-2 sm:grid-cols-2">
                  {variants.map((v, idx) => {
                    const label = v.attributes?.map((a) => a.value).join(" / ") || v.sku;
                    const isActive = selectedVariantIdx === idx;
                    return (
                      <button
                        key={idx}
                        onClick={() => selectVariant(idx)}
                        className={`flex items-center gap-3 rounded-xl border p-3 text-left transition-all ${
                          isActive
                            ? "border-primary bg-primary/5 shadow-md"
                            : "border-border bg-card hover:border-primary/30"
                        }`}
                      >
                        {v.image && (
                          <span className="relative h-12 w-12 shrink-0 overflow-hidden rounded-lg">
                            <Image
                              src={mediaOrPlaceholder(v.image)}
                              alt={label}
                              fill
                              className="object-cover"
                              sizes="48px"
                            />
                          </span>
                        )}
                        <div className="flex-1 min-w-0">
                          <p className="text-sm font-semibold truncate">{label}</p>
                          <p className="text-xs text-muted-foreground">
                            Rs. {Number(v.price).toLocaleString()}
                            {v.stock > 0 ? ` · ${v.stock} in stock` : " · Out of stock"}
                          </p>
                        </div>
                        {isActive && <Check className="h-4 w-4 shrink-0 text-primary" />}
                      </button>
                    );
                  })}
                </div>
              </div>
            )}

            <div className="my-6 h-px bg-border/60" />

            {/* Action buttons */}
            <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
              <div className="flex items-center rounded-xl border border-border/60 bg-card">
                <button onClick={() => setQuantity((q) => Math.max(1, q - 1))} className="flex h-12 w-12 items-center justify-center rounded-l-xl text-lg font-medium transition-colors hover:bg-secondary">−</button>
                <span className="w-12 text-center font-bold">{quantity}</span>
                <button onClick={() => setQuantity((q) => q + 1)} className="flex h-12 w-12 items-center justify-center rounded-r-xl text-lg font-medium transition-colors hover:bg-secondary">+</button>
              </div>
              <button
                onClick={handleAddToCart}
                className="flex flex-1 items-center justify-center gap-3 rounded-xl bg-primary px-8 py-3.5 text-sm font-bold text-primary-foreground shadow-lg transition-all hover:scale-[1.01] hover:shadow-elevated active:scale-[0.99]"
              >
                <ShoppingBag className="h-4 w-4" />
                Add to Cart — Rs. {(activePrice * quantity).toLocaleString()}
              </button>
            </div>

            {/* WhatsApp Order Button */}
            <a
              href={buildWhatsAppUrl(details!, selectedVariant)}
              target="_blank"
              rel="noopener noreferrer"
              className="mt-3 flex items-center justify-center gap-3 rounded-xl bg-[#25D366] px-8 py-3.5 text-sm font-bold text-white shadow-lg transition-all hover:scale-[1.01] hover:brightness-110 active:scale-[0.99]"
            >
              <MessageCircle className="h-4 w-4" />
              Order on WhatsApp — {company.phone}
            </a>

            {/* Trust badges */}
            <div className="mt-8 grid grid-cols-2 gap-2.5 sm:grid-cols-4">
              {[
                { icon: Truck, label: "Free Delivery", sub: "Across Pakistan" },
                { icon: Shield, label: "Warranty", sub: "Official warranty" },
                { icon: RotateCcw, label: "Returns", sub: "Easy returns" },
                { icon: Zap, label: "Installation", sub: "Free setup" },
              ].map(({ icon: Icon, label, sub }) => (
                <div key={label} className="flex flex-col items-center gap-1.5 rounded-2xl border border-border/40 bg-card p-3.5 text-center shadow-card">
                  <Icon className="h-4 w-4 text-primary" />
                  <span className="text-[11px] font-bold">{label}</span>
                  <span className="text-[10px] text-muted-foreground">{sub}</span>
                </div>
              ))}
            </div>

            {/* Tabs */}
            <div className="my-8 h-px bg-border/60" />
            <div>
              <div className="flex gap-1 rounded-xl bg-secondary/60 p-1">
                {(["description", "specs", "variants"] as const).map((tab) => (
                  <button
                    key={tab}
                    onClick={() => setActiveTab(tab)}
                    className={`relative flex-1 rounded-lg px-4 py-2.5 text-xs font-semibold capitalize transition-all ${
                      activeTab === tab ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
                    }`}
                  >
                    {tab === "specs" ? "Specifications" : tab}
                  </button>
                ))}
              </div>
              <AnimatePresence mode="wait">
                <motion.div key={activeTab} initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -8 }} transition={{ duration: 0.2 }} className="mt-6">
                  {activeTab === "description" && (
                    <p className="text-sm leading-[1.8] text-muted-foreground">
                      {product!.longDescription || product!.description || "No description available."}
                    </p>
                  )}
                  {activeTab === "specs" && (
                    <div className="overflow-hidden rounded-2xl border border-border/40">
                      {allSpecs.map(([key, value], i) => (
                        <div key={key} className={`flex items-center justify-between px-5 py-3.5 text-sm ${i % 2 === 0 ? "bg-secondary/30" : "bg-card"}`}>
                          <span className="font-semibold text-foreground/80">{key}</span>
                          <span className="text-right text-muted-foreground">{value}</span>
                        </div>
                      ))}
                    </div>
                  )}
                  {activeTab === "variants" && (
                    variants.length > 0 ? (
                      <div className="space-y-3">
                        {variants.map((v, idx) => {
                          const label = v.attributes?.map((a) => `${a.attribute_name}: ${a.value}`).join(" · ") || "Standard";
                          return (
                            <div
                              key={idx}
                              className={`flex items-center gap-4 rounded-xl border p-4 transition-all ${
                                selectedVariantIdx === idx ? "border-primary bg-primary/5" : "border-border bg-card"
                              }`}
                            >
                              {v.image && (
                                <span className="relative h-16 w-16 shrink-0 overflow-hidden rounded-lg">
                                  <Image
                                    src={mediaOrPlaceholder(v.image)}
                                    alt={label}
                                    fill
                                    className="object-cover"
                                    sizes="64px"
                                  />
                                </span>
                              )}
                              <div className="flex-1">
                                <p className="text-sm font-semibold">{label}</p>
                                <p className="mt-1 text-xs text-muted-foreground">
                                  Rs. {Number(v.price).toLocaleString()} · {v.stock > 0 ? `${v.stock} in stock` : "Out of stock"}
                                </p>
                              </div>
                              <button
                                onClick={() => selectVariant(idx)}
                                className={`rounded-lg px-4 py-2 text-xs font-semibold transition-all ${
                                  selectedVariantIdx === idx
                                    ? "bg-primary text-primary-foreground"
                                    : "border border-border bg-card hover:border-primary/40"
                                }`}
                              >
                                {selectedVariantIdx === idx ? "Selected" : "Select"}
                              </button>
                            </div>
                          );
                        })}
                      </div>
                    ) : (
                      <p className="text-sm text-muted-foreground">No variants available for this product.</p>
                    )
                  )}
                </motion.div>
              </AnimatePresence>
            </div>
          </motion.div>
        </div>

        {related.length > 0 && (
          <section className="mt-24">
            <div className="mb-10 flex items-end justify-between">
              <div>
                <span className="text-xs font-bold uppercase tracking-[0.2em] text-primary">Similar</span>
                <h2 className="mt-2 text-2xl font-bold">You might also like</h2>
              </div>
              <Link href={`/products?category=${encodeURIComponent(product!.category)}`} className="text-sm font-semibold text-primary hover:underline">
                View all →
              </Link>
            </div>
            <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
              {related.map((p, i) => <ProductCard key={p.id} product={p} index={i} />)}
            </div>
          </section>
        )}
      </div>
      <Footer />
    </div>
  );
}