Epicure/apps/web/components/recipe/mark-cooked-section.tsx

"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import { ChefHat, Pencil, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { useLocale } from "@/lib/i18n/provider";
import { MarkCookedDialog } from "./mark-cooked-dialog";
import { EditCookLogDialog, type CookLog } from "./edit-cook-log-dialog";

const TOOLTIP_DATE_LIMIT = 8;

export function MarkCookedSection({
  recipeId,
  baseServings,
  initialLogs,
}: {
  recipeId: string;
  baseServings: number;
  initialLogs: CookLog[];
}) {
  const t = useTranslations("recipe");
  const tCommon = useTranslations("common");
  const { locale } = useLocale();
  const [logs, setLogs] = useState<CookLog[]>(initialLogs);
  const [sheetOpen, setSheetOpen] = useState(false);
  const [editingLog, setEditingLog] = useState<CookLog | null>(null);
  const [confirmId, setConfirmId] = useState<string | null>(null);

  function formatDate(dateStr: string): string {
    return new Date(dateStr).toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
  }

  async function handleDelete(id: string) {
    const res = await fetch(`/api/v1/recipes/${recipeId}/cooked/${id}`, { method: "DELETE" });
    if (res.ok) {
      setLogs((prev) => prev.filter((l) => l.id !== id));
      toast.success(t("deleteCookLogSuccess"));
    } else {
      toast.error(t("deleteCookLogFailed"));
    }
  }

  const cookCount = logs.length;
  const lastCookedAt = logs[0]?.cookedAt ?? null;
  const logPendingDelete = logs.find((l) => l.id === confirmId) ?? null;

  return (
    <div className="flex items-center gap-3">
      <MarkCookedDialog
        recipeId={recipeId}
        baseServings={baseServings}
        onLogged={(log) => {
          const entry = { id: log.id, cookedAt: new Date(log.cookedAt).toISOString(), servings: log.servings, notes: null };
          setLogs((prev) => [...prev, entry].sort((a, b) => new Date(b.cookedAt).getTime() - new Date(a.cookedAt).getTime()));
        }}
        trigger={
          <Button type="button" variant="outline" size="sm">
            <ChefHat className="h-3.5 w-3.5" />
            {t("markCookedButton")}
          </Button>
        }
      />
      {cookCount > 0 && (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger render={
              <button
                type="button"
                onClick={() => setSheetOpen(true)}
                className="text-xs text-muted-foreground hover:text-foreground underline-offset-2 hover:underline text-left"
              >
                {cookCount === 1 ? t("markCookedCountSingular") : t("markCookedCountPlural", { count: cookCount })}
                {lastCookedAt && t("markCookedLast", { date: formatDate(lastCookedAt) })}
              </button>
            } />
            <TooltipContent>
              <ul className="space-y-0.5">
                {logs.slice(0, TOOLTIP_DATE_LIMIT).map((l) => (
                  <li key={l.id}>{formatDate(l.cookedAt)}</li>
                ))}
              </ul>
              {logs.length > TOOLTIP_DATE_LIMIT && (
                <p className="text-muted-foreground mt-1">{t("cookLogMore", { count: logs.length - TOOLTIP_DATE_LIMIT })}</p>
              )}
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      )}

      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>{t("cookLogSheetTitle")}</SheetTitle>
          </SheetHeader>
          <div className="p-2 mt-6 space-y-2">
            {logs.length === 0 && <p className="text-sm text-muted-foreground">{t("cookLogEmpty")}</p>}
            {logs.map((log) => (
              <div key={log.id} className="flex items-center justify-between gap-2 border rounded-lg p-3">
                <div className="min-w-0">
                  <p className="text-sm font-medium">{formatDate(log.cookedAt)}</p>
                  {log.servings && <p className="text-xs text-muted-foreground">{t("markCookedServingsLabel")}: {log.servings}</p>}
                  {log.notes && <p className="text-xs text-muted-foreground italic">{log.notes}</p>}
                </div>
                <div className="flex items-center gap-1 shrink-0">
                  <button onClick={() => setEditingLog(log)} aria-label={tCommon("edit")} className="text-muted-foreground hover:text-foreground p-1.5">
                    <Pencil className="h-3.5 w-3.5" />
                  </button>
                  <button onClick={() => setConfirmId(log.id)} aria-label={tCommon("delete")} className="text-muted-foreground hover:text-destructive p-1.5">
                    <Trash2 className="h-3.5 w-3.5" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </SheetContent>
      </Sheet>

      {editingLog && (
        <EditCookLogDialog
          recipeId={recipeId}
          log={editingLog}
          open={!!editingLog}
          onOpenChange={(open) => !open && setEditingLog(null)}
          onSaved={(updated) => {
            setLogs((prev) => [...prev.filter((l) => l.id !== updated.id), updated].sort((a, b) => new Date(b.cookedAt).getTime() - new Date(a.cookedAt).getTime()));
            setEditingLog(null);
          }}
        />
      )}

      <AlertDialog open={confirmId !== null} onOpenChange={(open) => !open && setConfirmId(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{t("deleteCookLogConfirmTitle")}</AlertDialogTitle>
            <AlertDialogDescription>
              {logPendingDelete ? t("deleteCookLogConfirmDescription", { date: formatDate(logPendingDelete.cookedAt) }) : ""}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{tCommon("cancel")}</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => {
                if (confirmId) void handleDelete(confirmId);
                setConfirmId(null);
              }}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              {tCommon("delete")}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}