import React from 'react';
import { useFleetData } from '../hooks/useFleetData';
import { 
  Fuel, 
  Calendar, 
  User, 
  ChevronRight, 
  Search,
  Download,
  Plus
} from 'lucide-react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';
import { motion } from 'framer-motion';

/**
 * Gestão de Abastecimento.
 * Histórico e controle conforme mockup.
 */
export const FuelingView = () => {
  const { abastecimentos, veiculos } = useFleetData();

  return (
    <div className="space-y-6 pb-10">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="space-y-1">
          <h2 className="text-2xl font-bold tracking-tight text-slate-900">Controle de Abastecimento</h2>
          <p className="text-sm text-slate-500 font-medium font-inter">Monitore o consumo e custos de combustível da sua frota</p>
        </div>
        <div className="flex items-center gap-3">
           <Button variant="outline" className="gap-2 font-bold text-slate-600 border-slate-200 hover:bg-slate-50">
            <Download size={16} /> Exportar CSV
          </Button>
          <Button className="gap-2 bg-primary hover:bg-emerald-600 text-white font-bold shadow-lg shadow-primary/20">
            <Plus size={18} /> Novo Abastecimento
          </Button>
        </div>
      </div>

      {/* Info Card de Instrução */}
      <Card className="bg-emerald-50 border border-emerald-100 shadow-sm overflow-hidden">
        <CardContent className="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 bg-emerald-500 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-emerald-500/20">
              <Fuel size={24} />
            </div>
            <div className="space-y-0.5">
              <p className="text-sm font-bold text-emerald-900">Instrução de Lançamento</p>
              <p className="text-xs font-medium text-emerald-700/80">Utilize o botão <strong className="text-emerald-600 font-black underline underline-offset-2">"Novo Abastecimento"</strong> para registrar. Somente veículos cadastrados podem ser abastecidos.</p>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card className="border border-slate-200 shadow-sm overflow-hidden bg-white">
        <CardHeader className="bg-slate-50/50 border-b border-slate-100 px-6 py-4 flex flex-row items-center justify-between">
          <CardTitle className="text-base font-bold text-slate-800">Histórico de Lançamentos</CardTitle>
          <div className="flex items-center gap-3">
             <Input type="month" className="w-40 h-10 bg-white border-slate-200 text-slate-900" />
             <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
                <Input placeholder="Buscar placa..." className="pl-9 h-10 bg-white border-slate-200 text-slate-900 w-44" />
             </div>
          </div>
        </CardHeader>

        <div className="overflow-x-auto">
          <table className="w-full text-left border-collapse min-w-[1200px]">
            <thead>
              <tr className="bg-slate-50/50">
                <th className="px-6 py-4 text-[11px] uppercase font-bold text-slate-500 tracking-widest border-b border-slate-100">Data</th>
                <th className="px-6 py-4 text-[11px] uppercase font-bold text-slate-500 tracking-widest border-b border-slate-100">Veículo / Motorista</th>
                <th className="px-6 py-4 text-[11px] uppercase font-bold text-slate-500 tracking-widest border-b border-slate-100">KM Atual</th>
                <th className="px-6 py-4 text-[11px] uppercase font-bold text-slate-500 tracking-widest border-b border-slate-100">Detalhamento</th>
                <th className="px-6 py-4 text-[11px] uppercase font-bold text-slate-500 tracking-widest border-b border-slate-100">Valor Total</th>
                <th className="px-6 py-4 text-[11px] uppercase font-bold text-slate-500 tracking-widest border-b border-slate-100">Posto / Combustível</th>
                <th className="px-6 py-4 text-[11px] uppercase font-bold text-slate-500 tracking-widest border-b border-slate-100 text-center">Eficiência</th>
              </tr>
            </thead>
            <tbody>
              {abastecimentos.map((abs, index) => {
                const veiculo = veiculos.find(v => v.id === abs.veiculoId);
                const media = (abs.km / abs.litros).toFixed(2);

                return (
                  <motion.tr 
                    key={abs.id}
                    initial={{ opacity: 0, scale: 0.98 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ delay: index * 0.05 }}
                    className="hover:bg-slate-50/50 transition-colors group"
                  >
                    <td className="px-6 py-5">
                      <div className="flex items-center gap-2">
                        <Calendar size={14} className="text-slate-400" />
                        <span className="text-sm font-bold text-slate-700">{new Date(abs.data).toLocaleDateString('pt-BR')}</span>
                      </div>
                    </td>
                    <td className="px-6 py-5">
                      <div className="flex flex-col">
                        <span className="text-sm font-bold text-slate-900 font-mono tracking-tighter">{veiculo?.placa || 'N/A'}</span>
                        <div className="flex items-center gap-1.5 mt-1">
                          <User size={12} className="text-slate-400" />
                          <span className="text-[11px] font-bold text-slate-500 uppercase">{abs.motorista}</span>
                        </div>
                      </div>
                    </td>
                    <td className="px-6 py-5 font-bold text-sm text-slate-600">
                      {abs.km.toLocaleString()} KM
                    </td>
                    <td className="px-6 py-5">
                      <div className="flex flex-col">
                        <span className="text-sm font-bold text-slate-800">{abs.litros} Litros</span>
                        <span className="text-[11px] font-bold text-slate-400 uppercase tracking-tighter">Bomba Registrada</span>
                      </div>
                    </td>
                    <td className="px-6 py-5">
                      <div className="flex flex-col">
                        <span className="text-sm font-bold text-slate-900 underline decoration-emerald-500/40 decoration-2 underline-offset-4">R$ {abs.valor.toFixed(2)}</span>
                        <span className="text-[11px] font-bold text-slate-500 mt-1">Fatura Corporativa</span>
                      </div>
                    </td>
                    <td className="px-6 py-5">
                      <div className="flex flex-col">
                        <span className="text-sm font-bold text-slate-700">{abs.posto}</span>
                        <Badge variant="outline" className="w-fit text-[10px] font-bold bg-slate-100 border-none mt-1 uppercase text-slate-500 tracking-tighter">
                          {abs.combustivel}
                        </Badge>
                      </div>
                    </td>
                    <td className="px-6 py-5 text-center">
                      <div className="inline-flex flex-col items-center">
                         <div className="text-sm font-bold text-emerald-600">{media} <span className="text-[10px] uppercase">km/L</span></div>
                         <div className="h-1 w-12 bg-emerald-100 rounded-full mt-1 overflow-hidden">
                            <div className="h-full bg-emerald-500 w-[70%]" />
                         </div>
                      </div>
                    </td>
                  </motion.tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
};
