/* global React */
const { useState: useStateARm, useMemo: useMemoARm } = React;

// ═════════════════════════════════════════════════════════════════════════════
// TELA 2 — STORE MANAGER (Supervisor / Team Leader)
//   Single view: anti-ruptura list. OOS lives in its own module (admin-only).
// ═════════════════════════════════════════════════════════════════════════════
window.ARStoreManager = function ARStoreManager({
  items, store, role,
  onOpenDetail, onUpdate, onToast, onConfirm,
}) {
  return (
    <window.ARStoreList
      items={items}
      store={store}
      role={role}
      onOpenDetail={onOpenDetail}
      onUpdate={onUpdate}
      onToast={onToast}
      onConfirm={onConfirm}
    />
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// Tela 2 — List of anti-ruptura items, with progress + manager actions
// ─────────────────────────────────────────────────────────────────────────────
window.ARStoreList = function ARStoreList({ items, store, role, onOpenDetail, onUpdate, onToast, onConfirm }) {
  const AD = window.AntirupturaData;
  const sum = AD.summary(items);

  const [filterStatus, setFilterStatus] = useStateARm('todos');
  const [filterRisk, setFilterRisk] = useStateARm('todos');

  const visibleItems = useMemoARm(() => {
    return items.filter(it => {
      if (filterStatus !== 'todos' && it.status !== filterStatus) return false;
      if (filterRisk   !== 'todos' && it.risk_level !== filterRisk) return false;
      return true;
    });
  }, [items, filterStatus, filterRisk]);

  function approveItem(it) {
    onUpdate(it.item_id, { status: 'validado' });
    onToast(`Baixa aprovada · ${it.product_name}`, 'success');
  }
  function rejectItem(it) {
    onConfirm({
      title: 'Rejeitar baixa?',
      message: `O item "${it.product_name}" voltará para "Pendente" e precisará ser refeito.`,
      confirmLabel: 'Rejeitar',
      danger: true,
      onConfirm: () => {
        onUpdate(it.item_id, { status: 'pendente', qty_found: null, addresses_scanned: [], finished_at: null });
        onToast('Baixa rejeitada · item voltou para pendente', 'error');
      },
    });
  }
  function recountItem(it) {
    onUpdate(it.item_id, { status: 'pendente', qty_found: null, addresses_scanned: [], finished_at: null });
    onToast(`Recontagem solicitada · ${it.product_name}`, 'success');
  }

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-wrap">
          <span className="page-eyebrow">
            {role === 'teamleader' ? 'Visão team leader · Lista anti-ruptura' : 'Visão supervisor · Lista anti-ruptura'}
          </span>
          <h1 className="page-title">{store.name}</h1>
          <p className="page-subtitle">{store.code} · {sum.total} produtos para conferir hoje</p>
        </div>
      </div>

      {/* Big progress block */}
      <div className="ar-progress-card">
        <div>
          <div className="ar-progress-num">{sum.validado + sum.divergente}<small> / {sum.total}</small></div>
          <div className="ar-progress-meta">{sum.pct_done}% concluído</div>
        </div>
        <div className="ar-progress-bar-wrap">
          <div className="ar-progress-bar-stack">
            <div className="seg ok"   style={{ width: `${(sum.validado/sum.total)*100}%` }}></div>
            <div className="seg bad"  style={{ width: `${(sum.divergente/sum.total)*100}%` }}></div>
            <div className="seg warn" style={{ width: `${(sum.em_exec/sum.total)*100}%` }}></div>
          </div>
          <div className="ar-progress-legend">
            <span className="ar-progress-legend-item"><span className="ar-progress-legend-dot ok"></span>{sum.validado} validados</span>
            <span className="ar-progress-legend-item"><span className="ar-progress-legend-dot bad"></span>{sum.divergente} divergentes</span>
            <span className="ar-progress-legend-item"><span className="ar-progress-legend-dot warn"></span>{sum.em_exec} em execução</span>
            <span className="ar-progress-legend-item"><span className="ar-progress-legend-dot neutral"></span>{sum.pendente} pendentes</span>
          </div>
        </div>
      </div>

      {/* Summary cards */}
      <div className="ar-summary-grid">
        <div className="ar-sum-card">
          <div className="ar-sum-label">Pendentes</div>
          <div className="ar-sum-value">{sum.pendente}</div>
          <div className="ar-sum-foot">não conferidos ainda</div>
        </div>
        <div className="ar-sum-card">
          <div className="ar-sum-label">Em execução</div>
          <div className="ar-sum-value warn">{sum.em_exec}</div>
          <div className="ar-sum-foot">operador no produto agora</div>
        </div>
        <div className="ar-sum-card">
          <div className="ar-sum-label">Validados</div>
          <div className="ar-sum-value ok">{sum.validado}</div>
          <div className="ar-sum-foot">contagem conferida</div>
        </div>
        <div className="ar-sum-card">
          <div className="ar-sum-label">Divergentes</div>
          <div className="ar-sum-value bad">{sum.divergente}</div>
          <div className="ar-sum-foot">precisam de tratativa</div>
        </div>
        <div className="ar-sum-card">
          <div className="ar-sum-label">Qtd. zerada</div>
          <div className="ar-sum-value bad">{sum.zero}</div>
          <div className="ar-sum-foot">produtos sem estoque físico</div>
        </div>
      </div>

      {/* Items table */}
      <window.CollapsiblePanel
        title="Itens da rodada"
        subtitle="Clique em uma linha para ver o detalhamento técnico (score, motivo, fontes)"
        action={
          <div style={{ display: 'flex', gap: 8 }}>
            <select
              value={filterStatus}
              onChange={e => setFilterStatus(e.target.value)}
              style={{
                background: 'var(--bg-1)', border: '1px solid var(--border-1)',
                borderRadius: 8, padding: '6px 10px', fontSize: 12, fontWeight: 600,
                fontFamily: 'inherit', color: 'var(--fg-1)',
              }}
            >
              <option value="todos">Todos os status</option>
              <option value="pendente">Pendente</option>
              <option value="em_execucao">Em execução</option>
              <option value="validado">Validado</option>
              <option value="divergente">Divergente</option>
            </select>
            <select
              value={filterRisk}
              onChange={e => setFilterRisk(e.target.value)}
              style={{
                background: 'var(--bg-1)', border: '1px solid var(--border-1)',
                borderRadius: 8, padding: '6px 10px', fontSize: 12, fontWeight: 600,
                fontFamily: 'inherit', color: 'var(--fg-1)',
              }}
            >
              <option value="todos">Todos os riscos</option>
              <option value="critico">Crítico</option>
              <option value="alto">Alto</option>
              <option value="medio">Médio</option>
              <option value="baixo">Baixo</option>
            </select>
          </div>
        }
        style={{ marginBottom: 16 }}
      >
        <div className="tbl-wrap">
          <table className="tbl ar-tbl">
            <thead>
              <tr>
                <th>Produto</th>
                <th>Risco</th>
                <th style={{ textAlign: 'right' }}>Score</th>
                <th>Motivo</th>
                <th>Status</th>
                <th style={{ textAlign: 'right' }}>Qtd encontrada</th>
                <th>Endereços bipados</th>
                <th>Operador</th>
                <th style={{ textAlign: 'right' }}>Hora</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {visibleItems.map(it => {
                const st = AD.statusInfo(it.status);
                const score = it.risk_score;
                const scoreCls = score >= 80 ? 'bad' : score >= 60 ? 'warn' : 'ok';
                const qtyCls = it.qty_found === 0 ? 'zero'
                             : (it.qty_found != null && it.qty_found === it.expected_qty) ? 'match'
                             : '';
                const scanned = it.addresses_scanned || [];
                return (
                  <tr key={it.item_id} className="clickable" onClick={() => onOpenDetail(it)}>
                    <td className="product">
                      <div className="name">{it.product_name}</div>
                      <div className="code">cód. {it.product_code}</div>
                    </td>
                    <td><span className={`risk-pill ${it.risk_level}`}>{it.risk_level}</span></td>
                    <td style={{ textAlign: 'right' }}>
                      <span className={`ar-score ${scoreCls}`}>{score}</span>
                    </td>
                    <td style={{ fontSize: 12, color: 'var(--fg-2)', maxWidth: 200 }}>{it.front_reason}</td>
                    <td>
                      <span className={`ar-status-pill ${st.cls}`}>
                        <span className="ar-status-dot"></span>{st.label}
                      </span>
                    </td>
                    <td style={{ textAlign: 'right' }}>
                      {it.qty_found != null
                        ? <span className={`ar-qty-cell ${qtyCls}`}>{it.qty_found}</span>
                        : <span style={{ color: 'var(--fg-3)' }}>—</span>}
                    </td>
                    <td>
                      <div className="ar-addr-chips">
                        {it.addresses.slice(0, 4).map(a => (
                          <span
                            key={a.full_address}
                            className={`ar-addr-chip ${scanned.includes(a.full_address) ? 'scanned' : ''}`}
                          >
                            {a.full_address.split('-').slice(1).join('-')}
                          </span>
                        ))}
                        {it.addresses.length > 4 && (
                          <span className="ar-addr-chip-more">+{it.addresses.length - 4}</span>
                        )}
                      </div>
                    </td>
                    <td style={{ fontSize: 12, color: 'var(--fg-2)' }}>{it.operator || '—'}</td>
                    <td style={{ textAlign: 'right', fontSize: 12, color: 'var(--fg-2)', fontFamily: 'var(--font-numeric)' }}>
                      {it.finished_at || '—'}
                    </td>
                    <td onClick={e => e.stopPropagation()}>
                      <div className="ar-row-actions">
                        {it.status === 'divergente' && (
                          <>
                            <button className="ar-action-btn primary" onClick={() => approveItem(it)}>Aprovar</button>
                            <button className="ar-action-btn danger"  onClick={() => rejectItem(it)}>Rejeitar</button>
                          </>
                        )}
                        {(it.status === 'validado' || it.status === 'divergente') && (
                          <button className="ar-action-btn" onClick={() => recountItem(it)}>Recontagem</button>
                        )}
                      </div>
                    </td>
                  </tr>
                );
              })}
              {visibleItems.length === 0 && (
                <tr><td colSpan={10} style={{ textAlign:'center', padding: 24, color: 'var(--fg-3)' }}>
                  Nenhum item com esses filtros.
                </td></tr>
              )}
            </tbody>
          </table>
        </div>
      </window.CollapsiblePanel>
    </div>
  );
};

// ═════════════════════════════════════════════════════════════════════════════
// TELA 3 — OOS (Sem estoque por loja)
//   Reused inside ARStoreManager and ARAdminView. `showStore` toggles dark-store col.
// ═════════════════════════════════════════════════════════════════════════════
window.AROOSTable = function AROOSTable({ rows, showStore, embeddedTitle }) {
  const AD = window.AntirupturaData;
  const [filterReason, setFilterReason] = useStateARm('todos');
  const [filterStore, setFilterStore] = useStateARm('todos');

  const reasons = AD.OOS_REASONS;
  const stores = useMemoARm(() => Array.from(new Set(rows.map(r => r.store_key))), [rows]);

  const visible = useMemoARm(() => {
    return rows.filter(r => {
      if (filterReason !== 'todos' && r.reason !== filterReason) return false;
      if (showStore && filterStore !== 'todos' && r.store_key !== filterStore) return false;
      return true;
    });
  }, [rows, filterReason, filterStore, showStore]);

  function reasonClass(r) {
    if (r === 'estoque interno zerado') return 'bad';
    if (r === 'OOS registrado') return 'bad';
    if (r === 'possível divergência iFood') return 'warn';
    return 'neutral';
  }

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-wrap">
          <span className="page-eyebrow">Sem estoque · Indisponíveis</span>
          <h1 className="page-title">{visible.length} produto{visible.length !== 1 ? 's' : ''} indisponível{visible.length !== 1 ? 'eis' : ''}</h1>
          <p className="page-subtitle">Produtos sem estoque, com OOS registrado ou possível divergência operacional</p>
        </div>
      </div>

      <div className="ar-filters">
        {showStore && (
          <div className="ar-filter">
            <span className="ar-filter-label">Dark store</span>
            <select value={filterStore} onChange={e => setFilterStore(e.target.value)}>
              <option value="todos">Todas as lojas</option>
              {stores.map(key => {
                const s = AD.storeByKey(key);
                return <option key={key} value={key}>{s ? s.name : key}</option>;
              })}
            </select>
          </div>
        )}
        <div className="ar-filter">
          <span className="ar-filter-label">Motivo</span>
          <select value={filterReason} onChange={e => setFilterReason(e.target.value)}>
            <option value="todos">Todos os motivos</option>
            {reasons.map(r => <option key={r} value={r}>{r}</option>)}
          </select>
        </div>
      </div>

      <div className="panel" style={{ marginBottom: 0 }}>
        <div className="tbl-wrap">
          <table className="tbl ar-tbl">
            <thead>
              <tr>
                {showStore && <th>Dark store</th>}
                {showStore && <th>Código</th>}
                <th style={{ textAlign: 'right' }}>Pos. vendas</th>
                <th>Produto</th>
                <th>Código</th>
                <th style={{ textAlign: 'right' }}>Estoque</th>
                <th style={{ textAlign: 'right' }}>N par</th>
                <th style={{ textAlign: 'right' }}>Venda hoje</th>
                <th style={{ textAlign: 'right' }}>Venda 14d</th>
                <th>Motivo</th>
              </tr>
            </thead>
            <tbody>
              {visible.map(r => (
                <tr key={(r.store_code || '') + r.product_code}>
                  {showStore && <td><div className="name">{r.store_name}</div></td>}
                  {showStore && <td style={{ fontFamily: 'var(--font-numeric)', fontSize: 12, color: 'var(--fg-2)' }}>{r.store_code}</td>}
                  <td style={{ textAlign: 'right', fontFamily: 'var(--font-numeric)', fontWeight: 700 }}>#{r.sales_rank}</td>
                  <td className="product">
                    <div className="name">{r.product_name}</div>
                  </td>
                  <td style={{ fontFamily: 'var(--font-numeric)', fontSize: 12, color: 'var(--fg-3)' }}>{r.product_code}</td>
                  <td className="num" style={{ color: r.stock_now === 0 ? 'var(--color-danger)' : 'var(--fg-1)', fontWeight: 800 }}>
                    {r.stock_now}
                  </td>
                  <td className="num">{r.n_par}</td>
                  <td className="num">{r.sales_today}</td>
                  <td className="num">{r.sales_14d}</td>
                  <td>
                    <span className={`ar-status-pill ${reasonClass(r.reason)}`}>
                      <span className="ar-status-dot"></span>{r.reason}
                    </span>
                  </td>
                </tr>
              ))}
              {visible.length === 0 && (
                <tr><td colSpan={showStore ? 10 : 8} style={{ textAlign: 'center', padding: 24, color: 'var(--fg-3)' }}>
                  Nenhum produto com esses filtros.
                </td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

// ═════════════════════════════════════════════════════════════════════════════
// TELA 4 — ADMIN / MATRIZ
//   Two sub-tabs: visão geral por loja, lista cruzando todas as lojas
//   (Sem estoque virou um app próprio no hub, fora do módulo de anti-ruptura)
// ═════════════════════════════════════════════════════════════════════════════
window.ARAdminView = function ARAdminView({ items, subtab, onSubtabChange, onOpenStore, onOpenDetail }) {
  const AD = window.AntirupturaData;

  const totalSum = AD.summary(items);
  const byStore = useMemoARm(() => {
    const map = {};
    items.forEach(it => {
      if (!map[it.store_key]) map[it.store_key] = [];
      map[it.store_key].push(it);
    });
    return AD.STORES
      .filter(s => map[s.key])
      .map(s => ({ ...s, items: map[s.key], summary: AD.summary(map[s.key]) }));
  }, [items]);

  return (
    <>
      <div className="ar-subtabs">
        <button
          className={`ar-subtab ${subtab === 'overview' ? 'active' : ''}`}
          onClick={() => onSubtabChange('overview')}
        >
          <window.Icon name="grid" size={14} /> Visão por loja
          <span className="ar-subtab-count">{byStore.length}</span>
        </button>
        <button
          className={`ar-subtab ${subtab === 'all' ? 'active' : ''}`}
          onClick={() => onSubtabChange('all')}
        >
          <window.Icon name="list" size={14} /> Todos os itens
          <span className="ar-subtab-count">{items.length}</span>
        </button>
      </div>

      {subtab === 'overview' && (
        <window.ARAdminOverview totalSum={totalSum} byStore={byStore} onOpenStore={onOpenStore} />
      )}

      {subtab === 'all' && (
        <window.ARAdminAllItems items={items} onOpenDetail={onOpenDetail} />
      )}
    </>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// Admin overview tab — store cards + totals
// ─────────────────────────────────────────────────────────────────────────────
window.ARAdminOverview = function ARAdminOverview({ totalSum, byStore, onOpenStore }) {
  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-wrap">
          <span className="page-eyebrow">Visão Matriz · Anti-ruptura</span>
          <h1 className="page-title">{byStore.length} lojas na rodada</h1>
          <p className="page-subtitle">Toque em uma loja para abrir a visão de supervisor</p>
        </div>
      </div>

      <div className="ar-summary-grid">
        <div className="ar-sum-card">
          <div className="ar-sum-label">Itens totais</div>
          <div className="ar-sum-value">{totalSum.total}</div>
          <div className="ar-sum-foot">na rodada de hoje</div>
        </div>
        <div className="ar-sum-card">
          <div className="ar-sum-label">Pendentes</div>
          <div className="ar-sum-value">{totalSum.pendente}</div>
          <div className="ar-sum-foot">não iniciados</div>
        </div>
        <div className="ar-sum-card">
          <div className="ar-sum-label">Validados</div>
          <div className="ar-sum-value ok">{totalSum.validado}</div>
          <div className="ar-sum-foot">contagem conferida</div>
        </div>
        <div className="ar-sum-card">
          <div className="ar-sum-label">Divergentes</div>
          <div className="ar-sum-value bad">{totalSum.divergente}</div>
          <div className="ar-sum-foot">precisam de tratativa</div>
        </div>
        <div className="ar-sum-card">
          <div className="ar-sum-label">% concluído</div>
          <div className="ar-sum-value">{totalSum.pct_done}<span style={{ fontSize: 18, color: 'var(--fg-3)', fontWeight: 600 }}>%</span></div>
          <div className="ar-sum-foot">média da rede</div>
        </div>
      </div>

      <window.CollapsiblePanel
        title="Lojas em operação"
        subtitle="Pior progresso primeiro · clique para abrir"
        style={{ marginBottom: 0 }}
      >
        <div className="ar-store-grid">
          {byStore.slice().sort((a,b) => a.summary.pct_done - b.summary.pct_done).map(s => {
            const sm = s.summary;
            const statusCls = sm.divergente > 1 ? 'bad' : sm.pct_done >= 80 ? 'ok' : 'warn';
            return (
              <div key={s.key} className="ar-store-card" onClick={() => onOpenStore(s.key)}>
                <div className="ar-store-card-head">
                  <div>
                    <div className="ar-store-card-name">{s.name}</div>
                    <div className="ar-store-card-code">{s.code}</div>
                  </div>
                  <span className={`store-pill ${statusCls}`}>{sm.pct_done}% concluído</span>
                </div>
                <div className="ar-store-card-metrics">
                  <div className="ar-store-card-metric">
                    <div className="ar-store-card-metric-value">{sm.total}</div>
                    <div className="ar-store-card-metric-label">Itens</div>
                  </div>
                  <div className="ar-store-card-metric">
                    <div className="ar-store-card-metric-value">{sm.pendente}</div>
                    <div className="ar-store-card-metric-label">Pend.</div>
                  </div>
                  <div className="ar-store-card-metric">
                    <div className={`ar-store-card-metric-value ok`}>{sm.validado}</div>
                    <div className="ar-store-card-metric-label">Val.</div>
                  </div>
                  <div className="ar-store-card-metric">
                    <div className={`ar-store-card-metric-value ${sm.divergente > 0 ? 'bad' : ''}`}>{sm.divergente}</div>
                    <div className="ar-store-card-metric-label">Diverg.</div>
                  </div>
                </div>
                <div className="ar-store-card-progress">
                  <div className="seg ok"   style={{ width: `${(sm.validado/sm.total)*100}%` }}></div>
                  <div className="seg bad"  style={{ width: `${(sm.divergente/sm.total)*100}%` }}></div>
                  <div className="seg warn" style={{ width: `${(sm.em_exec/sm.total)*100}%` }}></div>
                </div>
                <div className="ar-store-card-foot">
                  <span>{sm.em_exec > 0 ? `${sm.em_exec} em execução` : 'nenhum em execução'}</span>
                  <span style={{ color: 'var(--shopper-navy)', fontWeight: 800 }}>
                    Abrir <window.Icon name="arrow_right" size={12} />
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      </window.CollapsiblePanel>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// Admin all-items tab — global table with filters
// ─────────────────────────────────────────────────────────────────────────────
window.ARAdminAllItems = function ARAdminAllItems({ items, onOpenDetail }) {
  const AD = window.AntirupturaData;
  const [filterStore, setFilterStore] = useStateARm('todos');
  const [filterStatus, setFilterStatus] = useStateARm('todos');
  const [filterRisk, setFilterRisk] = useStateARm('todos');
  const [filterOperator, setFilterOperator] = useStateARm('todos');

  const operators = useMemoARm(() => Array.from(new Set(items.map(it => it.operator).filter(Boolean))), [items]);

  const visible = useMemoARm(() => items.filter(it => {
    if (filterStore !== 'todos' && it.store_key !== filterStore) return false;
    if (filterStatus !== 'todos' && it.status !== filterStatus) return false;
    if (filterRisk !== 'todos' && it.risk_level !== filterRisk) return false;
    if (filterOperator !== 'todos' && it.operator !== filterOperator) return false;
    return true;
  }), [items, filterStore, filterStatus, filterRisk, filterOperator]);

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-wrap">
          <span className="page-eyebrow">Visão Matriz · Itens consolidados</span>
          <h1 className="page-title">Todos os itens da rodada</h1>
          <p className="page-subtitle">{items.length} itens · {AD.STORES.length} lojas · agente {AD.META.agent_version}</p>
        </div>
      </div>

      <div className="ar-filters">
        <div className="ar-filter">
          <span className="ar-filter-label">Loja</span>
          <select value={filterStore} onChange={e => setFilterStore(e.target.value)}>
            <option value="todos">Todas</option>
            {AD.STORES.map(s => <option key={s.key} value={s.key}>{s.name}</option>)}
          </select>
        </div>
        <div className="ar-filter">
          <span className="ar-filter-label">Risco</span>
          <select value={filterRisk} onChange={e => setFilterRisk(e.target.value)}>
            <option value="todos">Todos</option>
            <option value="critico">Crítico</option>
            <option value="alto">Alto</option>
            <option value="medio">Médio</option>
            <option value="baixo">Baixo</option>
          </select>
        </div>
        <div className="ar-filter">
          <span className="ar-filter-label">Status</span>
          <select value={filterStatus} onChange={e => setFilterStatus(e.target.value)}>
            <option value="todos">Todos</option>
            <option value="pendente">Pendente</option>
            <option value="em_execucao">Em execução</option>
            <option value="validado">Validado</option>
            <option value="divergente">Divergente</option>
          </select>
        </div>
        <div className="ar-filter">
          <span className="ar-filter-label">Operador</span>
          <select value={filterOperator} onChange={e => setFilterOperator(e.target.value)}>
            <option value="todos">Todos</option>
            {operators.map(op => <option key={op} value={op}>{op}</option>)}
          </select>
        </div>
      </div>

      <div className="panel" style={{ marginBottom: 0 }}>
        <div className="tbl-wrap">
          <table className="tbl ar-tbl">
            <thead>
              <tr>
                <th>Loja</th>
                <th>Produto</th>
                <th>Risco</th>
                <th style={{ textAlign: 'right' }}>Score</th>
                <th>Motivo</th>
                <th>Status</th>
                <th style={{ textAlign: 'right' }}>Qtd</th>
                <th>Operador</th>
                <th style={{ textAlign: 'right' }}>Hora</th>
              </tr>
            </thead>
            <tbody>
              {visible.map(it => {
                const st = AD.statusInfo(it.status);
                const score = it.risk_score;
                const scoreCls = score >= 80 ? 'bad' : score >= 60 ? 'warn' : 'ok';
                return (
                  <tr key={it.item_id} className="clickable" onClick={() => onOpenDetail(it)}>
                    <td>
                      <div className="name">{it.store_name}</div>
                      <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-numeric)' }}>{it.store_code}</div>
                    </td>
                    <td className="product">
                      <div className="name">{it.product_name}</div>
                      <div className="code">cód. {it.product_code}</div>
                    </td>
                    <td><span className={`risk-pill ${it.risk_level}`}>{it.risk_level}</span></td>
                    <td style={{ textAlign: 'right' }}>
                      <span className={`ar-score ${scoreCls}`}>{score}</span>
                    </td>
                    <td style={{ fontSize: 12, color: 'var(--fg-2)', maxWidth: 220 }}>{it.front_reason}</td>
                    <td>
                      <span className={`ar-status-pill ${st.cls}`}>
                        <span className="ar-status-dot"></span>{st.label}
                      </span>
                    </td>
                    <td style={{ textAlign: 'right' }}>
                      {it.qty_found != null
                        ? <span className={`ar-qty-cell ${it.qty_found === 0 ? 'zero' : ''}`}>{it.qty_found}</span>
                        : <span style={{ color: 'var(--fg-3)' }}>—</span>}
                    </td>
                    <td style={{ fontSize: 12, color: 'var(--fg-2)' }}>{it.operator || '—'}</td>
                    <td style={{ textAlign: 'right', fontSize: 12, color: 'var(--fg-2)', fontFamily: 'var(--font-numeric)' }}>
                      {it.finished_at || '—'}
                    </td>
                  </tr>
                );
              })}
              {visible.length === 0 && (
                <tr><td colSpan={9} style={{ textAlign: 'center', padding: 24, color: 'var(--fg-3)' }}>
                  Nenhum item com esses filtros.
                </td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

// ═════════════════════════════════════════════════════════════════════════════
// ITEM DETAIL MODAL — Used by mgr/admin to inspect a single item.
//   Shows the explainability layer that the operator never sees.
// ═════════════════════════════════════════════════════════════════════════════
window.ARItemDetailModal = function ARItemDetailModal({ item, role, onClose, onUpdate, onToast, onConfirm }) {
  const AD = window.AntirupturaData;
  const st = AD.statusInfo(item.status);
  const score = item.risk_score;
  const scoreCls = score >= 80 ? 'bad' : score >= 60 ? 'warn' : 'ok';
  const scanned = item.addresses_scanned || [];
  const showDebug = role === 'admin';

  function approve() {
    onUpdate(item.item_id, { status: 'validado' });
    onToast('Baixa aprovada', 'success');
    onClose();
  }
  function reject() {
    onConfirm({
      title: 'Rejeitar baixa?',
      message: `O item "${item.product_name}" voltará para "Pendente".`,
      confirmLabel: 'Rejeitar',
      danger: true,
      onConfirm: () => {
        onUpdate(item.item_id, { status: 'pendente', qty_found: null, addresses_scanned: [], finished_at: null });
        onToast('Baixa rejeitada', 'error');
        onClose();
      },
    });
  }
  function recount() {
    onUpdate(item.item_id, { status: 'pendente', qty_found: null, addresses_scanned: [], finished_at: null });
    onToast('Recontagem solicitada', 'success');
    onClose();
  }

  return (
    <div className="ar-detail-overlay" onClick={onClose}>
      <div className="ar-detail-modal" onClick={e => e.stopPropagation()}>
        <div className="ar-detail-head">
          <div className="ar-detail-head-body">
            <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
              <span className={`risk-pill ${item.risk_level}`}>{item.risk_level}</span>
              <span className={`ar-status-pill ${st.cls}`}>
                <span className="ar-status-dot"></span>{st.label}
              </span>
              <span className={`ar-score ${scoreCls}`}>Score {score}</span>
            </div>
            <h2 className="ar-detail-title">{item.product_name}</h2>
            <div className="ar-detail-sub">cód. {item.product_code} · {item.store_name} ({item.store_code})</div>
          </div>
          <button className="ar-detail-close" onClick={onClose} aria-label="Fechar">×</button>
        </div>

        <div className="ar-detail-section">
          <div className="ar-detail-section-title">Por que foi para a lista</div>
          <div className="ar-detail-rationale">{item.rationale_text}</div>
          {showDebug && item.reasons_json && (
            <div className="ar-detail-tags">
              {item.reasons_json.map(r => (
                <span key={r} className="ar-detail-tag">{r}</span>
              ))}
            </div>
          )}
        </div>

        <div className="ar-detail-section">
          <div className="ar-detail-section-title">Execução</div>
          <div className="ar-detail-grid">
            <div>
              <div className="ar-detail-field-label">Quantidade encontrada</div>
              <div className={`ar-detail-field-value num ${item.qty_found === 0 ? 'zero' : ''}`} style={{ color: item.qty_found === 0 ? 'var(--color-danger)' : 'var(--fg-1)' }}>
                {item.qty_found != null ? item.qty_found : '—'}
              </div>
            </div>
            {showDebug && (
              <div>
                <div className="ar-detail-field-label">Esperado (oculto p/ operador)</div>
                <div className="ar-detail-field-value num">{item.expected_qty}</div>
              </div>
            )}
            <div>
              <div className="ar-detail-field-label">Endereços bipados</div>
              <div className="ar-detail-field-value num">{scanned.length} / {item.addresses.length}</div>
            </div>
            <div>
              <div className="ar-detail-field-label">Operador</div>
              <div className="ar-detail-field-value">{item.operator || '—'}</div>
            </div>
            <div>
              <div className="ar-detail-field-label">Hora</div>
              <div className="ar-detail-field-value num">{item.finished_at || '—'}</div>
            </div>
            <div>
              <div className="ar-detail-field-label">Ranking de vendas (rede)</div>
              <div className="ar-detail-field-value num">#{item.network_sales_rank}</div>
            </div>
          </div>
          {item.observation && (
            <div style={{ marginTop: 14 }}>
              <div className="ar-detail-field-label">Observação do operador</div>
              <div style={{ background: 'var(--bg-2)', padding: '10px 12px', borderRadius: 10, fontSize: 13, color: 'var(--fg-1)', marginTop: 4 }}>
                {item.observation}
              </div>
            </div>
          )}
        </div>

        <div className="ar-detail-section">
          <div className="ar-detail-section-title">Endereços do produto</div>
          <div className="ar-addr-list" style={{ marginBottom: 0 }}>
            {item.addresses.map(a => {
              const isScan = scanned.includes(a.full_address);
              return (
                <div key={a.full_address} className={`ar-addr-row ${isScan ? 'scanned' : ''}`}>
                  <div className={`ar-addr-check ${isScan ? 'scanned' : ''}`}>
                    {isScan && <window.Icon name="check" size={12} stroke={3} />}
                  </div>
                  <div style={{ flex: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
                    <div className={`ar-addr-text ${isScan ? 'scanned' : ''}`}>{a.full_address}</div>
                    <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-numeric)', whiteSpace: 'nowrap' }}>
                      lote {a.id_lote_recebimento} · {a.quantidade} un · val. {a.data_validade}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {showDebug && (
          <div className="ar-detail-section">
            <div className="ar-detail-section-title">Auditoria · técnico (admin)</div>
            <div className="ar-detail-grid">
              <div>
                <div className="ar-detail-field-label">Run ID</div>
                <div className="ar-detail-field-value num">{item.run_id}</div>
              </div>
              <div>
                <div className="ar-detail-field-label">Rodada gerada em</div>
                <div className="ar-detail-field-value num">{item.run_at}</div>
              </div>
              <div>
                <div className="ar-detail-field-label">Versão do agente</div>
                <div className="ar-detail-field-value num">{item.agent_version}</div>
              </div>
            </div>
            <div style={{ marginTop: 14 }}>
              <div className="ar-detail-field-label" style={{ marginBottom: 6 }}>Features</div>
              <div className="ar-detail-json">{JSON.stringify(item.features_json, null, 2)}</div>
            </div>
            <div style={{ marginTop: 10 }}>
              <div className="ar-detail-field-label" style={{ marginBottom: 6 }}>Fontes de dados</div>
              <div className="ar-detail-tags">
                {item.data_sources_json.map(s => <span key={s} className="ar-detail-tag">{s}</span>)}
              </div>
            </div>
          </div>
        )}

        <div className="ar-detail-footer">
          {(item.status === 'divergente' || item.status === 'validado') && (
            <button className="ar-action-btn" onClick={recount}>Pedir recontagem</button>
          )}
          {item.status === 'divergente' && (
            <>
              <button className="ar-action-btn danger" onClick={reject}>Rejeitar baixa</button>
              <button className="ar-action-btn primary" onClick={approve}>Aprovar baixa</button>
            </>
          )}
          <button className="ar-action-btn" onClick={onClose}>Fechar</button>
        </div>
      </div>
    </div>
  );
};

// ═════════════════════════════════════════════════════════════════════════════
// OOS MODULE — standalone app (admin-only)
//   Sem estoque por loja, visão matriz com filtros.
// ═════════════════════════════════════════════════════════════════════════════
window.OOSModule = function OOSModule({ session, onMenu, onLogout }) {
  const AD = window.AntirupturaData;
  return (
    <div className="app-shell">
      <header className="top-bar">
        <img src="assets/logos/logo-shopper-red.svg" alt="Shopper" className="top-bar-logo-img" />
        <div className="top-bar-divider"></div>
        <div className="top-bar-context">
          <span className="top-bar-eyebrow">Sem estoque</span>
          <span className="top-bar-store">Visão gerencial · {AD.STORES.length} lojas</span>
        </div>
        <div className="top-bar-spacer"></div>
        <button className="top-bar-logout" onClick={onMenu} title="Voltar ao menu">
          <window.Icon name="grid" size={14} />
          <span className="top-bar-logout-text">Menu</span>
        </button>
        <button className="top-bar-logout" onClick={onLogout} title="Sair">
          <window.Icon name="log_out" size={14} />
          <span className="top-bar-logout-text">Sair</span>
        </button>
      </header>

      <window.AROOSTable rows={AD.OOS} showStore={true} />
    </div>
  );
};