/* Hunian Kita — Complaints / work-orders + detail drawer */

const CATS = ["All", "Water", "Electrical", "Security", "Drainage", "Facility", "Parking", "Road", "Garbage", "Noise"];
const STATUSES = ["All", "Open", "Assigned", "In progress", "Resolved"];
const FLOW = ["Open", "Assigned", "In progress", "Resolved"];

function ComplaintDrawer({ c, ctx, onClose }) {
  if (!c) return null;
  const HK = window.HK;
  const team = c.assignee ? HK.staff[c.assignee] : null;
  const idx = FLOW.indexOf(c.status);
  const next = idx >= 0 && idx < FLOW.length - 1 ? FLOW[idx + 1] : null;

  const assign = (key) => {
    ctx.updateComplaint(c.id, { assignee: key, status: c.status === "Open" ? "Assigned" : c.status,
      tl: [...(c.tl || []), { t: "Assigned to " + HK.staff[key].lead, m: HK.staff[key].name + " · just now", done: true, ic: "user-check" }] });
    ctx.toast("Assigned to " + HK.staff[key].name);
  };
  const advance = () => {
    if (!next) return;
    ctx.updateComplaint(c.id, { status: next,
      tl: [...(c.tl || []), { t: "Status → " + next, m: "You · just now", done: next === "Resolved", ic: next === "Resolved" ? "check-circle" : "play" }] });
    ctx.toast("Marked as " + next);
  };

  const timeline = c.tl && c.tl.length ? c.tl : [{ t: "Reported", m: c.reporter + " · " + c.created, done: true, ic: "flag" }];

  return (
    <Drawer onClose={onClose}>
      <div className="drawer-h">
        <span className="ic" style={{ width: 44, height: 44, borderRadius: 12, background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center", flex: "none" }}>
          <Icon name={c.icon} size={22} /></span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <span className="statline" style={{ fontWeight: 800, color: "var(--accent)" }}>{c.id}</span>
            <PrioTag prio={c.prio} />
          </div>
          <h3 style={{ fontSize: 18, fontWeight: 800, letterSpacing: "-0.01em", marginTop: 4, lineHeight: 1.2 }}>{c.title}</h3>
        </div>
        <button className="iconbtn" onClick={onClose}><Icon name="x" size={18} /></button>
      </div>

      <div className="drawer-b">
        <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 16 }}>
          <StatusBadge status={c.status} /><SlaPill c={c} />
          {c.affected > 0 && <span className="badge neg"><Icon name="users" size={12} />{c.affected} units</span>}
        </div>

        <div className="kv-grid">
          <div className="kv"><span className="k">Reported by</span><span className="v">{c.reporter}</span></div>
          <div className="kv"><span className="k">Unit</span><span className="v">{c.unit}</span></div>
          <div className="kv"><span className="k">Category</span><span className="v">{c.cat}</span></div>
          <div className="kv"><span className="k">Created</span><span className="v">{c.created}</span></div>
          <div className="kv" style={{ gridColumn: "1 / -1" }}><span className="k">Location · GPS</span><span className="v"><Icon name="map-pin" size={13} style={{ color: "var(--accent)" }} /> {c.loc}</span></div>
        </div>

        <p className="desc">{c.desc}</p>

        {c.photos > 0 && <div className="photo-grid">
          {Array.from({ length: c.photos }).map((_, i) => (
            <div className="photobox" key={i}><Icon name="image" size={26} /><span className="tag">Photo {i + 1}</span></div>
          ))}
        </div>}

        <div className="block-label">Assignment</div>
        <div className="assign-box">
          {team ? <div className="who"><Avatar name={team.lead} size={34} /><div><div className="nm">{team.lead}</div><div className="meta">{team.name}</div></div></div>
            : <div className="muted" style={{ fontSize: 13, fontWeight: 600 }}>Not yet assigned — route to a team:</div>}
          <div className="choice-row" style={{ marginTop: 12 }}>
            {Object.entries(HK.staff).map(([k, v]) => (
              <button key={k} className={"choice" + (c.assignee === k ? " on" : "")} onClick={() => assign(k)}>
                <Icon name={k === "teknik" ? "wrench" : k === "keamanan" ? "shield" : k === "kebersihan" ? "trash-2" : "trees"} size={15} />{v.name}</button>
            ))}
          </div>
        </div>

        <div className="block-label">Progress</div>
        <div className="tl">
          {timeline.map((e, i) => (
            <div className={"ev" + (e.done ? " done" : "")} key={i}>
              <span className="dot"><Icon name={e.done ? "check" : (e.ic || "circle")} size={13} /></span>
              <div><div className="et">{e.t}</div><div className="em">{e.m}</div></div>
            </div>
          ))}
        </div>

        {c.status === "Resolved" && <div className="rating-box">
          <div className="block-label" style={{ marginTop: 0 }}>Resident satisfaction</div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            {[1, 2, 3, 4, 5].map((s) => <Icon key={s} name="star" size={20} style={{ color: s <= (c.rating || 0) ? "#C9810D" : "var(--border)", fill: s <= (c.rating || 0) ? "#C9810D" : "none" }} />)}
            <span className="statline" style={{ marginLeft: 6 }}>{c.rating ? c.rating + ".0 / 5 from resident" : "Awaiting rating"}</span>
          </div>
        </div>}
      </div>

      <div className="drawer-f">
        <button className="btn ghost" onClick={() => ctx.toast("Resident notified via push + WhatsApp")}><Icon name="send" size={16} />Notify resident</button>
        {next ? <button className="btn primary" style={{ flex: 1, justifyContent: "center" }} onClick={advance}>
          <Icon name={next === "Resolved" ? "check-circle" : "arrow-right"} size={16} />Mark as {next}</button>
          : <button className="btn ghost" style={{ flex: 1, justifyContent: "center" }} disabled><Icon name="check-circle" size={16} />Resolved</button>}
      </div>
    </Drawer>
  );
}

function Complaints({ ctx }) {
  const [status, setStatus] = React.useState("All");
  const [cat, setCat] = React.useState("All");
  const list = ctx.complaints.filter((c) =>
    (status === "All" || c.status === status) && (cat === "All" || c.cat === cat));

  const counts = {
    open: ctx.complaints.filter((c) => c.status !== "Resolved").length,
    breach: ctx.complaints.filter((c) => c.status !== "Resolved" && slaInfo(c).cls === "breach").length,
    critical: ctx.complaints.filter((c) => c.prio === "critical" && c.status !== "Resolved").length,
    resolved: ctx.complaints.filter((c) => c.status === "Resolved").length,
  };

  return (
    <div className="content-inner">
      <div className="mini-stats">
        <div className="ms"><span className="msv">{counts.open}</span><span className="msl">Open work-orders</span></div>
        <div className="ms"><span className="msv" style={{ color: "var(--neg)" }}>{counts.critical}</span><span className="msl">Critical now</span></div>
        <div className="ms"><span className="msv" style={{ color: "var(--warn)" }}>{counts.breach}</span><span className="msl">SLA breached</span></div>
        <div className="ms"><span className="msv" style={{ color: "var(--pos)" }}>{counts.resolved}</span><span className="msl">Resolved recently</span></div>
      </div>

      <div className="card pad mt">
        <div className="card-h" style={{ flexWrap: "wrap", rowGap: 10 }}>
          <div className="seg">
            {STATUSES.map((s) => <button key={s} className={status === s ? "on" : ""} onClick={() => setStatus(s)}>{s}</button>)}
          </div>
          <div className="right">
            <select className="cat-select" value={cat} onChange={(e) => setCat(e.target.value)}>
              {CATS.map((c) => <option key={c}>{c}</option>)}
            </select>
            <button className="btn ghost sm"><Icon name="sliders-horizontal" size={15} />Filters</button>
          </div>
        </div>

        <table className="tbl">
          <thead><tr>
            <th>Issue</th><th>Category</th><th>Priority</th><th>Status</th><th>Assigned</th><th>SLA</th><th></th>
          </tr></thead>
          <tbody>
            {list.map((c) => {
              const team = c.assignee ? window.HK.staff[c.assignee] : null;
              return (
                <tr key={c.id} onClick={() => ctx.openComplaint(c.id)}>
                  <td><div className="who">
                    <span className="ci" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}><Icon name={c.icon} size={16} /></span>
                    <div><div className="nm" style={{ maxWidth: 280, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.title}</div>
                      <div className="meta">{c.id} · {c.unit} · {c.created}</div></div></div></td>
                  <td>{c.cat}</td>
                  <td><PrioTag prio={c.prio} /></td>
                  <td><StatusBadge status={c.status} /></td>
                  <td>{team ? <div className="who"><Avatar name={team.lead} size={26} /><span className="meta" style={{ fontWeight: 700, color: "var(--t2)" }}>{team.name}</span></div> : <span className="muted">—</span>}</td>
                  <td><SlaPill c={c} /></td>
                  <td><Icon name="chevron-right" size={18} style={{ color: "var(--t3)" }} /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { ComplaintDrawer, Complaints });