(() => {
const { Modal, Button, Badge, Icon, Field, Input, Select, Textarea, DataTable, Tabs, Avatar } = window.TaskFlowDesignSystem_dd53c2;

/* Import & template task — dua cara membuat banyak task sekaligus.
   Semua parsing dilakukan sekali saat tombol Proses ditekan (bukan per ketikan),
   supaya file besar tidak membuat halaman berat. */
const CATS = ["Dokumen", "Operasional", "Kepegawaian", "Kegiatan", "Sarana & Prasarana", "Keuangan"];
const HEADER = "jenis task;email user;kategori;prioritas;target;perlu ttd";
const SAMPLE = `Rekap Kunjungan Pasien;ayu@bbmc.id;Operasional;High;30 Agu 2026;tidak
Laporan Stok Obat;rafi@bbmc.id;Operasional;Medium;31 Agu 2026;ya
Audit Kebersihan Ruang;john@bbmc.id;Sarana & Prasarana;Low;28 Agu 2026;tidak`;

const TEMPLATES = [
  { id: "bulanan", name: "Laporan Bulanan Klinik", desc: "4 laporan rutin akhir bulan",
    items: [
      { type: "Laporan Kunjungan Pasien", category: "Operasional", priority: "High", needSign: true },
      { type: "Laporan Stok Obat", category: "Operasional", priority: "Medium", needSign: false },
      { type: "Rekap Absensi Karyawan", category: "Kepegawaian", priority: "Medium", needSign: true },
      { type: "Laporan Keuangan Bulanan", category: "Keuangan", priority: "High", needSign: true },
    ] },
  { id: "akreditasi", name: "Persiapan Akreditasi", desc: "5 dokumen wajib akreditasi",
    items: [
      { type: "Pembaruan SOP Pelayanan", category: "Dokumen", priority: "High", needSign: true },
      { type: "Kalibrasi Alat Medis", category: "Sarana & Prasarana", priority: "High", needSign: true },
      { type: "Pelatihan Staf & Notulen", category: "Kepegawaian", priority: "Medium", needSign: false },
      { type: "Audit Mutu Layanan", category: "Kegiatan", priority: "High", needSign: false },
      { type: "Inventarisasi Aset", category: "Sarana & Prasarana", priority: "Medium", needSign: false },
    ] },
  { id: "mingguan", name: "Rutinitas Mingguan", desc: "3 task berulang tiap minggu",
    items: [
      { type: "Kontrol Kebersihan Ruang", category: "Sarana & Prasarana", priority: "Medium", needSign: false, repeat: "weekly" },
      { type: "Cek Stok Habis Pakai", category: "Operasional", priority: "Medium", needSign: false, repeat: "weekly" },
      { type: "Rekap Keluhan Pasien", category: "Operasional", priority: "Low", needSign: false, repeat: "weekly" },
    ] },
];

const PRIOS = ["High", "Medium", "Low"];
const norm = (s) => String(s || "").trim();

function parseCsv(text, users) {
  const lines = String(text || "").split(/\r?\n/).map((l) => l.trim()).filter(Boolean)
    .filter((l) => l.toLowerCase().replace(/,/g, ";") !== HEADER);
  return lines.map((line, i) => {
    const c = line.split(/[;\t]|,(?=\s*[^ ])/).map(norm);
    const email = (c[1] || "").toLowerCase();
    const u = users.find((x) => x.email.toLowerCase() === email);
    const errs = [];
    if (!c[0]) errs.push("jenis task kosong");
    if (!u) errs.push("email user tidak dikenal");
    if (c[2] && !CATS.includes(c[2])) errs.push("kategori tidak dikenal");
    if (c[3] && !PRIOS.includes(c[3])) errs.push("prioritas tidak dikenal");
    if (!/^\d{1,2}\s\w{3}\s\d{4}$/.test(c[4] || "")) errs.push("format target harus cth. 30 Agu 2026");
    return { line: i + 1, type: c[0], user: u ? u.id : null, userName: u ? u.name : email || "—",
      category: CATS.includes(c[2]) ? c[2] : "Operasional", priority: PRIOS.includes(c[3]) ? c[3] : "Medium",
      target: c[4], needSign: /^(ya|yes|1|true)$/i.test(c[5] || ""), errs };
  });
}

function ImportTasksModal({ open, onClose, onCreate, users = USERS }) {
  const bp = useBreakpoint();
  const narrow = bp !== "desktop";
  const [mode, setMode] = React.useState("csv");
  const [text, setText] = React.useState("");
  const [rows, setRows] = React.useState(null);
  const [tpl, setTpl] = React.useState(TEMPLATES[0].id);
  const [tplTarget, setTplTarget] = React.useState("");
  const [tplRows, setTplRows] = React.useState(null);
  const [note, setNote] = React.useState("");
  if (!open) return null;
  const template = TEMPLATES.find((t) => t.id === tpl) || TEMPLATES[0];
  const valid = rows ? rows.filter((r) => r.errs.length === 0) : [];

  const readFile = (e) => {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    if (!/\.(csv|txt)$/i.test(f.name)) { setNote("Gunakan file .csv (Excel: Save As → CSV)."); return; }
    const rd = new FileReader();
    rd.onload = () => { setText(String(rd.result || "")); setRows(null); setNote(`${f.name} dimuat — tekan Proses untuk memeriksa.`); };
    rd.readAsText(f);
  };
  const openTemplate = () => setTplRows(template.items.map((it, i) => ({ ...it, user: users[i % users.length].id, target: tplTarget })));
  const createFromCsv = () => {
    valid.forEach((r) => onCreate({ type: r.type, category: r.category, priority: r.priority, needSign: r.needSign,
      users: [r.user], assigned: TODAY, target: r.target, isProject: false }));
    setNote(`${valid.length} task dibuat dari import.`);
    setRows(null); setText("");
    onClose();
  };
  const createFromTemplate = () => {
    const list = (tplRows || []).filter((r) => r.target);
    list.forEach((r) => onCreate({ type: r.type, category: r.category, priority: r.priority, needSign: r.needSign,
      repeat: r.repeat, users: [r.user], assigned: TODAY, target: r.target, isProject: false }));
    onClose();
  };

  return (
    <Modal open width={720} onClose={onClose} title="Import & Template Task"
      description="Buat banyak task sekaligus dari file CSV/Excel, atau pakai template task rutin."
      footer={<><Button variant="ghost" onClick={onClose}>Tutup</Button>
        {mode === "csv"
          ? (rows
              ? <Button variant="primary" gradient iconLeft="check" disabled={!valid.length} onClick={createFromCsv}>Buat {valid.length} Task</Button>
              : <Button variant="primary" gradient iconLeft="table" disabled={!text.trim()} onClick={() => setRows(parseCsv(text, users))}>Proses</Button>)
          : (tplRows
              ? <Button variant="primary" gradient iconLeft="check" disabled={!(tplRows || []).some((r) => r.target)} onClick={createFromTemplate}>Buat {(tplRows || []).filter((r) => r.target).length} Task</Button>
              : <Button variant="primary" gradient iconLeft="wand-sparkles" disabled={!tplTarget} onClick={openTemplate}>Susun Task</Button>)}</>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ overflowX: "auto" }}>
          <Tabs activeId={mode} onSelect={(id) => { setMode(id); setNote(""); }}
            tabs={[{ id: "csv", label: "Dari CSV / Excel" }, { id: "tpl", label: "Template Task", count: TEMPLATES.length }]} />
        </div>

        {mode === "csv" && !rows && (
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <span style={{ display: "flex", gap: 8, padding: "10px 12px", background: "var(--teal-50)", border: "1px solid var(--teal-200)", borderRadius: "var(--radius-sm)" }}>
              <Icon name="info" size={15} color="var(--teal-600)" />
              <span style={{ font: "var(--text-caption)", color: "var(--teal-700)" }}>
                Satu baris = satu task, dipisah titik koma: <strong>{HEADER}</strong>. Kolom kategori/prioritas boleh kosong (default Operasional · Medium).
              </span>
            </span>
            <Field label="Unggah file CSV">
              <input type="file" accept=".csv,text/csv,text/plain" onChange={readFile}
                style={{ font: "var(--text-body-default)", color: "var(--text-body)" }} />
            </Field>
            <Field label="Atau tempel data di sini" hint="Bisa langsung copy dari Excel (kolom terpisah tab).">
              <Textarea rows={6} value={text} placeholder={SAMPLE} onChange={(e) => setText(e.target.value)} />
            </Field>
            <Button variant="ghost" size="sm" iconLeft="clipboard-list" onClick={() => setText(SAMPLE)}>Isi contoh data</Button>
            {note && <span style={{ font: "var(--text-caption)", color: "var(--teal-700)" }}>{note}</span>}
          </div>
        )}

        {mode === "csv" && rows && (
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <span style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
              <Badge tone="leaf">{valid.length} siap dibuat</Badge>
              {rows.length - valid.length > 0 && <Badge tone="red">{rows.length - valid.length} baris bermasalah</Badge>}
              <Button variant="ghost" size="sm" iconLeft="rotate-ccw" onClick={() => setRows(null)}>Ubah data</Button>
            </span>
            <div style={{ overflowX: "auto", maxHeight: 300, overflowY: "auto" }}><DataTable
              columns={[{ key: "type", label: "Jenis Task" }, { key: "user", label: "User" }, { key: "cat", label: "Kategori" },
                { key: "prio", label: "Prioritas" }, { key: "target", label: "Target" }, { key: "st", label: "Status", align: "right" }]}
              rows={rows.map((r) => ({
                _highlight: r.errs.length > 0,
                type: <span style={{ font: "var(--fw-semibold) var(--fs-sm)/1.3 var(--font-body)" }}>{r.type || "—"}</span>,
                user: r.userName, cat: r.category, prio: <Badge tone={r.priority === "High" ? "coral" : r.priority === "Medium" ? "gold" : "neutral"}>{r.priority}</Badge>,
                target: <span style={{ font: "var(--fw-medium) var(--fs-xs)/1 var(--font-mono)" }}>{r.target || "—"}</span>,
                st: r.errs.length
                  ? <span style={{ font: "var(--text-caption)", color: "var(--coral-600)" }}>{r.errs.join(", ")}</span>
                  : <Badge tone="leaf" dot>Valid</Badge>,
              }))}
            /></div>
          </div>
        )}

        {mode === "tpl" && !tplRows && (
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ display: "grid", gridTemplateColumns: narrow ? "minmax(0,1fr)" : "minmax(0,1fr) 200px", gap: 12 }}>
              <Field label="Pilih template">
                <Select value={tpl} onChange={(e) => setTpl(e.target.value)} options={TEMPLATES.map((t) => ({ value: t.id, label: t.name }))} />
              </Field>
              <Field label="Target semua task" hint="Format cth. 31 Agu 2026.">
                <Input icon="flag" value={tplTarget} placeholder="31 Agu 2026" onChange={(e) => setTplTarget(e.target.value)} />
              </Field>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <span style={{ font: "var(--text-label)", color: "var(--text-muted)" }}>{template.desc} · {template.items.length} task</span>
              {template.items.map((it) => (
                <span key={it.type} style={{ display: "flex", alignItems: "center", gap: 8, padding: "9px 12px", background: "var(--neutral-50)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-sm)", flexWrap: "wrap" }}>
                  <span style={{ flex: 1, minWidth: 0, font: "var(--fw-semibold) var(--fs-sm)/1.3 var(--font-body)", color: "var(--text-strong)" }}>{it.type}</span>
                  <Badge tone="mint">{it.category}</Badge>
                  <Badge tone={it.priority === "High" ? "coral" : "gold"}>{it.priority}</Badge>
                  {it.needSign && <Badge tone="teal" dot>Perlu TTD</Badge>}
                  {it.repeat && <Badge tone="neutral">Mingguan</Badge>}
                </span>
              ))}
            </div>
          </div>
        )}

        {mode === "tpl" && tplRows && (
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <Badge tone="teal">{template.name}</Badge>
              <Button variant="ghost" size="sm" iconLeft="rotate-ccw" onClick={() => setTplRows(null)}>Pilih template lain</Button>
            </span>
            {tplRows.map((r, i) => (
              <div key={r.type} style={{ display: "grid", gridTemplateColumns: narrow ? "minmax(0,1fr)" : "minmax(0,1fr) 190px 150px", gap: 10, alignItems: "center", padding: "10px 12px", background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-sm)" }}>
                <span style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
                  <span style={{ font: "var(--fw-semibold) var(--fs-sm)/1.3 var(--font-body)", color: "var(--text-strong)" }}>{r.type}</span>
                  <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>{r.category} · {r.priority}{r.needSign ? " · perlu TTD" : ""}</span>
                </span>
                <Select value={String(r.user)} onChange={(e) => setTplRows((list) => list.map((x, j) => (j === i ? { ...x, user: Number(e.target.value) } : x)))}
                  options={users.map((u) => ({ value: String(u.id), label: u.name }))} />
                <Input value={r.target} placeholder="31 Agu 2026" onChange={(e) => setTplRows((list) => list.map((x, j) => (j === i ? { ...x, target: e.target.value } : x)))} />
              </div>
            ))}
          </div>
        )}
      </div>
    </Modal>
  );
}
Object.assign(window, { ImportTasksModal, TASK_TEMPLATES: TEMPLATES });
})();