import { createFileRoute, Link } from "@tanstack/react-router";
import { Check, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useMounted } from "@/components/shell";
import { useKitchen } from "@/lib/store";
import { bnNum } from "@/lib/utils";

export const Route = createFileRoute("/list")({ component: BazaarPage });

function BazaarPage() {
  const mounted = useMounted();
  const bazaar = useKitchen((s) => s.bazaar);
  const toggle = useKitchen((s) => s.toggleBazaar);
  const remove = useKitchen((s) => s.removeBazaar);
  const clearChecked = useKitchen((s) => s.clearChecked);

  const items = mounted ? bazaar : [];
  const remaining = items.filter((x) => !x.checked).length;

  return (
    <div className="heshel-enter mx-auto max-w-xl">
      <header className="flex items-end justify-between gap-4">
        <div>
          <h1 className="font-display text-4xl font-semibold">বাজার</h1>
          <p className="mt-1 text-sm text-muted">
            {items.length === 0
              ? "তালিকা খালি"
              : `${bnNum(remaining)}টি বাকি, ${bnNum(items.length)}টি মোট`}
          </p>
        </div>
        {items.some((x) => x.checked) ? (
          <Button type="button" variant="ghost" size="sm" onClick={clearChecked}>
            কেনাগুলো সরান
          </Button>
        ) : null}
      </header>

      {items.length === 0 ? (
        <div className="mt-10 rounded-[var(--radius-lg)] bg-surface px-6 py-12 text-center shadow-[var(--shadow-border)]">
          <p className="text-ink-soft">বাজারের তালিকা খালি।</p>
          <p className="mt-1 text-sm text-muted">কোনো রেসিপি খুলে উপকরণ যোগ করুন।</p>
          <Button asChild className="mt-6">
            <Link to="/">রেসিপি দেখুন</Link>
          </Button>
        </div>
      ) : (
        <ul className="mt-6 divide-y divide-line overflow-hidden rounded-[var(--radius-lg)] bg-surface shadow-[var(--shadow-border)]">
          {items.map((item) => (
            <li key={item.id} className="flex items-center gap-2 pr-2">
              <button
                type="button"
                onClick={() => toggle(item.id)}
                className="flex min-h-14 flex-1 items-center gap-3 px-4 text-left"
              >
                <span
                  className={`flex size-6 shrink-0 items-center justify-center rounded-[var(--radius-xs)] border ${
                    item.checked
                      ? "border-accent bg-accent text-accent-fg"
                      : "border-line bg-surface"
                  }`}
                >
                  {item.checked ? <Check className="size-3.5" /> : null}
                </span>
                <span className="flex min-w-0 flex-1 flex-col">
                  <span className={item.checked ? "text-muted line-through" : ""}>{item.item}</span>
                  <span className="text-xs text-faint">{item.qty}</span>
                </span>
              </button>
              <button
                type="button"
                onClick={() => remove(item.id)}
                className="inline-flex size-11 items-center justify-center text-faint hover:text-spice"
                aria-label="মুছে ফেলুন"
              >
                <Trash2 className="size-4" />
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}