/* Hunian Kita — Surat & izin (letters / permits)
   Letters: resident requests + RT (pengelola) inbox. Templates per type. */

const LETTER_ST = { Menunggu: "warn", Diproses: "info", Selesai: "pos", Ditolak: "neg" };

function RequestLetter({ ctx, onClose, preset }) {
  const HK = window.HK;
  const [type, setType] = React.useState(preset || HK.letterTypes[0].key);
  const [detail, setDetail] = React.useState("");
  const t = HK.letterTypes.find((x) => x.key === type) || HK.letterTypes[0];
  const submit = () => { onClose(); ctx.addLetter({ type, typeLabel: t.label, icon: t.icon, detail: detail || "—" }); };
  return (
    <Modal onClose={onClose}>
      <div className="mh"><span className="ic" style={{ width: 40, height: 40, borderRadius: 11, background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center" }}><Icon name="file-pen" size={20} /></span>
        <div><h3 style={{ fontSize: 17, fontWeight: 800 }}>Ajukan surat / izin</h3><div className="statline">RT akan memproses sesuai template & mengirim file PDF</div></div>
        <button className="iconbtn" style={{ marginLeft: "auto" }} onClick={onClose}><Icon name="x" size={18} /></button></div>
      <div className="mb">
        <div className="field"><label>Jenis surat</label>
          <div className="choice-row">{HK.letterTypes.map((x) => (
            <button key={x.key} className={"choice" + (type === x.key ? " on" : "")} onClick={() => setType(x.key)}><Icon name={x.icon} size={15} />{x.label}</button>
          ))}</div></div>
        <div className="callout" style={{ marginBottom: 16 }}>
          <span className="cic"><Icon name={t.icon} size={20} /></span>
          <div style={{ flex: 1 }}><div className="ct" style={{ fontSize: 13.5 }}>{t.label}</div><div className="cm">{t.desc} · estimasi {t.sla}</div></div>
        </div>
        <div className="field" style={{ marginBottom: 0 }}><label>Keperluan / detail</label><textarea rows={4} value={detail} onChange={(e) => setDetail(e.target.value)} placeholder="Jelaskan keperluan Anda agar surat sesuai…" /></div>
      </div>
      <div className="mf"><button className="btn ghost" onClick={onClose}>Batal</button>
        <button className="btn primary" onClick={submit}><Icon name="send" size={16} />Kirim pengajuan</button></div>
    </Modal>
  );
}

function LetterRow({ l, resident, ctx }) {
  const set = (status, extra) => { ctx.updateLetter(l.id, { status, ...extra }); ctx.toast(l.id + " → " + status); };
  return (
    <div className="bk">
      <span className="bk-ic" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}><Icon name={l.icon} size={18} /></span>
      <div className="bk-mid">
        <div className="bk-t">{l.typeLabel} <span className="muted">· {l.id}</span></div>
        <div className="statline" style={{ marginTop: 4 }}>{resident ? l.date : l.name + " · " + l.unit + " · " + l.date}{l.detail && l.detail !== "—" ? " — " + l.detail : ""}</div>
      </div>
      <div className="bk-act">
        {resident
          ? (l.status === "Selesai"
              ? <><span className="badge pos"><span className="bdot" />Selesai</span><button className="btn ghost sm" onClick={() => ctx.toast("Mengunduh " + (l.file || l.id + ".pdf"))}><Icon name="download" size={14} />Unduh</button></>
              : <span className={"badge " + LETTER_ST[l.status]}><span className="bdot" />{l.status}</span>)
          : (l.status === "Menunggu"
              ? <><button className="btn ghost sm" onClick={() => set("Ditolak")}>Tolak</button><button className="btn primary sm" onClick={() => set("Diproses")}><Icon name="loader" size={14} />Proses</button></>
              : l.status === "Diproses"
              ? <><button className="btn ghost sm" onClick={() => set("Ditolak")}>Tolak</button><button className="btn primary sm" onClick={() => set("Selesai", { file: l.id + ".pdf" })}><Icon name="check" size={14} />Terbitkan</button></>
              : l.status === "Selesai"
              ? <><span className="badge pos"><span className="bdot" />Selesai</span><button className="btn ghost sm" onClick={() => ctx.toast("Mengunduh " + (l.file || l.id + ".pdf"))}><Icon name="download" size={14} />PDF</button></>
              : <span className="badge neg"><span className="bdot" />Ditolak</span>)}
      </div>
    </div>
  );
}

function Letters({ ctx }) {
  const HK = window.HK, me = HK.me;
  const resident = ctx.role === "penghuni";
  const [open, setOpen] = React.useState(false);
  const [preset, setPreset] = React.useState(null);
  const [filter, setFilter] = React.useState("Semua");

  if (resident) {
    const mine = ctx.letters.filter((l) => l.unit === me.unit);
    return (
      <div className="content-inner">
        <div className="callout" style={{ marginBottom: "var(--gap)" }}>
          <span className="cic"><Icon name="file-text" size={22} /></span>
          <div style={{ flex: 1 }}><div className="ct">Butuh surat dari RT?</div><div className="cm">Ajukan online, RT proses & kirim file PDF. Tidak perlu datang ke rumah Pak RT.</div></div>
        </div>
        <div className="block-label" style={{ marginTop: 0 }}>Jenis surat & izin</div>
        <div className="type-grid">
          {HK.letterTypes.map((t) => (
            <button className="type-card" key={t.key} onClick={() => { setPreset(t.key); setOpen(true); }}>
              <span className="ti"><Icon name={t.icon} size={20} /></span>
              <div><div className="tn">{t.label}</div><div className="td">{t.desc}</div><div className="tsla"><Icon name="clock" size={11} />Estimasi {t.sla}</div></div>
            </button>
          ))}
        </div>
        <div className="card pad mt">
          <div className="card-h"><h3>Riwayat pengajuan</h3><span className="hint">{mine.length} surat</span></div>
          <div className="bk-list">
            {mine.length ? mine.map((l) => <LetterRow key={l.id} l={l} resident ctx={ctx} />)
              : <div className="paid-empty"><Icon name="inbox" size={26} style={{ color: "var(--t3)" }} /><div><b>Belum ada pengajuan.</b><div className="statline">Pilih jenis surat di atas untuk mulai.</div></div></div>}
          </div>
        </div>
        {open && <RequestLetter ctx={ctx} preset={preset} onClose={() => setOpen(false)} />}
      </div>
    );
  }

  // pengelola / admin — inbox
  const list = ctx.letters.filter((l) => filter === "Semua" || l.status === filter);
  const cnt = (s) => ctx.letters.filter((l) => l.status === s).length;
  return (
    <div className="content-inner">
      <div className="mini-stats">
        <div className="ms"><span className="msv" style={{ color: "var(--warn)" }}>{cnt("Menunggu")}</span><span className="msl">Menunggu diproses</span></div>
        <div className="ms"><span className="msv" style={{ color: "var(--info)" }}>{cnt("Diproses")}</span><span className="msl">Sedang diproses</span></div>
        <div className="ms"><span className="msv" style={{ color: "var(--pos)" }}>{cnt("Selesai")}</span><span className="msl">Selesai diterbitkan</span></div>
        <div className="ms"><span className="msv">{ctx.letters.length}</span><span className="msl">Total pengajuan</span></div>
      </div>

      <div className="card pad mt">
        <div className="card-h" style={{ flexWrap: "wrap", rowGap: 10 }}>
          <h3>Pengajuan surat & izin</h3>
          <div className="right">
            <div className="seg">{["Semua", "Menunggu", "Diproses", "Selesai", "Ditolak"].map((s) => (
              <button key={s} className={filter === s ? "on" : ""} onClick={() => setFilter(s)}>{s}</button>))}</div>
            <button className="btn ghost sm" onClick={() => ctx.toast("Editor template surat dibuka")}><Icon name="file-cog" size={15} />Template</button>
          </div>
        </div>
        <div className="bk-list">
          {list.length ? list.map((l) => <LetterRow key={l.id} l={l} resident={false} ctx={ctx} />)
            : <div className="paid-empty"><Icon name="inbox" size={26} style={{ color: "var(--pos)" }} /><div><b>Tidak ada pengajuan di kategori ini.</b><div className="statline">Pilih tab lain.</div></div></div>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Letters, RequestLetter, LetterRow, LETTER_ST });