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

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

  const { kpis, orders } = useMemoOp(() => {
    if (!intradayData) return { kpis: null, orders: [] };
    const rows = intradayData.orders;
    return {
      kpis: intradayData.kpis,
      orders: rows.slice(0, 8),
    };
  }, [intradayData]);

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

  const displayName = operatorName || session.name;
  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">
      {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
          </button>
        </div>
      )}

      <div className="page-header">
        <div className="page-title-wrap">
          <span className="page-eyebrow">Visão do operador</span>
          <h1 className="page-title">{displayName}</h1>
          <p className="page-subtitle">{A.storeLabel(storeCode)} · {A.shiftInfo(shiftId).label}</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</>}
          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="Meus pedidos" value={kpis.total_orders.toString()}
          raw={<>Janela atual</>} status="neutral" max={80} />
      </div>

      <div className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-header">
          <div>
            <h3 className="panel-title">Meus tempos</h3>
            <p className="panel-subtitle">Média dos pedidos do turno</p>
          </div>
        </div>
        <div className="panel-body flush">
          <div className="time-grid time-grid-4">
            <div className="time-cell">
              <span className="time-label">T. 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">T. 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">T. 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">T. médio do ciclo</span>
              <span className="time-value">{A.secToMin(kpis.avg_cycle_s)} <span className="time-unit">min</span></span>
              <span className="time-foot">Meta: &lt; 5 min</span>
            </div>
          </div>
        </div>
      </div>

      <div className="panel">
        <div className="panel-header">
          <div>
            <h3 className="panel-title">Meus pedidos</h3>
            <p className="panel-subtitle">Últimos pedidos do turno</p>
          </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">{A.normKey(o['Foto?']) === 'sim' ? 'Com foto' : 'Sem foto'}</div>
                  <div className="order-meta">{o.teve_ruptura === 'SIM' ? `${o.qtd_itens_ruptura} item(ns) em ruptura` : 'Sem ruptura'}</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>
  );
};