/* kpis.jsx — Módulo 6 (v3): KPIs logísticos del día. Todo derivado del estado real del store.
   Registra window.CR.screens.Kpis. Babel/JSX. */
(function () {
  window.CR = window.CR || {};
  window.CR.screens = window.CR.screens || {};
  var React = window.React;
  var ui = window.CR.ui, store = window.CR.store, K = window.CR.const;

  function Kpis() {
    window.CR.useStore();

    var k = window.CR.kpis.calcular({
      rutas: store.list('rutas'), choferes: store.list('choferes'),
      vehiculos: store.list('vehiculos'), pedidos: store.list('pedidos')
    });

    if (k.camiones === 0 && k.paquetesSinCubrir === 0) {
      return (
        <ui.Page title="KPIs" subtitle="Indicadores de la operación del día">
          <ui.EmptyState title="Todavía no hay operación para medir">
            Importá los pedidos de Mercado Libre y asigná los camiones para ver los indicadores del día acá.
          </ui.EmptyState>
        </ui.Page>
      );
    }

    var stats = [
      { label: 'Cobertura del día', value: k.cobertura + '%', tone: k.cobertura >= 100 ? 'ok' : 'danger', sub: k.cobertura >= 100 ? '100% de los paquetes con camión' : k.paquetesSinCubrir + ' sin cubrir' },
      { label: 'Paquetes del día', value: k.paquetesTotales },
      { label: 'Camiones en calle', value: k.camiones, tone: 'accent' },
      { label: 'Paquetes / camión', value: k.paquetesPorCamion },
      { label: 'Ocupación de flota', value: k.pctCapacidad + '%', sub: 'prom. por camión ' + k.ocupacionProm + '%' },
      { label: 'Sin cubrir', value: k.paquetesSinCubrir, tone: k.paquetesSinCubrir ? 'danger' : 'ok' },
      { label: 'Sobrecargas', value: k.sobrecargas, tone: k.sobrecargas ? 'danger' : 'ok' },
      { label: 'Jornada cerrada', value: k.pctJornada + '%', sub: k.cerradas + ' cerradas · ' + k.enRuta + ' en ruta' },
      { label: 'Confirmación choferes', value: k.pctConfirm + '%', tone: k.pctConfirm >= 80 ? 'ok' : undefined }
    ];

    var dataZona = K.ZONAS.map(function (z) { return { label: z.label, value: k.porZona[z.k] || 0 }; });
    var dataBanda = [
      { label: '🟢 Verde (>=80) +20%', value: k.porBanda.verde, color: 'var(--ok)' },
      { label: '🔵 Azul (60-79) +10%', value: k.porBanda.azul, color: 'var(--primary)' },
      { label: '🔴 Rojo (<60) +0%', value: k.porBanda.rojo, color: 'var(--danger)' }
    ];
    var dataTipos = K.TIPOS.map(function (t) { return { label: t.label + ' (cap ' + t.cap + ')', value: k.porTipo[t.k] || 0 }; });
    var dataJornada = [
      { label: 'Confirmadas', value: k.confirmadas, color: 'var(--ok)' },
      { label: 'En ruta', value: k.enRuta, color: 'var(--primary)' },
      { label: 'Cerradas', value: k.cerradas, color: 'var(--accent, #2bd6ef)' }
    ];

    return (
      <ui.Page title="KPIs" subtitle="Indicadores de la operación del día">
        <div className="grid grid--stats">
          {stats.map(function (s, i) { return <ui.StatCard key={i} label={s.label} value={s.value} tone={s.tone} sub={s.sub} />; })}
        </div>

        <div className="grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '16px' }}>
          <ui.Card title="Paquetes por zona"><ui.BarChart data={dataZona} /></ui.Card>
          <ui.Card title="Carga por banda del chofer (paquetes)"><ui.BarChart data={dataBanda} /></ui.Card>
          <ui.Card title="Camiones por tipo de unidad"><ui.BarChart data={dataTipos} /></ui.Card>
          <ui.Card title="Avance de la jornada"><ui.BarChart data={dataJornada} /></ui.Card>
        </div>
      </ui.Page>
    );
  }

  window.CR.screens.Kpis = Kpis;
})();