"use client";
import { rename, remove } from "@/lib/actions";

export function HistoryItem({ row }: { row: { id: string; title: string; status: string; created_at: number } }) {
  // The server actions take (previousState, formData) for useActionState; a plain <form action> passes only
  // formData, so bind the unused slot here rather than duplicating two single-arg actions.
  const doRename = (fd: FormData) => rename(null, fd);
  const doRemove = (fd: FormData) => remove(null, fd);
  const when = new Date(row.created_at).toLocaleString(undefined,
    { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
  return <li className="card" style={{ padding: "var(--qai-space-md)", display: "grid", gap: "var(--qai-space-s)" }}>
    <a href={`/app/${row.id}`} style={{ color: "var(--qai-ink)", textDecoration: "none", fontSize: "var(--qai-text-sm)" }}>
      {row.title}{row.status !== "done" && <span className="pill" style={{ marginInlineStart: 8 }}>{row.status}</span>}
    </a>
    <div style={{ display: "flex", gap: "var(--qai-space-s)", alignItems: "center", flexWrap: "wrap" }}>
      <span className="label">{when}</span>
      <form action={doRename} style={{ display: "flex", gap: 4, marginLeft: "auto" }}>
        <input type="hidden" name="id" value={row.id} />
        <input className="field" name="title" aria-label="New name" defaultValue={row.title}
               style={{ width: 90, padding: "4px 6px" }} />
        <button className="btn" style={{ padding: "4px 8px" }}>Save</button>
      </form>
      {/* Delete is the only destructive action in the product: it never fires on a stray click. */}
      <form action={doRemove} onSubmit={(e) => { if (!confirm("Delete this analysis?")) e.preventDefault(); }}>
        <input type="hidden" name="id" value={row.id} />
        <button className="btn" style={{ padding: "4px 8px" }}>Delete</button>
      </form>
    </div>
  </li>;
}