import React, { useState } from 'react';
import { Bar } from 'react-chartjs-2';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import * as XLSX from 'xlsx';

export default function VehicleCostDashboard() {
  const [vehicleData, setVehicleData] = useState(null);
  const [enterpriseData, setEnterpriseData] = useState(null);

  const handleFileUpload = (e) => {
    const files = e.target.files;
    const readExcel = (file) => new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const jsonData = XLSX.utils.sheet_to_json(worksheet);
        resolve(jsonData);
      };
      reader.readAsArrayBuffer(file);
    });

    Promise.all([
      readExcel(files[0]), // reservations
      readExcel(files[1]), // incidents
      readExcel(files[2]), // maintenance
    ]).then(([reservations, incidents, maintenance]) => {
      // Filter OOSA incidents
      const inServiceStates = ['TN', 'KY', 'VA', 'NC', 'GA', 'AL', 'MS', 'AR', 'MO'];
      const oosaIncidents = incidents.filter(i => !inServiceStates.includes(i.State));

      const oosaCosts = {};
      oosaIncidents.forEach(i => {
        oosaCosts[i.VehicleID] = (oosaCosts[i.VehicleID] || 0) + i.TotalCost;
      });

      const maintenanceCosts = {};
      maintenance.forEach(m => {
        maintenanceCosts[m.VehicleID] = (maintenanceCosts[m.VehicleID] || 0) + m.Cost;
      });

      const vehicleTotals = {};
      Object.keys({...oosaCosts, ...maintenanceCosts}).forEach(id => {
        vehicleTotals[id] = (oosaCosts[id] || 0) + (maintenanceCosts[id] || 0);
      });

      const topVehicles = Object.entries(vehicleTotals)
        .sort((a, b) => b[1] - a[1])
        .slice(0, 15);

      setVehicleData({
        labels: topVehicles.map(([id]) => id),
        datasets: [{
          label: 'Total Cost ($)',
          data: topVehicles.map(([, cost]) => cost),
          backgroundColor: 'rgba(255, 99, 132, 0.6)'
        }]
      });

      const enterprise = reservations.filter(r => r.Type === 'Enterprise Sublet');
      const revenue = enterprise.reduce((sum, r) => sum + r.CustomerCharge, 0);
      const cost = enterprise.reduce((sum, r) => sum + r.PartnerCost, 0);
      setEnterpriseData({
        labels: ['Revenue', 'Cost', 'Net'],
        datasets: [{
          label: 'Enterprise Sublet Summary',
          data: [revenue, cost, revenue - cost],
          backgroundColor: ['#4caf50', '#f44336', '#2196f3']
        }]
      });
    });
  };

  return (
    <div className="p-6 grid gap-6">
      <input type="file" multiple onChange={handleFileUpload} accept=".xlsx, .xls" />

      {vehicleData && (
        <Card>
          <CardContent>
            <h2 className="text-xl font-bold mb-4">Top 15 Vehicles by Total Cost</h2>
            <Bar data={vehicleData} />
          </CardContent>
        </Card>
      )}

      {enterpriseData && (
        <Card>
          <CardContent>
            <h2 className="text-xl font-bold mb-4">Enterprise Sublet Financial Summary</h2>
            <Bar data={enterpriseData} />
          </CardContent>
        </Card>
      )}
    </div>
  );
}