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, Sparkles, Loader2, GripVertical } 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 { guessAisle, GROCERY_CATEGORIES, type GroceryCategory } from "@/lib/grocery-categories";
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";
import {
  DndContext,
  type DragEndEvent,
  PointerSensor,
  useSensor,
  useSensors,
  useDraggable,
  useDroppable,
} from "@dnd-kit/core";

const OTHER_KEY = "__other__";
const ALL_CATEGORY_KEYS: string[] = [...GROCERY_CATEGORIES, OTHER_KEY];

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

function DroppableCategory({ groupKey, children }: { groupKey: string; children: React.ReactNode }) {
  const { setNodeRef, isOver } = useDroppable({ id: groupKey });
  return (
    <div ref={setNodeRef} className={cn(isOver && "bg-primary/5 outline-2 outline-dashed outline-primary/40 -outline-offset-2")}>
      {children}
    </div>
  );
}

function DraggableItemRow({ item, children }: { item: PantryItem; children: React.ReactNode }) {
  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: item.id });
  const style = transform ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, zIndex: 10 } : undefined;
  return (
    <div ref={setNodeRef} style={style} className={cn("flex items-center gap-2 px-4 py-3 hover:bg-muted/30 bg-background", isDragging && "opacity-50")}>
      <button {...attributes} {...listeners} className="text-muted-foreground/50 hover:text-muted-foreground cursor-grab touch-none shrink-0" aria-hidden>
        <GripVertical className="h-4 w-4" />
      </button>
      {children}
    </div>
  );
}

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 [merging, setMerging] = useState(false);
  const [autoCategorizing, setAutoCategorizing] = useState(false);
  const [collapsed, setCollapsed] = useState<Set<string>>(() => {
    const initialByKey = new Map<string, number>();
    for (const item of initialItems) {
      const key = item.aisle ?? OTHER_KEY;
      initialByKey.set(key, (initialByKey.get(key) ?? 0) + 1);
    }
    return new Set(ALL_CATEGORY_KEYS.filter((key) => !initialByKey.get(key)));
  });
  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }));

  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 autoCategorize() {
    const targets = items.filter((i) => !i.aisle);
    const updates = targets
      .map((i) => ({ id: i.id, aisle: guessAisle(i.rawName) }))
      .filter((u): u is { id: string; aisle: GroceryCategory } => u.aisle !== null);

    if (updates.length === 0) {
      toast.error(tShopping("autoCategorizeNoneFound"));
      return;
    }

    setAutoCategorizing(true);
    try {
      await Promise.all(updates.map((u) =>
        fetch(`/api/v1/pantry/${u.id}`, {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ aisle: u.aisle }),
        })
      ));
      const byId = new Map(updates.map((u) => [u.id, u.aisle]));
      setItems((prev) => prev.map((i) => (byId.has(i.id) ? { ...i, aisle: byId.get(i.id)! } : i)));
      setCollapsed((prev) => {
        const next = new Set(prev);
        for (const u of updates) next.delete(u.aisle);
        return next;
      });
      toast.success(tShopping("autoCategorizeSuccess", { count: updates.length }));
    } finally {
      setAutoCategorizing(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 },
      ]);
      setCollapsed((prev) => { const next = new Set(prev); next.delete(OTHER_KEY); return next; });
      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"));
  }

  async function moveToCategory(id: string, newKey: string) {
    const newAisle = newKey === OTHER_KEY ? null : newKey;
    setItems((prev) => prev.map((i) => (i.id === id ? { ...i, aisle: newAisle } : i)));
    const res = await fetch(`/api/v1/pantry/${id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ aisle: newAisle }),
    });
    if (!res.ok) toast.error(t("editFailed"));
  }

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;
    if (!over) return;
    const item = items.find((i) => i.id === active.id);
    if (!item) return;
    const currentKey = item.aisle ?? OTHER_KEY;
    const destKey = String(over.id);
    if (currentKey === destKey) return;
    setCollapsed((prev) => { const next = new Set(prev); next.delete(destKey); return next; });
    void moveToCategory(item.id, destKey);
  }

  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 key of ALL_CATEGORY_KEYS) grouped.set(key, []);
  for (const item of items) {
    const key = item.aisle ?? OTHER_KEY;
    if (!grouped.has(key)) grouped.set(key, []);
    grouped.get(key)!.push(item);
  }
  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 uncategorizedCount = items.filter((i) => !i.aisle).length;

  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()} />
        {uncategorizedCount > 0 && (
          <Button variant="ghost" size="sm" onClick={() => { void autoCategorize(); }} disabled={autoCategorizing}>
            {autoCategorizing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4" />} {tShopping("autoCategorize")}
          </Button>
        )}
        <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 />
      ) : (
        <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
          <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">
                  <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 && (
                    <DroppableCategory groupKey={key}>
                      {groupItems.length === 0 ? (
                        <p className="px-4 py-3 text-xs text-muted-foreground italic">{t("categoryEmptyDropHint")}</p>
                      ) : (
                        <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 (
                              <DraggableItemRow key={item.id} item={item}>
                                <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 shrink-0">
                                  <Pencil className="h-4 w-4" />
                                </button>
                                <button onClick={() => setConfirmId(item.id)} className="text-muted-foreground hover:text-destructive transition-colors shrink-0">
                                  <Trash2 className="h-4 w-4" />
                                </button>
                              </DraggableItemRow>
                            );
                          })}
                        </div>
                      )}
                    </DroppableCategory>
                  )}
                </div>
              );
            })}
          </div>
        </DndContext>
      )}

      <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>
  );
}