function ChartCanvas({ type, data, options, height = 220 }) {
  const canvasRef = React.useRef(null);
  const chartRef = React.useRef(null);

  React.useEffect(() => {
    if (!canvasRef.current || !window.Chart) return;
    chartRef.current = new window.Chart(canvasRef.current, { type, data, options });
    return () => chartRef.current && chartRef.current.destroy();
  }, [JSON.stringify(data)]);

  return <div style={{ height }}><canvas ref={canvasRef} /></div>;
}

function KpiCard({ label, value, subtitle, tone = 'blue', icon, onClick }) {
  return (
    <button
      type="button"
      className={`dashboard-kpi dashboard-kpi--${tone}`}
      onClick={onClick}
      title={onClick ? `Ver detalle de ${label}` : undefined}
    >
      <span className="dashboard-kpi__top">
        <span className="dashboard-kpi__label">{label}</span>
        <span className="dashboard-kpi__icon">{icon}</span>
      </span>
      <span className="dashboard-kpi__value">{value ?? 0}</span>
      <span className="dashboard-kpi__bottom">
        <span>{subtitle}</span>
        {onClick && <IconArrowRight size={14} />}
      </span>
    </button>
  );
}

function Dashboard({ onNavigate }) {
  const [tab, setTab] = React.useState('baterias'); // 'baterias' | 'luces'
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const toast = useToast();

  const cargar = React.useCallback(async () => {
    setLoading(true);
    try {
      const res = await Api.get('/dashboard');
      setData(res.data);
    } catch (err) {
      toast.error(err.message);
    } finally {
      setLoading(false);
    }
  }, []);

  React.useEffect(() => { cargar(); }, [cargar]);

  const [modalRow, setModalRow] = React.useState(null);

  if (loading || !data) return <div className="text-muted" style={{ padding: 20 }}>Cargando indicadores del sistema…</div>;

  const k = data.kpis || {};
  const kl = data.kpis_luces || {};

  // Datos para Gráfico de Garantía de Baterías
  const garantiaChartData = {
    labels: ['Con Garantía', 'Sin Garantía'],
    datasets: [{
      data: [k.con_garantia, k.sin_garantia],
      backgroundColor: ['#2F7D5A', '#7A5C99'],
      borderWidth: 0,
    }],
  };

  // Datos para Gráfico de Distribución de Luces
  const lucesChartData = {
    labels: ['En Stock (Almacén)', 'Instaladas en Tiendas', 'En Unidades Vehiculares', 'Dadas de Baja'],
    datasets: [{
      data: [kl.luces_en_stock || 0, kl.luces_en_tiendas || 0, kl.luces_en_unidades || 0, kl.dadas_de_baja || 0],
      backgroundColor: ['#2F7D5A', '#3E6E92', '#E5A100', '#7A5C99'],
      borderWidth: 0,
    }],
  };

  const baseOptions = { responsive: true, maintainAspectRatio: false, plugins: { legend: { labels: { boxWidth: 12, font: { size: 11 } } } } };

  return (
    <div className="stack-y" style={{ gap: 20 }}>
      {/* PESTAÑAS PRINCIPALES DEL DASHBOARD */}
      <div className="movement-type-tabs">
        <button className={`movement-type-tab ${tab === 'baterias' ? 'active' : ''}`} onClick={() => setTab('baterias')}>
          <IconBattery size={15} style={{ verticalAlign: 'middle', marginRight: 6 }} /> Baterías
        </button>
        <button className={`movement-type-tab ${tab === 'luces' ? 'active' : ''}`} onClick={() => setTab('luces')}>
          <IconBulb size={15} style={{ verticalAlign: 'middle', marginRight: 6 }} /> Luces de Emergencia
        </button>
      </div>

      {tab === 'baterias' ? (
        <>
          {/* SECCIÓN 1: KPIs PRINCIPALES DE BATERÍAS */}
          <div>
            <div style={{ fontSize: 13, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10, color: 'var(--text-muted, #777)' }}>
              Indicadores Principales de Operación (Haz clic en una tarjeta para ver sus baterías)
            </div>
            <div className="dashboard-kpi-grid">
              <KpiCard label="En almacén" value={k.en_almacen} subtitle="Disponibles en inventario" tone="stock" icon={<IconBattery size={18} />} onClick={() => onNavigate('baterias', { estado: 'ALMACEN' })} />
              <KpiCard label="En unidades vehiculares" value={k.en_unidades_vehiculares} subtitle="Instaladas / asignadas" tone="vehicle" icon={<IconMap size={18} />} onClick={() => onNavigate('baterias', { estado: 'UNIDAD_VEHICULAR' })} />
              <KpiCard label="Baterías devueltas" value={k.baterias_devueltas} subtitle="Usadas recibidas" tone="returns" icon={<IconHistory size={18} />} onClick={() => onNavigate('movimientos', { tipo_movimiento: 'Devolucion' })} />
              <KpiCard label="Con garantía" value={k.con_garantia} subtitle="Pendientes / evaluadas" tone="guarantee" icon={<IconCheck size={18} />} onClick={() => onNavigate('movimientos', { con_garantia: '1' })} />
              <KpiCard label="Sin garantía" value={k.sin_garantia} subtitle="Sin reclamo a proveedor" tone="no-guarantee" icon={<IconAlert size={18} />} onClick={() => onNavigate('movimientos', { con_garantia: '0' })} />
              <KpiCard label="Cambio con proveedor" value={k.candidatas_cambio_proveedor} subtitle="Voltaje menor a 11 V" tone="provider" icon={<IconArrowRight size={18} />} onClick={() => onNavigate('movimientos', { con_garantia: 'candidatas_proveedor' })} />
            </div>
          </div>

          {/* SECCIÓN 2 Y 3: ANÁLISIS DE GARANTÍA Y EVALUACIÓN DE VOLTAJE */}
          <div className="grid-2">
            {/* Evaluación de Garantía */}
            <div className="panel">
              <div className="panel__header">
                <div className="panel__title">Distribución por Garantía</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <ChartCanvas type="doughnut" data={garantiaChartData} options={baseOptions} height={200} />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, textAlign: 'center', paddingTop: 10, borderTop: '1px solid var(--border-color, #eee)' }}>
                  <div style={{ cursor: 'pointer' }} onClick={() => onNavigate('movimientos', { con_garantia: '1' })}>
                    <div style={{ fontSize: 12, color: 'var(--text-muted, #666)' }}>Con Garantía</div>
                    <div style={{ fontSize: 18, fontWeight: '700', color: '#2F7D5A' }}>{k.con_garantia}</div>
                  </div>
                  <div style={{ cursor: 'pointer' }} onClick={() => onNavigate('movimientos', { con_garantia: '0' })}>
                    <div style={{ fontSize: 12, color: 'var(--text-muted, #666)' }}>Sin Garantía</div>
                    <div style={{ fontSize: 18, fontWeight: '700', color: '#7A5C99' }}>{k.sin_garantia}</div>
                  </div>
                </div>
              </div>
            </div>

            {/* Evaluación de voltaje */}
            <div className="panel dashboard-voltage-panel">
              <div className="panel__header dashboard-voltage-header">
                <div>
                  <div className="panel__title">Evaluación de voltaje</div>
                  <span className="dashboard-panel-caption">Baterías con garantía</span>
                </div>
              </div>
              <div className="dashboard-voltage-list">
                <button className="dashboard-voltage-item dashboard-voltage-item--provider" type="button" onClick={() => onNavigate('movimientos', { con_garantia: 'candidatas_proveedor' })}>
                  <span className="dashboard-voltage-marker" aria-hidden="true"></span>
                  <span className="dashboard-voltage-copy">
                    <strong>Voltaje &lt; 11 V</strong>
                    <small>Cambio con proveedor</small>
                  </span>
                  <span className="dashboard-voltage-value">{k.candidatas_cambio_proveedor}</span>
                </button>

                <button className="dashboard-voltage-item dashboard-voltage-item--lights" type="button" onClick={() => onNavigate('movimientos', { con_garantia: 'reutilizar_luces' })}>
                  <span className="dashboard-voltage-marker" aria-hidden="true"></span>
                  <span className="dashboard-voltage-copy">
                    <strong>Voltaje ≥ 11 V</strong>
                    <small>Reutilización en luces internas</small>
                  </span>
                  <span className="dashboard-voltage-value">{k.reutilizacion_luces}</span>
                </button>

                <button className="dashboard-voltage-item dashboard-voltage-item--pending" type="button" onClick={() => onNavigate('movimientos', { con_garantia: 'pendientes_voltaje' })}>
                  <span className="dashboard-voltage-marker" aria-hidden="true"></span>
                  <span className="dashboard-voltage-copy">
                    <strong>Pendientes de medición</strong>
                    <small>Con garantía sin voltaje registrado</small>
                  </span>
                  <span className="dashboard-voltage-value">{k.pendientes_evaluacion}</span>
                </button>
              </div>
            </div>
          </div>

          {/* SECCIÓN 4: ÚLTIMOS MOVIMIENTOS RECIENTES */}
          <div className="panel">
            <div className="panel__header">
              <div className="panel__title">Últimos Movimientos Registrados</div>
              <button className="btn btn-ghost btn-sm" onClick={() => onNavigate('movimientos')}>
                Ver todo <IconArrowRight size={14} />
              </button>
            </div>
            <DataTable
              keyField="fecha"
              columns={[
                { key: 'fecha', header: 'Fecha', render: (r) => (r.fecha ? String(r.fecha).slice(0, 10).split('-').reverse().join('/') : '') },
                { key: 'bateria_codigo', header: 'Código', mono: true },
                { key: 'tipo_movimiento', header: 'Movimiento', render: (r) => <span className={`movement-badge movement-${r.tipo_movimiento.toLowerCase()}`}>{r.tipo_movimiento}</span> },
                { key: 'origen', header: 'Origen' },
                { key: 'destino', header: 'Destino', render: (r) => <DestinoBadge valor={r.destino} /> },
                { key: 'nombre_bateria_usada', header: 'Batería Usada', render: (r) => r.nombre_bateria_usada ? <span className="badge badge-secondary">{r.nombre_bateria_usada}</span> : <span className="text-muted">—</span> },
                { key: 'con_garantia', header: 'Garantía / Voltaje', render: (r) => {
                  if (r.tipo_movimiento !== 'Devolucion' || !r.nombre_bateria_usada) return <span className="text-muted">—</span>;
                  if (!r.con_garantia) return <span className="badge badge-secondary">Sin Garantía</span>;
                  const v = r.voltaje;
                  if (v === null || v === undefined) {
                    return (
                      <button
                        className="badge badge-warning"
                        style={{ cursor: 'pointer', border: 'none', padding: '3px 7px', background: '#E5A100', color: '#fff', fontWeight: 'bold' }}
                        onClick={() => setModalRow(r)}
                        title="Clic para medir voltaje"
                      >
                        ⚡ Medir Voltaje
                      </button>
                    );
                  }
                  return (
                    <button
                      className="badge"
                      style={{ cursor: 'pointer', border: 'none', padding: '3px 7px', background: v < 11 ? '#E5A100' : '#3E6E92', color: '#fff' }}
                      onClick={() => setModalRow(r)}
                      title="Clic para editar voltaje"
                    >
                      {v < 11 ? `🟡 ${v}V (<11V)` : `🔵 ${v}V (≥11V)`} ✏️
                    </button>
                  );
                } },
              ]}
              rows={data.ultimos_movimientos || []}
            />
          </div>
        </>
      ) : (
        <>
          {/* SECCIÓN 1: KPIs PRINCIPALES DE LUCES DE EMERGENCIA */}
          <div>
            <div style={{ fontSize: 13, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10, color: 'var(--text-muted, #777)' }}>
              Indicadores Principales de Luces de Emergencia (Calculados a partir del inventario real)
            </div>
            <div className="dashboard-kpi-grid">
              <KpiCard label="Luces en stock" value={kl.luces_en_stock} subtitle="Disponibles en almacén" tone="stock" icon={<IconBulb size={18} />} onClick={() => onNavigate('luces', { estado: 'ALMACEN' })} />
              <KpiCard label="En unidades Vehiculares" value={kl.luces_en_unidades} subtitle="Asignadas a vehículos" tone="vehicle" icon={<IconMap size={18} />} onClick={() => onNavigate('luces', { estado: 'UNIDAD_VEHICULAR' })} />
              <KpiCard label="Instaladas" value={kl.luces_en_tiendas} subtitle="Instaladas en tiendas" tone="provider" icon={<IconCheck size={18} />} onClick={() => onNavigate('luces', { estado: 'TIENDA' })} />
              <KpiCard label="Pendiente de devolución" value={kl.pendientes_devolucion} subtitle="Salieron y aún no regresan" tone="returns" icon={<IconHistory size={18} />} onClick={() => onNavigate('movimientos', { tab: 'luces', estado_devolucion: 'PENDIENTE' })} />
              <KpiCard label="Luces Devueltas" value={kl.devueltas} subtitle="Retornadas a almacén" tone="guarantee" icon={<IconCheck size={18} />} onClick={() => onNavigate('movimientos', { tab: 'luces', tipo_movimiento: 'Devolucion' })} />
              <KpiCard label="Garantía de Fabrica" value={kl.devueltas_garantia} subtitle="Falladas devueltas por garantía" tone="no-guarantee" icon={<IconAlert size={18} />} onClick={() => onNavigate('movimientos', { tab: 'luces', con_garantia: '1' })} />
            </div>
          </div>

          {/* SECCIÓN 2: DISTRIBUCIÓN DEL INVENTARIO DE LUCES */}
          <div className="grid-2">
            <div className="panel">
              <div className="panel__header">
                <div className="panel__title">Distribución por Estado de Luces</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <ChartCanvas type="doughnut" data={lucesChartData} options={baseOptions} height={200} />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 8, textAlign: 'center', paddingTop: 10, borderTop: '1px solid var(--border-color, #eee)' }}>
                  <div>
                    <div style={{ fontSize: 11, color: 'var(--text-muted, #666)' }}>Stock</div>
                    <div style={{ fontSize: 16, fontWeight: '700', color: '#2F7D5A' }}>{kl.luces_en_stock}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 11, color: 'var(--text-muted, #666)' }}>En Tiendas</div>
                    <div style={{ fontSize: 16, fontWeight: '700', color: '#3E6E92' }}>{kl.luces_en_tiendas}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 11, color: 'var(--text-muted, #666)' }}>En Unidades</div>
                    <div style={{ fontSize: 16, fontWeight: '700', color: '#E5A100' }}>{kl.luces_en_unidades}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 11, color: 'var(--text-muted, #666)' }}>Bajas</div>
                    <div style={{ fontSize: 16, fontWeight: '700', color: '#7A5C99' }}>{kl.dadas_de_baja}</div>
                  </div>
                </div>
              </div>
            </div>

            <div className="panel">
              <div className="panel__header">
                <div className="panel__title">Resumen de Trazabilidad de Luces</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, padding: 10 }}>
                <div style={{ background: 'var(--bg-secondary, rgba(255,255,255,0.03))', padding: 12, borderRadius: 8 }}>
                  <div style={{ fontSize: 13, fontWeight: '700', marginBottom: 4 }}>Origen del Inventario</div>
                  <div style={{ fontSize: 12.5, color: 'var(--text-muted, #aaa)' }}>
                    Todas las luces son fabricadas internamente. El flujo oficial registra:
                    <br />
                    <strong style={{ color: 'var(--text-main, #fff)' }}>PRODUCCIÓN → ALMACÉN</strong> (Ingreso inicial)
                  </div>
                </div>

                <div style={{ background: 'var(--bg-secondary, rgba(255,255,255,0.03))', padding: 12, borderRadius: 8 }}>
                  <div style={{ fontSize: 13, fontWeight: '700', marginBottom: 4 }}>Total de Luces en Sistema</div>
                  <div style={{ fontSize: 22, fontWeight: '800', color: 'var(--primary-color, #2b7fff)' }}>
                    {kl.total_luces} <span style={{ fontSize: 12, fontWeight: 'normal', color: '#888' }}>luces registradas</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* SECCIÓN 3: ÚLTIMOS MOVIMIENTOS DE LUCES */}
          <div className="panel">
            <div className="panel__header">
              <div className="panel__title">Últimos Movimientos de Luces Registrados</div>
              <button className="btn btn-ghost btn-sm" onClick={() => onNavigate('movimientos', { tab: 'luces' })}>
                Ver todo <IconArrowRight size={14} />
              </button>
            </div>
            <DataTable
              keyField="fecha"
              columns={[
                { key: 'fecha', header: 'Fecha', render: (r) => (r.fecha ? String(r.fecha).slice(0, 10).split('-').reverse().join('/') : '') },
                { key: 'luz_codigo', header: 'Código', mono: true },
                { key: 'luz_modelo', header: 'Modelo', render: (r) => r.luz_modelo ? <span className="badge badge-secondary">{r.luz_modelo}</span> : <span className="text-muted">—</span> },
                { key: 'tipo_movimiento', header: 'Movimiento', render: (r) => <MovimientoBadge tipo={r.tipo_movimiento} /> },
                { key: 'origen', header: 'Origen' },
                { key: 'destino', header: 'Destino', render: (r) => <DestinoBadge valor={r.destino} /> },
                { key: 'estado_devolucion', header: 'Devolución', render: (r) => <DevolucionHistorialBadge estado={r.estado_devolucion} /> },
                { key: 'comentario', header: 'Comentario' },
              ]}
              rows={data.ultimos_movimientos_luces || []}
            />
          </div>
        </>
      )}

      {modalRow && (
        <VoltajeModal
          row={modalRow}
          onClose={() => setModalRow(null)}
          onGuardado={cargar}
        />
      )}
    </div>
  );
}

function VoltajeModal({ row, onClose, onGuardado }) {
  const toast = useToast();
  const [voltajeInput, setVoltajeInput] = React.useState(row.voltaje !== null && row.voltaje !== undefined ? String(row.voltaje) : '');
  const [guardando, setGuardando] = React.useState(false);

  const guardar = async () => {
    const valTrim = voltajeInput.trim();
    const num = valTrim === '' ? null : Number(valTrim);
    if (valTrim !== '' && isNaN(num)) {
      toast.error('Ingresa una medición de voltaje válida (ej. 10.5)');
      return;
    }
    setGuardando(true);
    try {
      await Api.post(`/movimientos-baterias/${row.id}/voltaje`, { voltaje: num });
      toast.success('Medición de voltaje guardada correctamente');
      onGuardado();
      onClose();
    } catch (err) {
      toast.error(err.message);
    } finally {
      setGuardando(false);
    }
  };

  const numVoltaje = voltajeInput !== '' && !isNaN(Number(voltajeInput)) ? Number(voltajeInput) : null;

  return (
    <div className="modal-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal-card" style={{ maxWidth: 460 }}>
        <div className="modal-card__header">
          <div className="modal-card__title" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 18 }}>⚡</span> Registrar Medición de Voltaje
          </div>
          <button className="icon-btn" onClick={onClose}><IconX size={16} /></button>
        </div>
        <div className="modal-card__body" style={{ gap: 14, display: 'flex', flexDirection: 'column' }}>
          <div style={{ background: 'var(--bg-secondary, #f8f9fa)', padding: 12, borderRadius: 8, fontSize: 13 }}>
            <div style={{ fontWeight: '600', marginBottom: 4 }}>Batería Referente: <span className="mono">{row.bateria_codigo}</span></div>
            <div style={{ color: 'var(--text-muted, #555)', fontSize: 12 }}>
              Batería Usada: <strong>{row.nombre_bateria_usada || 'Batería usada'}</strong> | Guía: <strong>{row.numero_guia || '—'}</strong>
            </div>
          </div>

          <div className="field">
            <label style={{ fontWeight: '600', fontSize: 13 }}>Medición de Voltaje (V)</label>
            <input
              type="number"
              step="0.1"
              min="0"
              max="30"
              value={voltajeInput}
              onChange={(e) => setVoltajeInput(e.target.value)}
              placeholder="Ej. 10.5, 12.1…"
              autoFocus
              style={{ fontSize: 15, padding: '10px 12px' }}
              onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); guardar(); } }}
            />
          </div>

          {numVoltaje !== null && (
            <div style={{ padding: 10, borderRadius: 6, fontWeight: '600', fontSize: 12.5 }}>
              {numVoltaje < 11 ? (
                <div style={{ color: '#B37D00', background: 'rgba(229,161,0,0.1)', padding: 10, borderRadius: 6, border: '1px solid rgba(229,161,0,0.3)' }}>
                  🟡 <strong>Voltaje &lt; 11V</strong>: Candidata a Cambio con Proveedor
                </div>
              ) : (
                <div style={{ color: '#3E6E92', background: 'rgba(62,110,146,0.1)', padding: 10, borderRadius: 6, border: '1px solid rgba(62,110,146,0.3)' }}>
                  🔵 <strong>Voltaje ≥ 11V</strong>: Reutilización para Luces Internas
                </div>
              )}
            </div>
          )}

          {numVoltaje === null && voltajeInput.trim() === '' && (
            <div style={{ fontSize: 12, color: 'var(--text-muted, #666)' }}>
              * Si dejas el campo vacío y guardas, la batería quedará como "Pendiente de medición".
            </div>
          )}
        </div>
        <div className="modal-card__footer">
          <button className="btn btn-ghost" onClick={onClose} disabled={guardando}>Cancelar</button>
          <button className="btn btn-primary" onClick={guardar} disabled={guardando}>
            {guardando ? 'Guardando…' : 'Guardar Voltaje'}
          </button>
        </div>
      </div>
    </div>
  );
}