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

"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { Plus, Trash2, AlertTriangle } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

type PantryItem = {
  id: string;
  rawName: string;
  quantity: string | null;
  unit: string | null;
  expiresAt: string | null;
};

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 tCommon = useTranslations("common");
  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);

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

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

  const sorted = [...items].sort((a, b) => {
    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);
  });

  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>
      </div>

      {/* Item list */}
      {items.length === 0 ? (
        <p className="text-muted-foreground text-sm">{t("empty")}</p>
      ) : (
        <div className="rounded-xl border divide-y">
          {sorted.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">
                    <span className="font-medium text-sm">{item.rawName}</span>
                    {item.quantity && <span className="text-xs text-muted-foreground">{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>
                  )}
                </div>
                <button onClick={() => setConfirmId(item.id)} className="text-muted-foreground hover:text-destructive transition-colors">
                  <Trash2 className="h-4 w-4" />
                </button>
              </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>
    </div>
  );
}