import React from 'react';
import { Truck, BarChart3, MapPin, Fuel, Wrench, Settings } from 'lucide-react';
import { AppLayout } from '@/components/layout';
import { StatsGrid, DataTable } from '@/components/shared';
import { Button } from '@/components/ui/button';
import { TableRow, TableCell } from '@/components/ui/table';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { useVehicles } from '../hooks/useVehicles';
import { VehicleForm } from './VehicleForm';

const MOCK_FLEET_DATA = [
  { id: 1, vehicle: 'Caminhão Scania 450', plate: 'ABC-1234', driver: 'João Silva', status: 'Em viagem' },
  { id: 2, vehicle: 'Van Mercedes Sprinter', plate: 'DEF-5678', driver: 'Maria Santos', status: 'Disponível' },
  { id: 3, vehicle: 'Carreta Volvo FH', plate: 'GHI-9012', driver: 'Carlos Souza', status: 'Manutenção' },
];

export const FleetDashboard = () => {
  const { vehicles, addVehicle, updateVehicle } = useVehicles(MOCK_FLEET_DATA);
  const [isDialogOpen, setIsDialogOpen] = React.useState(false);
  const [editingVehicle, setEditingVehicle] = React.useState(null);

  const stats = [
    { label: 'Veículos Ativos', value: vehicles.length.toString(), trend: '+3%', icon: <Truck />, color: 'bg-blue-100 text-blue-600' },
    { label: 'Em Manutenção', value: vehicles.filter(v => v.status === 'Manutenção').length.toString(), trend: '-1', negative: true, icon: <Wrench />, color: 'bg-amber-100 text-amber-600' },
    { label: 'Consumo Médio', value: '8.4 km/L', trend: '+2%', icon: <Fuel />, color: 'bg-emerald-100 text-emerald-600' },
    { label: 'Alertas Ativos', value: '5', trend: '+12%', negative: true, icon: <BarChart3 />, color: 'bg-rose-100 text-rose-600' },
  ];

  const sidebar = (
    <nav className="space-y-2">
      <Button variant="ghost" className="w-full justify-start gap-3 bg-blue-50 text-blue-700">
        <BarChart3 size={20} /> Painel Geral
      </Button>
      <Button variant="ghost" className="w-full justify-start gap-3 text-muted-foreground">
        <MapPin size={20} /> Rastreamento
      </Button>
      <Button variant="ghost" className="w-full justify-start gap-3 text-muted-foreground">
        <Wrench size={20} /> Manutenção
      </Button>
      <Button variant="ghost" className="w-full justify-start gap-3 text-muted-foreground">
        <Settings size={20} /> Configurações
      </Button>
    </nav>
  );

  return (
    <AppLayout title="Gestão de Frotas" sidebar={sidebar}>
      <div className="space-y-8">
        <StatsGrid stats={stats} />

        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-bold">Monitoramento de Veículos</h2>
            
            <Dialog open={isDialogOpen} onOpenChange={(open) => {
              setIsDialogOpen(open);
              if (!open) setEditingVehicle(null);
            }}>
              <DialogTrigger asChild>
                <Button size="sm">Novo Veículo</Button>
              </DialogTrigger>
              <DialogContent className="sm:max-w-[500px]">
                <DialogHeader>
                  <DialogTitle>{editingVehicle ? 'Editar Veículo' : 'Cadastrar Novo Veículo'}</DialogTitle>
                </DialogHeader>
                <VehicleForm 
                  initialData={editingVehicle}
                  onSubmit={(data) => {
                    if (editingVehicle) {
                      updateVehicle(editingVehicle.id, data);
                    } else {
                      addVehicle(data);
                    }
                    setIsDialogOpen(false);
                  }}
                  onCancel={() => setIsDialogOpen(false)}
                />
              </DialogContent>
            </Dialog>
          </div>
          
          <DataTable 
            columns={['Veículo', 'Placa', 'Motorista', 'Status', 'Ações']}
            data={vehicles}
            searchKey="vehicle"
            renderRow={(item, index) => (
              <TableRow key={index}>
                <TableCell className="font-medium">{item.vehicle}</TableCell>
                <TableCell>{item.plate}</TableCell>
                <TableCell>{item.driver}</TableCell>
                <TableCell>
                  <span className={`px-2 py-1 rounded-full text-xs font-bold ${
                    item.status === 'Em viagem' ? 'bg-blue-100 text-blue-700' :
                    item.status === 'Manutenção' ? 'bg-rose-100 text-rose-700' :
                    'bg-emerald-100 text-emerald-700'
                  }`}>
                    {item.status}
                  </span>
                </TableCell>
                <TableCell>
                  <Button 
                    variant="ghost" 
                    size="sm" 
                    onClick={() => {
                      setEditingVehicle(item);
                      setIsDialogOpen(true);
                    }}
                  >
                    Editar
                  </Button>
                </TableCell>
              </TableRow>
            )}
          />
        </div>
      </div>
    </AppLayout>
  );
};
