import React, { useEffect, useState } from 'react';
import { useDrivers } from '../hooks/useDrivers';
import ExcelTable from '../components/ExcelTable';
import { Plus, Search } from 'lucide-react';
import { 
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription 
} from "@/components/ui/dialog";

// 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 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 DriversView() {
  const { drivers, fetchDrivers } = useDrivers();
  const [searchTerm, setSearchTerm] = useState('');
  
  // Note: Drivers View is Read-Only for now as per instructions (just listing)
  // If editing is needed, we can implement it later.

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

  const filteredData = Array.isArray(drivers) ? drivers.filter(item => 
    item.NOME_FAVORECIDO?.toLowerCase().includes(searchTerm.toLowerCase()) ||
    item.CPF_CNPJ_FAVORECIDO?.includes(searchTerm)
  ) : [];

  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">Motoristas</h1>
        </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 motorista..." 
              value={searchTerm}
              onChange={e => setSearchTerm(e.target.value)}
            />
          </div>
        </div>
      </div>

      <div className="h-[600px] w-full max-w-full overflow-hidden min-w-0">
        <ExcelTable 
           data={filteredData}
           columns={[
             { header: 'NOME', field: 'NOME_FAVORECIDO', width: '300px', className: 'font-mono font-bold text-emerald-600 dark:text-emerald-500' },
             { header: 'CPF/CNPJ', field: 'CPF_CNPJ_FAVORECIDO', width: '180px' },
             { header: 'TELEFONE', field: 'TELEFONE', width: '150px' },
             { header: 'ENDEREÇO', field: 'ENDERECO', width: '250px' },
             { header: 'BASE', field: 'BASE', width: '150px' },
           ]}
           filterDefs={[
               { field: 'NOME_FAVORECIDO', label: 'Nome', type: 'text' },
               { field: 'BASE', label: 'Base', type: 'select' },
           ]}
           // Edit disabled for now
        />
      </div>
    </div>
  );
}
