// Pending Review Queue — the dashboard's center of gravity.
// 25+ rows on a 1440px laptop, no avatars-as-decoration, bulk-select,
// side-panel detail view (does not navigate away), filters above the table.

function PendingReviewQueue({ applicants, openDetail, openId, auditorMode, density }) {
  // Filter state
  const [filterTier, setFilterTier]       = React.useState("Any");
  const [filterCountry, setFilterCountry] = React.useState("Any");
  const [filterDoc, setFilterDoc]         = React.useState("Any");
  const [filterRisk, setFilterRisk]       = React.useState("Any");
  const [filterDays, setFilterDays]       = React.useState("Any");
  const [needsDecision, setNeedsDecision] = React.useState(false);

  // Sort + selection
  const [sortBy, setSortBy]   = React.useState({ key: "days", dir: "desc" });
  const [selected, setSelected] = React.useState(new Set());

  const rows = React.useMemo(() => {
    let r = applicants;
    if (filterTier    !== "Any") r = r.filter(a => a.tier === filterTier.toLowerCase());
    if (filterCountry !== "Any") r = r.filter(a => a.country === filterCountry);
    if (filterDoc     !== "Any") r = r.filter(a => a.doctype === filterDoc);
    if (filterRisk    !== "Any") {
      const band = filterRisk; // Low / Medium / High
      r = r.filter(a => {
        if (band === "Low")    return a.risk < 40;
        if (band === "Medium") return a.risk >= 40 && a.risk < 70;
        if (band === "High")   return a.risk >= 70;
      });
    }
    if (filterDays !== "Any") {
      if (filterDays === "≤7d")   r = r.filter(a => a.days <= 7);
      if (filterDays === "8–30d") r = r.filter(a => a.days > 7 && a.days <= 30);
      if (filterDays === ">30d")  r = r.filter(a => a.days > 30);
    }
    if (needsDecision) r = r.filter(a => a.status === "pending");
    return [...r].sort((a, b) => {
      const dir = sortBy.dir === "asc" ? 1 : -1;
      const va = a[sortBy.key], vb = b[sortBy.key];
      if (typeof va === "number") return (va - vb) * dir;
      return String(va).localeCompare(String(vb)) * dir;
    });
  }, [applicants, filterTier, filterCountry, filterDoc, filterRisk, filterDays, needsDecision, sortBy]);

  const allSelected = rows.length > 0 && rows.every(r => selected.has(r.id));
  const someSelected = rows.some(r => selected.has(r.id));
  const toggleAll = () => {
    if (allSelected) setSelected(new Set());
    else setSelected(new Set(rows.map(r => r.id)));
  };
  const toggleOne = (id) => {
    const s = new Set(selected);
    s.has(id) ? s.delete(id) : s.add(id);
    setSelected(s);
  };

  const clearAllFilters = () => {
    setFilterTier("Any"); setFilterCountry("Any"); setFilterDoc("Any");
    setFilterRisk("Any"); setFilterDays("Any"); setNeedsDecision(false);
  };
  const anyFilter = filterTier !== "Any" || filterCountry !== "Any" || filterDoc !== "Any"
                 || filterRisk !== "Any" || filterDays !== "Any" || needsDecision;

  const onSort = (key) => {
    setSortBy(s => s.key === key ? { key, dir: s.dir === "asc" ? "desc" : "asc" } : { key, dir: "desc" });
  };

  return (
    <>
      <div className="app-subheader">
        <div className="subheader-title">Pending Reviews</div>
        <div className="subheader-meta">{applicants.length} open · {applicants.filter(a => a.days > 30).length} past SLA</div>
        <div className="subheader-spacer" />
        <Btn variant="outlined" icon={IDownload}>Export</Btn>
        <Btn variant="filled" icon={IUpload} disabled={auditorMode}>New Applicant</Btn>
      </div>

      <QueueFilterBar
        filterTier={filterTier}       setFilterTier={setFilterTier}
        filterCountry={filterCountry} setFilterCountry={setFilterCountry}
        filterDoc={filterDoc}         setFilterDoc={setFilterDoc}
        filterRisk={filterRisk}       setFilterRisk={setFilterRisk}
        filterDays={filterDays}       setFilterDays={setFilterDays}
        needsDecision={needsDecision} setNeedsDecision={setNeedsDecision}
        anyFilter={anyFilter}         clearAllFilters={clearAllFilters}
        rowCount={rows.length}        totalCount={applicants.length}
      />

      <div className="tbl-wrap">
        <div className="tbl-scroll">
          <table className="tbl">
            <thead>
              <tr>
                <th className="sticky-first col-check">
                  <Check checked={allSelected} indeterminate={!allSelected && someSelected} onChange={toggleAll} />
                </th>
                <SortableTh keyName="name" sortBy={sortBy} onSort={onSort}>Applicant</SortableTh>
                <th>Type</th>
                <SortableTh keyName="country" sortBy={sortBy} onSort={onSort}>Country</SortableTh>
                <SortableTh keyName="tier" sortBy={sortBy} onSort={onSort}><Term id="Tier">Tier</Term></SortableTh>
                <th>Status</th>
                <SortableTh keyName="risk" sortBy={sortBy} onSort={onSort} numeric><Term id="Risk score">Risk</Term></SortableTh>
                <SortableTh keyName="days" sortBy={sortBy} onSort={onSort}><Term id="SLA">SLA</Term> Age</SortableTh>
                <th>Document</th>
                <th>Next Action</th>
                <th className="col-narrow">{/* actions */}</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((a) => (
                <QueueRow key={a.id} a={a}
                  selected={selected.has(a.id)} onToggle={() => toggleOne(a.id)}
                  isOpen={openId === a.id}
                  onOpen={() => openDetail(a.id)} />
              ))}
              {rows.length === 0 && (
                <tr><td colSpan={11}>
                  <Empty title="No applicants match these filters"
                    hint="Try clearing filters, or toggle off Needs my decision."
                    cta={<Btn variant="outlined" onClick={clearAllFilters}>Clear filters</Btn>} />
                </td></tr>
              )}
            </tbody>
          </table>
        </div>

        <div className="tbl-foot">
          <span>Showing <b>{rows.length}</b> of <b>{applicants.length}</b> applicants</span>
          <span className="tbl-foot-spacer" />
          <span>Sorted by <b>{sortBy.key}</b> ({sortBy.dir})</span>
          <span style={{ marginLeft: 12 }}>Density: <b>{density}</b></span>
        </div>

        {selected.size > 0 && (
          <div className="bulk-bar">
            <span className="bulk-count">{selected.size} selected</span>
            <span className="bulk-sep" />
            <Btn variant="outlined" icon={ICheck} size="xs">Bulk approve low-risk</Btn>
            <Btn variant="outlined" icon={ISend} size="xs">Request docs</Btn>
            <Btn variant="outlined" icon={IDownload} size="xs">Export selection</Btn>
            <span className="bulk-sep" />
            <Btn variant="ghost" icon={IX} size="xs" onClick={() => setSelected(new Set())}>Clear</Btn>
          </div>
        )}
      </div>
    </>
  );
}

function SortableTh({ keyName, sortBy, onSort, numeric, children }) {
  const active = sortBy.key === keyName;
  return (
    <th className={`sortable ${numeric ? "numeric" : ""} ${active ? "is-sorted" : ""}`} onClick={() => onSort(keyName)}>
      {children}
      {active ? <span className="sort-arr">{sortBy.dir === "asc" ? "▲" : "▼"}</span> : <span className="sort-arr">↕</span>}
    </th>
  );
}

function QueueRow({ a, selected, onToggle, isOpen, onOpen }) {
  const c = window.COUNTRIES[a.country];
  const actionTone =
    a.action === "Approve"          ? "is-approve" :
    a.action === "Reject"           ? "is-reject"  :
    a.action.startsWith("Manual")   ? "is-edd"     :
    a.action.startsWith("EDD")      ? "is-edd"     :
    a.action.startsWith("Request")  ? "is-docs"    :
    a.action.startsWith("UBO")      ? "is-edd"     :
                                      "is-hold";
  return (
    <tr className={`${selected ? "is-selected" : ""} ${isOpen ? "is-row-open" : ""}`} onClick={onOpen}>
      <td className="sticky-first col-check" onClick={e => e.stopPropagation()}>
        <Check checked={selected} onChange={onToggle} />
      </td>
      <td>
        <div className="cell-name">
          <span className="cell-name-text">{a.name}</span>
          <span className="cell-name-id">{a.id}</span>
        </div>
      </td>
      <td><span className="cell-kind-pill" title={a.kind === "kyc" ? "Know Your Customer" : "Know Your Business"}>{a.kind.toUpperCase()}</span></td>
      <td><Flag code={a.country} showName /></td>
      <td className="fg-2" style={{ textTransform: "capitalize" }}>{a.tier}</td>
      <td><StatusPill status={a.status} /></td>
      <td className="numeric"><RiskScore value={a.risk} /></td>
      <td><SlaAge days={a.days} /></td>
      <td className="fg-3">{a.doctype}</td>
      <td>
        <span className={`cell-action ${actionTone}`}>
          {a.action === "Approve"  ? <ICheck size={12} /> :
           a.action === "Reject"   ? <IX size={12} /> :
           a.action.startsWith("Request") ? <ISend size={12} /> :
           a.action.startsWith("Manual")  ? <IBolt size={12} /> :
           a.action.startsWith("EDD")     ? <IBolt size={12} /> :
           a.action.startsWith("UBO")     ? <IAlertT size={12} /> :
           <IClock size={12} />}
          {a.action}
        </span>
      </td>
      <td className="col-narrow" onClick={e => e.stopPropagation()}>
        <div className="row-actions">
          <ActionIcon icon={IPencil} label="Edit" />
          <ActionIcon icon={IEye}    label="View" onClick={onOpen} active={isOpen} />
          <ActionIcon icon={IExternal} label={`Open in Sumsub (${a.sumsub})`} />
          <ActionIcon icon={IDotsV}  label="More" />
        </div>
      </td>
    </tr>
  );
}

function QueueFilterBar(props) {
  const {
    filterTier, setFilterTier, filterCountry, setFilterCountry,
    filterDoc, setFilterDoc, filterRisk, setFilterRisk,
    filterDays, setFilterDays, needsDecision, setNeedsDecision,
    anyFilter, clearAllFilters, rowCount, totalCount,
  } = props;

  const cycle = (cur, setter, opts) => () => {
    const i = opts.indexOf(cur);
    setter(opts[(i + 1) % opts.length]);
  };

  return (
    <div className="fbar">
      <FilterChip label="Tier"     value={filterTier}    active={filterTier !== "Any"}    onClick={cycle(filterTier, setFilterTier, ["Any","Low","Medium","High"])} />
      <FilterChip label="Country"  value={filterCountry} active={filterCountry !== "Any"} onClick={cycle(filterCountry, setFilterCountry, ["Any","BS","VG","KY","MX","BR","AR","CH","GB","AE","SG"])} />
      <FilterChip label="Document" value={filterDoc}     active={filterDoc !== "Any"}     onClick={cycle(filterDoc, setFilterDoc, ["Any","Passport","DNI","Cédula","RG / CPF","Cert. of Incorp."])} />
      <FilterChip label="Risk"     value={filterRisk}    active={filterRisk !== "Any"}    onClick={cycle(filterRisk, setFilterRisk, ["Any","Low","Medium","High"])} />
      <FilterChip label="Pending"  value={filterDays}    active={filterDays !== "Any"}    onClick={cycle(filterDays, setFilterDays, ["Any","≤7d","8–30d",">30d"])} />
      <Toggle label="Needs my decision" on={needsDecision} onChange={setNeedsDecision} />
      <span className="fbar-spacer" />
      <span className="fbar-result"><b>{rowCount}</b> of {totalCount}</span>
      {anyFilter && <Btn variant="ghost" size="xs" icon={IX} onClick={clearAllFilters}>Clear</Btn>}
      <Btn variant="outlined" size="xs" icon={IFilter}>Saved views</Btn>
    </div>
  );
}

Object.assign(window, { PendingReviewQueue });