(() => {
const { Modal, Button, Badge, Icon, IconButton, Field, Input } = window.TaskFlowDesignSystem_dd53c2;

/* Mock PDF page — same chrome as the viewer, but it accepts a signature stamp.
   Admin clicks (or drags) to place the PNG signature uploaded once in Profile. */
function SignPdfModal({ open, task, signature, readOnly, onClose, onSign }) {
  const [pdfPages, setPdfPages] = React.useState(0);
  const [pageSize, setPageSize] = React.useState(null);
  const docH = React.useMemo(() => Math.max(240, Math.min(430, window.innerHeight - 330)), []);
  // Jumlah halaman = jumlah halaman file yang diunggah (tanpa batas/asumsi).
  const pages = pdfPages || 1;
  const [page, setPage] = React.useState(task && task.signature ? task.signature.page : 1);
  // Halaman TTD yang berlaku, diklem ke jumlah halaman dokumen.
  const sigPage = task && task.signature ? Math.min(Math.max(1, task.signature.page || 1), pages) : null;
  React.useEffect(() => { if (pdfPages) setPage((n) => Math.min(Math.max(1, n), pdfPages)); }, [pdfPages]);
  React.useEffect(() => { if (sigPage) setPage(sigPage); }, [sigPage]);
  const [pos, setPos] = React.useState(task && task.signature ? { x: task.signature.x, y: task.signature.y } : null);
  const [width, setWidth] = React.useState(task && task.signature ? task.signature.width : 34);
  const [drag, setDrag] = React.useState(false);
  const sheetRef = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    setPage(task && task.signature ? task.signature.page : 1);
    setPos(task && task.signature ? { x: task.signature.x, y: task.signature.y } : null);
    setWidth(task && task.signature ? task.signature.width : 34);
  }, [open, task && task.id]);
  if (!open || !task) return null;
  const ev = task.evidence || (task.evidences && task.evidences[0]) || { name: "bukti-task.pdf", compressed: 0 };
  const docSrc = fileSrc(ev);
  const isImage = ev.kind === "image" || /\.(png|jpe?g|webp)$/i.test(ev.name || "");
  // Berkas hasil unduhan ber-TTD sudah memuat tanda tangan di halamannya.
  // Menandatangani ulang berkas ini membuat TTD tampak dobel/menumpuk.
  const preSigned = /-ttd(\.[a-z0-9]+)?$/i.test(String(ev.name || ""));

  const place = (e) => {
    if (readOnly) return;
    const r = sheetRef.current.getBoundingClientRect();
    const x = Math.min(96, Math.max(4, ((e.clientX - r.left) / r.width) * 100));
    const y = Math.min(96, Math.max(4, ((e.clientY - r.top) / r.height) * 100));
    setPos({ x, y });
  };
  const onMove = (e) => { if (drag && !readOnly) place(e); };

  return (
    <Modal open width={760} onClose={onClose}
      title={readOnly ? `Tanda tangan · ${ev.name}` : `Tanda Tangani ${ev.name}`}
      description={readOnly
        ? `${task.type} · ditandatangani ${task.signature ? task.signature.at : "-"} · TTD di halaman ${sigPage || 1} dari ${pages}`
        : `Klik pada dokumen untuk menempatkan tanda tangan, geser untuk memindahkan. Halaman ${page} dari ${pages}.`}
      footer={<>
        <span style={{ marginRight: "auto", display: pages > 1 ? "inline-flex" : "none", alignItems: "center", gap: 8 }}>
          <IconButton icon="chevron-left" size="sm" label="Halaman sebelumnya" onClick={() => setPage((p) => Math.max(1, p - 1))} />
          <span style={{ font: "var(--fw-semibold) var(--fs-sm)/1 var(--font-mono)", color: "var(--text-muted)", minWidth: 46, textAlign: "center" }}>{`${page} / ${pages}`}</span>
          <IconButton icon="chevron-right" size="sm" label="Halaman berikutnya" onClick={() => setPage((p) => Math.min(pages, p + 1))} />
        </span>
        {readOnly && task.signature && (
          <Button variant="secondary" iconLeft="download" disabled={!docSrc}
            onClick={() => downloadSigned(ev, signature, task.signature, String(ev.name).replace(/(\.[a-z0-9]+)?$/i, "-ttd$1"))}>Download Dokumen ber-TTD</Button>
        )}
        <Button variant="ghost" onClick={onClose}>{readOnly ? "Tutup" : "Batal"}</Button>
        {!readOnly && (
          <Button variant="primary" gradient iconLeft="signature" disabled={!signature || !pos}
            onClick={() => onSign({ page, x: pos.x, y: pos.y, width })}>Simpan &amp; Tanda Tangani</Button>
        )}
      </>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {!signature && !readOnly && (
          <span style={{ display: "flex", gap: 8, padding: "10px 12px", background: "var(--coral-50)", border: "1px solid var(--coral-100)", borderRadius: "var(--radius-sm)" }}>
            <Icon name="triangle-alert" size={15} color="var(--coral-600)" />
            <span style={{ font: "var(--text-caption)", color: "var(--coral-600)" }}>Belum ada file tanda tangan. Unggah sekali di Profile → Tanda Tangan Digital.</span>
          </span>
        )}
        {!readOnly && preSigned && (
          <span style={{ display: "flex", gap: 8, padding: "10px 12px", background: "var(--gold-50)", border: "1px solid var(--gold-200)", borderRadius: "var(--radius-sm)" }}>
            <Icon name="triangle-alert" size={15} color="var(--gold-600)" />
            <span style={{ font: "var(--text-caption)", color: "var(--text-body)" }}>Berkas ini sudah memuat tanda tangan (nama file berakhiran <strong>-ttd</strong>). Bila ditandatangani lagi, TTD akan menumpuk — minta user mengunggah dokumen asli tanpa TTD.</span>
          </span>
        )}
        {!readOnly && signature && (
          <span style={{ display: "flex", alignItems: "center", gap: 12, rowGap: 8, flexWrap: "wrap", padding: "10px 12px", background: "var(--neutral-50)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-sm)" }}>
            <img src={signature} alt="Tanda tangan Admin" style={{ height: 30, width: "auto", flex: "0 0 auto" }} />
            <span style={{ flex: "1 1 180px", minWidth: 140, font: "var(--text-caption)", color: "var(--text-muted)" }}>{pos ? "Tanda tangan sudah ditempatkan — geser untuk menyesuaikan." : "Klik dokumen untuk menempatkan."}</span>
            <span style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 8, flex: "0 0 auto" }}>
              <span style={{ font: "var(--text-caption)", color: "var(--text-muted)", whiteSpace: "nowrap" }}>Ukuran</span>
              <input type="range" min="18" max="60" value={width} onChange={(e) => setWidth(Number(e.target.value))} style={{ width: 110, accentColor: "var(--teal-500)" }} />
              {pos && <Button variant="ghost" size="sm" iconLeft="eraser" onClick={() => setPos(null)}>Hapus penempatan</Button>}
            </span>
          </span>
        )}
        <div style={{ background: "var(--neutral-200)", borderRadius: "var(--radius-md)", padding: 18, display: "flex", alignItems: "center", justifyContent: "center", height: docH, boxSizing: "content-box" }}>
          <div style={{ position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
            {docSrc && !isImage && <PdfCanvas src={docSrc} page={page} onPages={setPdfPages} onSize={setPageSize} height={docH} />}
            <div ref={sheetRef} style={{ position: "absolute", width: isImage ? "100%" : (pageSize ? pageSize.w : "100%"), height: isImage ? "100%" : (pageSize ? pageSize.h : "100%"), maxWidth: "100%", maxHeight: "100%", borderRadius: 4, overflow: "hidden", background: isImage || !docSrc ? "var(--white)" : "transparent", boxShadow: isImage ? "var(--shadow-lg)" : "none" }}>
            {docSrc
              ? (isImage
                  ? <img src={docSrc} alt={ev.name} style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
                  : null)
              : <div style={{ padding: 28, display: "flex", flexDirection: "column", gap: 10 }}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 8, font: "var(--text-caption)", color: "var(--coral-600)" }}>
                    <Icon name="triangle-alert" size={15} color="var(--coral-600)" />Berkas bukti belum tersimpan — minta user mengunggah ulang.
                  </span>
                  <span style={{ font: "var(--fw-bold) var(--fs-h3)/1.3 var(--font-display)", color: "var(--text-strong)" }}>{task.type}</span>
                </div>}
            {/* Lapisan penempatan TTD — menangkap klik walau dokumen dirender di dalam iframe. */}
            <div onClick={place} onMouseMove={onMove} onMouseUp={() => setDrag(false)} onMouseLeave={() => setDrag(false)}
              style={{ position: "absolute", inset: 0, cursor: readOnly ? "default" : "crosshair", pointerEvents: readOnly ? "none" : "auto" }} />
            {pos && signature && (readOnly ? page === sigPage : true) && (
              <span onMouseDown={(e) => { e.stopPropagation(); setDrag(true); }}
                style={{ position: "absolute", left: `${pos.x}%`, top: `${pos.y}%`, transform: "translate(-50%,-50%)", width: `${width}%`, padding: 4, borderRadius: 6, border: readOnly ? "1px solid transparent" : "1px dashed var(--teal-400)", background: readOnly ? "transparent" : "rgba(19,168,140,.06)", cursor: readOnly ? "default" : "grab" }}>
                <img src={signature} alt="Tanda tangan" draggable={false} style={{ width: "100%", height: "auto", display: "block", pointerEvents: "none" }} />
              </span>
            )}
            </div>
          </div>
        </div>
        {readOnly && task.signature && (
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, font: "var(--text-caption)", color: "var(--text-muted)" }}>
            <Icon name="shield-check" size={14} color="var(--leaf-600)" />
            Ditandatangani Direktur Klinik pada {task.signature.at} · halaman {sigPage} dari {pages}
          </span>
        )}
      </div>
    </Modal>
  );
}

/* Profile card: the signature PNG is uploaded once and reused for every task. */
function SignatureCard({ signature, onChange }) {
  const { Card } = window.TaskFlowDesignSystem_dd53c2;
  const [err, setErr] = React.useState("");
  const pick = (e) => {
    const f = e.target.files && e.target.files[0];
    e.target.value = "";
    if (!f) return;
    if (!/png$/i.test(f.type) && !/\.png$/i.test(f.name)) { setErr("File tanda tangan harus PNG (latar transparan)."); return; }
    setErr("");
    const r = new FileReader();
    r.onload = () => onChange(r.result);   // data URL → tetap ada setelah refresh
    r.readAsDataURL(f);
  };
  return (
    <Card float>
      <div style={{ display: "flex", alignItems: "center", gap: 10, paddingBottom: 12, flexWrap: "wrap" }}>
        <div>
          <h3 style={{ font: "var(--text-h3)" }}>Tanda Tangan Digital</h3>
          <p style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Cukup diunggah sekali (PNG, sebaiknya latar transparan) — dipakai untuk semua task yang butuh tanda tangan.</p>
        </div>
        <span style={{ marginLeft: "auto" }}><Badge tone={signature ? "leaf" : "gold"}>{signature ? "Siap dipakai" : "Belum ada"}</Badge></span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
        <span style={{ width: 200, height: 84, borderRadius: "var(--radius-sm)", border: signature ? "1px solid var(--border-subtle)" : "1px dashed var(--border-strong)", background: "var(--neutral-50)", display: "inline-flex", alignItems: "center", justifyContent: "center", padding: 8 }}>
          {signature
            ? <img src={signature} alt="Tanda tangan Admin" style={{ maxWidth: "100%", maxHeight: "100%" }} />
            : <Icon name="signature" size={26} color="var(--text-faint)" />}
        </span>
        <span style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-start" }}>
          <label style={{ display: "inline-flex" }}>
            <input type="file" accept="image/png" style={{ display: "none" }} onChange={pick} />
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, whiteSpace: "nowrap", padding: "9px 14px", borderRadius: "var(--radius-pill)", background: "var(--teal-50)", border: "1px solid var(--teal-200)", color: "var(--teal-700)", cursor: "pointer", font: "var(--fw-bold) var(--fs-sm)/1 var(--font-body)" }}>
              <Icon name="upload" size={15} color="var(--teal-600)" />{signature ? "Ganti File PNG" : "Upload File PNG"}
            </span>
          </label>
          {signature && <Button variant="ghost" size="sm" iconLeft="trash-2" onClick={() => onChange(null)}>Hapus tanda tangan</Button>}
          <span style={{ font: "var(--text-caption)", color: err ? "var(--red-600)" : "var(--text-faint)" }}>
            {err || "Task yang menandai \u201cperlu tanda tangan\u201d hanya menerima bukti berformat PDF."}
          </span>
        </span>
      </div>
    </Card>
  );
}
Object.assign(window, { SignPdfModal, SignatureCard });
})();