"use client";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useToast } from "@/components/Toast";
import { type ApiError, api } from "@/lib/client/api";

export function PublishButton({
  runId,
  papers,
}: {
  runId: string;
  papers: Array<{ id: string; publicId: string; title: string }>;
}) {
  const router = useRouter();
  const toast = useToast();
  const [open, setOpen] = useState(false);
  const [busy, setBusy] = useState(false);
  const [corrects, setCorrects] = useState("");
  const [changelog, setChangelog] = useState("");
  const go = async () => {
    setBusy(true);
    try {
      const r = await api<{ publicId: string; slug: string }>("/api/admin/publications", {
        json: { runId, correctsPaperId: corrects || undefined, changelog: changelog || undefined },
      });
      toast.push("success", `Published ${r.publicId}.`);
      router.refresh();
    } catch (e) {
      toast.push("error", (e as ApiError).message);
    } finally {
      setBusy(false);
      setOpen(false);
    }
  };
  return open ? (
    <div className="space-y-2 text-xs">
      <label className="block">
        Publish as
        <select className="input mt-1" value={corrects} onChange={(e) => setCorrects(e.target.value)}>
          <option value="">New paper</option>
          {papers.map((p) => (
            <option key={p.id} value={p.id}>
              Correction of {p.publicId} — {p.title}
            </option>
          ))}
        </select>
      </label>
      {corrects && (
        <label className="block">
          Changelog
          <input className="input mt-1" value={changelog} onChange={(e) => setChangelog(e.target.value)} />
        </label>
      )}
      <div className="flex gap-1">
        <button type="button" className="btn btn-sm btn-primary" disabled={busy} onClick={go}>
          Confirm publish
        </button>
        <button type="button" className="btn btn-sm" onClick={() => setOpen(false)}>
          Cancel
        </button>
      </div>
    </div>
  ) : (
    <button type="button" className="btn btn-sm btn-primary" onClick={() => setOpen(true)}>
      Publish…
    </button>
  );
}

export function PaperActions({
  id,
  status,
  title,
  abstract,
  keywords,
}: {
  id: string;
  status: string;
  title: string;
  abstract: string;
  keywords: string[];
}) {
  const router = useRouter();
  const toast = useToast();
  const [mode, setMode] = useState<null | "retract" | "withdraw" | "meta">(null);
  const [f, setF] = useState({
    reason: "",
    notice: "",
    title,
    abstract,
    keywords: keywords.join(", "),
    note: "",
  });
  const send = async (path: string, json: unknown, msg: string) => {
    try {
      await api(path, { json });
      toast.push("success", msg);
      setMode(null);
      router.refresh();
    } catch (e) {
      toast.push("error", (e as ApiError).message);
    }
  };
  if (!mode)
    return (
      <div className="flex gap-1">
        <button type="button" className="btn btn-sm" onClick={() => setMode("meta")}>
          Edit metadata
        </button>
        {status !== "retracted" && (
          <button type="button" className="btn btn-sm btn-danger" onClick={() => setMode("retract")}>
            Retract
          </button>
        )}
        <button type="button" className="btn btn-sm btn-danger" onClick={() => setMode("withdraw")}>
          Withdraw files
        </button>
      </div>
    );
  return (
    <div className="space-y-1 text-xs" style={{ minWidth: "18rem" }}>
      {mode === "retract" && (
        <>
          <input
            className="input"
            placeholder="Reason (internal)"
            value={f.reason}
            onChange={(e) => setF({ ...f, reason: e.target.value })}
          />
          <textarea
            className="input"
            placeholder="Public retraction notice"
            value={f.notice}
            onChange={(e) => setF({ ...f, notice: e.target.value })}
          />
          <button
            type="button"
            className="btn btn-sm btn-danger"
            onClick={() =>
              confirm("Retract permanently? A public tombstone remains.") &&
              send(
                `/api/admin/publications/${id}/retract`,
                { reason: f.reason, notice: f.notice },
                "Retracted.",
              )
            }
          >
            Confirm retraction
          </button>
        </>
      )}
      {mode === "withdraw" && (
        <>
          <input
            className="input"
            placeholder="Reason (recorded)"
            value={f.reason}
            onChange={(e) => setF({ ...f, reason: e.target.value })}
          />
          <button
            type="button"
            className="btn btn-sm btn-danger"
            onClick={() =>
              confirm("Withdraw artifact delivery? The page remains with a notice.") &&
              send(`/api/admin/publications/${id}/withdraw`, { reason: f.reason }, "Artifacts withdrawn.")
            }
          >
            Confirm withdrawal
          </button>
        </>
      )}
      {mode === "meta" && (
        <>
          <input
            className="input"
            value={f.title}
            onChange={(e) => setF({ ...f, title: e.target.value })}
            aria-label="Title"
          />
          <textarea
            className="input"
            value={f.abstract}
            onChange={(e) => setF({ ...f, abstract: e.target.value })}
            aria-label="Abstract"
            rows={3}
          />
          <input
            className="input"
            value={f.keywords}
            onChange={(e) => setF({ ...f, keywords: e.target.value })}
            aria-label="Keywords, comma separated"
          />
          <input
            className="input"
            placeholder="Change note (required)"
            value={f.note}
            onChange={(e) => setF({ ...f, note: e.target.value })}
          />
          <button
            type="button"
            className="btn btn-sm btn-primary"
            onClick={() =>
              send(
                `/api/admin/publications/${id}/metadata`,
                {
                  title: f.title,
                  abstract: f.abstract,
                  keywords: f.keywords
                    .split(",")
                    .map((k) => k.trim())
                    .filter(Boolean),
                  note: f.note,
                },
                "Metadata updated as a versioned change.",
              )
            }
          >
            Save
          </button>
        </>
      )}
      <button type="button" className="btn btn-sm" onClick={() => setMode(null)}>
        Cancel
      </button>
    </div>
  );
}