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

window.TeamLeaderView = function TeamLeaderView({ intradayData, session, storeCode, shiftId, onOpenOperator, onBack }) {
  const D = window.IntradayData;
  const A = window.Agg;

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

    const byOp = A.groupBy(rows, 'operador');
    const operators = Object.entries(byOp).map(([nome, oRows]) => ({
      nome,
      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);
    const shiftInfo = A.shiftInfo(shiftId || (rows[0] && rows[0].turno) || '');
    return { kpis, operators, orders, rupturas, shiftInfo };
  }, [intradayData, shiftId]);

  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">
      {onBack && (
        <div style={{ maxWidth: 1400, width: '100%', margin: '0 auto', padding: '16px 24px 0' }}>
          <button className="backlink" onClick={onBack}>
            <window.Icon name="arrow_left" size={14} /> Voltar para {storeName}
          </button>
        </div>
      )}

      <div className="page-header">
        <div className="page-title-wrap">
          <span className="page-eyebrow">Visão do turno · Team leader</span>
          <h1 className="page-title">{shiftInfo.label || shiftId} {shiftInfo.window ? `· ${shiftInfo.window}` : ''}</h1>
          <p className="page-subtitle">{storeName}</p>
        </div>
      </div>

      <div className="kpi-grid">
        <window.KPICard label="% SLA 5 min" value={kpis.sla_pct.toFixed(1)} unit="%"
          raw={<><strong>{slaFora}</strong> de {kpis.total_orders} 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}</strong> de {kpis.total_orders} sem foto</>}
          status={D.fotoStatus(kpis.foto_pct)} max={100} />
        <window.KPICard label="Total de pedidos" value={kpis.total_orders.toLocaleString('pt-BR')}
          raw={<>Turno atual</>} status="neutral" max={150} />
      </div>

      <div className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-header">
          <div>
            <h3 className="panel-title">Performance por operador</h3>
            <p className="panel-subtitle">Pior SLA primeiro · toque para ver detalhes</p>
          </div>
        </div>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Operador</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>
              {operators.map(o => (
                <tr key={o.nome} className="clickable" onClick={() => onOpenOperator && onOpenOperator(o.nome)}>
                  <td><div className="name">{o.nome}</div></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>
                  <td className="num">{A.secToMin(o.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} · turno 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">
        <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']}</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>
  );
};