/* Hunian Kita — Penghuni (resident) app: Beranda, Tagihan, Lapor, Informasi, Booking */

/* ---------------- Beranda (home) ---------------- */
function ResHome({ ctx }) {
  const HK = window.HK, me = HK.me;
  const paid = me.ipl.status === "Lunas";
  const myHeld = ctx.packages.filter((p) => p.unit === me.unit && p.status === "Held");
  const myOpen = ctx.complaints.filter((c) => c.unit === me.unit && c.status !== "Resolved");
  const topUrunan = ctx.urunan.find((u) => u.status === "Aktif");

  return (
    <div className="content-inner">
      <div className="res-greet">
        <Avatar name={me.name} size={48} />
        <div><div className="hi">Halo, {me.name.split(" ")[0]} 👋</div><div className="sub">{me.estate} · Unit {me.unit}</div></div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1fr 1fr" }}>
        <div className={"bill-card" + (paid ? " paid" : "")}>
          <span className="bglow" />
          <div className="bl">Tagihan IPL · {me.ipl.period}</div>
          <div className="bv">{HK.rp(me.ipl.amount)}</div>
          <div className="bm">{paid ? "Sudah lunas — terima kasih!" : "Jatuh tempo " + me.ipl.due + " · belum dibayar"}</div>
          {!paid && <button className="bbtn" onClick={() => {
            if (!me.ipl.billId) { ctx.toast("Membuka pembayaran IPL…"); return; }
            window.API.apiPost("/ipl/bills/" + me.ipl.billId + "/pay", { method: "BCA VA", plan: "monthly" })
              .then(() => ctx.toast("Pembayaran IPL berhasil ✅ (refresh untuk lihat status)"))
              .catch(() => ctx.toast("⚠️ Pembayaran gagal diproses"));
          }}><Icon name="wallet" size={17} />Bayar sekarang</button>}
          {paid && <button className="bbtn" onClick={() => ctx.go("bills")}><Icon name="receipt" size={17} />Lihat riwayat</button>}
        </div>

        <div className="card pad" style={{ display: "flex", flexDirection: "column" }}>
          <div className="card-h" style={{ marginBottom: 12 }}><h3>Akses cepat</h3></div>
          <div className="quick-grid">
            <button className="quick" onClick={() => ctx.go("report")}><span className="qic" style={{ background: "var(--neg-soft)", color: "var(--neg)" }}><Icon name="message-square-warning" size={22} /></span><span className="ql">Lapor</span></button>
            <button className="quick" onClick={() => ctx.go("bills")}><span className="qic" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}><Icon name="wallet" size={22} /></span><span className="ql">Bayar IPL</span></button>
            <button className="quick" onClick={() => ctx.go("packages")}><span className="qic" style={{ background: "var(--warn-soft)", color: "var(--warn)" }}><Icon name="package" size={22} /></span><span className="ql">Paket</span></button>
            <button className="quick" onClick={() => ctx.go("letters")}><span className="qic" style={{ background: "var(--pend-soft)", color: "var(--pend)" }}><Icon name="file-text" size={22} /></span><span className="ql">Surat</span></button>
          </div>
        </div>
      </div>

      {myHeld.length > 0 && (
        <div className="callout mt" onClick={() => ctx.go("packages")} style={{ cursor: "pointer" }}>
          <span className="cic"><Icon name="package" size={22} /></span>
          <div style={{ flex: 1 }}><div className="ct">{myHeld.length} paket menunggu diambil</div><div className="cm">Dititip di {myHeld[0].post} · {myHeld[0].shelf}. Ketuk untuk lihat kode ambil.</div></div>
          <Icon name="chevron-right" size={20} style={{ color: "var(--accent)" }} />
        </div>
      )}

      {topUrunan && (
        <div className="mt">
          <div className="section-title" style={{ marginBottom: 12 }}><h2 style={{ fontSize: 15 }}>Patungan warga aktif</h2><div className="right"><button className="btn ghost sm" onClick={() => ctx.go("bills")}>Semua<Icon name="arrow-right" size={14} /></button></div></div>
          <UrunanCard u={topUrunan} actionLabel="Ikut urunan" onAction={() => ctx.go("bills")} />
        </div>
      )}

      <div className="grid mt" style={{ gridTemplateColumns: "1fr 1fr" }}>
        <div className="card pad">
          <div className="card-h"><h3>Laporan saya</h3><div className="right"><button className="btn ghost sm" onClick={() => ctx.go("report")}>Semua<Icon name="arrow-right" size={14} /></button></div></div>
          {myOpen.length ? myOpen.map((c) => (
            <button className="res-row" key={c.id} onClick={() => ctx.openComplaint(c.id)}>
              <span className="ric" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}><Icon name={c.icon} size={18} /></span>
              <div className="rx"><div className="rt" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.title}</div><div className="rm">{c.id} · {c.created}</div></div>
              <StatusBadge status={c.status} />
            </button>
          )) : <div className="paid-empty"><Icon name="check-circle" size={26} style={{ color: "var(--pos)" }} /><div><b>Tidak ada keluhan aktif.</b><div className="statline">Semua laporan Anda sudah selesai.</div></div></div>}
        </div>

        <div className="card pad">
          <div className="card-h"><h3>Informasi terbaru</h3><div className="right"><button className="btn ghost sm" onClick={() => ctx.go("info")}>Semua<Icon name="arrow-right" size={14} /></button></div></div>
          {ctx.announcements.slice(0, 3).map((a) => {
            const ty = (window.ANN_TYPES && window.ANN_TYPES[a.type]) || { cls: "info", ic: "megaphone" };
            return (
              <div className="res-row" key={a.id}>
                <span className={"ric badge " + ty.cls} style={{ borderRadius: 11 }}><Icon name={ty.ic} size={17} /></span>
                <div className="rx"><div className="rt" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{a.title}</div><div className="rm">{a.time} · {a.author}</div></div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

/* ---------------- Tagihan & iuran (bills + community dues) ---------------- */
function ResBills({ ctx }) {
  const HK = window.HK, me = HK.me;
  const paid = me.ipl.status === "Lunas";
  const [plan, setPlan] = React.useState("monthly");
  const [joined, setJoined] = React.useState({ ...me.urunanJoined });
  const amount = plan === "annual" ? me.ipl.annualAmount : me.ipl.amount;
  const join = (u) => { const amt = 50000; setJoined((j) => ({ ...j, [u.id]: amt })); ctx.contributeUrunan(u.id, amt); };

  return (
    <div className="content-inner">
      <div className="grid" style={{ gridTemplateColumns: "1fr 1fr" }}>
        <div className={"bill-card" + (paid ? " paid" : "")}>
          <span className="bglow" />
          <div className="bl">{plan === "annual" ? "IPL 1 tahun (12 bln)" : "IPL bulanan"} · {me.ipl.period}</div>
          <div className="bv">{HK.rp(amount)}</div>
          <div className="bm">{paid ? "Sudah lunas — terima kasih!" : "Jatuh tempo " + me.ipl.due + (plan === "annual" ? " · hemat " + HK.rp(me.ipl.annualSave) : "")}</div>
          {!paid && <button className="bbtn" onClick={() => {
            if (!me.ipl.billId) { ctx.toast("Membuka pembayaran " + HK.rp(amount) + "…"); return; }
            window.API.apiPost("/ipl/bills/" + me.ipl.billId + "/pay", { method: "BCA VA", plan: plan })
              .then(() => ctx.toast("Pembayaran " + HK.rp(amount) + " berhasil ✅ (refresh untuk lihat status)"))
              .catch(() => ctx.toast("⚠️ Pembayaran gagal diproses"));
          }}><Icon name="wallet" size={17} />Bayar {HK.rp(amount)}</button>}
        </div>

        <div className="card pad">
          <div className="card-h"><h3>Pilih cara bayar</h3></div>
          <div className="pay-opts">
            <button className={"pay-opt" + (plan === "monthly" ? " on" : "")} onClick={() => setPlan("monthly")}>
              <span className="po-chk"><Icon name="check" size={12} /></span>
              <div className="po-l">Bulanan</div><div className="po-v">{HK.rp(me.ipl.amount)}</div>
              <span className="po-save" style={{ background: "var(--surface-3)", color: "var(--t3)" }}>per bulan</span>
            </button>
            <button className={"pay-opt" + (plan === "annual" ? " on" : "")} onClick={() => setPlan("annual")}>
              <span className="po-chk"><Icon name="check" size={12} /></span>
              <div className="po-l">Setahun · {me.ipl.annualLabel}</div><div className="po-v">{HK.rp(me.ipl.annualAmount)}</div>
              <span className="po-save">Hemat {HK.rp(me.ipl.annualSave)}</span>
            </button>
          </div>
          <div className="callout" style={{ marginTop: 14 }}>
            <span className="cic" style={{ background: "var(--warn)" }}><Icon name="alarm-clock" size={20} /></span>
            <div style={{ flex: 1 }}><div className="ct" style={{ fontSize: 13.5 }}>{me.ipl.lateRule}</div><div className="cm">{me.rtrw} · bayar sebelum jatuh tempo agar bebas denda</div></div>
          </div>
        </div>
      </div>

      <div className="card pad mt">
        <div className="card-h"><h3>Metode pembayaran</h3><span className="hint">IPL & iuran</span></div>
        <div className="grid" style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
          <div className="pay-method"><span className="ci" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}><Icon name="building-2" size={16} /></span>
            <div style={{ flex: 1 }}><div className="srt">BCA Virtual Account</div><div className="srd">8810 7712 0012</div></div></div>
          <div className="pay-method"><span className="ci" style={{ background: "var(--pos-soft)", color: "var(--pos)" }}><Icon name="qr-code" size={16} /></span>
            <div style={{ flex: 1 }}><div className="srt">QRIS</div><div className="srd">Semua e-wallet</div></div></div>
          <div className="pay-method"><span className="ci" style={{ background: "var(--info-soft)", color: "var(--info)" }}><Icon name="wallet" size={16} /></span>
            <div style={{ flex: 1 }}><div className="srt">GoPay / OVO / DANA</div><div className="srd">Bayar dari aplikasi</div></div></div>
        </div>
      </div>

      <div className="section-title mt"><h2>Patungan warga</h2><span className="statline">Ikut bantu lingkunganmu</span></div>
      <div className="urunan-list">
        {ctx.urunan.map((u) => (
          <UrunanCard key={u.id} u={u} actionLabel="Ikut urunan" onAction={join} joined={joined[u.id]} />
        ))}
      </div>

      <div className="card pad mt">
        <div className="card-h"><h3>Riwayat tagihan IPL</h3><span className="hint">5 bulan terakhir</span></div>
        {me.iplHistory.map((h) => (
          <div className="hist-row" key={h.period}>
            <span className="ric" style={{ width: 38, height: 38, borderRadius: 11, display: "grid", placeItems: "center", flex: "none", background: h.status === "Lunas" ? "var(--pos-soft)" : "var(--warn-soft)", color: h.status === "Lunas" ? "var(--pos)" : "var(--warn)" }}><Icon name={h.status === "Lunas" ? "check" : "clock"} size={17} /></span>
            <div style={{ flex: 1, minWidth: 0 }}><div className="rt" style={{ fontSize: 13.5, fontWeight: 700 }}>IPL {h.period}</div><div className="rm" style={{ fontSize: 12, color: "var(--t3)", fontWeight: 600 }}>{h.status === "Lunas" ? "Dibayar " + h.date : "Belum dibayar"}</div></div>
            <span className="amt" style={{ marginRight: 12 }}>{HK.rp(h.amount)}</span>
            <span className={"badge " + (h.status === "Lunas" ? "pos" : "warn")}><span className="bdot" />{h.status}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- Lapor (report) ---------------- */
const RES_CATS = [
  { k: "Water", label: "Air", icon: "droplet" },
  { k: "Electrical", label: "Listrik", icon: "zap" },
  { k: "Garbage", label: "Kebersihan", icon: "trash-2" },
  { k: "Security", label: "Keamanan", icon: "shield" },
  { k: "Facility", label: "Fasilitas", icon: "building" },
  { k: "Parking", label: "Parkir", icon: "car" },
  { k: "Road", label: "Jalan", icon: "construction" },
  { k: "Other", label: "Lainnya", icon: "circle-help" },
];

function ReportForm({ ctx, onClose }) {
  const [cat, setCat] = React.useState("Water");
  const [title, setTitle] = React.useState("");
  const [desc, setDesc] = React.useState("");
  const [loc, setLoc] = React.useState("");
  const meta = RES_CATS.find((c) => c.k === cat);
  const submit = () => { onClose(); ctx.addComplaint({ title: title || "Keluhan baru", desc: desc || "—", cat, icon: meta.icon, loc: loc || ("Unit " + window.HK.me.unit) }); };

  return (
    <Modal onClose={onClose}>
      <div className="mh"><span className="ic" style={{ width: 40, height: 40, borderRadius: 11, background: "var(--neg-soft)", color: "var(--neg)", display: "grid", placeItems: "center" }}><Icon name="message-square-warning" size={20} /></span>
        <div><h3 style={{ fontSize: 17, fontWeight: 800 }}>Buat laporan</h3><div className="statline">Laporan dikirim ke pengelola & dilacak otomatis</div></div>
        <button className="iconbtn" style={{ marginLeft: "auto" }} onClick={onClose}><Icon name="x" size={18} /></button></div>
      <div className="mb">
        <div className="field"><label>Kategori</label>
          <div className="choice-row">{RES_CATS.map((c) => (
            <button key={c.k} className={"choice" + (cat === c.k ? " on" : "")} onClick={() => setCat(c.k)}><Icon name={c.icon} size={15} />{c.label}</button>
          ))}</div></div>
        <div className="field"><label>Judul keluhan</label><input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="mis. Air mati sejak pagi" /></div>
        <div className="field"><label>Deskripsi</label><textarea rows={4} value={desc} onChange={(e) => setDesc(e.target.value)} placeholder="Jelaskan detail keluhan Anda…" /></div>
        <div className="field"><label>Lokasi</label><input value={loc} onChange={(e) => setLoc(e.target.value)} placeholder={"mis. Blok C, depan unit " + window.HK.me.unit} /></div>
        <div className="field" style={{ marginBottom: 0 }}><label>Foto (opsional)</label>
          <button className="choice" style={{ alignSelf: "flex-start" }} onClick={() => ctx.toast("Kamera dibuka")}><Icon name="camera" size={15} />Tambah foto</button></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 laporan</button></div>
    </Modal>
  );
}

function ResReport({ ctx }) {
  const [open, setOpen] = React.useState(false);
  const HK = window.HK;
  const mine = ctx.complaints.filter((c) => c.unit === HK.me.unit);
  const active = mine.filter((c) => c.status !== "Resolved");
  const done = mine.filter((c) => c.status === "Resolved");

  return (
    <div className="content-inner">
      <div className="callout" style={{ marginBottom: "var(--gap)" }}>
        <span className="cic" style={{ background: "var(--neg)" }}><Icon name="message-square-warning" size={22} /></span>
        <div style={{ flex: 1 }}><div className="ct">Ada keluhan? Laporkan di sini</div><div className="cm">Pengelola akan menindaklanjuti dengan target waktu (SLA) yang jelas.</div></div>
        <button className="btn primary" onClick={() => setOpen(true)}><Icon name="plus" size={16} />Lapor</button>
      </div>

      <div className="card pad">
        <div className="card-h"><h3>Laporan aktif</h3><span className="hint">{active.length} berjalan</span></div>
        {active.length ? active.map((c) => (
          <button className="res-row" key={c.id} onClick={() => ctx.openComplaint(c.id)}>
            <span className="ric" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}><Icon name={c.icon} size={18} /></span>
            <div className="rx"><div className="rt" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.title}</div><div className="rm">{c.id} · {c.cat} · {c.created}</div></div>
            <StatusBadge status={c.status} />
            <Icon name="chevron-right" size={18} style={{ color: "var(--t3)" }} />
          </button>
        )) : <div className="paid-empty"><Icon name="check-circle" size={26} style={{ color: "var(--pos)" }} /><div><b>Tidak ada laporan aktif.</b><div className="statline">Ketuk "Lapor" untuk membuat keluhan baru.</div></div></div>}
      </div>

      {done.length > 0 && <div className="card pad mt">
        <div className="card-h"><h3>Selesai</h3><span className="hint">{done.length} laporan</span></div>
        {done.map((c) => (
          <button className="res-row" key={c.id} onClick={() => ctx.openComplaint(c.id)}>
            <span className="ric" style={{ background: "var(--pos-soft)", color: "var(--pos)" }}><Icon name="check" size={18} /></span>
            <div className="rx"><div className="rt" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.title}</div><div className="rm">{c.id} · selesai {c.resolvedIn ? "dalam " + c.resolvedIn : ""}</div></div>
            <StatusBadge status={c.status} />
          </button>
        ))}
      </div>}

      {open && <ReportForm ctx={ctx} onClose={() => setOpen(false)} />}
    </div>
  );
}

/* ---------------- Informasi (announcements, read-only) ---------------- */
function ResInfo({ ctx }) {
  return (
    <div className="content-inner">
      <div className="ann-list">
        {ctx.announcements.map((a) => {
          const t = (window.ANN_TYPES && window.ANN_TYPES[a.type]) || { cls: "info", ic: "megaphone" };
          return (
            <div className={"card pad ann" + (a.pinned ? " pinned" : "")} key={a.id}>
              <div className="ann-top">
                <span className={"ic badge " + t.cls} style={{ width: 38, height: 38, borderRadius: 11, padding: 0, justifyContent: "center" }}><Icon name={t.ic} size={18} /></span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
                    <span className={"badge " + t.cls}>{a.type}</span>
                    {a.pinned && <span className="badge calm"><Icon name="pin" size={11} />Disematkan</span>}
                    <span className="statline" style={{ marginLeft: "auto" }}>{a.time} · {a.author}</span>
                  </div>
                  <h3 style={{ fontSize: 16, fontWeight: 800, margin: "8px 0 4px", letterSpacing: "-0.01em" }}>{a.title}</h3>
                  <p style={{ fontSize: 13.5, color: "var(--t2)", lineHeight: 1.5, fontWeight: 500 }}>{a.body}</p>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ---------------- Booking fasilitas (resident) ---------------- */
function ResFacilities({ ctx }) {
  const HK = window.HK;
  return (
    <div className="content-inner">
      <div className="callout" style={{ marginBottom: "var(--gap)" }}>
        <span className="cic" style={{ background: "var(--pend)" }}><Icon name="calendar-check" size={22} /></span>
        <div style={{ flex: 1 }}><div className="ct">Pesan fasilitas bersama</div><div className="cm">Pilih fasilitas, ajukan jadwal — pengelola akan mengonfirmasi.</div></div>
      </div>
      <div className="grid" style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
        {HK.facilities.map((f) => (
          <div className="card pad" key={f.name} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <span className="bk-ic" style={{ background: f.color + "22", color: f.color, width: 44, height: 44 }}><Icon name="building" size={20} /></span>
            <div><div className="fac-n" style={{ fontSize: 15 }}>{f.name}</div><div className="statline">Kapasitas {f.cap} orang</div></div>
            <div className="fac-r" style={{ fontSize: 15 }}>{HK.rp(f.rate)}<span className="muted" style={{ fontWeight: 600 }}> /slot</span></div>
            <button className="btn primary sm" style={{ justifyContent: "center" }} onClick={() => ctx.toast("Permintaan booking " + f.name + " dikirim")}><Icon name="calendar-plus" size={15} />Ajukan booking</button>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ResHome, ResBills, ResReport, ResInfo, ResFacilities });