/* dashboard.jsx — pantalla HOME (la primera de la mañana). v3: resumen logístico rico
   (cobertura, ocupación, paquetes/camión, jornada) + alertas accionables + mapa + camiones en curso.
   Registra window.CR.screens.Dashboard. JSX/Babel. Usa SOLO el kit CR.ui. */
(function () {
  var React = window.React;
  var ui = window.CR.ui, store = window.CR.store, K = window.CR.const;

  function irImportar() { window.location.hash = '#/importar'; }

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

    var rutas = store.list('rutas');
    var pedidos = store.list('pedidos');
    var choferes = store.list('choferes');
    var vehiculos = store.list('vehiculos');

    function nombreChofer(id) { if (!id) return '—'; var c = choferes.find(function (x) { return x.id === id; }); return c ? c.nombre : '—'; }

    if (rutas.length === 0) {
      return (
        <ui.Page title="Dashboard" subtitle={'Operación de colectas del día — ' + K.hoy()}>
          <ui.EmptyState title="Arrancá importando los pedidos del día"
            action={<ui.Button variant="primary" size="lg" onClick={irImportar}>Importar pedidos de Mercado Libre</ui.Button>}>
            Todavía no cargaste los pedidos de hoy. Importá el CSV de Mercado Libre y CRÁNEO los agrupa por zona y arma los camiones por capacidad.
          </ui.EmptyState>
        </ui.Page>
      );
    }

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

    var chips = (
      <ui.Toolbar>
        <ui.Badge color="neutral" dot>{'Paquetes: ' + k.paquetesTotales}</ui.Badge>
        <ui.Badge color={k.cobertura >= 100 ? 'ok' : 'danger'} dot>{'Cobertura: ' + k.cobertura + '%'}</ui.Badge>
        <ui.Badge color="info" dot>{'Camiones: ' + k.camiones}</ui.Badge>
        <ui.Badge color="info" dot>{'En ruta: ' + k.enRuta}</ui.Badge>
        <ui.Badge color="ok" dot>{'Jornada: ' + k.pctJornada + '%'}</ui.Badge>
        {k.sobrecargas > 0 ? <ui.Badge color="danger" dot>{'Sobrecargas: ' + k.sobrecargas}</ui.Badge> : null}
      </ui.Toolbar>
    );

    // alertas accionables
    var alertas = [];
    if (k.paquetesSinCubrir > 0) alertas.push({ tone: 'alta', txt: 'Hay ' + k.paquetesSinCubrir + ' paquetes sin cubrir. No se entregaría el 100% — resolvé en Asignación.' });
    if (k.sobrecargas > 0) alertas.push({ tone: 'alta', txt: k.sobrecargas + ' camión(es) con sobrecarga (más paquetes que capacidad).' });
    if (k.paquetesSinCubrir === 0 && k.sobrecargas === 0) alertas.push({ tone: 'ok', txt: 'Programación sana: 100% de los paquetes con camión asignado.' });

    return (
      <ui.Page title="Dashboard" subtitle={'Operación de colectas del día — ' + K.hoy()}>
        {chips}

        <div className="grid grid--stats">
          <ui.StatCard label="Paquetes del día" value={k.paquetesTotales} />
          <ui.StatCard label="Cobertura del día" value={k.cobertura + '%'} tone={k.cobertura >= 100 ? 'ok' : 'danger'} sub={k.cobertura >= 100 ? 'todo con camión' : k.paquetesSinCubrir + ' sin cubrir'} />
          <ui.StatCard label="Camiones en calle" value={k.camiones} tone="accent" />
          <ui.StatCard label="Paquetes / camión" value={k.paquetesPorCamion} />
          <ui.StatCard label="Ocupación de flota" value={k.pctCapacidad + '%'} tone={k.sobrecargas > 0 ? 'danger' : undefined} sub={'prom. ' + k.ocupacionProm + '% por unidad'} />
          <ui.StatCard label="Confirmación choferes" value={k.pctConfirm + '%'} tone={k.pctConfirm >= 80 ? 'ok' : undefined} />
        </div>

        <ui.Card title="Estado de la programación">
          {alertas.map(function (a, i) {
            return (
              <div key={i} className={'disc ' + (a.tone === 'ok' ? 'disc--ok' : 'disc--alta')}>
                <span style={{ fontSize: '16px' }}>{a.tone === 'ok' ? '✓' : '⚠'}</span>
                <div>{a.tone === 'ok'
                  ? <span className="disc__done">{a.txt}</span>
                  : <span>{a.txt} <a href="#/asignacion" style={{ color: 'var(--primary)', fontWeight: 600 }}>Ir a Asignación →</a></span>}
                </div>
              </div>
            );
          })}
        </ui.Card>

        <ui.Card title="Mapa del día">
          {React.createElement(window.CR.Mapa, { rutas: rutas, choferes: choferes, vehiculos: vehiculos })}
        </ui.Card>

        <ui.Card title="Camiones del día">
          <ui.DataTable rowKey="id" rows={rutas} empty="No hay camiones armados todavía"
            columns={[
              { key: 'numero', label: 'Camión', render: function (r) { return <b className="tnum">{r.numero}</b>; } },
              { key: 'zona', label: 'Zona', render: function (r) { return <ui.Badge color="info" dot>{K.labelZona(r.zona)}</ui.Badge>; } },
              { key: 'chofer', label: 'Chofer', render: function (r) { return nombreChofer(r.choferId); } },
              { key: 'paquetes', label: 'Paquetes', align: 'right', render: function (r) {
                  var over = r.capacidad ? r.paquetes > r.capacidad : true;
                  return <b className={'tnum' + (over ? ' txt-danger' : '')}>{r.paquetes + '/' + (r.capacidad || '—')}</b>;
                } },
              { key: 'estado', label: 'Estado', align: 'right', render: function (r) {
                  return <ui.Badge color={K.ESTADO_RUTA_COLOR[r.estado]} dot>{K.ESTADO_RUTA_LABEL[r.estado]}</ui.Badge>;
                } }
            ]}
          />
        </ui.Card>
      </ui.Page>
    );
  }

  window.CR.screens = window.CR.screens || {};
  window.CR.screens.Dashboard = Dashboard;
})();