/* global React */
// ============================================================
//  PDF export — clones the live, already-paginated preview sheets
//  into a print root and opens the browser's print dialog set to
//  true Letter size. The result is pixel-identical to the preview.
// ============================================================
const { useState: useStatePR, useEffect: useEffectPR, useRef: useRefPR } = React;

// Collect the rendered page nodes from a preview container, in order.
function gatherPages(node) {
  if (!node) return [];
  const pages = [];
  node.querySelectorAll(".pg-sheet").forEach((s) => pages.push(s));   // résumé pages
  node.querySelectorAll(".cover").forEach((c) => pages.push(c));      // appended cover letter
  if (!pages.length) node.querySelectorAll(".paper").forEach((p) => pages.push(p)); // fallback
  return pages;
}

// Build (or rebuild) the hidden print root from cloned page nodes.
function buildPrintRoot(pages) {
  const old = document.getElementById("print-root");
  if (old) old.remove();
  const root = document.createElement("div");
  root.id = "print-root";
  pages.forEach((p) => {
    const page = document.createElement("div");
    page.className = "print-page";
    const scale = document.createElement("div");
    scale.className = "print-scale";
    scale.appendChild(p.cloneNode(true));
    page.appendChild(scale);
    root.appendChild(page);
  });
  document.body.appendChild(root);
  return root;
}

function sanitizeFileName(name) {
  return (name || "resume").replace(/[\\/:*?"<>|]+/g, "").replace(/\s+/g, " ").trim() || "resume";
}

// Run the print flow: clone → set title (drives the default PDF filename) → print → cleanup.
function runPrint(getNode, fileName) {
  const node = typeof getNode === "function" ? getNode() : getNode;
  const pages = gatherPages(node);
  if (!pages.length) { window.alert("Nothing to export yet — add some content first."); return; }
  buildPrintRoot(pages);
  const prevTitle = document.title;
  document.title = sanitizeFileName(fileName);
  let done = false;
  const cleanup = () => {
    if (done) return; done = true;
    const r = document.getElementById("print-root");
    if (r) r.remove();
    document.title = prevTitle;
    window.removeEventListener("afterprint", cleanup);
  };
  window.addEventListener("afterprint", cleanup);
  // fonts + layout settle, then print; afterprint (or the fallback) tidies up
  setTimeout(() => { window.print(); setTimeout(cleanup, 1500); }, 80);
}

// ---- Export modal ----------------------------------------------------------
function ExportModal({ defaultName, kind, getNode, onClose, reason, isPro }) {
  const [name, setName] = useStatePR(defaultName || "resume");
  const [count, setCount] = useStatePR(0);
  const inputRef = useRefPR(null);

  useEffectPR(() => {
    const node = typeof getNode === "function" ? getNode() : getNode;
    setCount(gatherPages(node).length || 1);
    const t = setTimeout(() => { if (inputRef.current) { inputRef.current.focus(); inputRef.current.select(); } }, 60);
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => { clearTimeout(t); document.removeEventListener("keydown", onKey); };
  }, []);

  const go = () => { onClose(); setTimeout(() => runPrint(getNode, name), 30); };

  return (
    <div className="export-modal-scrim" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="export-modal" role="dialog" aria-modal="true">
        <div className="export-modal-h">
          <span className="export-modal-ic"><Icons.download size={19} /></span>
          <div>
            <h3>Export PDF</h3>
            <p>Print-ready, exactly as you see it.</p>
          </div>
        </div>

        <div className="export-meta">
          <div className="export-pill"><b>{count}</b><span>{count === 1 ? "Page" : "Pages"}</span></div>
          <div className="export-pill"><b>Letter</b><span>8.5 × 11 in</span></div>
          <div className="export-pill"><b>Vector</b><span>Crisp text</span></div>
        </div>

        <div className="export-field">
          <label>File name</label>
          <div className="fld-wrap">
            <input ref={inputRef} value={name} onChange={(e) => setName(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter") go(); }} placeholder="My résumé" />
            <span className="fld-ext">.pdf</span>
          </div>
        </div>

        <div className="export-tip">
          <Icons.spark size={14} />
          <span>In the dialog that opens, choose <b>Save as PDF</b> as the destination. For edge-to-edge color, set <b>Margins</b> to <b>None</b>.</span>
        </div>

        {!isPro && reason === "pdf" && (
          <div className="export-tip" style={{ borderColor: "var(--acc)" }}>
            <Icons.crown size={14} />
            <span>Your free PDF includes a light <b>get-resume.com</b> watermark.
              <button type="button" className="up-link" style={{ marginLeft: 6 }}
                onClick={() => { onClose(); window.Pro.requestUpgrade("pdf"); }}>Go Pro to remove it</button>.</span>
          </div>
        )}

        <div className="export-actions">
          <button className="btn btn-quiet btn-sm" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary btn-sm" onClick={go}><Icons.download size={15} /> Download PDF</button>
        </div>
      </div>
    </div>
  );
}

// ---- drop-in export button (button + its own modal) ------------------------
function ExportButton({ getNode, fileName, label = "Export PDF" }) {
  const [open, setOpen] = useStatePR(false);
  return (
    <>
      <button className="btn btn-primary btn-sm" onClick={() => setOpen(true)}>
        <Icons.download size={15} /> {label}
      </button>
      {open && <ExportModal getNode={getNode} defaultName={fileName} onClose={() => setOpen(false)} />}
    </>
  );
}

// ---- free "copy as text" button (résumé only) ------------------------------
function CopyTextButton({ getText, label = "Copy text" }) {
  const [done, setDone] = useStatePR(false);
  const onClick = async () => {
    const ok = await window.copyText(getText() || "");
    if (ok) { setDone(true); setTimeout(() => setDone(false), 1900); }
  };
  return (
    <button className="btn btn-quiet btn-sm" onClick={onClick} title="Copy plain text — free">
      {done ? <><Icons.check size={15} /> Copied</> : <><Icons.copy size={15} /> {label}</>}
    </button>
  );
}

// ---- Pro-gated PDF download button -----------------------------------------
function PdfButton({ getNode, fileName, reason = "pdf" }) {
  const { isPro } = window.useProState();
  const [open, setOpen] = useStatePR(false);
  // Résumé PDF is free for everyone (watermarked); Pro removes the watermark.
  // Cover-letter PDF stays Pro-only.
  const allowFree = reason === "pdf";
  const canDownload = isPro || allowFree;
  const locked = !canDownload;
  const onClick = () => { if (canDownload) setOpen(true); else window.Pro.requestUpgrade(reason); };
  return (
    <>
      <button className={`btn btn-primary btn-sm${locked ? " btn-locked" : ""}`} onClick={onClick}
        title={isPro ? "Download PDF" : (allowFree ? "Download PDF — watermarked (go Pro to remove)" : "Download PDF — Pro")}>
        {locked ? <Icons.lock size={14} /> : <Icons.download size={15} />} Download PDF
        {locked && <span className="pro-mini">PRO</span>}
      </button>
      {open && <ExportModal getNode={getNode} defaultName={fileName} reason={reason} isPro={isPro} onClose={() => setOpen(false)} />}
    </>
  );
}

// ---- combined controls: free copy-text + gated PDF -------------------------
function ExportControls({ getNode, fileName, getText, reason }) {
  return (
    <>
      {getText && <CopyTextButton getText={getText} />}
      <PdfButton getNode={getNode} fileName={fileName} reason={reason} />
    </>
  );
}

Object.assign(window, { ExportButton, ExportModal, ExportControls, PdfButton, CopyTextButton, runPrint });