/* global React */
const { useMemo: useMemoAdm } = React;

window.AdminView = function AdminView({ intradayData, loading, error, onOpenStore }) {
  const D = window.IntradayData;
  const A = window.Agg;

  const { stores, totals, timesTable } = useMemoAdm(() => {
    if (!intradayData) return { stores: [], totals: null, timesTable: [] };
    const byLoja = A.groupBy(intradayData.orders, 'loja');
    const stores = Object.entries(byLoja).map(([loja, rows]) => {
      const kpis = A.kpisFromOrders(rows);
      return { code: loja, name: A.storeLabel(loja), kpis };
    }).sort((a, b) => a.kpis.sla_pct - b.kpis.sla_pct);

    const all = intradayData.orders;
    const totals = A.kpisFromOrders(all);
    const timesTable = stores.slice().sort((a, b) => a.kpis.avg_init_s - b.kpis.avg_init_s);
    return { stores, totals, timesTable };
  }, [intradayData]);

  if (loading && !intradayData) return null;
  if (error && !intradayData) return null;
  if (!intradayData) return null;

  const kpis = intradayData.kpis;
  const slaFora = kpis.total_orders - Math.round(kpis.sla_pct / 100 * kpis.total_orders);
  const fotoSem = kpis.total_orders - Math.round(kpis.foto_pct / 100 * kpis.total_orders);

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-wrap">
          <span className="page-eyebrow">Visão Gerencial</span>
          <h1 className="page-title">{stores.length} lojas em operação</h1>
          <p className="page-subtitle">Toque em uma loja para abrir a visão de supervisor</p>
        </div>
      </div>

      <div className="kpi-grid">
        <window.KPICard label="% SLA 5 min" value={kpis.sla_pct.toFixed(1)} unit="%"
          raw={<><strong>{slaFora.toLocaleString('pt-BR')}</strong> de {kpis.total_orders.toLocaleString('pt-BR')} fora do prazo</>}
          status={D.slaStatus(kpis.sla_pct)} max={100} />
        <window.KPICard label="% pedidos com ruptura" value={kpis.ruptura_pct.toFixed(1)} unit="%"
          raw={<><strong>{Math.round(kpis.ruptura_pct / 100 * kpis.total_orders)}</strong> pedidos com ruptura</>}
          status={D.ruptStatus(kpis.ruptura_pct)} max={10} />
        <window.KPICard label="% pedidos com foto" value={kpis.foto_pct.toFixed(1)} unit="%"
          raw={<><strong>{fotoSem.toLocaleString('pt-BR')}</strong> de {kpis.total_orders.toLocaleString('pt-BR')} sem foto</>}
          status={D.fotoStatus(kpis.foto_pct)} max={100} />
        <window.KPICard label="Total de pedidos" value={kpis.total_orders.toLocaleString('pt-BR')}
          raw={<>{stores.length} lojas · todos os turnos</>}
          status="neutral" max={2500} />
      </div>

      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 12, gap: 12 }}>
        <div>
          <h2 style={{ fontSize: 18, fontWeight: 800, margin: 0, color: 'var(--fg-1)' }}>Lojas</h2>
          <p style={{ fontSize: 12, color: 'var(--fg-3)', margin: '2px 0 0' }}>Ordenadas por SLA · pior primeiro</p>
        </div>
      </div>

      <div className="store-grid" style={{ marginBottom: 16 }}>
        {stores.map((s) => {
          const k = s.kpis;
          const slaS = D.slaStatus(k.sla_pct);
          const ruptS = D.ruptStatus(k.ruptura_pct);
          const fotoS = D.fotoStatus(k.foto_pct);
          const worst = [slaS, ruptS, fotoS].includes('bad') ? 'bad' : [slaS, ruptS, fotoS].includes('warn') ? 'warn' : 'ok';
          const slaFoS = k.total_orders - Math.round(k.sla_pct / 100 * k.total_orders);
          return (
            <div key={s.code} className="store-card" onClick={() => onOpenStore && onOpenStore(s.code)}>
              <div className="store-card-head">
                <div>
                  <div className="store-name">{s.name}</div>
                </div>
                <window.StatusPill status={worst}>
                  {worst === 'ok' ? 'Saudável' : worst === 'warn' ? 'Atenção' : 'Crítico'}
                </window.StatusPill>
              </div>
              <div className="store-metrics">
                <div className="store-metric">
                  <span className="store-metric-label">SLA 5min</span>
                  <span className={`store-metric-value ${slaS}`}>{k.sla_pct.toFixed(1)}%</span>
                  <span className="store-metric-raw">{slaFoS} fora</span>
                </div>
                <div className="store-metric">
                  <span className="store-metric-label">Ruptura</span>
                  <span className={`store-metric-value ${ruptS}`}>{k.ruptura_pct.toFixed(1)}%</span>
                  <span className="store-metric-raw">{Math.round(k.ruptura_pct / 100 * k.total_orders)} pedidos</span>
                </div>
                <div className="store-metric">
                  <span className="store-metric-label">Foto</span>
                  <span className={`store-metric-value ${fotoS}`}>{k.foto_pct.toFixed(1)}%</span>
                  <span className="store-metric-raw">{k.total_orders - Math.round(k.foto_pct / 100 * k.total_orders)} sem foto</span>
                </div>
                <div className="store-metric">
                  <span className="store-metric-label">Pedidos</span>
                  <span className="store-metric-value">{k.total_orders}</span>
                  <span className="store-metric-raw">T. iniciar {A.secToMin(k.avg_init_s)}min</span>
                </div>
              </div>
              <div className="store-foot">
                <span>{s.code}</span>
                <span className="store-foot-cta">Abrir loja <window.Icon name="chevron_right" size={14} /></span>
              </div>
            </div>
          );
        })}
      </div>

      <div className="panel">
        <div className="panel-header">
          <div>
            <h3 className="panel-title">Tempos médios da operação · por loja</h3>
            <p className="panel-subtitle">Iniciar picking · picking · packing</p>
          </div>
        </div>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Loja</th>
                <th style={{ textAlign: 'right' }}>T. iniciar picking</th>
                <th style={{ textAlign: 'right' }}>T. médio de picking</th>
                <th style={{ textAlign: 'right' }}>T. médio de packing</th>
              </tr>
            </thead>
            <tbody>
              {timesTable.map(s => {
                const k = s.kpis;
                const colorFor = (s, ok, warn) => s > warn ? 'var(--color-danger)' : s > ok ? '#C4711A' : '#08956B';
                return (
                  <tr key={s.code}>
                    <td><div className="name">{s.name}</div></td>
                    <td className="num" style={{ color: colorFor(k.avg_init_s, 240, 360) }}>
                      {A.secToMin(k.avg_init_s)}<span style={{ color: 'var(--fg-3)', fontWeight: 500, marginLeft: 3 }}>min</span>
                    </td>
                    <td className="num" style={{ color: colorFor(k.avg_pick_s, 540, 720) }}>
                      {A.secToMin(k.avg_pick_s)}<span style={{ color: 'var(--fg-3)', fontWeight: 500, marginLeft: 3 }}>min</span>
                    </td>
                    <td className="num" style={{ color: colorFor(k.avg_pack_s, 180, 240) }}>
                      {A.secToMin(k.avg_pack_s)}<span style={{ color: 'var(--fg-3)', fontWeight: 500, marginLeft: 3 }}>min</span>
                    </td>
                  </tr>
                );
              })}
              <tr style={{ background: 'var(--bg-2)' }}>
                <td><div className="name" style={{ fontWeight: 800 }}>Média geral</div></td>
                <td className="num">{A.secToMin(kpis.avg_init_s)}<span style={{ color: 'var(--fg-3)', fontWeight: 500, marginLeft: 3 }}>min</span></td>
                <td className="num">{A.secToMin(kpis.avg_pick_s)}<span style={{ color: 'var(--fg-3)', fontWeight: 500, marginLeft: 3 }}>min</span></td>
                <td className="num">{A.secToMin(kpis.avg_pack_s)}<span style={{ color: 'var(--fg-3)', fontWeight: 500, marginLeft: 3 }}>min</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};