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

window.SupervisorView = function SupervisorView({ intradayData, session, storeCode, onOpenShift, onOpenOperator }) {
  const D = window.IntradayData;
  const A = window.Agg;

  const { kpis, shifts, operators, orders, rupturas } = useMemoSup(() => {
    if (!intradayData) return { kpis: null, shifts: [], operators: [], orders: [], rupturas: [] };
    const rows = intradayData.orders;
    const kpis = intradayData.kpis;

    const byShift = A.groupBy(rows, 'turno');
    const shifts = Object.entries(byShift).map(([turno, sRows]) => ({
      id: turno,
      ...A.shiftInfo(turno),
      kpis: A.kpisFromOrders(sRows),
    })).sort((a, b) => (a.id < b.id ? -1 : 1));

    const byOp = A.groupBy(rows, 'operador');
    const operators = Object.entries(byOp).map(([nome, oRows]) => ({
      nome,
      turno: oRows[0]?.turno || '',
      shiftLabel: A.shiftInfo(oRows[0]?.turno || '').label,
      kpis: A.kpisFromOrders(oRows),
    })).sort((a, b) => a.kpis.sla_pct - b.kpis.sla_pct);

    const rupturas = intradayData.rupturas_top || A.topRupturas(rows, 8);
    const orders = rows.slice(0, 10);
    return { kpis, shifts, operators, orders, rupturas };
  }, [intradayData]);

  if (!intradayData || !kpis) return null;

  const storeName = A.storeLabel(storeCode);
  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);
  const maxRupt = rupturas[0]?.count || 1;

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-wrap">
          <span className="page-eyebrow">Visão da loja · Supervisor</span>
          <h1 className="page-title">{storeName}</h1>
        </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={<>Todos os turnos</>} status="neutral" max={250} />
      </div>

      <div className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-header">
          <div>
            <h3 className="panel-title">Tempos médios da operação</h3>
            <p className="panel-subtitle">Janela atual · todos os turnos</p>
          </div>
        </div>
        <div className="panel-body flush">
          <div className="time-grid time-grid-4">
            <div className="time-cell">
              <span className="time-label">Tempo p/ iniciar picking</span>
              <span className="time-value">{A.secToMin(kpis.avg_init_s)} <span className="time-unit">min</span></span>
            </div>
            <div className="time-cell">
              <span className="time-label">Tempo médio de picking</span>
              <span className="time-value">{A.secToMin(kpis.avg_pick_s)} <span className="time-unit">min</span></span>
            </div>
            <div className="time-cell">
              <span className="time-label">Tempo médio de packing</span>
              <span className="time-value">{A.secToMin(kpis.avg_pack_s)} <span className="time-unit">min</span></span>
            </div>
            <div className="time-cell">
              <span className="time-label">Tempo médio do ciclo</span>
              <span className="time-value">{A.secToMin(kpis.avg_cycle_s)} <span className="time-unit">min</span></span>
            </div>
          </div>
        </div>
      </div>

      <div className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-header">
          <div>
            <h3 className="panel-title">Performance por turno</h3>
            <p className="panel-subtitle">Toque em um turno para abrir a visão do team leader</p>
          </div>
        </div>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Turno</th>
                <th style={{ textAlign: 'right' }}>Pedidos</th>
                <th style={{ textAlign: 'right' }}>SLA</th>
                <th style={{ textAlign: 'right' }}>Ruptura</th>
                <th style={{ textAlign: 'right' }}>Foto</th>
                <th style={{ textAlign: 'right' }}>T. iniciar</th>
              </tr>
            </thead>
            <tbody>
              {shifts.map(sh => (
                <tr key={sh.id} className="clickable" onClick={() => onOpenShift && onOpenShift(sh.id)}>
                  <td>
                    <div className="name">{sh.label}</div>
                    <div className="name-sub">{sh.window}</div>
                  </td>
                  <td className="num">{sh.kpis.total_orders}<div className="num-sub">pedidos</div></td>
                  <td><window.PctCell value={sh.kpis.sla_pct} status={D.slaStatus(sh.kpis.sla_pct)} /></td>
                  <td><window.PctCell value={sh.kpis.ruptura_pct} status={D.ruptStatus(sh.kpis.ruptura_pct)} /></td>
                  <td><window.PctCell value={sh.kpis.foto_pct} status={D.fotoStatus(sh.kpis.foto_pct)} /></td>
                  <td className="num">{A.secToMin(sh.kpis.avg_init_s)}<span style={{ color: 'var(--fg-3)', fontWeight: 500, marginLeft: 3 }}>min</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-header">
          <div>
            <h3 className="panel-title">Produtos com maior ruptura</h3>
            <p className="panel-subtitle">Top {rupturas.length} · janela atual</p>
          </div>
        </div>
        <div className="rupt-list">
          {rupturas.map((p, i) => (
            <div key={p.sku} className="rupt-row">
              <span className={`rupt-rank ${i < 3 ? 'top' : ''}`}>{i + 1}</span>
              <div>
                <div className="rupt-name">{p.desc}</div>
                <div className="rupt-meta">cód. {p.sku}</div>
              </div>
              <div>
                <div className="rupt-count">{p.count}</div>
                <div className="rupt-count-label">pedidos</div>
              </div>
              <div className="rupt-bar"><div className="rupt-bar-fill" style={{ width: `${(p.count / maxRupt) * 100}%` }} /></div>
            </div>
          ))}
        </div>
      </div>

      <div className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-header">
          <div>
            <h3 className="panel-title">Performance por operador</h3>
            <p className="panel-subtitle">Toque para abrir o detalhamento individual · pior SLA primeiro</p>
          </div>
        </div>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Operador</th>
                <th>Turno</th>
                <th style={{ textAlign: 'right' }}>Pedidos</th>
                <th style={{ textAlign: 'right' }}>SLA</th>
                <th style={{ textAlign: 'right' }}>Ruptura</th>
                <th style={{ textAlign: 'right' }}>Foto</th>
              </tr>
            </thead>
            <tbody>
              {operators.map(o => (
                <tr key={o.nome} className="clickable" onClick={() => onOpenOperator && onOpenOperator(o.nome, o.turno)}>
                  <td><div className="name">{o.nome}</div></td>
                  <td>{o.shiftLabel}</td>
                  <td className="num">{o.kpis.total_orders}<div className="num-sub">pedidos</div></td>
                  <td><window.PctCell value={o.kpis.sla_pct} status={D.slaStatus(o.kpis.sla_pct)} /></td>
                  <td><window.PctCell value={o.kpis.ruptura_pct} status={D.ruptStatus(o.kpis.ruptura_pct)} /></td>
                  <td><window.PctCell value={o.kpis.foto_pct} status={D.fotoStatus(o.kpis.foto_pct)} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="panel">
        <div className="panel-header">
          <div><h3 className="panel-title">Pedidos recentes</h3></div>
        </div>
        <div className="order-list">
          {orders.map(o => {
            const st = A.orderStatusLabel(o);
            return (
              <div key={o.cod_pedido} className="order-row">
                <div>
                  <div className="order-id">{o.cod_pedido}</div>
                  <div className="order-line2">{o['tipo de pedido']} · {o.eh_turbo === 'SIM' ? 'Turbo' : ''}</div>
                </div>
                <div>
                  <div className="order-operator">{o.operador}</div>
                  <div className="order-meta">{o.teve_ruptura === 'SIM' ? `${o.qtd_itens_ruptura} item(ns) em ruptura` : (A.normKey(o['Foto?']) === 'sim' ? 'Com foto' : 'Sem foto')}</div>
                </div>
                <div>
                  <span className={`order-status ${st.cls}`}>{st.label}</span>
                </div>
                <div className="order-time">{A.secToMin(o.picking_duration_seconds)}min</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};