Epicure/apps/web/components/meal-plan/shopping-list-view.tsx

"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { cn } from "@/lib/utils";
import { Check, Package, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { hasQuantity } from "@/lib/fractions";

type Item = {
  id: string;
  rawName: string;
  quantity: string | null;
  unit: string | null;
  aisle: string | null;
  checked: boolean;
};

export function ShoppingListView({
  listId,
  initialItems,
  readOnly = false,
}: {
  listId: string;
  initialItems: Item[];
  readOnly?: boolean;
}) {
  const t = useTranslations("mealPlan");
  const tShopping = useTranslations("shoppingLists");
  const [items, setItems] = useState<Item[]>(initialItems);
  const [movingToPantry, setMovingToPantry] = useState(false);

  const checkedItems = items.filter((i) => i.checked);

  async function moveToPantry() {
    if (checkedItems.length === 0) return;
    setMovingToPantry(true);
    try {
      const res = await fetch("/api/v1/pantry/bulk", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          items: checkedItems.map((i) => ({
            rawName: i.rawName,
            quantity: i.quantity ?? undefined,
            unit: i.unit ?? undefined,
          })),
        }),
      });
      if (!res.ok) { toast.error(t("moveToPantryFailed")); return; }
      toast.success(t("addedToPantry", { count: checkedItems.length }));
    } finally {
      setMovingToPantry(false);
    }
  }

  async function toggleItem(item: Item) {
    if (readOnly) return;
    const next = !item.checked;
    setItems((prev) => prev.map((i) => i.id === item.id ? { ...i, checked: next } : i));
    await fetch(`/api/v1/shopping-lists/${listId}/items/${item.id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ checked: next }),
    });
  }

  const grouped = items.reduce<Record<string, Item[]>>((acc, item) => {
    const key = item.aisle ?? t("aisleOther");
    (acc[key] ??= []).push(item);
    return acc;
  }, {});

  const checkedCount = items.filter((i) => i.checked).length;

  if (items.length === 0) {
    return <p className="text-muted-foreground text-sm">{t("listEmptyState")}</p>;
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <p className="text-sm text-muted-foreground">{tShopping("checkedCount", { checked: checkedCount, total: items.length })}</p>
        {checkedCount > 0 && (
          <Button size="sm" variant="outline" onClick={moveToPantry} disabled={movingToPantry}>
            {movingToPantry ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Package className="h-3.5 w-3.5" />}
            {t("moveToPantry", { count: checkedCount })}
          </Button>
        )}
      </div>

      {Object.entries(grouped).sort(([a], [b]) => a.localeCompare(b)).map(([aisle, aisleItems]) => (
        <div key={aisle} className="space-y-2">
          {Object.keys(grouped).length > 1 && (
            <h2 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">{aisle}</h2>
          )}
          <div className="rounded-xl border divide-y">
            {aisleItems.map((item) => (
              <button
                key={item.id}
                onClick={() => toggleItem(item)}
                disabled={readOnly}
                className="w-full flex items-center gap-3 px-4 py-3 hover:bg-muted/30 text-left transition-colors disabled:cursor-default disabled:hover:bg-transparent"
              >
                <div className={cn(
                  "h-5 w-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors",
                  item.checked ? "bg-primary border-primary" : "border-input"
                )}>
                  {item.checked && <Check className="h-3 w-3 text-primary-foreground" />}
                </div>
                <span className={cn("flex-1 text-sm", item.checked && "line-through text-muted-foreground")}>
                  {item.rawName}
                </span>
                {(hasQuantity(item.quantity) || item.unit) && (
                  <span className={cn("text-xs text-muted-foreground tabular-nums shrink-0", item.checked && "opacity-50")}>
                    {hasQuantity(item.quantity) ? item.quantity : ""}{item.unit ? ` ${item.unit}` : ""}
                  </span>
                )}
              </button>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}