Calculadora E-full

import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

const FuelSavingsCalculator = () => {
  const [consumoKm, setConsumoKm] = useState('');
  const [litrosMensuales, setLitrosMensuales] = useState('');
  const [precioDiesel, setPrecioDiesel] = useState('');
  const [precioAditivo, setPrecioAditivo] = useState('');
  const [numeroVehiculos, setNumeroVehiculos] = useState('');
  const [resultados, setResultados] = useState([]);

  const calcularAhorros = () => {
    const litros = parseFloat(litrosMensuales);
    const precio = parseFloat(precioDiesel);
    const precioEFull = parseFloat(precioAditivo);
    const vehiculos = parseInt(numeroVehiculos);
    
    const porcentajesAhorro = [5, 8, 10, 12, 14, 16, 18, 20];
    const proporcionAditivo = 1 / 30000;

    const calculos = porcentajesAhorro.map(porcentaje => {
      const litrosFlota = litros * vehiculos;
      const ahorroLitros = Math.round(litrosFlota * (porcentaje / 100));
      const dineroAhorrado = Math.round(ahorroLitros * precio);
      const aditivoNecesario = Math.round(litrosFlota * proporcionAditivo * 1000) / 1000;
      const costoAditivo = Math.round(aditivoNecesario * precioEFull);
      const beneficioNeto = Math.round(dineroAhorrado - costoAditivo);

      return {
        porcentaje,
        ahorroLitros: `$${ahorroLitros.toLocaleString()}`,
        dineroAhorrado: `$${dineroAhorrado.toLocaleString()}`,
        aditivoNecesario: `${aditivoNecesario.toFixed(3)} L`,
        costoAditivo: `$${costoAditivo.toLocaleString()}`,
        beneficioNeto: `$${beneficioNeto.toLocaleString()}`
      };
    });

    setResultados(calculos);
  };

  return (
    <Card className="w-full max-w-4xl mx-auto">
      <CardHeader>
        <CardTitle>Calculadora de Ahorros F2-21® Nanotech para Flota</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-4 mb-4">
          <Input 
            type="number" 
            value={consumoKm}
            onChange={(e) => setConsumoKm(e.target.value)}
            placeholder="Consumo (L/km)"
          />
          <Input 
            type="number" 
            value={litrosMensuales}
            onChange={(e) => setLitrosMensuales(e.target.value)}
            placeholder="Litros mensuales por vehículo"
          />
          <Input 
            type="number" 
            value={precioDiesel}
            onChange={(e) => setPrecioDiesel(e.target.value)}
            placeholder="Precio diésel ($)"
          />
          <Input 
            type="number" 
            value={precioAditivo}
            onChange={(e) => setPrecioAditivo(e.target.value)}
            placeholder="Precio aditivo F2-21® ($)"
          />
          <Input 
            type="number" 
            value={numeroVehiculos}
            onChange={(e) => setNumeroVehiculos(e.target.value)}
            placeholder="Número de vehículos en flota"
            className="col-span-2"
          />
        </div>
        <Button onClick={calcularAhorros} className="w-full">
          Calcular Ahorros de Flota
        </Button>

        {resultados.length > 0 && (
          <div className="mt-4 overflow-x-auto">
            <table className="w-full border-collapse">
              <thead>
                <tr>
                  <th className="border p-2">Ahorro (%)</th>
                  <th className="border p-2">Litros Ahorrados</th>
                  <th className="border p-2">Dinero Ahorrado</th>
                  <th className="border p-2">Aditivo Necesario</th>
                  <th className="border p-2">Costo Aditivo</th>
                  <th className="border p-2">Beneficio Neto</th>
                </tr>
              </thead>
              <tbody>
                {resultados.map((resultado, index) => (
                  <tr key={index}>
                    <td className="border p-2 text-center">{resultado.porcentaje}%</td>
                    <td className="border p-2 text-center">{resultado.ahorroLitros}</td>
                    <td className="border p-2 text-center">{resultado.dineroAhorrado}</td>
                    <td className="border p-2 text-center">{resultado.aditivoNecesario}</td>
                    <td className="border p-2 text-center">{resultado.costoAditivo}</td>
                    <td className="border p-2 text-center">{resultado.beneficioNeto}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </CardContent>
    </Card>
  );
};

export default FuelSavingsCalculator;