/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React, { useState } from "react";
import { Product } from "@/types/product/product";
import { Button } from "@/components/ui/button";
import { ArrowLeft, ChevronLeft, Layers, ShieldCheck, BadgePercent, Globe, PlayCircle } from "lucide-react";
import Link from "next/link";
import Image from "next/image";
import { useCart } from "@/context/CartContext";
import { ShareButton } from "@/components/ui/share-button";

import { Suspense } from "react";

interface ProductDetailsClientProps {
  product: Product;
}

function parseSpecs(raw: Product["specifications_json"]): [string, string][] {
  if (!raw) return [];
  let obj: Record<string, unknown> | null = null;
  if (typeof raw === "string") {
    try {
      obj = JSON.parse(raw);
    } catch {
      return [];
    }
  } else if (typeof raw === "object") {
    obj = raw;
  }
  if (!obj || typeof obj !== "object" || Array.isArray(obj)) return [];
  return Object.entries(obj)
    .filter(([, v]) => v != null && String(v).trim() !== "")
    .map(([k, v]) => [k, String(v)]);
}

function getYouTubeEmbedUrl(url: string): string | null {
  const patterns = [
    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([A-Za-z0-9_-]{11})/,
  ];
  for (const p of patterns) {
    const m = url.match(p);
    if (m) return `https://www.youtube.com/embed/${m[1]}`;
  }
  return null;
}

function formatBDT(value: string | number | null | undefined): string {
  const n = Number(value ?? 0);
  return `৳${n.toLocaleString("en-IN", { maximumFractionDigits: 2 })}`;
}

function ProductDetailsClientContent({ product }: ProductDetailsClientProps) {
  const { addToCart } = useCart();

  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  const [quantity, setQuantity] = useState<number>(1);

  const displayImages = React.useMemo(() => {
    return product.images || [];
  }, [product.images]);

  const [activeImage, setActiveImage] = useState<string>(() => {
    const prodImages = product.images || [];
    return prodImages.find((img) => img.is_primary)?.image_url ?? prodImages[0]?.image_url ?? "/placeholder-product.svg";
  });

  const isInStock = product.in_stock !== false;

  const specs = React.useMemo(() => parseSpecs(product.specifications_json), [product.specifications_json]);

  const finalPrice = Number(product.final_price || product.base_price || 0);
  const basePrice = Number(product.base_price || 0);
  const discountValue = Number(product.discount_value || 0);
  const hasDiscount =
    product.discount_type && product.discount_type !== "none" && discountValue > 0 && finalPrice < basePrice;
  const discountLabel = hasDiscount
    ? product.discount_type === "percent"
      ? `-${discountValue}%`
      : `-৳${discountValue.toLocaleString("en-IN")}`
    : null;

  const isLowStock =
    isInStock &&
    product.stock_count != null &&
    product.low_stock_threshold != null &&
    product.stock_count <= product.low_stock_threshold;

  const warrantyComponents = product.warranty_components ?? [];
  const showWarranty = warrantyComponents.length > 0;
  const videoUrl = product.product_video_url?.trim() || "";
  const videoEmbedUrl = videoUrl ? getYouTubeEmbedUrl(videoUrl) : null;

  return (
    <div className="container mx-auto px-4 md:px-6">
      {/* Back Button */}
      <div className="mb-6">
        <Button
          asChild
          variant="ghost"
          size="sm"
          className="gap-2 text-slate-500 hover:text-slate-900 dark:text-zinc-400 dark:hover:text-zinc-100 font-semibold p-0 hover:bg-transparent"
        >
          <Link href="/">
            <ArrowLeft className="w-4 h-4" /> Back to Products
          </Link>
        </Button>
      </div>

      {/* Main Two-Column Panel */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start bg-white dark:bg-zinc-900/40 rounded-3xl border border-slate-100 dark:border-zinc-800/80 p-5 md:p-8 shadow-sm">
        {/* Left Column: Image switcher */}
        <div className="lg:col-span-5 flex flex-col gap-4">
          {/* Main Large Image Container */}
          <div className="w-full aspect-square bg-slate-50/50 dark:bg-zinc-950/20 rounded-2xl overflow-hidden border border-slate-100 dark:border-zinc-800/80 relative flex items-center justify-center">
            <Image
              src={activeImage || "/placeholder-product.svg"}
              alt={product.name}
              fill
              priority
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
              className="object-cover transition-all duration-500"
            />
          </div>

          {/* Thumbnail Selector Slider */}
          {displayImages.length > 1 && (
            <div className="flex items-center gap-3 overflow-x-auto pb-2 pt-1 scrollbar-thin scrollbar-thumb-slate-200">
              {displayImages.map((img, idx) => {
                const isSelected = activeImage === img.image_url;
                return (
                  <button
                    key={idx}
                    onClick={() => setActiveImage(img.image_url)}
                    className={`w-16 h-16 rounded-xl overflow-hidden border shrink-0 transition-all duration-300 relative ${isSelected
                      ? "border-brand-accent ring-2 ring-brand-accent/10 scale-95 shadow-sm"
                      : "border-slate-100 dark:border-zinc-800 hover:border-slate-300"
                      }`}
                  >
                    <Image
                      src={img.image_url}
                      alt={`${product.name} thumbnail ${idx + 1}`}
                      fill
                      sizes="64px"
                      className="object-cover"
                    />
                  </button>
                );
              })}
            </div>
          )}
        </div>

        {/* Right Column: Details & Configuration */}
        <div className="lg:col-span-7 flex flex-col gap-6">
          {/* Headline Metadata */}
          <div className="space-y-2">
            <div className="flex items-start justify-between gap-4">
              <div>
                <div className="flex items-center gap-2 mb-2 flex-wrap">
                  {product.brand && (
                    <Link
                      href={`/?brand=${product.brand.slug}#products`}
                      className="text-[10px] font-bold uppercase tracking-widest text-slate-600 dark:text-zinc-300 border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-2.5 py-1 rounded-md hover:border-brand-accent hover:text-brand-accent transition-colors"
                    >
                      {product.brand.name}
                    </Link>
                  )}
                  <span className="text-[10px] font-bold uppercase tracking-widest text-brand-accent bg-brand-accent/5 px-2.5 py-1 rounded-md">
                    {product.category?.name || "Product"}
                  </span>
                  <span className={`text-[10px] font-extrabold uppercase tracking-wider px-2.5 py-1 rounded-md ${isInStock
                    ? "bg-green-50 text-green-700 dark:bg-green-950/20 dark:text-green-400"
                    : "bg-red-50 text-red-700 dark:bg-red-950/20 dark:text-red-400"
                    }`}>
                    {isInStock ? "In Stock" : "Out of Stock"}
                  </span>
                </div>
                <h1 className="text-2xl md:text-3xl lg:text-4xl font-extrabold text-slate-900 dark:text-zinc-100 tracking-tight leading-tight">
                  {product.name}
                </h1>
              </div>

              <ShareButton 
                url={`${typeof window !== 'undefined' ? window.location.origin : ''}/products/${product.slug}`}
                title={product.name}
                variant="button"
                className="shrink-0 bg-slate-100/80 text-slate-700 hover:bg-slate-200/80 hover:text-slate-900 shadow-none border border-slate-200"
              />
            </div>
          </div>

          {/* Price Block */}
          <div className="space-y-1.5">
            <div className="flex items-center gap-3 flex-wrap">
              <span className="text-3xl md:text-4xl font-extrabold text-slate-900 dark:text-zinc-100 tracking-tight">
                {formatBDT(finalPrice)}
              </span>
              {hasDiscount && (
                <span className="text-lg text-slate-400 dark:text-zinc-500 line-through font-medium">
                  {formatBDT(basePrice)}
                </span>
              )}
              {discountLabel && (
                <span className="text-xs font-extrabold uppercase tracking-wider bg-red-50 text-red-600 dark:bg-red-950/20 dark:text-red-400 px-2.5 py-1 rounded-md">
                  {discountLabel}
                </span>
              )}
            </div>
            {product.emi_available && (
              <p className="inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wider text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/20 px-2.5 py-1 rounded-md">
                <BadgePercent className="w-3.5 h-3.5" />
                EMI Available
              </p>
            )}
            {isLowStock && (
              <p className="text-xs font-bold text-orange-600 dark:text-orange-400">
                Only {product.stock_count} left in stock — order soon
              </p>
            )}
          </div>

          {/* Product Story / Description */}
          <p className="text-sm text-slate-600 dark:text-zinc-400 leading-relaxed whitespace-pre-line">
            {product.description || "No description available."}
          </p>

          {/* Warranty & Origin */}
          {(showWarranty || product.country_of_origin) && (
            <div className="flex flex-col sm:flex-row gap-2 sm:gap-6">
              {showWarranty && (
                <div className="flex items-start gap-2">
                  <ShieldCheck className="w-4 h-4 mt-0.5 shrink-0 text-brand-accent" />
                  <div className="text-xs leading-relaxed">
                    <span className="font-bold text-slate-800 dark:text-zinc-200">
                      Warranty
                    </span>
                    <span className="block mt-1 space-y-1">
                      {warrantyComponents.map((wc: any, i: number) => {
                        const policyName =
                          wc.warrantyPolicy?.name ||
                          wc.warranty_policy?.name ||
                          (wc.parts_coverage && wc.service_coverage
                            ? "Full Warranty"
                            : wc.parts_coverage
                            ? "Parts Warranty"
                            : wc.service_coverage
                            ? "Service Warranty"
                            : "Warranty");
                        const months =
                          wc.warranty_months != null && Number(wc.warranty_months) > 0
                            ? Number(wc.warranty_months)
                            : wc.warranty_duration_days
                            ? Math.round(Number(wc.warranty_duration_days) / 30)
                            : null;
                        const isNone =
                          policyName.toLowerCase().includes("no warranty") ||
                          wc.warrantyPolicy?.code === "none" ||
                          wc.warrantyPolicy?.code === "no_warranty";

                        if (isNone) {
                          return (
                            <span key={i} className="inline-block text-xs font-semibold px-2 py-0.5 rounded bg-slate-100 dark:bg-zinc-800 text-slate-600 dark:text-zinc-400">
                              No Warranty Coverage
                            </span>
                          );
                        }

                        const durationStr = months
                          ? months >= 12
                            ? `${months % 12 === 0 ? `${months / 12} Year${months / 12 > 1 ? "s" : ""}` : `${(months / 12).toFixed(1)} Years`} (${months} Mo)`
                            : `${months} Mo`
                          : "Standard Coverage";

                        return (
                          <span key={i} className="block text-xs text-slate-700 dark:text-zinc-200">
                            <span className="font-semibold text-emerald-700 dark:text-emerald-400">{policyName}:</span>{" "}
                            <span className="font-medium">{durationStr}</span>
                            {wc.customer_policy_note && (
                              <span className="block text-[11px] text-slate-500 dark:text-zinc-400 font-normal italic">
                                {wc.customer_policy_note}
                              </span>
                            )}
                          </span>
                        );
                      })}
                    </span>
                  </div>
                </div>
              )}
              {product.country_of_origin && (
                <div className="flex items-start gap-2">
                  <Globe className="w-4 h-4 mt-0.5 shrink-0 text-brand-accent" />
                  <div className="text-xs leading-relaxed">
                    <span className="font-bold text-slate-800 dark:text-zinc-200">Origin:</span>{" "}
                    <span className="text-slate-500 dark:text-zinc-400">{product.country_of_origin}</span>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* Quantity Selector */}
          <div className="space-y-3 pt-2">
            <label className="text-[10px] font-extrabold uppercase tracking-widest text-slate-400 block">Quantity</label>
            <div className="flex items-center gap-4 p-3 rounded-2xl border border-slate-100 dark:border-zinc-800/80 bg-slate-50/30 dark:bg-zinc-900/10">
              <div className="flex items-center border border-slate-200 dark:border-zinc-800 rounded-xl overflow-hidden bg-white dark:bg-zinc-950">
                <button
                  onClick={() => setQuantity(Math.max(1, quantity - 1))}
                  disabled={quantity <= 1}
                  className="w-10 h-10 flex items-center justify-center font-bold text-lg text-slate-600 dark:text-zinc-400 hover:bg-slate-50 dark:hover:bg-zinc-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  -
                </button>
                <span className="w-12 h-10 flex items-center justify-center text-sm font-bold text-slate-800 dark:text-zinc-200">
                  {quantity}
                </span>
                <button
                  onClick={() => setQuantity(quantity + 1)}
                  className="w-10 h-10 flex items-center justify-center font-bold text-lg text-slate-600 dark:text-zinc-400 hover:bg-slate-50 dark:hover:bg-zinc-900 transition-colors"
                >
                  +
                </button>
              </div>
            </div>
          </div>

          {/* Add to Cart */}
          <div className="pt-4 space-y-3">
            {isInStock ? (
              <Button
                onClick={() => addToCart(product, quantity)}
                className="w-full h-12 bg-brand-accent hover:bg-brand-accent/90 text-white font-bold text-xs uppercase tracking-wider rounded-xl border-none shadow-lg shadow-brand-accent/20 cursor-pointer"
              >
                Add to Cart
              </Button>
            ) : (
              <Button
                disabled
                className="w-full h-12 bg-slate-100 text-slate-400 font-bold text-xs uppercase tracking-wider rounded-xl cursor-not-allowed border-none shadow-none"
              >
                Out of Stock
              </Button>
            )}
          </div>
        </div>
      </div>

      {/* Specifications Table */}
      {specs.length > 0 && (
        <div className="mt-8 bg-white dark:bg-zinc-900/40 rounded-3xl border border-slate-100 dark:border-zinc-800/80 p-5 md:p-8 shadow-sm">
          <h2 className="text-sm font-extrabold uppercase tracking-widest text-slate-900 dark:text-zinc-100 mb-5">
            Specifications
          </h2>
          <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-10">
            {specs.map(([key, value], idx) => (
              <div
                key={key}
                className={`flex items-start justify-between gap-4 py-3 border-b border-slate-100 dark:border-zinc-800/60 ${
                  idx >= specs.length - (specs.length % 2 === 0 ? 2 : 1) ? "sm:border-b-0" : ""
                }`}
              >
                <dt className="text-xs font-bold uppercase tracking-wider text-slate-400 dark:text-zinc-500 shrink-0">
                  {key}
                </dt>
                <dd className="text-sm font-medium text-slate-800 dark:text-zinc-200 text-right">
                  {value}
                </dd>
              </div>
            ))}
          </dl>
        </div>
      )}

      {/* Product Video */}
      {videoEmbedUrl && (
        <div className="mt-8 bg-white dark:bg-zinc-900/40 rounded-3xl border border-slate-100 dark:border-zinc-800/80 p-5 md:p-8 shadow-sm">
          <h2 className="text-sm font-extrabold uppercase tracking-widest text-slate-900 dark:text-zinc-100 mb-5 flex items-center gap-2">
            <PlayCircle className="w-4 h-4 text-brand-accent" />
            Product Video
          </h2>
          <div className="relative w-full aspect-video rounded-2xl overflow-hidden border border-slate-100 dark:border-zinc-800/80">
            <iframe
              src={videoEmbedUrl}
              title={`${product.name} video`}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
              className="absolute inset-0 w-full h-full"
            />
          </div>
        </div>
      )}
    </div>
  );
}

export default function ProductDetailsClient(props: ProductDetailsClientProps) {
  return (
    <Suspense
      fallback={
        <div className="container mx-auto px-4 md:px-6 py-20 flex justify-center items-center">
          <div className="flex flex-col items-center gap-3">
            <div className="w-10 h-10 border-4 border-brand-accent border-t-transparent rounded-full animate-spin"></div>
            <p className="text-xs uppercase tracking-widest font-extrabold text-slate-400">Loading details...</p>
          </div>
        </div>
      }
    >
      <ProductDetailsClientContent {...props} />
    </Suspense>
  );
}