"use client";

import { useState } from "react";
import Link from "next/link";
import { formatPrice } from "@/lib/format";
import MerchProductCard from "@/components/merch-product-card";
import type { PublicProduct } from "@/lib/merch-public";

export interface EventMerch {
  shop: {
    id: string;
    slug: string;
    name: string;
    pickupEnabled: boolean;
    deliveryEnabled: boolean;
    deliveryFeeCents: number;
    pickupInstructions: string | null;
  };
  products: PublicProduct[];
}

export type MerchCart = Record<string, number>; // variantId -> quantity

export function merchLines(merch: EventMerch, cart: MerchCart) {
  const out: { product: PublicProduct; variant: PublicProduct["variants"][number]; quantity: number }[] = [];
  for (const p of merch.products) for (const v of p.variants) if (cart[v.id]) out.push({ product: p, variant: v, quantity: cart[v.id] });
  return out;
}

// "Add official merch" strip on the event page. The cart lives in the parent
// (TicketSelector) so tickets + merch are paid in one checkout.
export default function EventMerchPicker({
  merch,
  cart,
  setCart,
}: {
  merch: EventMerch;
  cart: MerchCart;
  setCart: (fn: (c: MerchCart) => MerchCart) => void;
}) {
  const [chosen, setChosen] = useState<Record<string, string>>(() =>
    Object.fromEntries(
      merch.products.map((p) => [p.id, (p.variants.find((v) => v.available > 0) ?? p.variants[0])?.id ?? ""])
    )
  );
  const lines = merchLines(merch, cart);

  function add(p: PublicProduct) {
    const v = p.variants.find((x) => x.id === chosen[p.id]);
    if (!v || v.available === 0) return;
    setCart((c) => ({ ...c, [v.id]: Math.min((c[v.id] ?? 0) + 1, v.available) }));
  }
  function setQty(variantId: string, q: number, max: number) {
    setCart((c) => {
      const next = { ...c };
      if (q <= 0) delete next[variantId];
      else next[variantId] = Math.min(q, max);
      return next;
    });
  }

  return (
    <div className="min-w-0 rounded-2xl border border-line bg-panel/60 p-4">
      <div className="flex items-baseline justify-between gap-3">
        <div>
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-brand-green-h">Add official merch</p>
          <p className="mt-1 text-sm text-muted">
            Pay for it together with your tickets
            {merch.shop.pickupEnabled ? " — collect it at the event" : ""}.
          </p>
        </div>
        <Link href={`/shop/${merch.shop.slug}`} className="shrink-0 text-xs font-semibold text-brand-green-h hover:underline">
          Full shop →
        </Link>
      </div>

      {/* Horizontal strip so the ticket checkout stays close by on phones. */}
      <div className="-mx-1 mt-4 flex snap-x gap-3 overflow-x-auto px-1 pb-2">
        {merch.products.map((p) => (
          <div key={p.id} className="w-48 shrink-0 snap-start">
            <MerchProductCard
              compact
              product={p}
              chosenVariantId={chosen[p.id]}
              onChoose={(vid) => setChosen((c) => ({ ...c, [p.id]: vid }))}
              onAdd={() => add(p)}
              inCart={p.variants.reduce((s, v) => s + (cart[v.id] ?? 0), 0)}
            />
          </div>
        ))}
      </div>

      {lines.length > 0 && (
        <ul className="mt-3 space-y-2 border-t border-line pt-3 text-sm">
          {lines.map((l) => (
            <li key={l.variant.id} className="flex items-center justify-between gap-2">
              <span>
                {l.product.name}
                {l.product.variants.length > 1 && <span className="text-muted"> · {l.variant.label}</span>}
              </span>
              <span className="flex items-center gap-2">
                <button
                  type="button"
                  onClick={() => setQty(l.variant.id, l.quantity - 1, l.variant.available)}
                  className="h-6 w-6 rounded border border-line"
                  aria-label="Fewer"
                >
                  −
                </button>
                <span className="w-4 text-center tabular-nums">{l.quantity}</span>
                <button
                  type="button"
                  onClick={() => setQty(l.variant.id, l.quantity + 1, l.variant.available)}
                  disabled={l.quantity >= l.variant.available}
                  className="h-6 w-6 rounded border border-line disabled:opacity-40"
                  aria-label="More"
                >
                  +
                </button>
                <span className="w-20 text-right tabular-nums">{formatPrice(l.variant.priceCents * l.quantity, "kes")}</span>
              </span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}