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

const MONTHS_ID = ["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agu","Sep","Okt","Nov","Des"];
const MODAL_ISO_TODAY = window.ISO_TODAY || (() => {
  const now = new Date();
  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
})();
const fmtDate = (iso) => { const [y,m,d] = iso.split("-"); return `${d} ${MONTHS_ID[+m-1]} ${y}`; };
const toIso = (id) => { if (!id) return MODAL_ISO_TODAY; const [d, m, y] = id.split(" "); return `${y}-${String(MONTHS_ID.indexOf(m) + 1).padStart(2, "0")}-${d.padStart(2, "0")}`; };

/* Pasted screenshots become evidence files without a trip through the file picker
   (PRD §5.4). The mock keeps the same shape FileUpload produces. */
let pasteSeq = 0;
const fromPastedImage = (file, maxKb = 500) => ({
  name: file.name && file.name !== "image.png" ? file.name : `screenshot-${++pasteSeq}.png`,
  size: file.size, compressed: file.size, ok: true, kind: "image", pasted: true, type: file.type || "image/png",
});
/* Isi screenshot dibaca sungguhan lalu dikompres (maks 1600px) supaya bisa dipratinjau
   dan tersimpan, sama seperti file yang diunggah lewat tombol upload. */
const readPastedImage = (file, maxKb = 500) => new Promise((res) => {
  const meta = fromPastedImage(file, maxKb);
  const rd = new FileReader();
  rd.onload = () => {
    const img = new Image();
    img.onload = () => {
      const sc = Math.min(1, 1600 / Math.max(img.width, img.height));
      const c = document.createElement("canvas");
      c.width = Math.max(1, Math.round(img.width * sc));
      c.height = Math.max(1, Math.round(img.height * sc));
      c.getContext("2d").drawImage(img, 0, 0, c.width, c.height);
      const bytes = (u) => Math.round((u.length - (u.indexOf(",") + 1)) * 0.75);
      let q = 0.82, out = c.toDataURL("image/jpeg", q);
      while (bytes(out) > maxKb * 1024 && q > 0.34) { q -= 0.12; out = c.toDataURL("image/jpeg", q); }
      res({ ...meta, url: out, type: "image/jpeg", compressed: bytes(out) });
    };
    img.onerror = () => res({ ...meta, url: rd.result });
    img.src = rd.result;
  };
  rd.onerror = () => res(meta);
  rd.readAsDataURL(file);
});

function AddTaskModal({ open, onClose, onCreate, mode = "add", initial, tasks = TASKS }) {
  const isEdit = mode === "edit";
  const load = workloadOf(tasks);
  const loadOf = (id) => load.find((w) => w.id === id) || { load: 0, cap: WORKLOAD_CAP, level: "idle" };
  // Jangan pilih user apa pun secara default: id "1" dulu hardcoded sehingga hint
  // menghitung 1 user terpilih padahal tidak ada checkbox yang tercentang.
  const [picked, setPicked] = React.useState(initial ? [initial.user] : []);
  const [type, setType] = React.useState(initial ? initial.type : "");
  const [projectName, setProjectName] = React.useState("");
  const [rows, setRows] = React.useState([]);
  const [category, setCategory] = React.useState(initial ? initial.category : "Operasional");
  const [priority, setPriority] = React.useState(initial ? initial.priority : "Medium");
  const [repeat, setRepeat] = React.useState(initial && initial.repeat ? initial.repeat : "none");
  // Sub-task checklist: satu baris = satu sub-task. Pada task berulang, checklist ini
  // dipakai ulang setiap periode (centangnya direset otomatis).
  const [needSign, setNeedSign] = React.useState(!!(initial && initial.needSign));
  const [subs, setSubs] = React.useState(() => (initial && initial.checklist ? initial.checklist.map((c) => ({ key: "c" + c.id, label: c.label })) : []));
  const addSub = () => setSubs((l) => [...l, { key: "c-" + Math.random().toString(36).slice(2, 7), label: "" }]);
  const setSub = (key, label) => setSubs((l) => l.map((s) => (s.key === key ? { ...s, label } : s)));
  const removeSub = (key) => setSubs((l) => l.filter((s) => s.key !== key));
  // Task baru selalu mulai dari tanggal login; target default seminggu setelahnya.
  const [assigned, setAssigned] = React.useState(initial ? toIso(initial.assigned) : MODAL_ISO_TODAY);
  const [target, setTarget] = React.useState(initial ? toIso(initial.target) : isoPlus(7));
  const [err, setErr] = React.useState("");
  const toggle = (id) => setPicked((p) => (p.includes(id) ? p.filter((x) => x !== id) : [...p, id]));
  const isProject = picked.length > 1;

  // one task row per picked user by default; extra rows can be added for anyone picked
  React.useEffect(() => {
    if (picked.length < 2) { setRows([]); return; }
    setRows((prev) => {
      const kept = prev.filter((r) => picked.includes(r.user));
      const missing = picked.filter((id) => !kept.some((r) => r.user === id));
      return [...kept, ...missing.map((id) => ({ key: `r${id}-${Math.random().toString(36).slice(2, 7)}`, user: id, type: "" }))]
        .sort((a, b) => picked.indexOf(a.user) - picked.indexOf(b.user));
    });
  }, [picked.join(",")]);

  const setRow = (key, patch) => setRows((l) => l.map((r) => (r.key === key ? { ...r, ...patch } : r)));
  const addRow = () => setRows((l) => [...l, { key: `r-${Math.random().toString(36).slice(2, 7)}`, user: picked[0], type: "" }]);
  const removeRow = (key) => setRows((l) => (l.length > 1 ? l.filter((r) => r.key !== key) : l));

  const submit = () => {
    if (!picked.length) { setErr("Pilih minimal satu user."); return; }
    if (isProject && !isEdit) {
      if (!projectName.trim()) { setErr("Nama project wajib diisi."); return; }
      if (!rows.length || rows.some((r) => !r.type.trim())) { setErr("Setiap task dalam project wajib punya jenis task dan user."); return; }
    } else if (!type.trim()) { setErr("Jenis task wajib diisi."); return; }
    if (target < assigned) { setErr("Target tanggal selesai tidak boleh sebelum tanggal diberikan."); return; }
    setErr("");
    onCreate({
      type: isProject && !isEdit ? projectName.trim() : type.trim(),
      projectName: projectName.trim() || undefined,
      rows: isProject && !isEdit ? rows.map((r) => ({ type: r.type.trim(), user: r.user })) : undefined,
      category, priority, repeat, users: picked, assigned: fmtDate(assigned), target: fmtDate(target), isProject,
      needSign,
      checklist: subs.filter((s) => s.label.trim()).map((s, i) => ({ id: i + 1, label: s.label.trim(), done: false })),
    });
    setType(""); setProjectName(""); setPicked([]);
  };
  return (
    <Modal open={open} onClose={onClose} width={isProject && !isEdit ? 640 : 560}
      title={isEdit ? "Edit Task" : isProject ? "Add New Project" : "Add New Task"}
      description={isEdit
        ? "Ubah detail task. Progress dan status yang sudah berjalan tidak direset."
        : "Task untuk lebih dari satu user otomatis menjadi Project — beri nama project, lalu tentukan task per user."}
      footer={<><Button variant="ghost" onClick={onClose}>Batal</Button><Button variant="primary" gradient iconLeft="check" onClick={submit}>{isEdit ? "Simpan Perubahan" : isProject ? "Simpan Project" : "Simpan Task"}</Button></>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {isEdit ? null : (
          <Field label="User yang mengerjakan" required hint={isProject ? picked.length + " user dipilih \u2014 akan dibuat sebagai Project." : picked.length === 1 ? "1 user dipilih \u2014 tersimpan sebagai Task biasa." : "Belum ada user dipilih \u2014 centang minimal satu."}>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, padding: 12, border: "1px solid var(--border-default)", borderRadius: "var(--radius-control)", maxHeight: 170, overflowY: "auto", overflowX: "hidden" }}>
              {USERS.map((u) => {
                const w = loadOf(u.id);
                return (
                  <span key={u.id} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <span style={{ flex: 1, minWidth: 0 }}>
                      <Checkbox checked={picked.includes(u.id)} onChange={() => toggle(u.id)} label={`${u.name} · ${u.role}`} />
                    </span>
                    <Badge tone={WORKLOAD_TONE[w.level]}>{w.load} aktif</Badge>
                  </span>
                );
              })}
            </div>
          </Field>
        )}

        {isProject && !isEdit ? (
          <>
            <Field label="Nama Project" required hint="Semua task di bawah dikelompokkan dalam project ini.">
              <Input icon="folder" value={projectName} placeholder="cth. Audit Mutu Layanan" onChange={(e) => setProjectName(e.target.value)} />
            </Field>
            <Field label="Task & User" required hint="Satu baris = satu task untuk satu user. Boleh lebih dari satu task per user.">
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {rows.map((r) => (
                  <div key={r.key} style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) 190px 34px", gap: 8, alignItems: "center" }}>
                    <Input icon="clipboard-list" value={r.type} placeholder="cth. Checklist ruang tunggu" onChange={(e) => setRow(r.key, { type: e.target.value })} />
                    <Select value={String(r.user)} onChange={(e) => setRow(r.key, { user: Number(e.target.value) })}
                      options={picked.map((id) => ({ value: String(id), label: userById(id).name }))} />
                    <IconButton icon="trash-2" size="sm" variant="ghost" label="Hapus baris" onClick={() => removeRow(r.key)} />
                  </div>
                ))}
                <span><Button variant="ghost" size="sm" iconLeft="plus" onClick={addRow}>Tambah task</Button></span>
              </div>
            </Field>
          </>
        ) : (
          <Field label="Jenis Task" required><Input icon="clipboard-list" value={type} placeholder="cth. Rekap Kunjungan Pasien" onChange={(e) => setType(e.target.value)} /></Field>
        )}

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <Field label="Kategori"><Select value={category} onChange={(e) => setCategory(e.target.value)} options={["Dokumen","Operasional","Kepegawaian","Kegiatan","Sarana & Prasarana","Keuangan"]} /></Field>
          <Field label="Prioritas"><Select value={priority} onChange={(e) => setPriority(e.target.value)} options={["Low","Medium","High"]} /></Field>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <Field label="Tanggal Diberikan" required><Input type="date" min={isEdit ? undefined : MODAL_ISO_TODAY} value={assigned} onChange={(e) => setAssigned(e.target.value)} /></Field>
          <Field label="Target Tanggal Selesai" required><Input type="date" min={assigned} value={target} onChange={(e) => setTarget(e.target.value)} /></Field>
        </div>
        <Field label="Task Berulang" hint="Setelah Admin menekan Accept, periode berikutnya otomatis dibuat dengan target yang bergeser.">
          <Select value={repeat} onChange={(e) => setRepeat(e.target.value)}
            options={[{ value: "none", label: "Tidak berulang" }, { value: "daily", label: "Harian" }, { value: "weekly", label: "Mingguan" }, { value: "monthly", label: "Bulanan" }]} />
        </Field>
        <Field label="Tanda Tangan Admin"
          hint={needSign
            ? "Bukti wajib PDF. Setelah Admin menekan Accept, dokumen langsung terbuka dalam mode tanda tangan."
            : "Aktifkan bila hasil task harus ditandatangani Admin (mis. laporan resmi)."}>
          <button type="button" onClick={() => setNeedSign((v) => !v)}
            style={{ display: "flex", alignItems: "center", gap: 10, width: "100%", textAlign: "left", cursor: "pointer", padding: "11px 12px", borderRadius: "var(--radius-md)", background: needSign ? "var(--teal-50)" : "var(--white)", border: "1px solid " + (needSign ? "var(--teal-200)" : "var(--border-subtle)") }}>
            <span style={{ width: 20, height: 20, flex: "0 0 auto", borderRadius: 6, background: needSign ? "var(--gradient-teal)" : "var(--white)", border: needSign ? "1px solid transparent" : "1px solid var(--border-strong)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
              {needSign && <Icon name="check" size={13} color="var(--white)" />}
            </span>
            <Icon name="signature" size={16} color={needSign ? "var(--teal-600)" : "var(--text-faint)"} />
            <span style={{ font: "var(--fw-semibold) var(--fs-body)/1.3 var(--font-body)", color: "var(--text-strong)" }}>Perlu tanda tangan Admin</span>
            {needSign && <Badge tone="teal">PDF only</Badge>}
          </button>
        </Field>
        <Field label="Sub-task (Checklist)"
          hint={repeat !== "none"
            ? "Checklist ini dipakai ulang setiap periode task berulang — centangnya otomatis direset saat periode baru dibuat."
            : "Opsional. Progress saat In Progress dihitung dari sub-task yang dicentang (10–45%)."}>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {subs.length === 0 && (
              <span style={{ font: "var(--text-caption)", color: "var(--text-faint)" }}>Belum ada sub-task — progress In Progress akan diisi manual oleh user.</span>
            )}
            {subs.map((s, i) => (
              <div key={s.key} style={{ display: "grid", gridTemplateColumns: "22px minmax(0,1fr) 34px", gap: 8, alignItems: "center" }}>
                <span style={{ font: "var(--fw-bold) var(--fs-xs)/1 var(--font-mono)", color: "var(--text-faint)", textAlign: "center" }}>{i + 1}</span>
                <Input icon="list-checks" value={s.label} placeholder="cth. Kumpulkan jurnal harian Senin–Rabu" onChange={(e) => setSub(s.key, e.target.value)} />
                <IconButton icon="trash-2" size="sm" variant="ghost" label="Hapus sub-task" onClick={() => removeSub(s.key)} />
              </div>
            ))}
            <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <Button variant="ghost" size="sm" iconLeft="plus" onClick={addSub}>Tambah sub-task</Button>
              {subs.length > 0 && <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>{subs.filter((s) => s.label.trim()).length} sub-task{isProject && !isEdit ? " · berlaku untuk semua task di project ini" : ""}</span>}
            </span>
          </div>
        </Field>
        {picked.some((id) => loadOf(id).level === "over" || loadOf(id).level === "full") && (
          <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(--gold-600)" }}>
              Beban kerja penuh: {picked.filter((id) => loadOf(id).level === "over" || loadOf(id).level === "full").map((id) => `${userById(id).name} (${loadOf(id).load} task aktif)`).join(", ")}. Pertimbangkan user lain atau geser targetnya.
            </span>
          </span>
        )}
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <Badge tone={isProject ? "teal" : "mint"}>{isProject ? "Project" : "Single Task"}</Badge>
          <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>
            {picked.length} user terpilih{isProject && !isEdit ? ` · ${rows.length} task` : ""}
          </span>
        </div>
        {err && <span style={{ font: "var(--text-caption)", color: "var(--red-600)" }}>{err}</span>}
      </div>
    </Modal>
  );
}

function CompleteTaskModal({ open, task, onClose, onSubmit }) {
  const [reason, setReason] = React.useState("");
  const [note, setNote] = React.useState("");
  const [doc, setDoc] = React.useState(null);
  const [docs, setDocs] = React.useState([]);
  const [pasted, setPasted] = React.useState(false);
  const isProjectTask = !!(task && task.project);
  const late = task ? isOverdue(task.target) : false;
  const revising = task ? task.status === "revision" : false;
  const pdfOnly = !!(task && task.needSign);
  const isPdf = (f) => !!f && f.ok && f.kind !== "image";
  // Dokumen hasil unduhan yang sudah ber-TTD ("...-ttd.pdf") tidak boleh diunggah ulang:
  // tanda tangannya sudah menyatu di halaman, sehingga TTD berikutnya akan menumpuk.
  const signedName = (f) => !!f && /-ttd(\.[a-z0-9]+)?$/i.test(String(f.name || ""));
  const docOk = pdfOnly
    ? (isProjectTask ? docs.some((f) => isPdf(f) && !signedName(f)) : isPdf(doc) && !signedName(doc))
    : (isProjectTask ? docs.some((f) => f.ok) : !!(doc && doc.ok));
  const reasonOk = !late || reason.trim().length > 0;
  // paste a screenshot in any notes field → it lands in the evidence slot
  const attachPasted = async (file) => {
    if (pdfOnly) return; // task bertanda tangan hanya menerima PDF
    const f = await readPastedImage(file);
    if (isProjectTask) setDocs((l) => [...l, f]); else setDoc(f);
    setPasted(true);
  };
  return (
    <Modal open={open} onClose={onClose} width={480}
      title={revising ? "Kirim Revisi" : "Kirim untuk Verifikasi"}
      description={revising
        ? `Unggah ulang bukti dokumen "${task ? task.type : ""}" setelah revisi. Admin akan memverifikasi kembali.`
        : late
          ? `"${task ? task.type : ""}" selesai melewati target — bukti dokumen dan alasan keterlambatan wajib diisi.`
          : `Unggah bukti penyelesaian "${task ? task.type : ""}". Status menjadi On Verification sampai Admin menekan Accept.`}
      footer={<><Button variant="ghost" onClick={onClose}>Batal</Button>
        <Button variant="primary" iconLeft="send" disabled={!docOk || !reasonOk}
          onClick={() => onSubmit({ doc: isProjectTask ? docs.find((f) => f.ok) : doc, docs: isProjectTask ? docs.filter((f) => f.ok) : undefined, reason: reason.trim() || undefined, note: note.trim() || undefined })}>Kirim</Button></>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <Field label={pdfOnly ? "Bukti Dokumen (PDF saja)" : "Bukti Dokumen (PDF / JPG / PNG)"} required
          error={doc && !doc.ok ? "Format harus PDF, JPG, atau PNG." : pdfOnly && signedName(doc) ? "File ini sudah ber-TTD (…-ttd.pdf). Unggah dokumen asli tanpa tanda tangan agar TTD tidak dobel." : pdfOnly && doc && doc.ok && doc.kind === "image" ? "Task ini akan ditandatangani Admin — bukti harus PDF." : undefined}
          hint={docOk ? undefined : (
            <span style={{ display: "flex", flexDirection: "column", gap: 3 }}>
              <span>1. {isProjectTask ? "Minimal satu file; file tambahan opsional." : "Tanpa dokumen, task tidak bisa dikirim untuk verifikasi."}</span>
              <span>2. {pdfOnly
                ? "Task ini butuh tanda tangan Admin, jadi hanya PDF yang diterima — screenshot tidak bisa dipakai."
                : "Screenshot bisa langsung di-paste (Ctrl+V) pada kolom catatan untuk Admin — otomatis jadi bukti dokumen."}</span>
            </span>
          )}>
          {isProjectTask
            ? <FileUpload multiple files={docs} maxKb={500} invalid={!docOk} accept={pdfOnly ? "application/pdf" : undefined}
                hint={pdfOnly ? "PDF saja · otomatis dikompres maksimal 500 KB · dokumen ini akan ditandatangani Admin" : undefined}
                onSelect={(f) => setDocs((l) => [...l, f])} onRemove={(i) => setDocs((l) => l.filter((_, x) => x !== i))} />
            : <FileUpload file={doc} maxKb={500} invalid={!!(doc && !doc.ok)} accept={pdfOnly ? "application/pdf" : undefined}
                hint={pdfOnly ? "PDF saja · otomatis dikompres maksimal 500 KB · dokumen ini akan ditandatangani Admin" : undefined}
                onSelect={setDoc} onClear={() => setDoc(null)} />}
        </Field>
        {pasted && (
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6, font: "var(--fw-semibold) var(--fs-xs)/1.3 var(--font-body)", color: "var(--leaf-600)" }}>
            <Icon name="image" size={14} color="var(--leaf-600)" />Screenshot dari clipboard ditambahkan sebagai bukti dokumen.
          </span>
        )}
        {revising && task.revision && (
          <div style={{ padding: "10px 12px", background: "var(--coral-50)", border: "1px solid var(--coral-100)", borderRadius: "var(--radius-sm)" }}>
            <span style={{ display: "block", font: "var(--fw-bold) var(--fs-xs)/1 var(--font-body)", color: "var(--coral-600)", paddingBottom: 4 }}>Poin revisi dari Admin</span>
            <span style={{ font: "var(--fw-regular) var(--fs-sm)/1.5 var(--font-body)", color: "var(--text-body)", whiteSpace: "pre-line" }}>{task.revision}</span>
          </div>
        )}
        <Field label={revising ? "Catatan Revisi untuk Admin" : "Catatan untuk Admin"}
          hint={revising
            ? "Jelaskan apa saja yang sudah diperbaiki."
            : pdfOnly
              ? "Opsional — konteks singkat untuk Admin. Paste screenshot tidak berlaku di sini: bukti task ini harus PDF."
              : "Opsional — konteks singkat untuk Admin. Screenshot bisa langsung di-paste di sini dan jadi bukti dokumen."}>
          <Textarea rows={3} value={note} onChange={(e) => setNote(e.target.value)} onPasteImage={pdfOnly ? undefined : attachPasted}
            placeholder={revising
              ? (pdfOnly ? "cth. Tabel kunjungan minggu ke-2 sudah dilengkapi…" : "cth. Tabel kunjungan minggu ke-2 sudah dilengkapi… (atau paste screenshot)")
              : (pdfOnly ? "cth. Semua checklist sudah dijalankan…" : "cth. Semua checklist sudah dijalankan… (atau paste screenshot)")} />
        </Field>
        {late && (
          <Field label="Alasan Keterlambatan" required error={reason.trim() ? undefined : "Tidak bisa disubmit tanpa alasan."}>
            <Textarea rows={3} value={reason} invalid={!reason.trim()} onChange={(e) => setReason(e.target.value)} onPasteImage={pdfOnly ? undefined : attachPasted} placeholder="cth. Menunggu revisi dari klien…" />
          </Field>
        )}
      </div>
    </Modal>
  );
}
Object.assign(window, { AddTaskModal, CompleteTaskModal, fromPastedImage, readPastedImage });

})();