import React, { useEffect, useState } from 'react';
import { useClaims } from '../hooks/useClaims';
import { useVehicles } from '../hooks/useVehicles';
import { useDrivers } from '../hooks/useDrivers';
import AutocompleteInput from '../components/AutocompleteInput';
import ExcelTable from '../components/ExcelTable';
import { Plus, Search } from 'lucide-react';
import { 
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription 
} from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

// Reusing styled components locally
const DarkInput = ({ label, ...props }) => (
  <div className="space-y-1.5">
    {label && <label className="text-[10px] uppercase font-bold text-slate-500 dark:text-slate-400 tracking-wider ml-1">{label}</label>}
    <input 
      className="w-full bg-slate-50 dark:bg-[#141414] border border-slate-200 dark:border-[#333] rounded-xl px-3 py-2 text-sm text-slate-700 dark:text-slate-200 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all placeholder:text-slate-400 dark:placeholder:text-slate-700"
      {...props}
    />
  </div>
);

const DarkSelect = ({ label, options, value, onChange }) => (
  <div className="space-y-1.5">
    {label && <label className="text-[10px] uppercase font-bold text-slate-500 dark:text-slate-400 tracking-wider ml-1">{label}</label>}
    <select 
      value={value} 
      onChange={e => onChange(e.target.value)}
      className="w-full bg-slate-50 dark:bg-[#141414] border border-slate-200 dark:border-[#333] rounded-xl px-3 py-2 text-sm text-slate-700 dark:text-slate-200 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all cursor-pointer"
    >
      <option value="">Selecione...</option>
      {options.map(opt => (
        <option key={opt} value={opt}>{opt}</option>
      ))}
    </select>
  </div>
);

const DarkButton = ({ children, variant = 'primary', className = '', ...props }) => {
  const baseClass = "px-4 py-2 rounded-xl font-bold text-sm transition-all shadow-lg active:scale-95 flex items-center justify-center gap-2";
  const variants = {
    primary: "bg-emerald-600 hover:bg-emerald-500 text-white shadow-emerald-500/10",
    secondary: "bg-slate-100 dark:bg-[#2a2a2a] hover:bg-slate-200 dark:hover:bg-[#333] text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-[#333]",
    ghost: "bg-transparent hover:bg-slate-100 dark:hover:bg-[#2a2a2a] text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-white"
  };
  
  return (
    <button className={`${baseClass} ${variants[variant]} ${className}`} {...props}>
      {children}
    </button>
  );
};

export default function ClaimsView() {
  const { claims, loading, fetchClaims, createClaim, updateClaim } = useClaims();
  const [searchTerm, setSearchTerm] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingItem, setEditingItem] = useState(null);

  const initialFormState = {
    agendamento: '', ano_fabricacao: '', ano_modelo: '', atuacao: '', base: '',
    categoria: '', chassi: '', cmou: '', combustivel: '', contrato: '',
    coordenador: '', cor: '', d: '', data_entrada: '', data_limite: '',
    dias_parado: '', dispatcher: '', fabricante: '', fiscal_operacao: '',
    geotab: 'NÃO', gestor: '', id_rota: '', idsinistro_devolucao_frota: '',
    km_atual: '', km_preventiva: '', melifleet: 'No', modelo: '', motorista: '',
    obs: '', placa: '', pooltrack: 'NÃO', previsao: '', primeira_locacao: '',
    proprietario: '', prox_preventiva: '', renavan: '', sascar: 'NÃO',
    status: '', t4s: 'NÃO', tipo_frota: '', tipo_placa: '', u: 'SIM',
    uf: '', ultima_preventiva: '', valor_aluguel: '', valor_fipe: ''
  };
  const [formData, setFormData] = useState(initialFormState);

  const { vehicles, fetchVehicles } = useVehicles();
  const { drivers, fetchDrivers } = useDrivers();

  useEffect(() => {
    fetchClaims();
    fetchVehicles();
    fetchDrivers();
  }, []);

  const handleVehicleSelect = (vehicle) => {
    if (!vehicle) return;
    setFormData(prev => ({
      ...prev,
      placa: vehicle.placa || prev.placa,
      chassi: vehicle.chassi || prev.chassi,
      renavan: vehicle.renavam || vehicle.renavan || prev.renavan,
      modelo: vehicle.modelo || vehicle.mod_veiculo || prev.modelo,
      fabricante: vehicle.fabricante || vehicle.marca || prev.fabricante,
      cor: vehicle.cor || prev.cor,
      ano_fabricacao: vehicle.ano_fabricacao || vehicle.ano_fab || prev.ano_fabricacao,
      ano_modelo: vehicle.ano_modelo || vehicle.ano_mod || prev.ano_modelo,
      combustivel: vehicle.combustivel || prev.combustivel,
      categoria: vehicle.categoria || vehicle.cat_veiculo || prev.categoria,
      tipo_placa: vehicle.tipo_placa || prev.tipo_placa,
      proprietario: vehicle.proprietario || prev.proprietario,
      // Add more fields if available in vehicle object
    }));
  };

  const handleOpenModal = (item = null) => {
    if (item) {
        setEditingItem(item);
        setFormData({ ...initialFormState, ...item });
    } else {
        setEditingItem(null);
        setFormData(initialFormState);
    }
    setIsModalOpen(true);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    let success;
    if (editingItem) {
        success = await updateClaim(editingItem.idsinistro_devolucao_frota, formData);
    } else {
        success = await createClaim(formData);
    }
    if (success) setIsModalOpen(false);
  };

  const filteredData = Array.isArray(claims) ? claims.filter(item => 
    item.placa?.toLowerCase().includes(searchTerm.toLowerCase()) ||
    item.motorista?.toLowerCase().includes(searchTerm.toLowerCase())
  ) : [];

  return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row justify-between items-end md:items-center gap-4">
        <div>
          <h1 className="text-2xl font-black text-slate-800 dark:text-white tracking-tight">Sinistros e Devoluções</h1>
          <p className="text-slate-500 text-sm">Gestão de incidentes e movimentações de frota.</p>
        </div>
        <div className="flex items-center gap-3 w-full md:w-auto">
          <div className="relative flex-1 md:flex-none">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" size={16} />
            <input 
              className="bg-white dark:bg-[#1c1c1c] border border-slate-200 dark:border-[#2a2a2a] text-slate-700 dark:text-slate-200 pl-10 pr-4 py-2 rounded-xl text-sm focus:outline-none focus:border-emerald-500 w-full md:w-64"
              placeholder="Buscar registro..." 
              value={searchTerm}
              onChange={e => setSearchTerm(e.target.value)}
            />
          </div>
          <DarkButton onClick={() => handleOpenModal()}>
            <Plus size={18} /> Novo Registro
          </DarkButton>
        </div>
      </div>

      <div className="h-[600px] w-full max-w-full overflow-hidden min-w-0">
        <ExcelTable 
           data={filteredData}
           loading={loading}
           columns={[
             { header: 'ID', field: 'idsinistro_devolucao_frota', width: '80px' },
             { header: 'PLACA', field: 'placa', width: '100px', className: 'font-mono font-bold text-emerald-600 dark:text-emerald-500' },
             { header: 'STATUS', field: 'status', width: '120px', render: (row) => (
                 <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider border ${
                     row.status === 'Sinistro' ? 'bg-rose-500/10 text-rose-500 border-rose-500/20' : 
                     row.status === 'Devolução' ? 'bg-blue-500/10 text-blue-500 border-blue-500/20' :
                     'bg-slate-500/10 text-slate-500 border-slate-500/20'
                 }`}>
                     {row.status}
                 </span>
             )},
             { header: 'MOTORISTA', field: 'motorista', width: '150px' },
             { header: 'DATA ENTRADA', field: 'data_entrada', width: '120px' },
             { header: 'PREVISÃO', field: 'previsao', width: '120px' },
             { header: 'DIAS PARADO', field: 'dias_parado', width: '100px', className: 'text-red-400 font-bold' },
             { header: 'MODELO', field: 'modelo', width: '120px' },
             { header: 'FABRICANTE', field: 'fabricante', width: '120px' },
             { header: 'COMBUSTÍVEL', field: 'combustivel', width: '120px' },
             { header: 'ANO FAB.', field: 'ano_fabricacao', width: '80px' },
             { header: 'ANO MOD.', field: 'ano_modelo', width: '80px' },
             { header: 'TIPO FROTA', field: 'tipo_frota', width: '120px' },
             { header: 'CATEGORIA', field: 'categoria', width: '120px' },
             { header: 'TIPO PLACA', field: 'tipo_placa', width: '100px' },
             { header: 'BASE', field: 'base', width: '100px' },
             { header: 'UF', field: 'uf', width: '60px' },
             { header: 'GESTOR', field: 'gestor', width: '140px' },
             { header: 'COORDENADOR', field: 'coordenador', width: '140px' },
             { header: 'DISPATCHER', field: 'dispatcher', width: '140px' },
             { header: 'FISCAL OPER.', field: 'fiscal_operacao', width: '140px' },
             { header: 'ATUAÇÃO', field: 'atuacao', width: '140px' },
             { header: 'ID ROTA', field: 'id_rota', width: '120px' },
             { header: 'AGENDAMENTO', field: 'agendamento', width: '120px' },
             { header: 'PROPRIETÁRIO', field: 'proprietario', width: '140px' },
             { header: 'CONTRATO', field: 'contrato', width: '120px' },
             { header: 'DATA LIMITE', field: 'data_limite', width: '110px' },
             { header: '1ª LOCAÇÃO', field: 'primeira_locacao', width: '110px' },
             { header: 'KM ATUAL', field: 'km_atual', width: '100px' },
             { header: 'KM PREV.', field: 'km_preventiva', width: '100px' },
             { header: 'ÚLT. PREV.', field: 'ultima_preventiva', width: '100px' },
             { header: 'PRÓX. PREV.', field: 'prox_preventiva', width: '100px' },
             { header: 'MELIFLEET', field: 'melifleet', width: '100px' },
             { header: 'GEOTAB', field: 'geotab', width: '80px' },
             { header: 'SASCAR', field: 'sascar', width: '80px' },
             { header: 'POOLTRACK', field: 'pooltrack', width: '80px' },
             { header: 'T4S', field: 't4s', width: '80px' },
             { header: 'RENAVAN', field: 'renavan', width: '150px' },
             { header: 'CHASSI', field: 'chassi', width: '180px' },
             { header: 'CMOU', field: 'cmou', width: '80px' },
             { header: 'D', field: 'd', width: '100px' },
             { header: 'U', field: 'u', width: '100px' },
             { header: 'VALOR ALUGUEL', field: 'valor_aluguel', width: '120px' },
             { header: 'VALOR FIPE', field: 'valor_fipe', width: '120px' },
             { header: 'OBS', field: 'obs', width: '200px' },
           ]}
           filterDefs={[
               { field: 'placa', label: 'Placa', type: 'text', placeholder: 'Buscar placa...' },
               { field: 'status', label: 'Status', type: 'select' },
               { field: 'base', label: 'Base', type: 'select' },
           ]}
           onEdit={handleOpenModal}
        />
      </div>

      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
        <DialogContent className="max-w-4xl bg-white dark:bg-[#1c1c1c] border-slate-200 dark:border-[#2a2a2a] text-slate-700 dark:text-slate-200 p-0 overflow-hidden shadow-2xl">
           <DialogHeader className="p-6 border-b border-slate-200 dark:border-[#2a2a2a]">
               <DialogTitle className="text-slate-800 dark:text-white uppercase font-black">
                   {editingItem ? 'Editar Registro' : 'Novo Registro (Sinistro/Devolução)'}
               </DialogTitle>
               <DialogDescription className="text-slate-500 dark:text-stone-500">
                   Informações detalhadas sobre o evento.
               </DialogDescription>
           </DialogHeader>
           
           <form onSubmit={handleSubmit} className="px-6 py-4 max-h-[75vh] overflow-y-auto custom-scrollbar">
               <Tabs defaultValue="basicos" className="w-full">
                  <TabsList className="bg-slate-100 dark:bg-[#141414] border border-slate-200 dark:border-[#2a2a2a] w-full justify-start p-1 h-auto mb-4">
                    {['basicos', 'ocorrencia', 'operacional', 'financeiro', 'tecnico'].map(tab => (
                        <TabsTrigger 
                        key={tab} 
                        value={tab}
                        className="data-[state=active]:bg-emerald-600 data-[state=active]:text-white text-slate-500 dark:text-stone-400 text-[10px] uppercase font-bold px-4 py-2"
                        >
                        {tab}
                        </TabsTrigger>
                    ))}
                  </TabsList>

                  <div className="min-h-[300px]">
                    <TabsContent value="basicos" className="space-y-4 m-0 pb-4">
                        <div className="grid grid-cols-3 gap-4">
                            <AutocompleteInput 
                               label="Placa" 
                               value={formData.placa} 
                               onChange={v => setFormData({...formData, placa: v})} 
                               options={vehicles}
                               displayKey="placa"
                               valueKey="placa"
                               searchKeys={['placa']}
                               onSelect={handleVehicleSelect}
                               required 
                            />
                            <DarkInput label="Chassi" value={formData.chassi} onChange={e => setFormData({...formData, chassi: e.target.value})} />
                            <DarkInput label="Renavam" value={formData.renavan} onChange={e => setFormData({...formData, renavan: e.target.value})} />
                        </div>
                        <div className="grid grid-cols-3 gap-4">
                            <DarkInput label="Modelo" value={formData.modelo} onChange={e => setFormData({...formData, modelo: e.target.value})} />
                            <DarkInput label="Fabricante" value={formData.fabricante} onChange={e => setFormData({...formData, fabricante: e.target.value})} />
                            <DarkInput label="Cor" value={formData.cor} onChange={e => setFormData({...formData, cor: e.target.value})} />
                        </div>
                        <div className="grid grid-cols-3 gap-4">
                             <DarkInput label="Ano Fab." value={formData.ano_fabricacao} onChange={e => setFormData({...formData, ano_fabricacao: e.target.value})} />
                             <DarkInput label="Ano Mod." value={formData.ano_modelo} onChange={e => setFormData({...formData, ano_modelo: e.target.value})} />
                             <DarkInput label="Combustível" value={formData.combustivel} onChange={e => setFormData({...formData, combustivel: e.target.value})} />
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                             <DarkInput label="Categoria" value={formData.categoria} onChange={e => setFormData({...formData, categoria: e.target.value})} />
                             <DarkInput label="Tipo Placa" value={formData.tipo_placa} onChange={e => setFormData({...formData, tipo_placa: e.target.value})} />
                        </div>
                    </TabsContent>

                    <TabsContent value="ocorrencia" className="space-y-4 m-0 pb-4">
                         <div className="grid grid-cols-3 gap-4">
                             <DarkSelect label="Status" options={['Sinistro', 'Devolução', 'Venda', 'Manutenção']} value={formData.status} onChange={v => setFormData({...formData, status: v})} />
                             <DarkInput type="date" label="Data Entrada" value={formData.data_entrada?.split('T')[0]} onChange={e => setFormData({...formData, data_entrada: e.target.value})} />
                             <DarkInput type="date" label="Previsão" value={formData.previsao?.split('T')[0]} onChange={e => setFormData({...formData, previsao: e.target.value})} />
                         </div>
                         <div className="grid grid-cols-2 gap-4">
                              <DarkInput label="Dias Parado" value={formData.dias_parado} onChange={e => setFormData({...formData, dias_parado: e.target.value})} />
                              <DarkInput label="Agendamento" value={formData.agendamento} onChange={e => setFormData({...formData, agendamento: e.target.value})} />
                         </div>
                         <div className="grid grid-cols-2 gap-4">
                              <DarkInput label="D (Col)" value={formData.d} onChange={e => setFormData({...formData, d: e.target.value})} />
                              <DarkInput label="U (Col)" value={formData.u} onChange={e => setFormData({...formData, u: e.target.value})} />
                         </div>
                         <div className="gap-1.5 flex flex-col">
                            <label className="text-[10px] uppercase font-bold text-slate-500 dark:text-slate-400 tracking-wider ml-1">Observações</label>
                            <textarea 
                              className="w-full bg-slate-50 dark:bg-[#141414] border border-slate-200 dark:border-[#333] rounded-xl px-3 py-2 text-sm text-slate-700 dark:text-slate-200 focus:outline-none focus:border-emerald-500 transition-all placeholder:text-slate-400 min-h-[80px]"
                              value={formData.obs}
                              onChange={e => setFormData({...formData, obs: e.target.value})}
                            />
                         </div>
                    </TabsContent>
                    
                    <TabsContent value="operacional" className="space-y-4 m-0 pb-4">
                         <div className="grid grid-cols-3 gap-4">
                             <DarkInput label="Base" value={formData.base} onChange={e => setFormData({...formData, base: e.target.value})} />
                             <DarkInput label="UF" value={formData.uf} onChange={e => setFormData({...formData, uf: e.target.value})} />
                             <DarkInput label="Proprietário" value={formData.proprietario} onChange={e => setFormData({...formData, proprietario: e.target.value})} />
                         </div>
                         <div className="grid grid-cols-2 gap-4">
                             <AutocompleteInput
                                 label="Motorista"
                                 value={formData.motorista}
                                 onChange={v => setFormData({...formData, motorista: v})}
                                 options={drivers}
                                 displayKey="NOME_FAVORECIDO" 
                                 valueKey="NOME_FAVORECIDO"
                                 placeholder="Buscar motorista..."
                              />
                             <DarkInput label="ID Rota" value={formData.id_rota} onChange={e => setFormData({...formData, id_rota: e.target.value})} />
                         </div>
                         <div className="grid grid-cols-3 gap-4">
                             <DarkInput label="Gestor" value={formData.gestor} onChange={e => setFormData({...formData, gestor: e.target.value})} />
                             <DarkInput label="Coordenador" value={formData.coordenador} onChange={e => setFormData({...formData, coordenador: e.target.value})} />
                         </div>
                         <div className="grid grid-cols-2 gap-4">
                             <DarkInput label="Dispatcher" value={formData.dispatcher} onChange={e => setFormData({...formData, dispatcher: e.target.value})} />
                             <DarkInput label="Fiscal Operação" value={formData.fiscal_operacao} onChange={e => setFormData({...formData, fiscal_operacao: e.target.value})} />
                         </div>
                         <DarkInput label="Atuação" value={formData.atuacao} onChange={e => setFormData({...formData, atuacao: e.target.value})} />
                    </TabsContent>

                     <TabsContent value="financeiro" className="space-y-4 m-0 pb-4">
                        <div className="grid grid-cols-2 gap-4">
                            <DarkInput type="number" label="Valor FIPE" value={formData.valor_fipe} onChange={e => setFormData({...formData, valor_fipe: e.target.value})} />
                            <DarkInput type="number" label="Valor Aluguel" value={formData.valor_aluguel} onChange={e => setFormData({...formData, valor_aluguel: e.target.value})} />
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                            <DarkInput label="Contrato" value={formData.contrato} onChange={e => setFormData({...formData, contrato: e.target.value})} />
                            <DarkInput type="date" label="Data Limite" value={formData.data_limite?.split('T')[0]} onChange={e => setFormData({...formData, data_limite: e.target.value})} />
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                             <DarkInput label="Tipo Frota" value={formData.tipo_frota} onChange={e => setFormData({...formData, tipo_frota: e.target.value})} />
                             <DarkInput type="date" label="Primeira Locação" value={formData.primeira_locacao?.split('T')[0]} onChange={e => setFormData({...formData, primeira_locacao: e.target.value})} />
                        </div>
                    </TabsContent>

                    <TabsContent value="tecnico" className="space-y-4 m-0 pb-4">
                        <div className="grid grid-cols-3 gap-4">
                            <DarkInput label="KM Preventiva" value={formData.km_preventiva} onChange={e => setFormData({...formData, km_preventiva: e.target.value})} />
                            <DarkInput label="KM Atual" value={formData.km_atual} onChange={e => setFormData({...formData, km_atual: e.target.value})} />
                            <DarkInput label="CMOU" value={formData.cmou} onChange={e => setFormData({...formData, cmou: e.target.value})} />
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                             <DarkInput type="date" label="Última Prev." value={formData.ultima_preventiva?.split('T')[0]} onChange={e => setFormData({...formData, ultima_preventiva: e.target.value})} />
                             <DarkInput type="date" label="Próx. Prev." value={formData.prox_preventiva?.split('T')[0]} onChange={e => setFormData({...formData, prox_preventiva: e.target.value})} />
                        </div>
                        <div className="grid grid-cols-4 gap-4 pt-2">
                            {['geotab', 'sascar', 'pooltrack', 't4s'].map(tracker => (
                                <DarkSelect key={tracker} label={tracker.toUpperCase()} options={['SIM', 'NÃO']} value={formData[tracker]} onChange={v => setFormData({...formData, [tracker]: v})} />
                            ))}
                        </div>
                    </TabsContent>
                  </div>
               </Tabs>
           </form>

           <DialogFooter className="sticky bottom-0 bg-white dark:bg-[#1c1c1c] border-t border-slate-200 dark:border-[#2a2a2a] p-4 gap-2">
               <DarkButton type="button" variant="ghost" onClick={() => setIsModalOpen(false)}>Cancelar</DarkButton>
               <DarkButton type="submit" onClick={handleSubmit}>Salvar Registro</DarkButton>
           </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}
