Epicure/apps/web/components/meal-plan/pantry-manager.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { Plus, Trash2, AlertTriangle, Package, Pencil, ChevronDown, Merge } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import { formatQuantity, hasQuantity } from "@/lib/fractions";
import { PantryScanDialog } from "@/components/pantry/pantry-scan-dialog";
import { PantryItemDialog, type PantryItem } from "@/components/pantry/pantry-item-dialog";
import { EmptyState } from "@/components/shared/empty-state";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

const OTHER_KEY = "__other__";

function daysUntilExpiry(dateStr: string): number {
  const diff = new Date(dateStr).getTime() - Date.now();
  return Math.ceil(diff / (1000 * 60 * 60 * 24));
}

export function PantryManager({ initialItems }: { initialItems: PantryItem[] }) {
  const t = useTranslations("pantry");
  const tShopping = useTranslations("shoppingLists");
  const tCommon = useTranslations("common");
  const router = useRouter();
  const [items, setItems] = useState<PantryItem[]>(initialItems);
  const [name, setName] = useState("");
  const [quantity, setQuantity] = useState("");
  const [unit, setUnit] = useState("");
  const [expiresAt, setExpiresAt] = useState("");
  const [adding, setAdding] = useState(false);
  const [confirmId, setConfirmId] = useState<string | null>(null);
  const [editingItem, setEditingItem] = useState<PantryItem | null>(null);
  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
  const [merging, setMerging] = useState(false);

  async function mergeDuplicates() {
    setMerging(true);
    try {
      const res = await fetch("/api/v1/pantry/merge-duplicates", { method: "POST" });
      if (!res.ok) { toast.error(t("mergeDuplicatesFailed")); return; }
      const { removed } = await res.json() as { mergedGroups: number; removed: number };
      if (removed === 0) toast.success(t("mergeDuplicatesNoneFound"));
      else toast.success(t("mergeDuplicatesSuccess", { count: removed }));
      router.refresh();
    } finally {
      setMerging(false);
    }
  }

  async function add() {
    if (!name.trim()) return;
    setAdding(true);
    try {
      const res = await fetch("/api/v1/pantry", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          rawName: name.trim(),
          quantity: quantity.trim() || undefined,
          unit: unit.trim() || undefined,
          expiresAt: expiresAt ? new Date(expiresAt).toISOString() : undefined,
        }),
      });
      if (!res.ok) { toast.error(t("addFailed")); return; }
      const { id } = await res.json() as { id: string };
      setItems((prev) => [
        ...prev,
        { id, rawName: name.trim(), quantity: quantity || null, unit: unit || null, notes: null, aisle: null, expiresAt: expiresAt ? new Date(expiresAt).toISOString() : null },
      ]);
      setName(""); setQuantity(""); setUnit(""); setExpiresAt("");
    } finally {
      setAdding(false);
    }
  }

  async function remove(id: string) {
    const res = await fetch(`/api/v1/pantry/${id}`, { method: "DELETE" });
    if (res.ok) setItems((prev) => prev.filter((i) => i.id !== id));
    else toast.error(t("removeFailed"));
  }

  function toggleCollapsed(key: string) {
    setCollapsed((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key); else next.add(key);
      return next;
    });
  }

  const itemPendingDelete = items.find((i) => i.id === confirmId) ?? null;

  const sortWithinGroup = (a: PantryItem, b: PantryItem) => {
    if (a.expiresAt && b.expiresAt) return new Date(a.expiresAt).getTime() - new Date(b.expiresAt).getTime();
    if (a.expiresAt) return -1;
    if (b.expiresAt) return 1;
    return a.rawName.localeCompare(b.rawName);
  };

  const grouped = new Map<string, PantryItem[]>();
  for (const item of items) {
    const key = item.aisle ?? OTHER_KEY;
    const group = grouped.get(key) ?? [];
    group.push(item);
    grouped.set(key, group);
  }
  for (const group of grouped.values()) group.sort(sortWithinGroup);

  function categoryLabel(key: string): string {
    return key === OTHER_KEY ? tShopping("aisleOther") : tShopping(`categories.${key}`);
  }

  const sortedGroupKeys = [...grouped.keys()].sort((a, b) => categoryLabel(a).localeCompare(categoryLabel(b)));
  const showGroupHeaders = grouped.size > 1;

  return (
    <div className="space-y-6 max-w-2xl">
      {/* Add form */}
      <div className="flex gap-2 flex-wrap">
        <Input value={name} onChange={(e) => setName(e.target.value)} placeholder={t("itemNamePlaceholder")} className="flex-1 min-w-[160px]" onKeyDown={(e) => e.key === "Enter" && add()} />
        <Input value={quantity} onChange={(e) => setQuantity(e.target.value)} placeholder={t("qtyPlaceholder")} className="w-20" />
        <Input value={unit} onChange={(e) => setUnit(e.target.value)} placeholder={t("unitPlaceholder")} className="w-20" />
        <Input type="date" value={expiresAt} onChange={(e) => setExpiresAt(e.target.value)} className="w-36" />
        <Button onClick={add} disabled={!name.trim() || adding} size="sm">
          <Plus className="h-4 w-4" /> {t("add")}
        </Button>
        <PantryScanDialog onAdded={() => router.refresh()} />
        <Button variant="outline" size="sm" onClick={() => { void mergeDuplicates(); }} disabled={merging}>
          <Merge className="h-4 w-4" /> {t("mergeDuplicates")}
        </Button>
      </div>

      {/* Item list */}
      {items.length === 0 ? (
        <EmptyState icon={Package} title={t("empty")} description={t("emptyDescription")} compact />
      ) : (
        <div className="space-y-4">
          {sortedGroupKeys.map((key) => {
            const groupItems = grouped.get(key)!;
            const isCollapsed = collapsed.has(key);
            return (
              <div key={key} className="rounded-xl border overflow-hidden">
                {showGroupHeaders && (
                  <button
                    type="button"
                    onClick={() => toggleCollapsed(key)}
                    className="w-full flex items-center justify-between gap-2 px-4 py-2 bg-muted/40 hover:bg-muted/60 transition-colors text-left"
                  >
                    <span className="text-sm font-medium">{categoryLabel(key)}</span>
                    <span className="flex items-center gap-2">
                      <span className="text-xs text-muted-foreground">{groupItems.length}</span>
                      <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform", isCollapsed && "-rotate-90")} />
                    </span>
                  </button>
                )}
                {!isCollapsed && (
                  <div className="divide-y">
                    {groupItems.map((item) => {
                      const days = item.expiresAt ? daysUntilExpiry(item.expiresAt) : null;
                      const expiring = days !== null && days <= 3;
                      const expired = days !== null && days < 0;
                      return (
                        <div key={item.id} className="flex items-center gap-3 px-4 py-3 hover:bg-muted/30">
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-2 flex-wrap">
                              <span className="font-medium text-sm">{item.rawName}</span>
                              {hasQuantity(item.quantity) && (
                                <span className="text-xs text-muted-foreground">{formatQuantity(parseFloat(item.quantity!))}{item.unit ? ` ${item.unit}` : ""}</span>
                              )}
                              {expired && <span className="text-xs text-destructive flex items-center gap-1"><AlertTriangle className="h-3 w-3" />{t("expired")}</span>}
                              {expiring && !expired && <span className="text-xs text-orange-500 flex items-center gap-1"><AlertTriangle className="h-3 w-3" />{t("expiresInDays", { days })}</span>}
                            </div>
                            {item.expiresAt && !expired && !expiring && (
                              <p className="text-xs text-muted-foreground">{t("expiresOn", { date: new Date(item.expiresAt).toLocaleDateString() })}</p>
                            )}
                            {item.notes && <p className="text-xs text-muted-foreground italic mt-0.5">{item.notes}</p>}
                          </div>
                          <button onClick={() => setEditingItem(item)} aria-label={t("editItem")} className="text-muted-foreground hover:text-foreground transition-colors">
                            <Pencil className="h-4 w-4" />
                          </button>
                          <button onClick={() => setConfirmId(item.id)} className="text-muted-foreground hover:text-destructive transition-colors">
                            <Trash2 className="h-4 w-4" />
                          </button>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}

      <AlertDialog open={confirmId !== null} onOpenChange={(open) => !open && setConfirmId(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{t("removeConfirmTitle")}</AlertDialogTitle>
            <AlertDialogDescription>
              {itemPendingDelete ? t("removeConfirmDescription", { name: itemPendingDelete.rawName }) : ""}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{tCommon("cancel")}</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => {
                if (confirmId) void remove(confirmId);
                setConfirmId(null);
              }}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              {tCommon("delete")}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {editingItem && (
        <PantryItemDialog
          item={editingItem}
          open={!!editingItem}
          onOpenChange={(open) => !open && setEditingItem(null)}
          onSaved={(updated) => {
            setItems((prev) => prev.map((i) => (i.id === updated.id ? updated : i)));
            setEditingItem(null);
          }}
        />
      )}
    </div>
  );
}