"use client";

/**
 * بخش بالای صفحه محصول: گالری، انتخاب رنگ/حجم، قیمت، موجودی و افزودن به سبد.
 * تنوع انتخاب‌شده در آدرس (?v=) نگه داشته می‌شود تا لینک آن قابل اشتراک باشد.
 */
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { cart, MAX_QTY_PER_ITEM } from "@/lib/client/store";
import { faDigits, faNumber } from "@/lib/format";
import { Icon } from "@/components/ui/Icon";
import { Price } from "@/components/ui/Price";
import { Stars } from "@/components/ui/Stars";
import { Tags } from "@/components/ui/Tags";
import type { Brand, Product } from "@/types/catalog";
import { ProductVisual } from "./ProductVisual";

interface Props {
  product: Product;
  brand: Brand;
  initialVariantId?: string;
  freeShippingThreshold: number;
}

export function ProductHero({ product, brand, initialVariantId, freeShippingThreshold }: Props) {
  const [variantId, setVariantId] = useState(
    product.variants.find((v) => v.id === initialVariantId)?.id ?? product.variants.find((v) => v.stock > 0)?.id ?? product.variants[0].id,
  );
  const [slide, setSlide] = useState(0);
  const [qty, setQty] = useState(1);
  const [added, setAdded] = useState(false);
  const galleryRef = useRef<HTMLDivElement>(null);

  const variant = product.variants.find((v) => v.id === variantId)!;
  const isColor = product.variants.some((v) => v.colorHex);
  const tone = variant.colorHex ?? product.tone;
  const maxQty = Math.min(MAX_QTY_PER_ITEM, variant.stock);

  // عکس‌های واقعی: اول عکس‌های مخصوص رنگ انتخاب‌شده، بعد عکس‌های عمومی.
  // بدون عکس، سه نمای برداری (محصول، جعبه، بافت) نمایش داده می‌شود.
  const photos = (() => {
    if (!product.images.length) return [];
    const own = product.images.filter((i) => i.variantId === variant.id);
    const general = product.images.filter((i) => !i.variantId || !product.variants.some((v) => v.id === i.variantId));
    return own.length + general.length ? [...own, ...general] : product.images;
  })();
  const slides = photos.length ? photos.map((p, i) => ({ key: p.url, image: p, view: 0 as const, n: i })) : ([0, 1, 2] as const).map((v) => ({ key: String(v), image: undefined, view: v, n: v }));

  function selectVariant(id: string) {
    setVariantId(id);
    setQty(1);
    setAdded(false);
    const url = new URL(window.location.href);
    url.searchParams.set("v", id);
    window.history.replaceState(null, "", url);
  }

  function goTo(i: number) {
    setSlide(i);
    const el = galleryRef.current;
    if (el) el.scrollTo({ left: -i * el.clientWidth, behavior: "smooth" }); // در RTL اسکرول افقی منفی است
  }

  // با تغییر رنگ، گالری به اولین عکس همان رنگ برمی‌گردد (بعد از رندر فهرست جدید عکس‌ها)
  const hasPhotos = product.images.length > 0;
  const firstRender = useRef(true);
  useEffect(() => {
    if (firstRender.current) {
      firstRender.current = false;
      return;
    }
    if (!hasPhotos) return;
    galleryRef.current?.scrollTo({ left: 0 });
    setSlide(0);
  }, [variantId, hasPhotos]);

  const [adding, setAdding] = useState(false);

  async function addToCart() {
    setAdding(true);
    await cart.add(product.id, variant.id, qty);
    setAdding(false);
    setAdded(true);
  }

  const stockNote =
    variant.stock === 0 ? "ناموجود" : variant.stock <= 3 ? `فقط ${faNumber(variant.stock)} عدد باقی مانده` : "موجود در انبار";

  return (
    <div className="md:grid md:grid-cols-2 md:gap-12 lg:gap-20">
      {/* ── گالری ── */}
      <div className="md:sticky md:top-36 md:self-start">
        <div className="relative -mx-4 sm:mx-0">
          <div
            ref={galleryRef}
            className="scrollbar-none flex snap-x snap-mandatory overflow-x-auto sm:rounded-3xl"
            onScroll={(e) => setSlide(Math.round(Math.abs(e.currentTarget.scrollLeft) / e.currentTarget.clientWidth))}
          >
            {slides.map((s) => (
              <div key={s.key} className="aspect-square w-full shrink-0 snap-center bg-mist">
                <ProductVisual
                  image={s.image}
                  sizes="(min-width: 768px) 50vw, 100vw"
                  priority={s.n === 0}
                  shape={product.shape}
                  tone={tone}
                  view={s.view}
                  label={brand.nameEn}
                  title={`${product.name} — تصویر ${s.n + 1}`}
                  className="size-full"
                />
              </div>
            ))}
          </div>
          <div className="absolute start-4 top-4">
            <Tags tags={product.tags} max={3} />
          </div>
          <div className="absolute inset-x-0 bottom-4 flex justify-center gap-1.5 md:hidden">
            {slides.length > 1 && slides.map((s) => (
              <span key={s.key} className={`h-1.5 rounded-full transition-all ${slide === s.n ? "w-5 bg-ink" : "w-1.5 bg-ink/25"}`} />
            ))}
          </div>
        </div>
        <div className="mt-3 hidden flex-wrap gap-3 md:flex">
          {slides.length > 1 && slides.map((s) => (
            <button
              key={s.key}
              type="button"
              onClick={() => goTo(s.n)}
              aria-label={`تصویر ${s.n + 1}`}
              className={`size-20 overflow-hidden rounded-xl bg-mist ring-offset-2 ${slide === s.n ? "ring-1 ring-ink" : ""}`}
            >
              <ProductVisual image={s.image} sizes="80px" shape={product.shape} tone={tone} view={s.view} label={brand.nameEn} className="size-full" />
            </button>
          ))}
        </div>
      </div>

      {/* ── اطلاعات خرید ── */}
      <div className="pt-6 md:pt-2">
        <Link href={`/brand/${brand.slug}`} className="text-sm font-bold tracking-wide underline-offset-4 hover:underline">
          {brand.name}
        </Link>
        <h1 className="mt-1 text-xl leading-9 font-medium md:text-2xl md:leading-10">{product.name}</h1>
        <p className="mt-1 text-sm text-muted">{product.summary}</p>
        <a href="#reviews" className="mt-3 inline-flex items-center gap-2 text-xs">
          <Stars rating={product.rating} />
          <span className="underline underline-offset-4">{faNumber(product.reviewCount)} نظر</span>
        </a>

        <div className="mt-5">
          <Price price={variant.price} compareAt={variant.compareAtPrice} size="lg" />
          {variant.price >= freeShippingThreshold && <p className="mt-1 text-xs text-muted">ارسال این کالا رایگان است</p>}
        </div>

        {/* انتخاب تنوع */}
        {product.variants.length > 1 && (
          <fieldset className="mt-6">
            <legend className="mb-3 text-sm">
              {isColor ? "رنگ" : "حجم"}: <span className="font-bold">{isColor ? variant.colorName : variant.size}</span>
            </legend>
            <div className="flex flex-wrap gap-2.5">
              {product.variants.map((v) =>
                isColor ? (
                  <button
                    key={v.id}
                    type="button"
                    onClick={() => selectVariant(v.id)}
                    aria-label={`${v.colorName}${v.stock === 0 ? " (ناموجود)" : ""}`}
                    aria-pressed={v.id === variantId}
                    title={v.colorName}
                    className={`relative size-10 rounded-full ring-offset-2 transition ${v.id === variantId ? "ring-[1.5px] ring-ink" : "ring-1 ring-line"}`}
                    style={{ backgroundColor: v.colorHex }}
                  >
                    {v.stock === 0 && <span className="absolute inset-0 m-auto h-px w-full rotate-45 bg-paper" />}
                  </button>
                ) : (
                  <button
                    key={v.id}
                    type="button"
                    onClick={() => selectVariant(v.id)}
                    aria-pressed={v.id === variantId}
                    className={`chip h-11 px-5 text-sm ${v.id === variantId ? "chip-active" : ""} ${v.stock === 0 ? "text-subtle line-through" : ""}`}
                  >
                    {v.size}
                  </button>
                ),
              )}
            </div>
          </fieldset>
        )}
        {isColor && variant.size && <p className="mt-3 text-xs text-muted">حجم: {variant.size}</p>}

        <p className={`mt-5 flex items-center gap-2 text-sm ${variant.stock === 0 ? "text-muted" : ""}`}>
          <span className={`size-2 rounded-full ${variant.stock === 0 ? "bg-subtle" : variant.stock <= 3 ? "bg-ink ring-2 ring-ink/20" : "bg-ink"}`} />
          {stockNote}
        </p>

        {/* افزودن به سبد — روی موبایل بالای ناوبری پایین ثابت می‌شود */}
        <div className="pb-safe fixed inset-x-0 bottom-16 z-30 border-t border-line bg-paper/95 p-3 backdrop-blur md:static md:mt-6 md:border-0 md:bg-transparent md:p-0">
          {variant.stock === 0 ? (
            <button type="button" className="btn-outline h-14 w-full" disabled>
              ناموجود — به‌زودی
            </button>
          ) : added ? (
            <Link href="/cart" className="btn-primary h-14 w-full text-base font-bold">
              <Icon name="check" size={18} />
              مشاهده سبد خرید
            </Link>
          ) : (
            /* دکمه یکپارچه: افزودن به سبد (دو خط) + انتخاب تعداد، جدا شده با یک خط نازک */
            <div className="flex h-14 w-full overflow-hidden rounded-full bg-cta text-paper transition-colors has-[button:hover]:bg-cta-hover">
              <button type="button" onClick={addToCart} disabled={adding} className="flex flex-1 flex-col items-center justify-center leading-tight disabled:opacity-70">
                <span className="text-base font-bold">{adding ? "در حال افزودن…" : "افزودن به سبد"}</span>
                <span className="text-[11px] opacity-90">ارسال سریع به سراسر ایران</span>
              </button>
              <span aria-hidden className="my-2 w-px bg-paper/60" />
              <label className="relative flex w-20 shrink-0 items-center">
                <span className="sr-only">تعداد</span>
                <select
                  value={qty}
                  onChange={(e) => setQty(Number(e.target.value))}
                  className="h-full w-full cursor-pointer appearance-none bg-transparent ps-6 text-base text-paper outline-none [&>option]:text-ink"
                >
                  {Array.from({ length: Math.max(1, maxQty) }, (_, i) => i + 1).map((n) => (
                    <option key={n} value={n}>
                      {faNumber(n)}
                    </option>
                  ))}
                </select>
                <Icon name="chevron-down" size={16} className="pointer-events-none absolute end-4" />
              </label>
            </div>
          )}
        </div>

        <ul className="mt-8 space-y-3 rounded-2xl bg-mist p-5 text-xs leading-6">
          <li className="flex gap-3">
            <Icon name="truck" size={20} className="shrink-0" />
            <span>
              ارسال با پست پیشتاز، تیپاکس و پیک تهران؛ رایگان برای خریدهای بالای {faNumber(freeShippingThreshold / 1_000_000)} میلیون تومان
            </span>
          </li>
          <li className="flex gap-3">
            <Icon name="shield" size={20} className="shrink-0" />
            <span>
              ضمانت اصالت کالا
              {product.ircCode && (
                <>
                  {" "}· شماره مجوز بهداشتی: <bdi className="font-medium">{faDigits(product.ircCode)}</bdi>
                </>
              )}
            </span>
          </li>
          <li className="flex gap-3">
            <Icon name="return" size={20} className="shrink-0" />
            <span>۷ روز ضمانت بازگشت برای کالای باز نشده</span>
          </li>
        </ul>
      </div>
    </div>
  );
}