(() => {
const { Modal, Button, Textarea, Avatar, Badge, EmptyState, Icon, AvatarStack, FileUpload } = window.TaskFlowDesignSystem_dd53c2;
const fmtKb = (b) => (b >= 1048576 ? `${(b / 1048576).toFixed(2)} MB` : `${Math.max(1, Math.round(b / 1024))} KB`);

/* Demo download: the real app streams the stored file. Here we emit a small
   valid PDF carrying the file's metadata so the download itself is testable. */
const downloadFile = (file, subject) => {
  // Berkas asli hasil upload (data URL) diunduh apa adanya.
  const src = file && (file.url || file.src);
  if (src) {
    const a = document.createElement("a");
    a.href = src; a.download = file.name;
    document.body.appendChild(a); a.click(); a.remove();
    return;
  }
  // Tanpa berkas tersimpan: unduh ringkasan metadata agar tetap ada jejak.
  const lines = [`Klinik BBMC - Task Management System`, `Lampiran: ${file.name}`, `Konteks: ${subject}`, `Ukuran setelah kompresi: ${fmtKb(file.compressed || file.size)}`];
  const text = lines.map((l, i) => `BT /F1 12 Tf 40 ${740 - i * 22} Td (${l.replace(/[()\\]/g, "")}) Tj ET`).join("\n");
  const content = `4 0 obj<</Length ${text.length}>>stream\n${text}\nendstream endobj`;
  const pdf = `%PDF-1.4\n1 0 obj<</Type/Catalog/Pages 2 0 R>>endobj\n2 0 obj<</Type/Pages/Kids[3 0 R]/Count 1>>endobj\n3 0 obj<</Type/Page/Parent 2 0 R/MediaBox[0 0 595 842]/Resources<</Font<</F1 5 0 R>>>>/Contents 4 0 R>>endobj\n${content}\n5 0 obj<</Type/Font/Subtype/Type1/BaseFont/Helvetica>>endobj\ntrailer<</Root 1 0 R>>`;
  const url = URL.createObjectURL(new Blob([pdf], { type: "application/pdf" }));
  const a = document.createElement("a");
  a.href = url;
  a.download = file.name.replace(/\.[^.]*$/, "") + ".pdf";
  document.body.appendChild(a); a.click(); a.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1500);
};

/* Threaded discussion for a task or a project. Not live chat — messages are
   posted and read on page load, mirroring the PRD's AJAX-polling approach.
   For a project only its members (plus the Admin) may read or reply. */
/* @mention: klik chip untuk menyisipkan, teks @Nama disorot di bubble pesan. */
const renderMentions = (text, mine) => String(text || "").split(/(@[A-Za-z]+)/g).map((part, i) => (
  /^@[A-Za-z]+$/.test(part)
    ? <span key={i} style={{ font: "var(--fw-bold) var(--fs-body)/1.5 var(--font-body)", color: mine ? "var(--white)" : "var(--teal-700)", background: mine ? "rgba(255,255,255,.18)" : "var(--teal-50)", borderRadius: 4, padding: "1px 4px" }}>{part}</span>
    : <React.Fragment key={i}>{part}</React.Fragment>
));
function DiscussionModal({ open, subject, messages = [], me, allowed, onClose, onSend }) {
  const [draft, setDraft] = React.useState("");
  const [attach, setAttach] = React.useState(null);
  const [viewing, setViewing] = React.useState(null);
  const isAdmin = me.id === 0;
  const canRead = !allowed || isAdmin || allowed.includes(me.id);
  if (!open) return null;

  const send = () => {
    if (!draft.trim() && !(attach && attach.ok)) return;
    onSend(draft.trim() || (attach ? `Lampiran: ${attach.name}` : ""), attach && attach.ok ? attach : undefined);
    setDraft("");
    setAttach(null);
  };

  return (
    <Modal open onClose={onClose} width={560}
      title={subject.title}
      description={subject.kind === "project"
        ? `Diskusi project · hanya ${allowed ? allowed.length : 0} anggota project dan Admin yang dapat melihat dan membalas.`
        : "Diskusi task antara user dan Admin."}>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {subject.members && (
          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", background: "var(--teal-50)", borderRadius: "var(--radius-sm)" }}>
            <AvatarStack users={subject.members.map((id) => ({ name: userById(id).name }))} size={26} max={5} />
            <span style={{ font: "var(--text-caption)", color: "var(--teal-700)" }}>Anggota project + Admin</span>
            <span style={{ marginLeft: "auto" }}><Badge tone="teal">{messages.length} pesan</Badge></span>
          </div>
        )}

        {!canRead ? (
          <EmptyState icon="lock" title="Diskusi terbatas" description="Hanya user yang ditugaskan pada project ini yang dapat membuka diskusinya." />
        ) : (
          <>
            <div style={{ display: "flex", flexDirection: "column", gap: 12, maxHeight: 300, overflowY: "auto", paddingRight: 4 }}>
              {messages.length === 0 && (
                <span style={{ font: "var(--text-body-default)", color: "var(--text-muted)", padding: "12px 0" }}>Belum ada diskusi. Mulai percakapan di bawah.</span>
              )}
              {messages.map((m, i) => {
                const mine = m.by === me.id;
                return (
                  <div key={i} style={{ display: "flex", gap: 10, flexDirection: mine ? "row-reverse" : "row" }}>
                    <Avatar name={m.name} size={34} ring={false} />
                    <div style={{ maxWidth: 380, display: "flex", flexDirection: "column", gap: 4, alignItems: mine ? "flex-end" : "flex-start" }}>
                      <span style={{ display: "flex", gap: 8, alignItems: "baseline", flexDirection: mine ? "row-reverse" : "row" }}>
                        <span style={{ font: "var(--fw-bold) var(--fs-sm)/1 var(--font-body)", color: "var(--text-strong)" }}>{mine ? "Anda" : m.name}</span>
                        <span style={{ font: "var(--text-caption)", color: "var(--text-faint)" }}>{m.at}</span>
                      </span>
                      <span style={{
                        padding: "10px 12px", borderRadius: "var(--radius-md)",
                        background: mine ? "var(--teal-500)" : "var(--neutral-100)",
                        color: mine ? "var(--white)" : "var(--text-body)",
                        font: "var(--fw-regular) var(--fs-body)/1.5 var(--font-body)",
                        borderTopRightRadius: mine ? 4 : undefined, borderTopLeftRadius: mine ? undefined : 4,
                      }}>{renderMentions(m.text, mine)}</span>
                      {m.file && (
                        <span style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", background: "var(--white)", border: "1px solid var(--leaf-200)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-xs)" }}>
                          <Icon name="file-text" size={16} color="var(--teal-600)" />
                          <span style={{ display: "flex", flexDirection: "column" }}>
                            <span style={{ font: "var(--fw-bold) var(--fs-xs)/1.2 var(--font-body)", color: "var(--text-strong)" }}>{m.file.name}</span>
                            <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>{fmtKb(m.file.compressed || m.file.size)}</span>
                          </span>
                          <Button variant="ghost" size="sm" iconLeft="eye" onClick={() => setViewing(m.file)}>View</Button>
                          <Button variant="ghost" size="sm" iconLeft="download" onClick={() => downloadFile(m.file, subject.title)}>Unduh</Button>
                        </span>
                      )}
                      {m.role && <span style={{ font: "var(--text-caption)", color: "var(--text-faint)" }}>{m.role}</span>}
                    </div>
                  </div>
                );
              })}
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 8, paddingTop: 4, borderTop: "1px solid var(--border-subtle)" }}>
              <Textarea rows={2} value={draft} placeholder={isAdmin ? "Tulis instruksi, sebut @Nama, lampirkan dokumen, atau paste screenshot…" : "Tulis pesan, sebut @Nama untuk memanggil orang… (screenshot bisa langsung di-paste)"} onChange={(e) => setDraft(e.target.value)}
                onPasteImage={(f) => (window.readPastedImage ? window.readPastedImage(f).then(setAttach) : setAttach(fromPastedImage(f)))} />
              <span style={{ display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }}>
                <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Sebut:</span>
                {[...(subject.members || USERS.map((u) => u.id)), 0].filter((id, i, arr) => arr.indexOf(id) === i && id !== me.id).map((id) => (
                  <button key={id} type="button" onClick={() => setDraft((d) => (d.trim() ? d.trimEnd() + " " : "") + mentionHandle(id) + " ")}
                    style={{ display: "inline-flex", alignItems: "center", gap: 4, padding: "4px 9px", borderRadius: "var(--radius-pill)", background: "var(--teal-50)", border: "1px solid var(--teal-100)", cursor: "pointer", font: "var(--fw-bold) var(--fs-xs)/1 var(--font-body)", color: "var(--teal-700)" }}>
                    <Icon name="at-sign" size={11} color="var(--teal-600)" />{mentionHandle(id).slice(1)}
                  </button>
                ))}
              </span>
              <span style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                <FileUpload compact anyType accept="*/*" maxKb={500} file={attach} label="Upload Dokumen"
                  onSelect={setAttach} onClear={() => setAttach(null)} />
                {!attach && <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Lampiran opsional · semua format · screenshot bisa di-paste · auto dikompres maks 500 KB</span>}
              </span>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6, font: "var(--text-caption)", color: "var(--text-muted)" }}>
                  <Icon name="info" size={13} color="var(--text-faint)" />Pesan tersimpan, bukan live chat
                </span>
                <span style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
                  <Button variant="ghost" onClick={onClose}>Tutup</Button>
                  <Button variant="primary" gradient iconLeft="send" disabled={!draft.trim() && !(attach && attach.ok)} onClick={send}>Kirim</Button>
                </span>
              </div>
            </div>
          </>
        )}
      </div>
      {viewing && <PdfViewerModal open task={{ type: subject.title, evidence: viewing }} onClose={() => setViewing(null)} />}
    </Modal>
  );
}
Object.assign(window, { downloadEvidence: downloadFile, DiscussionModal });
})();