(() => {
const { Card, Button, IconButton, Badge, StatusPill, ProgressBar, DataTable, Modal, Field, Textarea, Select, EmptyState, Icon, Avatar, StatCard, Checkbox } = window.TaskFlowDesignSystem_dd53c2;

/* Mock PDF viewer: the real app streams the stored file into an <iframe>.
   Here the sheet renders the document chrome so the interaction can be reviewed. */
function PdfViewerModal({ open, task, onClose }) {
  const [page, setPage] = React.useState(1);
  const [pdfPages, setPdfPages] = React.useState(0);
  const pages = pdfPages || 1;
  const ev = task && task.evidence ? task.evidence : { name: "bukti-task.pdf", compressed: 480000 };
  // File nyata (hasil upload user) dirender apa adanya; berkas contoh memakai pratinjau mock.
  const realSrc = React.useMemo(() => {
    if (!ev) return null;
    if (ev.url || ev.src) return fileSrc(ev);
    if (ev.file instanceof Blob) return URL.createObjectURL(ev.file);
    return null;
  }, [ev && ev.name, ev && ev.url, ev && ev.src, ev && ev.file]);
  React.useEffect(() => () => { if (realSrc && realSrc.startsWith("blob:") && !(ev.url || ev.src)) URL.revokeObjectURL(realSrc); }, [realSrc]);
  const isImage = ev && (ev.kind === "image" || /\.(png|jpe?g|webp)$/i.test(ev.name || ""));
  if (!open) return null;
  if (realSrc) {
    return (
      <Modal open onClose={onClose} width={760} title={ev.name}
        description={`${task ? task.type : ""} · ${Math.round((ev.compressed || ev.size || 0) / 1024)} KB · dokumen asli`}
        footer={<>
          {!isImage && pages > 1 && (
            <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" size="sm" iconLeft="external-link" onClick={() => window.open(realSrc, "_blank")}>Buka di Tab Baru</Button>
          <Button variant="secondary" size="sm" iconLeft="download"
            onClick={() => { const a = document.createElement("a"); a.href = realSrc; a.download = ev.name; document.body.appendChild(a); a.click(); a.remove(); }}>Download</Button>
          <Button variant="primary" size="sm" gradient onClick={onClose}>Tutup</Button>
        </>}>
        <div style={{ background: "var(--neutral-200)", borderRadius: "var(--radius-md)", padding: 10, display: "flex", justifyContent: "center", maxHeight: "62dvh", overflow: "auto" }}>
          {isImage
            ? <img src={realSrc} alt={ev.name} style={{ maxWidth: "100%", borderRadius: 4, boxShadow: "var(--shadow-lg)" }} />
            : <div style={{ width: "100%", borderRadius: 6, overflow: "hidden" }}>
                <PdfCanvas src={realSrc} page={page} onPages={setPdfPages} height={Math.max(320, Math.round(window.innerHeight * 0.62))} />
              </div>}
        </div>
      </Modal>
    );
  }
  return (
    <Modal open onClose={onClose} width={720}
      title={ev.name}
      description={`${task ? task.type : ""} · ${Math.round(ev.compressed / 1024)} KB setelah kompresi · halaman ${page} dari ${pages}`}
      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)", whiteSpace: "nowrap", 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="secondary" size="sm" iconLeft="download">Download</Button>
        <Button variant="primary" size="sm" gradient onClick={onClose}>Tutup</Button>
      </>}>
      <div style={{ background: "var(--neutral-200)", borderRadius: "var(--radius-md)", padding: 20, display: "flex", justifyContent: "center", maxHeight: 380, overflowY: "auto" }}>
        <div style={{ width: 420, minHeight: 300, background: "var(--white)", boxShadow: "var(--shadow-lg)", borderRadius: 4, padding: 28, display: "flex", flexDirection: "column", gap: 12 }}>
          <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 ? task.type : ""}</span>
          <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Laporan penyelesaian task — halaman {page}</span>
          <div style={{ display: "flex", flexDirection: "column", gap: 7, paddingTop: 6 }}>
            {Array.from({ length: 9 }).map((_, i) => (
              <span key={i} style={{ height: 7, borderRadius: 3, background: "var(--neutral-100)", width: `${100 - ((i * 7 + page * 5) % 34)}%` }} />
            ))}
          </div>
          <span style={{ marginTop: "auto", paddingTop: 12, borderTop: "1px solid var(--border-subtle)", font: "var(--text-caption)", color: "var(--text-faint)" }}>
            Pratinjau dokumen (mock) · file asli tersimpan di server
          </span>
        </div>
      </div>
    </Modal>
  );
}

function EvidenceRow({ task, onView }) {
  return (
    <button type="button" onClick={onView} style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 10px", background: "var(--leaf-50)", border: "1px solid var(--leaf-200)", borderRadius: "var(--radius-sm)", cursor: "pointer" }}>
      <Icon name="file-check-2" size={15} color="var(--leaf-600)" />
      <span style={{ font: "var(--fw-semibold) var(--fs-xs)/1 var(--font-body)", color: "var(--text-strong)" }}>
        {task.evidence ? task.evidence.name : "bukti-task.pdf"}
      </span>
      <span style={{ font: "var(--fw-medium) var(--fs-micro)/1 var(--font-mono)", color: "var(--leaf-600)" }}>
        {task.evidence ? `${Math.round(task.evidence.compressed / 1024)} KB` : "≤500 KB"}
      </span>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 4, font: "var(--fw-bold) var(--fs-micro)/1 var(--font-body)", color: "var(--teal-600)" }}>
        <Icon name="eye" size={13} color="var(--teal-600)" />View
      </span>
    </button>
  );
}

function TaskVerification({ tasks, onAccept, onRevision, onDelegate, signature, onViewSignature, onAnnotate }) {
  const pending = tasks.filter((t) => t.status === "on_verification");
  const inRevision = tasks.filter((t) => t.status === "revision");
  const accepted = tasks.filter((t) => t.status === "done");
  const [ask, setAsk] = React.useState(null);
  const [viewing, setViewing] = React.useState(null);
  const [points, setPoints] = React.useState("");
  const [deleg, setDeleg] = React.useState(null);
  const [delegUser, setDelegUser] = React.useState("");
  const [delegNote, setDelegNote] = React.useState("");
  const [sel, setSel] = React.useState([]);          // id task terpilih untuk aksi massal
  const [bulk, setBulk] = React.useState(null);      // "accept" | "revision"
  const [bulkNote, setBulkNote] = React.useState("");
  // Hanya task yang benar-benar bisa di-Accept langsung: tanpa delegasi berjalan, tanpa TTD.
  const selected = pending.filter((t) => sel.includes(t.id));
  const ready = selected.filter((t) => !t.needSign && !(t.delegate && t.delegateStatus !== "done"));
  const skipped = selected.length - ready.length;
  const toggleSel = (id) => setSel((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id]));
  const runBulkAccept = () => { ready.forEach((t) => onAccept(t)); setSel([]); setBulk(null); };
  const runBulkRevision = () => {
    if (!bulkNote.trim()) return;
    selected.forEach((t) => onRevision(t, bulkNote.trim()));
    setBulkNote(""); setSel([]); setBulk(null);
  };

  const submitDelegate = () => {
    if (!delegUser) return;
    onDelegate(deleg, Number(delegUser), delegNote.trim());
    setDeleg(null); setDelegUser(""); setDelegNote("");
  };

  const submitRevision = () => {
    if (!points.trim()) return;
    onRevision(ask, points.trim());
    setPoints("");
    setAsk(null);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20, maxWidth: "var(--content-max)", position: "relative" }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(min(100%,220px),1fr))", gap: 16 }}>
        <StatCard label="Menunggu Verifikasi" value={pending.length} icon="shield-question" tone="gold" />
        <StatCard label="Perlu Revisi" value={inRevision.length} icon="rotate-ccw" tone="coral" />
        <StatCard label="Diterima" value={accepted.length} icon="shield-check" tone="leaf" />
      </div>

      <Card padding={0}>
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
          <div style={{ flex: "1 1 260px", minWidth: 0 }}>
            <h3 style={{ font: "var(--text-h3)" }}>Menunggu Verifikasi</h3>
            <p style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Task berstatus On Verification. Status menjadi Done hanya setelah Direktur menekan Accept.</p>
          </div>
          {pending.length > 1 && (
            <Checkbox label={sel.length === pending.length ? "Kosongkan pilihan" : "Pilih semua"} checked={sel.length === pending.length}
              onChange={() => setSel(sel.length === pending.length ? [] : pending.map((t) => t.id))} />
          )}
        </div>
        {sel.length > 0 && (
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", padding: "12px 20px", background: "var(--teal-50)", borderBottom: "1px solid var(--teal-200)" }}>
            <Badge tone="teal">{sel.length} dipilih</Badge>
            {skipped > 0 && <span style={{ font: "var(--text-caption)", color: "var(--gold-600)" }}>{skipped} task perlu TTD / masih didelegasikan — tetap harus diproses satu per satu.</span>}
            <span style={{ marginLeft: "auto", display: "inline-flex", gap: 8, flexWrap: "wrap" }}>
              <Button size="sm" variant="ghost" iconLeft="x" onClick={() => setSel([])}>Batal</Button>
              <Button size="sm" variant="secondary" iconLeft="rotate-ccw" onClick={() => setBulk("revision")}>Need Revision ({sel.length})</Button>
              <Button size="sm" variant="success" iconLeft="check" disabled={ready.length === 0} onClick={() => setBulk("accept")}>Accept ({ready.length})</Button>
            </span>
          </div>
        )}
        {pending.length === 0 ? (
          <EmptyState icon="shield-check" title="Tidak ada yang menunggu" description="Semua pengumpulan task sudah diverifikasi." />
        ) : (
          <div style={{ display: "flex", flexDirection: "column" }}>
            {pending.map((t, i) => {
              const u = userById(t.user);
              return (
                <div key={t.id} style={{ display: "flex", flexDirection: "column", gap: 12, padding: 16, borderTop: i ? "1px solid var(--border-subtle)" : "none" }}>
                  <div style={{ display: "flex", alignItems: "flex-start", gap: 14, flexWrap: "wrap" }}>
                  <span style={{ paddingTop: 8 }}><Checkbox checked={sel.includes(t.id)} onChange={() => toggleSel(t.id)} /></span>
                  <Avatar src={avatarOf(u.id)} name={u.name} size={38} ring={false} />
                  <div style={{ flex: 1, minWidth: 220, display: "flex", flexDirection: "column", gap: 6 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                      <span style={{ font: "var(--fw-bold) var(--fs-body-lg)/1.3 var(--font-body)", color: "var(--text-strong)" }}>{t.type}</span>
                      <Badge tone="mint">{t.category}</Badge>
                      <StatusPill status="on_verification" />
                      {t.needSign && <Badge tone="teal" dot>Perlu TTD</Badge>}
                      {isOverdue(t.target, t.submitted) && <StatusPill status="late" />}
                      {t.delegate && (
                        <Badge tone={t.delegateStatus === "done" ? "leaf" : "gold"} dot>
                          {t.delegateStatus === "done"
                            ? `Revision Done · ${userById(t.delegate).name}`
                            : `Didelegasikan · ${userById(t.delegate).name}`}
                        </Badge>
                      )}
                    </div>
                    <span style={{ display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center", font: "var(--text-caption)", color: "var(--text-muted)" }}>
                      <span style={{ font: "var(--fw-semibold) var(--fs-xs)/1.3 var(--font-body)", color: "var(--text-body)" }}>{u.name}</span>
                      <span style={{ color: "var(--text-faint)" }}>·</span>
                      <span>Target {t.target}</span>
                      <span style={{ color: "var(--text-faint)" }}>·</span>
                      <span>Dikumpulkan {t.submitted || "hari ini"}</span>
                    </span>
                    <span style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center", paddingTop: 2 }}>
                      <EvidenceRow task={t} onView={() => setViewing(t)} />
                      {t.delay && <span style={{ font: "var(--text-caption)", color: "var(--red-600)" }}>Alasan terlambat: {t.delay}</span>}
                      {t.delegate && t.delegateNote && <span style={{ font: "var(--text-caption)", color: "var(--gold-600)" }}>Catatan delegasi: {t.delegateNote}</span>}
                    </span>
                    {t.versions && t.versions.length > 1 && (
                      <span style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", paddingTop: 2 }}>
                        <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Riwayat versi:</span>
                        {t.versions.map((v) => (
                          <button key={v.round} type="button" onClick={() => setViewing({ ...t, evidence: v.files[0] })}
                            style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "4px 9px", borderRadius: "var(--radius-pill)", background: "var(--neutral-50)", border: "1px solid var(--border-subtle)", cursor: "pointer", font: "var(--fw-semibold) var(--fs-xs)/1 var(--font-body)", color: "var(--text-body)" }}>
                            <Icon name="history" size={12} color="var(--text-faint)" />v{v.round} · {v.at.split(" ").slice(0, 3).join(" ")}
                          </button>
                        ))}
                      </span>
                    )}
                  </div>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "flex-end", alignItems: "flex-start", marginLeft: "auto" }}>
                    <Button size="sm" variant="secondary" iconLeft="eye" onClick={() => setViewing(t)}>View PDF</Button>
                    {!t.delegate && <Button size="sm" variant="soft" iconLeft="user-round-check" onClick={() => { setDelegUser(""); setDeleg(t); }}>Delegate Revision</Button>}
                    {onAnnotate && <Button size="sm" variant="soft" iconLeft="pen-line" onClick={() => onAnnotate(t)}>Tandai Dokumen</Button>}
                    <Button size="sm" variant="secondary" iconLeft="rotate-ccw" onClick={() => setAsk(t)}>Need Revision</Button>
                    <Button size="sm" variant="success" iconLeft={t.needSign ? "signature" : "check"} disabled={!!t.delegate && t.delegateStatus !== "done"}
                      onClick={() => onAccept(t)}>{t.needSign ? "Accept & TTD" : "Accept"}</Button>
                  </div>
                  </div>
                  {(t.userNote || t.delegateDoneNote) && (
                    <div style={{ display: "flex", flexDirection: "column", gap: 8, padding: "10px 12px", borderRadius: "var(--radius-sm)", background: "var(--teal-50)", border: "1px solid var(--teal-200)" }}>
                      {t.userNote && (
                        <span style={{ display: "flex", gap: 8 }}>
                          <Icon name="message-square-text" size={15} color="var(--teal-600)" />
                          <span style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
                            <span style={{ font: "var(--text-label)", color: "var(--teal-700)" }}>Catatan {userById(t.user).name}</span>
                            <span style={{ font: "var(--text-body-default)", color: "var(--text-body)", whiteSpace: "pre-line" }}>{t.userNote}</span>
                          </span>
                        </span>
                      )}
                      {t.delegateDoneNote && (
                        <span style={{ display: "flex", gap: 8 }}>
                          <Icon name="user-round-check" size={15} color="var(--gold-600)" />
                          <span style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
                            <span style={{ font: "var(--text-label)", color: "var(--gold-600)" }}>Catatan revisi {t.delegate ? userById(t.delegate).name : ""}</span>
                            <span style={{ font: "var(--text-body-default)", color: "var(--text-body)", whiteSpace: "pre-line" }}>{t.delegateDoneNote}</span>
                          </span>
                        </span>
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </Card>

      {inRevision.length > 0 && (
        <Card padding={0}>
          <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border-subtle)" }}>
            <h3 style={{ font: "var(--text-h3)" }}>Sedang Direvisi</h3>
            <p style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>User sudah menerima notifikasi dan poin revisinya.</p>
          </div>
          <div style={{ padding: 16 }}>
            <DataTable
              columns={[
                { key: "task", label: "Jenis Task" },
                { key: "user", label: "User" },
                { key: "points", label: "Poin Revisi" },
                { key: "file", label: "Dokumen", width: 110 },
                { key: "st", label: "Status", align: "right" },
              ]}
              rows={inRevision.map((t) => ({
                task: <span style={{ font: "var(--fw-semibold) var(--fs-body)/1.3 var(--font-body)" }}>{t.type}</span>,
                user: userById(t.user).name,
                points: <span style={{ font: "var(--fw-regular) var(--fs-sm)/1.45 var(--font-body)", color: "var(--text-body)", whiteSpace: "pre-line" }}>{t.revision}</span>,
                file: <Button size="sm" variant="ghost" iconLeft="eye" onClick={() => setViewing(t)}>View</Button>,
                st: <StatusPill status="revision" />,
              }))}
            />
          </div>
        </Card>
      )}

      <Modal open={!!deleg} onClose={() => setDeleg(null)} width={460} title="Delegate Revision"
        description={deleg ? `Pilih user yang membantu merevisi "${deleg.type}". User itu akan menerima notifikasi lonceng, dan Accept baru aktif setelah statusnya Revision Done.` : ""}
        footer={<><Button variant="ghost" onClick={() => setDeleg(null)}>Batal</Button>
          <Button variant="primary" gradient iconLeft="send" disabled={!delegUser} onClick={submitDelegate}>Delegasikan</Button></>}>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <Field label="Delegasikan ke" required>
            <Select value={delegUser} placeholder="Pilih user…" onChange={(e) => setDelegUser(e.target.value)}
              options={USERS.filter((x) => !deleg || x.id !== deleg.user).map((x) => ({ value: String(x.id), label: `${x.name} · ${x.role}` }))} />
          </Field>
          <Field label="Catatan untuk pembantu revisi" hint="Opsional — misalnya bagian mana yang perlu dicek.">
            <Textarea rows={3} value={delegNote} placeholder="cth. Cek ulang kelengkapan lampiran halaman 2…" onChange={(e) => setDelegNote(e.target.value)} />
          </Field>
        </div>
      </Modal>

      {bulk === "accept" && (
        <Modal open width={460} onClose={() => setBulk(null)} title={`Accept ${ready.length} Task`}
          description="Semua task terpilih akan berstatus Done dan user menerima notifikasi."
          footer={<><Button variant="ghost" onClick={() => setBulk(null)}>Batal</Button>
            <Button variant="success" iconLeft="check" onClick={runBulkAccept}>Accept Semua</Button></>}>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {ready.map((t) => (
              <span key={t.id} style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 11px", background: "var(--leaf-50)", border: "1px solid var(--leaf-200)", borderRadius: "var(--radius-sm)" }}>
                <Icon name="check" size={14} color="var(--leaf-600)" />
                <span style={{ font: "var(--fw-semibold) var(--fs-sm)/1.3 var(--font-body)", color: "var(--text-strong)" }}>{t.type}</span>
                <span style={{ marginLeft: "auto", font: "var(--text-caption)", color: "var(--text-muted)" }}>{userById(t.user).name}</span>
              </span>
            ))}
            {skipped > 0 && <span style={{ font: "var(--text-caption)", color: "var(--gold-600)" }}>{skipped} task lain dilewati karena perlu tanda tangan atau masih didelegasikan.</span>}
          </div>
        </Modal>
      )}

      {bulk === "revision" && (
        <Modal open width={520} onClose={() => setBulk(null)} title={`Need Revision · ${sel.length} Task`}
          description="Poin revisi yang sama dikirim ke seluruh task terpilih."
          footer={<><Button variant="ghost" onClick={() => setBulk(null)}>Batal</Button>
            <Button variant="primary" gradient iconLeft="send" disabled={!bulkNote.trim()} onClick={runBulkRevision}>Kirim ke {sel.length} Task</Button></>}>
          <Field label="Poin Revisi" required hint="Tulis satu poin per baris.">
            <Textarea rows={5} value={bulkNote} onChange={(e) => setBulkNote(e.target.value)}
              placeholder={"1. Lengkapi lampiran hasil pemeriksaan\n2. Perbaiki penulisan nama pasien"} />
          </Field>
        </Modal>
      )}

      <PdfViewerModal open={!!viewing} task={viewing} onClose={() => setViewing(null)} />

      <Modal open={!!ask} onClose={() => setAsk(null)} width={520} title="Need Revision"
        description={ask ? `Tuliskan poin revisi untuk "${ask.type}". User akan menerima notifikasi lonceng segera setelah dikirim.` : ""}
        footer={<><Button variant="ghost" onClick={() => setAsk(null)}>Batal</Button>
          <Button variant="primary" gradient iconLeft="send" disabled={!points.trim()} onClick={submitRevision}>Kirim Revisi</Button></>}>
        <Field label="Poin Revisi" required error={points.trim() ? undefined : "Poin revisi wajib diisi."}
          hint="Tulis satu poin per baris agar user mudah menindaklanjuti.">
          <Textarea rows={5} value={points} invalid={!points.trim()} onChange={(e) => setPoints(e.target.value)}
            placeholder={"1. Lengkapi lampiran hasil pemeriksaan\n2. Perbaiki penulisan nama pasien\n3. Unggah ulang PDF yang sudah ditandatangani"} />
        </Field>
      </Modal>
    </div>
  );
}
Object.assign(window, { TaskVerification, PdfViewerModal });
})();