// Admin — case queue + filters + bulk command bar

function AdminQueue({ setActiveCase }) {
  const [filter, setFilter] = React.useState("all");
  const [search, setSearch] = React.useState("");
  const [selected, setSelected] = React.useState(new Set());
  const allCases = window.OHB_DATA.cases;

  const filtered = allCases.filter((c) => {
    if (filter === "stp" && c.routing !== "STP") return false;
    if (filter === "non-stp" && c.routing !== "Non-STP") return false;
    if (filter === "review" && c.outcome !== "manual_review") return false;
    if (filter === "rejected" && c.outcome !== "rejected") return false;
    if (search && !`${c.id} ${c.citizen}`.toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  function toggleAll() {
    if (selected.size === filtered.length) setSelected(new Set());
    else setSelected(new Set(filtered.map((c) => c.id)));
  }
  function toggle(id) {
    const next = new Set(selected);
    next.has(id) ? next.delete(id) : next.add(id);
    setSelected(next);
  }

  return (
    <div className="admin-queue">
      <div className="admin-page-head">
        <div>
          <div className="label-eyebrow">Operations</div>
          <h2 className="h2" style={{marginTop:4}}>Case queue</h2>
        </div>
        <div className="row" style={{gap:10}}>
          <div className="cmd-bar">
            <Icon name="command" size={14} style={{color:"var(--muted)"}}/>
            <input placeholder="Search cases, citizens, IDs… (⌘K)" value={search} onChange={(e) => setSearch(e.target.value)}/>
            <span className="kbd">⌘K</span>
          </div>
          <button className="btn ghost"><Icon name="download" size={14}/> Export</button>
          <button className="btn dark-on-light"><Icon name="plus" size={14}/> New case</button>
        </div>
      </div>

      <div className="admin-tiles">
        <Tile label="STP today" value="892" change="+12%" trend="up" color="#1b4149"/>
        <Tile label="Non-STP queue" value="84" change="-8%" trend="down" color="#eaa07a"/>
        <Tile label="SLA at risk" value="3" change="2 today" trend="warn" color="#b45309"/>
        <Tile label="Approval rate" value="94.2%" change="+0.4pp" trend="up" color="#1c1b3b"/>
      </div>

      <div className="admin-filter-row">
        <div className="filter-chip-group">
          {[["all","All"],["stp","STP"],["non-stp","Non-STP"],["review","Needs review"],["rejected","Rejected"]].map(([id, label]) => (
            <button key={id} className={`chip ${filter === id ? "active" : ""}`} onClick={() => setFilter(id)}>
              {label} <span className="muted">· {allCases.filter(c => id === "all" ? true : id === "stp" ? c.routing === "STP" : id === "non-stp" ? c.routing === "Non-STP" : c.outcome === id.replace("rejected","rejected").replace("review","manual_review")).length}</span>
            </button>
          ))}
        </div>
        {selected.size > 0 && (
          <div className="bulk-actions">
            <span className="text-13" style={{fontWeight:600}}>{selected.size} selected</span>
            <button className="btn ghost sm"><Icon name="user" size={13}/> Assign</button>
            <button className="btn ghost sm"><Icon name="check" size={13}/> Approve</button>
            <button className="btn ghost sm"><Icon name="x" size={13}/> Reject</button>
          </div>
        )}
      </div>

      <div className="case-table card">
        <div className="case-table-row case-table-head">
          <input type="checkbox" checked={selected.size === filtered.length && filtered.length > 0} onChange={toggleAll}/>
          <span>Case</span>
          <span>Citizen</span>
          <span>Program</span>
          <span>Routing</span>
          <span>Outcome</span>
          <span>Value</span>
          <span>Assigned</span>
          <span>Opened</span>
          <span/>
        </div>
        {filtered.map((c) => (
          <div key={c.id} className="case-table-row" onClick={() => setActiveCase(c.id)}>
            <input type="checkbox" checked={selected.has(c.id)} onChange={(e) => {e.stopPropagation(); toggle(c.id);}} onClick={(e) => e.stopPropagation()}/>
            <span className="mono text-13">{c.id}</span>
            <span style={{fontWeight:600}}>{c.citizen}</span>
            <span className="muted">{c.program}</span>
            <span>
              <span className={`pill ${c.routing === "STP" ? "ok" : "warn"}`}>{c.routing}</span>
            </span>
            <span>
              <span className={`pill ${c.outcome === "eligible" ? "ok" : c.outcome === "manual_review" ? "warn" : "bad"}`}>
                {c.outcome === "eligible" ? "Eligible" : c.outcome === "manual_review" ? "Review" : "Rejected"}
              </span>
            </span>
            <span className="mono">{c.value ? `OMR ${c.value.toLocaleString()}` : "—"}</span>
            <span className="muted text-13">
              {c.assigned === "Auto" ? <span className="pill copper" style={{height:20}}><Icon name="zap" size={10}/> Auto</span> : c.assigned}
            </span>
            <span className="muted text-13">{c.openedAt}</span>
            <Icon name="chevron_right" size={14} style={{color:"var(--muted)"}}/>
          </div>
        ))}
      </div>
    </div>
  );
}

function Tile({ label, value, change, trend, color }) {
  return (
    <div className="admin-tile">
      <div className="tiny muted" style={{textTransform:"uppercase", letterSpacing:".1em"}}>{label}</div>
      <div className="admin-tile-value" style={{borderLeftColor: color}}>{value}</div>
      <div className={`admin-tile-change ${trend}`}>
        <Icon name={trend === "up" ? "trending" : trend === "down" ? "arrow_down" : "alert"} size={12}/> {change}
      </div>
    </div>
  );
}

window.AdminQueue = AdminQueue;