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

/* Anotasi PDF saat verifikasi: Direktur menempel pin bernomor di halaman dokumen
   dan menulis catatan per pin. Pin disimpan sebagai koordinat persen (bukan gambar),
   jadi ringan dan tetap akurat di layar mana pun. */
function AnnotatePdfModal({ task, onClose, onSubmit }) {
  const narrow = useBreakpoint() !== "desktop";
  const [page, setPage] = React.useState(1);
  const [pdfPages, setPdfPages] = React.useState(0);
  const pages = pdfPages || 1;
  const [pins, setPins] = React.useState(() => (task && task.annotations ? task.annotations.slice() : []));
  const [active, setActive] = React.useState(null);
  const ev = task && task.evidence ? task.evidence : { name: "bukti-task.pdf", compressed: 480000 };
  const src = fileSrc(ev) || (ev.file instanceof Blob ? URL.createObjectURL(ev.file) : null);
  const isImage = ev.kind === "image" || /\.(png|jpe?g|webp)$/i.test(ev.name || "");
  if (!task) return null;

  const addPin = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    const x = Math.min(97, Math.max(3, ((e.clientX - r.left) / r.width) * 100));
    const y = Math.min(97, Math.max(3, ((e.clientY - r.top) / r.height) * 100));
    setPins((p) => [...p, { n: p.length + 1, page, x, y, note: "" }]);
    setActive(pins.length);
  };
  const setNote = (i, note) => setPins((p) => p.map((x, j) => (j === i ? { ...x, note } : x)));
  const remove = (i) => setPins((p) => p.filter((_, j) => j !== i).map((x, j) => ({ ...x, n: j + 1 })));
  const filled = pins.filter((p) => p.note.trim());
  const asPoints = () => filled.map((p) => `${p.n}. [hal ${p.page}] ${p.note.trim()}`).join("\n");

  return (
    <Modal open width={860} onClose={onClose} title="Tandai & Komentari Dokumen"
      description={`${task.type} · ${ev.name} · klik pada dokumen untuk menambah pin`}
      footer={<>
        <span style={{ marginRight: "auto", display: "inline-flex", 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>
        <Button variant="ghost" onClick={onClose}>Batal</Button>
        <Button variant="primary" gradient iconLeft="send" disabled={!filled.length}
          onClick={() => onSubmit(task, asPoints(), pins)}>Kirim {filled.length} Poin Revisi</Button>
      </>}>
      <div style={{ display: "grid", gridTemplateColumns: narrow ? "minmax(0,1fr)" : "minmax(0,1fr) 250px", gap: 14 }}>
        <div onClick={addPin} style={{ position: "relative", background: "var(--neutral-200)", borderRadius: "var(--radius-md)", padding: 10, cursor: "crosshair", minHeight: 380, maxHeight: "56dvh", overflow: "auto" }}>
          {src && !isImage && <div style={{ pointerEvents: "none" }}><PdfCanvas src={src} page={page} onPages={setPdfPages} height={Math.max(320, Math.round(window.innerHeight * 0.5))} /></div>}
          {src && isImage && <img src={src} alt={ev.name} style={{ width: "100%", borderRadius: 4, display: "block", pointerEvents: "none" }} />}
          {!src && (
            <div style={{ background: "var(--white)", borderRadius: 4, boxShadow: "var(--shadow-lg)", padding: 24, minHeight: 360, display: "flex", flexDirection: "column", gap: 10 }}>
              <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <Icon name="file-text" size={16} color="var(--teal-600)" />
                <span style={{ font: "var(--fw-extrabold) var(--fs-sm)/1 var(--font-display)", color: "var(--teal-700)", letterSpacing: "var(--ls-wide)", textTransform: "uppercase" }}>Klinik BBMC</span>
              </span>
              <span style={{ font: "var(--fw-bold) var(--fs-h3)/1.3 var(--font-display)", color: "var(--text-strong)" }}>{task.type}</span>
              <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Pratinjau halaman {page} — file asli tersimpan di server</span>
              <div style={{ display: "flex", flexDirection: "column", gap: 7, paddingTop: 6 }}>
                {Array.from({ length: 12 }).map((_, i) => (
                  <span key={i} style={{ height: 7, borderRadius: 3, background: "var(--neutral-100)", width: `${100 - ((i * 7 + page * 5) % 34)}%` }} />
                ))}
              </div>
            </div>
          )}
          {pins.filter((p) => p.page === page).map((p) => {
            const i = pins.indexOf(p);
            return (
              <button key={i} type="button" onClick={(e) => { e.stopPropagation(); setActive(i); }}
                style={{ position: "absolute", left: `${p.x}%`, top: `${p.y}%`, transform: "translate(-50%,-50%)", width: 26, height: 26, borderRadius: "var(--radius-circle)", border: "2px solid var(--white)", cursor: "pointer",
                  background: active === i ? "var(--coral-500)" : p.note.trim() ? "var(--teal-500)" : "var(--gold-500)",
                  color: "var(--white)", font: "var(--fw-extrabold) var(--fs-micro)/1 var(--font-mono)", boxShadow: "var(--shadow-md)" }}>
                {p.n}
              </button>
            );
          })}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 10, maxHeight: narrow ? "none" : "56dvh", overflowY: narrow ? "visible" : "auto" }}>
          <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <Badge tone="teal">{pins.length} pin</Badge>
            {pins.length > 0 && <Button variant="ghost" size="sm" iconLeft="eraser" onClick={() => { setPins([]); setActive(null); }}>Hapus semua</Button>}
          </span>
          {pins.length === 0 && (
            <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Klik bagian dokumen yang perlu diperbaiki, lalu tulis catatannya di sini. Pin tanpa catatan tidak dikirim.</span>
          )}
          {pins.map((p, i) => (
            <div key={i} onClick={() => setActive(i)} style={{ display: "flex", flexDirection: "column", gap: 6, padding: "10px 11px", borderRadius: "var(--radius-sm)",
              background: active === i ? "var(--coral-50)" : "var(--neutral-50)", border: `1px solid ${active === i ? "var(--coral-100)" : "var(--border-subtle)"}` }}>
              <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <Badge tone={p.note.trim() ? "leaf" : "gold"}>#{p.n}</Badge>
                <span style={{ flex: 1, font: "var(--text-caption)", color: "var(--text-muted)" }}>halaman {p.page}</span>
                <IconButton icon="trash-2" size="sm" variant="ghost" label={`Hapus pin ${p.n}`} onClick={(e) => { if (e) e.stopPropagation(); remove(i); }} />
              </span>
              <Textarea rows={2} value={p.note} placeholder="cth. Nama pasien salah tulis" onChange={(e) => setNote(i, e.target.value)} />
            </div>
          ))}
        </div>
      </div>
    </Modal>
  );
}
Object.assign(window, { AnnotatePdfModal });
})();