"use client";

import { Bike, ShoppingBasket, Store } from "lucide-react";
import { siloStores, type FulfillMode } from "@/data/silo-catalog";
import { useFulfillment } from "@/context/fulfillment-context";
import { cn } from "@/lib/cn";

const modes: { id: FulfillMode; label: string; hint: string; icon: typeof Bike }[] = [
  { id: "delivery", label: "Delivery", hint: "To your stoop", icon: Bike },
  { id: "pickup", label: "Pickup", hint: "Curb window", icon: ShoppingBasket },
  { id: "aisle", label: "Aisle walk", hint: "Shop the crib", icon: Store },
];

export function FulfillmentButton() {
  const { mode, store, zip, openChooser } = useFulfillment();
  const label =
    mode === "delivery"
      ? `Delivery · ${zip}`
      : mode === "pickup"
        ? `Pickup · ${store.code}`
        : `Aisle · open ${store.hours}`;

  return (
    <button
      type="button"
      onClick={openChooser}
      className="btn-bin btn-bin-ghost"
    >
      <span className="text-[10px] font-bold uppercase tracking-[0.14em] text-[var(--straw)]">
        Crib
      </span>
      <span className="truncate text-xs font-semibold text-[var(--on-brand)]">{label}</span>
    </button>
  );
}

export function FulfillmentModal() {
  const {
    chooserOpen,
    closeChooser,
    mode,
    setMode,
    store,
    setStore,
    zip,
    setZip,
  } = useFulfillment();

  if (!chooserOpen) return null;

  return (
    <div className="fixed inset-0 z-[80] flex items-end justify-center sm:items-center">
      <button
        type="button"
        className="absolute inset-0 bg-[color-mix(in_srgb,var(--brand-blue-deep)_55%,transparent)]"
        aria-label="Close"
        onClick={closeChooser}
      />
      <div className="relative z-10 w-full max-w-lg overflow-hidden rounded-t-2xl border border-border bg-card sm:rounded-sm">
        <div className="silo-chrome border-b border-border bg-[var(--brand-blue-deep)] px-5 py-4 text-[var(--on-brand)]">
          <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-[var(--straw)]">
            How do you want the bin?
          </p>
          <h2 className="font-serif text-2xl">Prices follow the crib you pick.</h2>
        </div>
        <div className="grid grid-cols-3 gap-2 p-4">
          {modes.map((item) => {
            const Icon = item.icon;
            const active = mode === item.id;
            return (
              <button
                key={item.id}
                type="button"
                onClick={() => setMode(item.id)}
                className={cn(
                  "crib-chip flex flex-col items-center gap-1 border px-2 py-3 text-center",
                  active
                    ? "border-[var(--spruce)] bg-[color-mix(in_srgb,var(--spruce)_12%,var(--card))]"
                    : "border-border bg-background",
                )}
              >
                <Icon className="h-5 w-5 text-[var(--spruce-ink)]" />
                <span className="text-xs font-bold">{item.label}</span>
                <span className="text-[10px] text-muted">{item.hint}</span>
              </button>
            );
          })}
        </div>
        <div className="space-y-3 px-4 pb-5">
          <label className="block text-xs font-semibold text-muted">
            ZIP
            <input
              value={zip}
              onChange={(e) => setZip(e.target.value)}
              className="mt-1 h-10 w-full rounded-sm border border-border bg-background px-3 text-sm"
            />
          </label>
          <div className="space-y-2">
            {siloStores.map((item) => (
              <button
                key={item.id}
                type="button"
                onClick={() => {
                  setStore(item);
                  setZip(item.zip);
                }}
                className={cn(
                  "flex w-full items-start justify-between rounded-sm border px-3 py-2.5 text-left",
                  store.id === item.id
                    ? "border-[var(--spruce)] bg-surface"
                    : "border-border",
                )}
              >
                <span>
                  <span className="block text-sm font-semibold">
                    {item.name} · {item.code}
                  </span>
                  <span className="text-xs text-muted">
                    {item.address}, {item.city} {item.zip}
                  </span>
                </span>
                <span className="text-[11px] text-muted">{item.hours}</span>
              </button>
            ))}
          </div>
          <button
            type="button"
            onClick={closeChooser}
            className="btn-bin btn-bin-wide"
          >
            Shop this crib
          </button>
        </div>
      </div>
    </div>
  );
}