/* Hunian Kita — Packages (paket) held at the guard post
   Packages: manager/admin view · ResPackages: resident view */

function courierChip(name) {
  const c = (window.HK.COURIERS[name]) || { color: "#7A7A7A", ic: "package" };
  return <span className="courier-chip" style={{ background: c.color }}><Icon name={c.ic} size={13} />{name}</span>;
}
const PKG_STATUS = { Held: "warn", Picked: "pos", Returned: "calm" };
const PKG_LABEL = { Held: "Dititip", Picked: "Diambil", Returned: "Dikembalikan" };

/* ---------------- Log incoming package (staff) ---------------- */
function LogPackage({ ctx, onClose }) {
  const HK = window.HK;
  const [courier, setCourier] = React.useState("J&T Express");
  const [unit, setUnit] = React.useState("");
  const [name, setName] = React.useState("");
  const [size, setSize] = React.useState("Sedang");
  const [post, setPost] = React.useState("Pos Satpam Utama");
  const [note, setNote] = React.useState("");

  const onUnit = (v) => {
    setUnit(v);
    const r = HK.residents.find((x) => x.unit.toLowerCase() === v.toLowerCase());
    if (r) setName(r.name);
  };
  const save = () => { onClose(); ctx.addPackage({ courier, unit: unit || "—", name: name || "Penghuni", size, post, note }); };

  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="package-plus" size={20} /></span>
        <div><h3 style={{ fontSize: 17, fontWeight: 800 }}>Catat paket masuk</h3><div className="statline">Penghuni langsung dapat notifikasi paketnya tiba</div></div>
        <button className="iconbtn" style={{ marginLeft: "auto" }} onClick={onClose}><Icon name="x" size={18} /></button></div>
      <div className="mb">
        <div className="field"><label>Kurir / ekspedisi</label>
          <div className="choice-row">{Object.keys(HK.COURIERS).map((cName) => (
            <button key={cName} className={"choice" + (courier === cName ? " on" : "")} onClick={() => setCourier(cName)}>
              <Icon name={HK.COURIERS[cName].ic} size={15} />{cName}</button>
          ))}</div></div>
        <div className="grid" style={{ gridTemplateColumns: "1fr 1.4fr" }}>
          <div className="field"><label>Unit penerima</label><input value={unit} onChange={(e) => onUnit(e.target.value)} placeholder="mis. C-12" /></div>
          <div className="field"><label>Nama penerima</label><input value={name} onChange={(e) => setName(e.target.value)} placeholder="otomatis dari unit" /></div>
        </div>
        <div className="grid" style={{ gridTemplateColumns: "1fr 1fr" }}>
          <div className="field"><label>Ukuran</label>
            <div className="choice-row">{["Kecil", "Sedang", "Besar"].map((s) => (
              <button key={s} className={"choice" + (size === s ? " on" : "")} onClick={() => setSize(s)}>{s}</button>))}</div></div>
          <div className="field"><label>Pos titip</label>
            <select value={post} onChange={(e) => setPost(e.target.value)}><option>Pos Satpam Utama</option><option>Pos Satpam Timur</option></select></div>
        </div>
        <div className="field" style={{ marginBottom: 0 }}><label>Catatan (opsional)</label><input value={note} onChange={(e) => setNote(e.target.value)} placeholder="mis. fragile, makanan, minta dijemput" /></div>
      </div>
      <div className="mf"><button className="btn ghost" onClick={onClose}>Batal</button>
        <button className="btn primary" onClick={save}><Icon name="check" size={16} />Simpan & beri tahu</button></div>
    </Modal>
  );
}

function Packages({ ctx }) {
  const [open, setOpen] = React.useState(false);
  const [filter, setFilter] = React.useState("Held");
  const pkgs = ctx.packages;
  const held = pkgs.filter((p) => p.status === "Held").length;
  const picked = pkgs.filter((p) => p.status === "Picked").length;
  const returned = pkgs.filter((p) => p.status === "Returned").length;
  const list = pkgs.filter((p) => filter === "All" || p.status === filter);

  const pickup = (p) => ctx.updatePackage(p.id, { status: "Picked", shelf: "—", pickedAt: "Baru saja", pickedBy: p.name });

  return (
    <div className="content-inner">
      <div className="mini-stats">
        <div className="ms"><span className="msv" style={{ color: "var(--warn)" }}>{held}</span><span className="msl">Dititip — belum diambil</span></div>
        <div className="ms"><span className="msv" style={{ color: "var(--pos)" }}>{picked}</span><span className="msl">Sudah diambil</span></div>
        <div className="ms"><span className="msv">2</span><span className="msl">Pos titip aktif</span></div>
        <div className="ms"><span className="msv" style={{ color: "var(--neg)" }}>{returned}</span><span className="msl">Dikembalikan</span></div>
      </div>

      <div className="card pad mt">
        <div className="card-h" style={{ flexWrap: "wrap", rowGap: 10 }}>
          <h3>Daftar paket</h3>
          <div className="right">
            <div className="seg">
              {["Held", "Picked", "Returned", "All"].map((s) => (
                <button key={s} className={filter === s ? "on" : ""} onClick={() => setFilter(s)}>{s === "All" ? "Semua" : PKG_LABEL[s]}</button>
              ))}
            </div>
            <button className="btn primary sm" onClick={() => setOpen(true)}><Icon name="package-plus" size={15} />Catat paket masuk</button>
          </div>
        </div>

        <div className="bk-list">
          {list.map((p) => {
            const c = window.HK.COURIERS[p.courier] || { color: "#7A7A7A", ic: "package" };
            return (
              <div className="bk" key={p.id}>
                <span className="bk-ic" style={{ background: c.color + "1F", color: c.color }}><Icon name={c.ic} size={18} /></span>
                <div className="bk-mid">
                  <div className="bk-t">{p.name} <span className="muted">· {p.unit}</span></div>
                  <div className="statline" style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", marginTop: 4 }}>
                    {courierChip(p.courier)}
                    <span>{p.id} · {p.at} · diterima {p.receivedBy}</span>
                    {p.status === "Held" && <span className="shelf-tag"><Icon name="map-pin" size={11} />{p.shelf} · {p.post}</span>}
                    {p.note && <span className="badge calm"><Icon name="info" size={11} />{p.note}</span>}
                  </div>
                </div>
                {p.status === "Held"
                  ? <div className="bk-act"><button className="btn primary sm" onClick={() => pickup(p)}><Icon name="hand" size={14} />Tandai diambil</button></div>
                  : <span className={"badge " + PKG_STATUS[p.status]}><span className="bdot" />{PKG_LABEL[p.status]}{p.pickedAt && p.status === "Picked" ? " · " + p.pickedAt : ""}</span>}
              </div>
            );
          })}
          {list.length === 0 && <div className="paid-empty"><Icon name="package-check" size={28} style={{ color: "var(--pos)" }} /><div><b>Tidak ada paket di kategori ini.</b><div className="statline">Pilih tab lain untuk melihat paket.</div></div></div>}
        </div>
      </div>
    </div>
  );
}

/* ---------------- Resident: my packages ---------------- */
function ResPackages({ ctx }) {
  const HK = window.HK;
  const mine = ctx.packages.filter((p) => p.unit === HK.me.unit);
  const held = mine.filter((p) => p.status === "Held");
  const history = mine.filter((p) => p.status !== "Held");

  return (
    <div className="content-inner">
      {held.length > 0
        ? <div className="callout" style={{ marginBottom: "var(--gap)" }}>
            <span className="cic"><Icon name="package" size={22} /></span>
            <div style={{ flex: 1 }}><div className="ct">{held.length} paket menunggu diambil</div><div className="cm">Tunjukkan kode di bawah ke satpam saat mengambil paket.</div></div>
          </div>
        : <div className="callout" style={{ marginBottom: "var(--gap)" }}>
            <span className="cic" style={{ background: "var(--pos)" }}><Icon name="check" size={22} /></span>
            <div style={{ flex: 1 }}><div className="ct">Tidak ada paket menunggu</div><div className="cm">Paket baru akan muncul di sini begitu satpam mencatatnya.</div></div>
          </div>}

      {held.length > 0 && <div className="pkg-list">
        {held.map((p) => {
          const c = HK.COURIERS[p.courier] || { color: "#7A7A7A", ic: "package" };
          return (
            <div className="pkg-card" key={p.id}>
              <span className="pic" style={{ background: c.color }}><Icon name={c.ic} size={24} /></span>
              <div className="mid">
                <div className="t">{p.courier}</div>
                <div className="m">{p.id} · {p.size} · tiba {p.at}</div>
                <div className="m" style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 5 }}><Icon name="map-pin" size={13} style={{ color: "var(--accent)" }} />{p.shelf} — {p.post}</div>
                {p.note && <div className="m" style={{ marginTop: 4 }}><span className="badge calm"><Icon name="info" size={11} />{p.note}</span></div>}
              </div>
              <div style={{ textAlign: "center", flex: "none" }}>
                <span className="pkg-code"><Icon name="qr-code" size={16} />{p.code}</span>
                <div className="statline" style={{ marginTop: 6, fontSize: 11 }}>Kode ambil</div>
              </div>
            </div>
          );
        })}
      </div>}

      <div className="card pad mt">
        <div className="card-h"><h3>Riwayat paket</h3><span className="hint">{history.length} paket</span></div>
        {history.length ? history.map((p) => {
          const c = HK.COURIERS[p.courier] || { color: "#7A7A7A", ic: "package" };
          return (
            <div className="hist-row" key={p.id}>
              <span className="ric" style={{ background: c.color + "1F", color: c.color, width: 38, height: 38, borderRadius: 11, display: "grid", placeItems: "center", flex: "none" }}><Icon name={c.ic} size={17} /></span>
              <div style={{ flex: 1, minWidth: 0 }}><div className="rt" style={{ fontSize: 13.5, fontWeight: 700 }}>{p.courier} · {p.id}</div>
                <div className="rm" style={{ fontSize: 12, color: "var(--t3)", fontWeight: 600 }}>{p.status === "Picked" ? "Diambil " + (p.pickedAt || "") + (p.pickedBy ? " oleh " + p.pickedBy : "") : "Dikembalikan ke kurir"}</div></div>
              <span className={"badge " + PKG_STATUS[p.status]}><span className="bdot" />{PKG_LABEL[p.status]}</span>
            </div>
          );
        }) : <div className="statline">Belum ada riwayat.</div>}
      </div>
    </div>
  );
}

Object.assign(window, { Packages, ResPackages });