"use client";

import { useState } from "react";
import { Check, ChevronDown, Grape } from "lucide-react";
import { getCuvees } from "@/lib/data";
import { estateLabels, estateNotes } from "@/lib/mock-data/cuvees";
import { useOenoscopeStore } from "@/lib/store";
import { cn } from "@/lib/utils";

type CuveeSelectorProps = {
  compact?: boolean;
  selectedIds?: string[];
  onToggle?: (cuveeId: string) => void;
};

export function CuveeSelector({ compact = false, selectedIds, onToggle }: CuveeSelectorProps) {
  const [open, setOpen] = useState(false);
  const [openEstates, setOpenEstates] = useState<string[]>(["chevalier"]);
  const cuvees = getCuvees();
  const storeSelectedCuvees = useOenoscopeStore((state) => state.selectedCuvees);
  const storeToggleCuvee = useOenoscopeStore((state) => state.toggleCuvee);
  const selectedCuvees = selectedIds ?? storeSelectedCuvees;
  const toggleCuvee = onToggle ?? storeToggleCuvee;
  const selectedNames = cuvees
    .filter((cuvee) => selectedCuvees.includes(cuvee.id))
    .map((cuvee) => shortName(cuvee.name));
  const grouped = (Object.keys(estateLabels) as Array<keyof typeof estateLabels>)
    .map((estate) => ({
      estate,
      label: estateLabels[estate],
      note: estateNotes[estate],
      items: cuvees.filter((cuvee) => cuvee.estate === estate)
    }))
    .filter((group) => group.items.length > 0);
  const triggerLabel =
    selectedNames.length > 3
      ? `${selectedNames.slice(0, 2).join(", ")} +${selectedNames.length - 2}`
      : selectedNames.join(", ");
  const selectedCountByEstate = new Map(
    grouped.map((group) => [
      group.estate,
      group.items.filter((cuvee) => selectedCuvees.includes(cuvee.id)).length
    ])
  );

  function toggleEstate(estate: string) {
    setOpenEstates((current) =>
      current.includes(estate) ? current.filter((item) => item !== estate) : [...current, estate]
    );
  }

  return (
    <div className={cn("relative flex min-w-0 items-center gap-2", compact && "max-w-[360px] xl:max-w-[440px] 2xl:max-w-[520px]")}>
      {!compact ? <span className="mr-1 text-sm text-smoke">Cuvées</span> : null}
      <button
        type="button"
        onClick={() => setOpen((value) => !value)}
        className={cn(
          "inline-flex h-9 min-w-0 items-center justify-between gap-3 rounded-md border border-gold/35 bg-ivory-warm px-3 text-xs font-medium text-bordeaux-ink hover:bg-gold/10",
          compact ? "w-44 xl:w-56 2xl:w-72" : "w-full min-w-64 max-w-[420px]"
        )}
      >
        <span className="inline-flex min-w-0 items-center gap-2">
          <Grape className="h-4 w-4 shrink-0 text-gold" strokeWidth={1.5} />
          <span className="truncate">
            {triggerLabel || "Aucune cuvée"}
          </span>
        </span>
        <ChevronDown className="h-4 w-4 shrink-0 text-gold" strokeWidth={1.5} />
      </button>
      {open ? (
        <div
          className={cn(
            "absolute top-11 z-50 max-h-[min(620px,calc(100vh-7rem))] overflow-y-auto rounded-md border border-gold/35 bg-ivory p-2 shadow-vellum scrollbar-thin",
            compact
              ? "left-1/2 w-[min(430px,calc(100vw-16rem))] -translate-x-1/2"
              : "left-0 w-[min(430px,calc(100vw-4rem))]"
          )}
        >
          {grouped.map((group) => (
            <div key={group.label} className="border-b border-gold/15 py-1 last:border-b-0">
              <button
                type="button"
                onClick={() => toggleEstate(group.estate)}
                className="flex w-full items-center justify-between gap-3 rounded-md px-3 py-3 text-left hover:bg-gold/10"
              >
                <span className="min-w-0">
                  <span className="block font-serif text-lg font-semibold leading-none text-bordeaux-deep">{group.label}</span>
                  <span className="mt-1 block truncate text-[11px] text-smoke">{group.note}</span>
                </span>
                <span className="flex shrink-0 items-center gap-2">
                  <span className="rounded-md border border-gold/30 px-2 py-1 font-mono text-[11px] text-smoke">
                    {selectedCountByEstate.get(group.estate) ?? 0}/{group.items.length}
                  </span>
                  <ChevronDown
                    className={cn(
                      "h-4 w-4 text-gold transition-transform",
                      openEstates.includes(group.estate) && "rotate-180"
                    )}
                    strokeWidth={1.5}
                  />
                </span>
              </button>
              {openEstates.includes(group.estate) ? (
                <div className="space-y-1 pb-2 pl-4 pr-2">
                  {group.items.map((cuvee) => {
                    const active = selectedCuvees.includes(cuvee.id);
                    return (
                      <button
                        key={cuvee.id}
                        type="button"
                        onClick={() => toggleCuvee(cuvee.id)}
                        className={cn(
                          "flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors",
                          active ? "bg-bordeaux-deep text-ivory" : "bg-ivory-warm/70 hover:bg-gold/10"
                        )}
                      >
                        <span>
                          <span className="block font-medium">{shortName(cuvee.name)}</span>
                          <span className={cn("text-xs", active ? "text-gold-pale" : "text-smoke")}>
                            {cuvee.appellation} · {colorLabel(cuvee.color)}
                          </span>
                        </span>
                        {active ? <Check className="h-4 w-4 text-gold-pale" strokeWidth={1.5} /> : null}
                      </button>
                    );
                  })}
                </div>
              ) : null}
            </div>
          ))}
        </div>
      ) : null}
    </div>
  );
}

function shortName(name: string) {
  return name
    .replace("Domaine de Chevalier Rouge", "Chevalier Rouge")
    .replace("Domaine de Chevalier Blanc", "Chevalier Blanc")
    .replace("L'Esprit de Chevalier Rouge", "Esprit Chevalier Rouge")
    .replace("Domaine de la Solitude Rouge", "Solitude Rouge")
    .replace("Domaine de la Solitude Blanc", "Solitude Blanc")
    .replace("Château Lespault-Martillac Rouge", "Lespault-Martillac Rouge")
    .replace("Château Lespault-Martillac Blanc", "Lespault-Martillac Blanc")
    .replace("Clos des Lunes ", "")
    .replace("Château Suau ", "Suau ");
}

function colorLabel(color: string) {
  if (color === "red") return "rouge";
  if (color === "white") return "blanc sec";
  if (color === "rose") return "rosé";
  return "liquoreux";
}