// Dashboard — Desasf main view
function Dashboard() {
  const [stats,          setStats]          = React.useState(null);
  const [recientes,      setRecientes]      = React.useState([]);
  const [actividad,      setActividad]      = React.useState([]);
  const [pipelineData,   setPipelineData]   = React.useState([]);
  const [despachosRuta,  setDespachosRuta]  = React.useState([]);
  const [pagosRecientes, setPagosRecientes] = React.useState([]);
  const [mixProductos,   setMixProductos]   = React.useState([]);
  const [loading,        setLoading]        = React.useState(true);

  React.useEffect(() => {
    Promise.all([
      DesasfAPI.get('/dashboard/stats'),
      DesasfAPI.get('/dashboard/recientes'),
      DesasfAPI.get('/dashboard/actividad'),
      DesasfAPI.get('/dashboard/pipeline').catch(() => []),
      DesasfAPI.get('/logistica/despachos?estado=en_ruta&limit=3').catch(() => ({ rows: [] })),
      DesasfAPI.get('/pagos?estado=por_validar&limit=3').catch(() => ({ rows: [] })),
      DesasfAPI.get('/dashboard/mix').catch(() => []),
    ]).then(([s, r, a, pipe, desp, pags, mix]) => {
      setStats(s); setRecientes(r); setActividad(a);
      setPipelineData(Array.isArray(pipe) ? pipe : []);
      setDespachosRuta(desp?.rows || []);
      setPagosRecientes(pags?.rows || []);
      setMixProductos(Array.isArray(mix) ? mix : []);
    }).catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  if (loading) return (
    <div className="app">
      <Sidebar active="dashboard"/>
      <Topbar crumbs={['Operación', 'Dashboard']}/>
      <main className="main" style={{ display:'grid', placeItems:'center' }}>
        <div style={{ color:'var(--ink-5)' }}>Cargando…</div>
      </main>
    </div>
  );

  const sol  = stats?.solicitudes || {};
  const pgs  = stats?.pagos       || {};
  const desp = stats?.despachos   || {};

  const totalActivas   = Number(sol.recepcion || 0) + Number(sol.diseno || 0)
                       + Number(sol.produccion || 0) + Number(sol.transito || 0);
  const montoPendiente = Number(pgs.monto_pendiente || 0);
  const montoMiles     = (montoPendiente / 1000).toFixed(1);
  const muestrasLab    = Number(sol.diseno || 0);

  const pipelineRows = [
    { lbl: 'En recepción',         n: Number(sol.recepcion  || 0), k: 'pending' },
    { lbl: 'En diseño / análisis', n: Number(sol.diseno     || 0), k: 'review'  },
    { lbl: 'En producción',        n: Number(sol.produccion || 0), k: 'prod'    },
    { lbl: 'En tránsito',          n: Number(sol.transito   || 0), k: 'transit' },
    { lbl: 'Entregado · pagado',   n: Number(sol.entregado  || 0), k: 'ok'      },
  ];

  const actividadMapped = actividad.map(a => ({
    n:    isReciente(a.created_at),
    t:    formatRelTime(a.created_at),
    body: <><b>{a.usuario_nombre || 'Sistema'}</b> · {a.mensaje}</>,
  }));

  return (
    <div className="app">
      <Sidebar active="dashboard"/>
      <Topbar crumbs={['Operación', 'Dashboard']}/>
      <main className="main">
        <div className="page-head">
          <div>
            <h1>Resumen general</h1>
            <p>{new Date().toLocaleDateString('es-PE',{weekday:'long',day:'2-digit',month:'long',year:'numeric'})} · {totalActivas} solicitudes activas</p>
          </div>
          <div className="row">
            <button className="btn btn--ghost" onClick={() => exportCSV(
              'dashboard-solicitudes-' + new Date().toISOString().slice(0,10) + '.csv',
              recientes,
              [
                { label: 'Ticket',    value: 'ticket' },
                { label: 'Cliente',   value: 'cliente_nombre' },
                { label: 'Producto',  value: 'producto_nombre' },
                { label: 'Volumen',   value: r => fmtNum(r.volumen) + ' ' + (r.unidad || 'm³') },
                { label: 'Estado',    value: r => estadoLabel(r.estado) },
                { label: 'Entrega',   value: r => r.eta ? new Date(r.eta).toLocaleDateString('es-PE') : '' },
              ]
            )}>{Icon.download}<span>Exportar</span></button>
            <button className="btn btn--primary" onClick={() => openModal('nueva-solicitud')}>{Icon.plus}<span>Crear solicitud</span></button>
          </div>
        </div>

        {/* KPIs */}
        <div className="kpi-grid">
          <div className="kpi">
            <div className="kpi__label">Solicitudes activas</div>
            <div className="kpi__value">{totalActivas}<span className="unit">tickets</span></div>
            <span className="kpi__delta up">{sol.total || 0} en total</span>
            <div className="kpi__bar"><i style={{ width: Math.min(100, totalActivas * 4) + '%' }}/></div>
          </div>
          <div className="kpi kpi--accent">
            <div className="kpi__label">Pagos por validar</div>
            <div className="kpi__value">S/ {montoMiles}<span style={{ color: 'var(--ink-5)' }}>k</span></div>
            <span className="kpi__delta down">{pgs.por_validar || 0} vouchers en espera</span>
            <div className="kpi__bar"><i style={{ width: Math.min(100, Number(pgs.por_validar || 0) * 12) + '%' }}/></div>
          </div>
          <div className="kpi kpi--ok">
            <div className="kpi__label">Despachos del mes</div>
            <div className="kpi__value">{sol.entregado || 0}<span className="unit">entregados</span></div>
            <span className="kpi__delta up">{desp.en_ruta || 0} en ruta ahora</span>
            <div className="kpi__bar"><i style={{ width: Math.min(100, Number(sol.entregado || 0) * 4) + '%' }}/></div>
          </div>
          <div className="kpi kpi--review">
            <div className="kpi__label">Muestras en laboratorio</div>
            <div className="kpi__value">{muestrasLab}<span className="unit">en análisis</span></div>
            <span className="kpi__delta up">{sol.recepcion || 0} en recepción</span>
            <div className="kpi__bar"><i style={{ width: Math.min(100, muestrasLab * 12) + '%' }}/></div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16, marginBottom: 18 }}>
          {/* Pipeline */}
          <div className="card">
            <div className="card__head">
              <h3>Pipeline de solicitudes — últimos 14 días</h3>
              <div className="row" style={{ gap: 8 }}>
                <span className="tag">Diseño</span>
                <span className="tag" style={{ background: 'var(--status-prod-bg)', color: 'var(--status-prod)', borderColor: 'transparent' }}>Producción</span>
                <span className="tag" style={{ background: 'var(--status-transit-bg)', color: 'var(--status-transit)', borderColor: 'transparent' }}>Tránsito</span>
              </div>
            </div>
            <div className="card__body">
              <div className="barchart">
                {pipelineData.length === 0 ? (
                  <div style={{ width: '100%', textAlign: 'center', color: 'var(--ink-5)', fontSize: 13, paddingTop: 24 }}>
                    Sin solicitudes en los últimos 14 días.
                  </div>
                ) : (() => {
                  const maxTotal = Math.max(...pipelineData.map(d => Number(d.total) || 1), 1);
                  return pipelineData.map((d, i) => {
                    const base = 8;
                    const scale = (n) => base + ((Number(n) || 0) / maxTotal) * (100 - base);
                    const a = scale(d.diseno);
                    const b = scale(d.produccion);
                    const c = scale(d.transito);
                    const lbl = new Date(d.dia).toLocaleDateString('es-PE', { day: '2-digit', month: 'numeric' });
                    return (
                      <div className="col-c" key={i}>
                        <div className="stack">
                          <i style={{ height: a + '%', background: 'var(--ink-0)' }}/>
                          <i style={{ height: b + '%', background: 'var(--status-prod)' }}/>
                          <i style={{ height: c + '%', background: 'var(--status-transit)' }}/>
                        </div>
                        <div className="lbl">{lbl}</div>
                      </div>
                    );
                  });
                })()}
              </div>
            </div>
          </div>

          {/* Status panel */}
          <div className="card">
            <div className="card__head">
              <h3>Estado de la operación</h3>
              <span className="meta">en vivo</span>
            </div>
            <div className="card__body" style={{ padding: 0 }}>
              {pipelineRows.map(s => (
                <div key={s.lbl} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', borderBottom: '1px solid var(--line)' }}>
                  <div className="row">
                    <Pill kind={s.k}>{s.lbl}</Pill>
                  </div>
                  <span style={{ fontFamily: 'var(--mono)', fontWeight: 600 }}>{s.n}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Activity + Map */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16, marginBottom: 18 }}>
          <div className="card">
            <div className="card__head">
              <h3>Solicitudes recientes</h3>
              <a className="meta" style={{ color: 'var(--ink-2)', fontWeight: 600, cursor: 'pointer' }}
                onClick={() => navigate('solicitudes')}>Ver todas →</a>
            </div>
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{ width: 100 }}>Ticket</th>
                  <th>Proyecto / Cliente</th>
                  <th>Producto / diseño</th>
                  <th>Estado</th>
                  <th style={{ textAlign: 'right' }}>Volumen</th>
                  <th>Entrega</th>
                </tr>
              </thead>
              <tbody>
                {recientes.map(r => (
                  <tr key={r.id} style={{ cursor: 'pointer' }} onClick={() => {
                    window._desasfCurrentSolicitud = r.id;
                    navigate('solicitud-detalle');
                  }}>
                    <td className="id">{r.ticket}</td>
                    <td>
                      {r.proyecto
                        ? <><b style={{ fontWeight: 600 }}>{r.proyecto}</b>
                            <div className="muted" style={{ fontSize: 11 }}>{r.cliente_nombre}</div></>
                        : <b style={{ fontWeight: 600 }}>{r.cliente_nombre}</b>}
                    </td>
                    <td className="muted">{r.producto_nombre}</td>
                    <td><Pill kind={estadoToKind(r.estado)}>{estadoLabel(r.estado)}</Pill></td>
                    <td className="num" style={{ textAlign: 'right' }}>{fmtNum(r.volumen)} {r.unidad || 'm³'}</td>
                    <td className="num">{r.eta ? new Date(r.eta).toLocaleDateString('es-PE',{day:'2-digit',month:'short'}) : '—'}</td>
                  </tr>
                ))}
                {recientes.length === 0 && (
                  <tr><td colSpan={6} style={{ padding: 24, textAlign: 'center', color: 'var(--ink-5)' }}>
                    Aún no hay solicitudes registradas.
                  </td></tr>
                )}
              </tbody>
            </table>
          </div>

          <div className="card">
            <div className="card__head">
              <h3>Despachos en ruta</h3>
              <span className="meta">{desp.en_ruta || 0} unidades</span>
            </div>
            <div className="card__body">
              <div className="map-ph" style={{ height: 200, marginBottom: 12 }}>
                <div className="pin" style={{ top: '30%', left: '20%' }}/>
                <div className="pin signal" style={{ top: '55%', left: '45%' }}/>
                <div className="pin ok" style={{ top: '70%', left: '70%' }}/>
                <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                  <path d="M 60 70 Q 150 100 200 130 T 320 180" stroke="var(--hi-vis)" strokeWidth="2" strokeDasharray="4 4" fill="none"/>
                </svg>
              </div>
              {despachosRuta.length === 0 ? (
                <div style={{ padding: '12px 0', textAlign: 'center', color: 'var(--ink-5)', fontSize: 13 }}>Sin unidades en ruta.</div>
              ) : despachosRuta.map(d => {
                const etaStr = d.eta_at ? new Date(d.eta_at).toLocaleTimeString('es-PE', { hour: '2-digit', minute: '2-digit' }) : null;
                const infoStr = etaStr ? `ETA ${etaStr}` : d.conductor_nombre || '—';
                const dest = `${d.planta || 'Planta'} → ${d.cliente_nombre}`;
                const stMap = { pendiente: 'pending', cargando: 'prod', en_ruta: 'transit', entregado: 'ok', incidencia: 'review' };
                const stlMap = { pendiente: 'Pendiente', cargando: 'Cargando', en_ruta: 'En ruta', entregado: 'Entregado', incidencia: 'Incidencia' };
                return (
                  <div key={d.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0', borderTop: '1px solid var(--line)' }}>
                    <div style={{ width: 32, height: 32, borderRadius: 6, background: 'var(--ink-9)', display: 'grid', placeItems: 'center', color: 'var(--ink-3)' }}>
                      {Icon.truck}
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 12, fontWeight: 600 }}>{d.placa || d.despacho_ref} · {d.marca || ''}</div>
                      <div style={{ fontSize: 11, color: 'var(--ink-5)' }}>{dest} · {infoStr}</div>
                    </div>
                    <Pill kind={stMap[d.estado] || 'pending'}>{stlMap[d.estado] || d.estado}</Pill>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Bottom row */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
          <div className="card">
            <div className="card__head">
              <h3>Pagos por validar</h3>
              <Pill kind="pending">{pgs.por_validar || 0} pendientes</Pill>
            </div>
            <div className="card__body" style={{ padding: 0 }}>
              {pagosRecientes.length === 0 ? (
                <div style={{ padding: '16px 16px', color: 'var(--ink-5)', fontSize: 13 }}>No hay pagos pendientes.</div>
              ) : pagosRecientes.map(p => (
                <div key={p.id} style={{ padding: '12px 16px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{p.cliente_nombre}</div>
                    <div style={{ fontSize: 11, color: 'var(--ink-5)', fontFamily: 'var(--mono)' }}>
                      {p.banco || 'Banco'} · {formatRelTime(p.cargado_at)}
                    </div>
                  </div>
                  <div className="num" style={{ fontWeight: 600 }}>S/ {Number(p.monto || 0).toLocaleString('es-PE')}</div>
                  <button className="btn btn--sm btn--ghost" onClick={() => {
                    window._desasfCurrentPago = p.id;
                    openModal('validar-voucher');
                  }}>Validar</button>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card__head">
              <h3>Actividad</h3>
              <span className="meta">Hoy</span>
            </div>
            <div className="card__body" style={{ padding: '4px 16px' }}>
              {actividadMapped.map((a, i) => (
                <div key={i} className={`activity ${a.n ? 'is-new' : ''}`}>
                  <div className="activity__dot"/>
                  <div className="activity__body">
                    {a.body}
                    <div className="activity__time">{a.t}</div>
                  </div>
                </div>
              ))}
              {actividadMapped.length === 0 && (
                <div style={{ padding: 16, color: 'var(--ink-5)', fontSize: 13 }}>Sin actividad reciente.</div>
              )}
            </div>
          </div>

          <div className="card">
            <div className="card__head">
              <h3>Mix de productos</h3>
              <span className="meta">mes actual</span>
            </div>
            <div className="card__body">
              {mixProductos.length === 0 ? (
                <div style={{ color: 'var(--ink-5)', fontSize: 13 }}>Sin datos de ventas este año.</div>
              ) : (() => {
                const colors = ['var(--ink-0)', 'var(--hi-vis-deep)', 'var(--status-transit)', 'var(--status-prod)', 'var(--ink-6)'];
                const totalVol = mixProductos.reduce((s, m) => s + Number(m.volumen_total || 0), 0) || 1;
                return mixProductos.map((m, i) => {
                  const pct = Math.round((Number(m.volumen_total || 0) / totalVol) * 100);
                  return (
                    <div key={m.id} style={{ marginBottom: 10 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 }}>
                        <span>{m.nombre}</span>
                        <span className="num" style={{ color: 'var(--ink-5)' }}>{pct}%</span>
                      </div>
                      <div style={{ height: 6, background: 'var(--ink-9)', borderRadius: 3, overflow: 'hidden' }}>
                        <div style={{ width: pct + '%', height: '100%', background: colors[i % colors.length] }}/>
                      </div>
                    </div>
                  );
                });
              })()}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

function isReciente(iso) {
  if (!iso) return false;
  const diff = Date.now() - new Date(iso).getTime();
  return diff < 1000 * 60 * 60; // < 1h
}
function formatRelTime(iso) {
  if (!iso) return '';
  const diff = Date.now() - new Date(iso).getTime();
  const min  = Math.floor(diff / 60000);
  if (min < 1)   return 'ahora';
  if (min < 60)  return `hace ${min}m`;
  const h = Math.floor(min / 60);
  if (h < 24)    return `hace ${h}h`;
  const d = Math.floor(h / 24);
  if (d < 7)     return `hace ${d}d`;
  return new Date(iso).toLocaleDateString('es-PE',{day:'2-digit',month:'short'});
}

window.Dashboard     = Dashboard;
window.formatRelTime = formatRelTime;