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

"use client";

import { useState } from "react";
import { Plus, Trash2, AlertTriangle } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

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

  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("Failed to add"); 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("Failed to remove");
  }

  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="Item name" className="flex-1 min-w-[160px]" onKeyDown={(e) => e.key === "Enter" && add()} />
        <Input value={quantity} onChange={(e) => setQuantity(e.target.value)} placeholder="Qty" className="w-20" />
        <Input value={unit} onChange={(e) => setUnit(e.target.value)} placeholder="Unit" 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" /> Add
        </Button>
      </div>

      {/* Item list */}
      {items.length === 0 ? (
        <p className="text-muted-foreground text-sm">No pantry items yet.</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" />Expired</span>}
                    {expiring && !expired && <span className="text-xs text-orange-500 flex items-center gap-1"><AlertTriangle className="h-3 w-3" />Expires in {days}d</span>}
                  </div>
                  {item.expiresAt && !expired && !expiring && (
                    <p className="text-xs text-muted-foreground">Expires {new Date(item.expiresAt).toLocaleDateString()}</p>
                  )}
                </div>
                <button onClick={() => remove(item.id)} className="text-muted-foreground hover:text-destructive transition-colors">
                  <Trash2 className="h-4 w-4" />
                </button>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}