function LotesPendientes({ onNavigate }) {
  const [lotes, setLotes] = React.useState(null);

  React.useEffect(() => {
    Api.get('/movimientos-baterias/lotes/pendientes-cierre').then((r) => setLotes(r.data)).catch(() => setLotes([]));
  }, []);

  if (lotes === null) return <div className="panel"><p className="text-muted">Cargando…</p></div>;

  return (
    <div className="panel">
      <div className="panel__header">
        <div className="panel__title">Salidas hacia Producción</div>
        <button className="btn btn-ghost btn-sm" onClick={() => onNavigate && onNavigate('asignacion-luces')}>
          Ir a Asignación de luces <IconArrowRight size={14} />
        </button>
      </div>

      {lotes.length === 0 ? (
        <div className="table-empty">
          <div className="table-empty__title">Sin salidas registradas</div>
          <p className="text-muted">Cuando registres una Salida Masiva hacia Producción, aparecerá aquí con su avance de asignación de luces.</p>
        </div>
      ) : (
        <div className="table-wrap">
          <table className="data-table">
            <thead>
              <tr>
                <th>Salida</th>
                <th>Fecha</th>
                <th>Entregadas</th>
                <th>Asignadas</th>
                <th>Avance</th>
              </tr>
            </thead>
            <tbody>
              {lotes.map((l) => {
                const porcentaje = l.entregadas > 0 ? Math.round((l.asignadas / l.entregadas) * 100) : 0;
                const completo = l.pendientes === 0;
                return (
                  <tr key={l.id}>
                    <td className="mono" style={{ fontWeight: 700 }}>{l.numero}</td>
                    <td>{l.fecha?.slice(0, 10)}</td>
                    <td>{l.entregadas}</td>
                    <td>{l.asignadas}</td>
                    <td style={{ minWidth: 180 }}>
                      <div className="charge-bar">
                        <div className="charge-bar__fill" style={{ width: `${porcentaje}%`, background: completo ? 'var(--st-almacen)' : 'var(--hazard)' }} />
                        <div className="charge-bar__label">{completo ? '✓ Completo' : `${l.pendientes} pendientes`}</div>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}