"use client";

import { useRouter } from "next/navigation";
import { useId, useRef, useState, useTransition } from "react";
import { Button } from "@/components/ui";
import { importEntriesAction } from "@/lib/actions/content";
import { Modal } from "./modal";

/** "More" menu of the entries list: Export Entries (CSV) and Import Entries (CSV of drafts). */
export function MoreMenu({ siteId, typeKey, plural, canImport, fieldKeys }: { siteId: string; typeKey: string; plural: string; canImport: boolean; fieldKeys: string[] }) {
  const uid = useId();
  const router = useRouter();
  const menu = useRef<HTMLDetailsElement>(null);
  const [open, setOpen] = useState(false);
  const [text, setText] = useState("");
  const [fileName, setFileName] = useState("");
  const [result, setResult] = useState<{ ok: boolean; text: string; errors: string[] } | null>(null);
  const [pending, start] = useTransition();
  const exportHref = `/api/reports/export?siteId=${encodeURIComponent(siteId)}&entity=${encodeURIComponent(`lib:${typeKey}`)}`;
  const item = "block w-full rounded px-3 py-1.5 text-left text-sm hover:bg-muted";

  const run = () => start(async () => {
    const r = await importEntriesAction({ siteId, typeKey, csv: text });
    if (r.ok) { setResult({ ok: true, text: r.message ?? "Imported", errors: r.data?.errors ?? [] }); router.refresh(); }
    else setResult({ ok: false, text: r.error, errors: [] });
  });

  return (
    <>
      <details ref={menu} className="relative">
        <summary className="inline-flex h-10 cursor-pointer list-none items-center gap-1 rounded-full border-2 border-foreground/70 px-5 text-sm font-semibold hover:bg-muted">More <span aria-hidden>▾</span></summary>
        <div className="absolute right-0 z-10 mt-1 w-44 rounded-md border border-border bg-card p-1 shadow-md">
          {canImport ? <button type="button" className={item} onClick={() => { if (menu.current) menu.current.open = false; setResult(null); setText(""); setFileName(""); setOpen(true); }}>Import Entries</button> : null}
          <a className={item} href={exportHref} onClick={() => { if (menu.current) menu.current.open = false; }}>Export Entries</a>
        </div>
      </details>
      <Modal open={open} onClose={() => setOpen(false)} title={`Import ${plural}`}>
        <div className="space-y-3 text-sm">
          <p>Upload a CSV file. The first row must name the columns and include <code>title</code>. Optional columns: <code>slug</code>{fieldKeys.length ? <> and the field keys <code>{fieldKeys.slice(0, 8).join(", ")}</code></> : null}. Entries are created as drafts (up to 200 at a time).</p>
          <div>
            <label htmlFor={`${uid}-file`} className="mb-1 block text-xs font-medium">CSV file</label>
            <input id={`${uid}-file`} type="file" accept=".csv,text/csv" onChange={async (e) => { const f = e.target.files?.[0]; setResult(null); if (!f) return setText(""); if (f.size > 900_000) { setText(""); setFileName(""); return setResult({ ok: false, text: "That file is too large (limit about 900 KB).", errors: [] }); } setFileName(f.name); setText(await f.text()); }} />
          </div>
          <p role="status" aria-live="polite" className={result ? (result.ok ? "text-success" : "text-danger") : "sr-only"}>{result?.text}</p>
          {result?.errors.length ? <ul className="list-disc pl-5 text-xs text-danger">{result.errors.map((m) => <li key={m}>{m}</li>)}</ul> : null}
          <div className="flex justify-end gap-2">
            <Button variant="secondary" onClick={() => setOpen(false)}>Close</Button>
            <Button disabled={pending || !text} onClick={run}>{pending ? "Importing…" : fileName ? `Import ${fileName}` : "Import"}</Button>
          </div>
        </div>
      </Modal>
    </>
  );
}