/* Hunian Kita — Sewa space iklan (banner / spanduk strategis)
   Pendapatan masuk kas RT · 10% potongan untuk platform.
   Pengelola/Admin: kelola + pendapatan. Penghuni: browse + ajukan sewa. */

const TRAFFIC_CLS = { "Sangat tinggi": "neg", "Tinggi": "warn", "Sedang": "info", "Rendah": "calm" };

function AdSpace({ ctx }) {
  const HK = window.HK;
  const resident = ctx.role === "penghuni";
  const [spaces, setSpaces] = React.useState(HK.adSpaces.map((s) => ({ ...s })));
  const rented = spaces.filter((s) => s.status === "Tersewa");
  const income = rented.reduce((s, x) => s + x.price, 0);
  const fee = Math.round(income * HK.PLATFORM_CUT);
  const net = income - fee;
  const avail = spaces.filter((s) => s.status === "Tersedia");

  /* ---------- resident: browse & request ---------- */
  if (resident) {
    return (
      <div className="content-inner">
        <div className="callout" style={{ marginBottom: "var(--gap)" }}>
          <span className="cic"><Icon name="megaphone" size={22} /></span>
          <div style={{ flex: 1 }}><div className="ct">Punya usaha? Pasang spanduk di komplek</div><div className="cm">Sewa titik strategis untuk promosi. Pendapatan masuk kas RT untuk lingkungan kita.</div></div>
        </div>
        <div className="block-label" style={{ marginTop: 0 }}>Lokasi tersedia · {avail.length}</div>
        <div className="ad-grid">
          {avail.map((s) => (
            <div className="ad-card" key={s.id}>
              <div className="ah">
                <span className="api" style={{ background: s.color }}><Icon name="megaphone" size={20} /></span>
                <div style={{ flex: 1, minWidth: 0 }}><div className="al">{s.loc}</div><div className="am">{s.id}</div></div>
              </div>
              <span className={"badge " + TRAFFIC_CLS[s.traffic]} style={{ alignSelf: "flex-start" }}><Icon name="trending-up" size={12} />Lalu lintas {s.traffic}</span>
              <div className="aprice">{HK.rp(s.price)} <small>/bulan</small></div>
              <button className="btn primary sm" style={{ justifyContent: "center" }} onClick={() => ctx.toast("Permintaan sewa " + s.id + " dikirim ke pengelola")}><Icon name="hand-coins" size={14} />Ajukan sewa</button>
            </div>
          ))}
        </div>
        <div className="card pad mt">
          <div className="card-h"><h3>Sudah tersewa</h3><span className="hint">{rented.length} titik</span></div>
          {rented.map((s) => (
            <div className="hist-row" key={s.id}>
              <span className="ric" style={{ width: 38, height: 38, borderRadius: 11, display: "grid", placeItems: "center", flex: "none", background: s.color + "1F", color: s.color }}><Icon name="megaphone" size={17} /></span>
              <div style={{ flex: 1, minWidth: 0 }}><div className="rt" style={{ fontSize: 13.5, fontWeight: 700 }}>{s.loc}</div><div className="rm" style={{ fontSize: 12, color: "var(--t3)", fontWeight: 600 }}>{s.tenant} · s/d {s.until}</div></div>
              <span className="badge calm">Terisi</span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  /* ---------- pengelola / admin: manage + revenue ---------- */
  const sewakan = (s) => {
    setSpaces((ss) => ss.map((x) => x.id === s.id ? { ...x, status: "Tersewa", tenant: "Penyewa baru", until: "Jun 2027" } : x));
    ctx.toast(s.id + " ditandai tersewa");
    if (s._id) window.API.apiPost("/ad-spaces/" + s._id + "/rent", { tenant: "Penyewa baru", until: "Jun 2027" }).catch(() => ctx.toast("⚠️ Gagal simpan sewa ke server"));
  };

  return (
    <div className="content-inner">
      <div className="mini-stats">
        <div className="ms"><span className="msv">{HK.rp(income)}</span><span className="msl">Pendapatan kotor / bln</span></div>
        <div className="ms"><span className="msv" style={{ color: "var(--pos)" }}>{HK.rp(net)}</span><span className="msl">Masuk kas RT</span></div>
        <div className="ms"><span className="msv" style={{ color: "var(--accent)" }}>{HK.rp(fee)}</span><span className="msl">Potongan platform · 10%</span></div>
        <div className="ms"><span className="msv">{avail.length}</span><span className="msl">Titik tersedia</span></div>
      </div>

      <div className="callout mt">
        <span className="cic" style={{ background: ctx.role === "admin" ? "var(--accent)" : "var(--pos)" }}><Icon name="receipt-text" size={20} /></span>
        <div style={{ flex: 1 }}><div className="ct" style={{ fontSize: 13.5 }}>{ctx.role === "admin" ? "Platform menerima " + HK.rp(fee) + " / bln (10%) dari estate ini" : "Dari " + HK.rp(income) + ", sebanyak " + HK.rp(net) + " masuk kas RT"}</div><div className="cm">Potongan platform 10% otomatis terpotong saat penyewa membayar. Sisanya langsung ke kas RT.</div></div>
      </div>

      <div className="section-title mt"><h2>Titik iklan & spanduk</h2><span className="statline">{rented.length} tersewa · {avail.length} tersedia</span>
        <div className="right"><button className="btn primary" onClick={() => ctx.toast("Form titik iklan baru dibuka")}><Icon name="plus" size={16} />Tambah titik</button></div></div>
      <div className="ad-grid">
        {spaces.map((s) => (
          <div className="ad-card" key={s.id}>
            <div className="ah">
              <span className="api" style={{ background: s.color }}><Icon name="megaphone" size={20} /></span>
              <div style={{ flex: 1, minWidth: 0 }}><div className="al">{s.loc}</div><div className="am">{s.id} · lalu lintas {s.traffic}</div></div>
              <span className={"badge " + (s.status === "Tersewa" ? "pos" : "calm")}><span className="bdot" />{s.status}</span>
            </div>
            <div className="aprice">{HK.rp(s.price)} <small>/bulan</small></div>
            <div className="af">
              {s.status === "Tersewa"
                ? <><span className="umeta"><Icon name="store" size={13} />{s.tenant}</span><span className="statline" style={{ marginLeft: "auto" }}>s/d {s.until}</span></>
                : <button className="btn primary sm" style={{ marginLeft: "auto" }} onClick={() => sewakan(s)}><Icon name="check" size={14} />Sewakan</button>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.AdSpace = AdSpace;