import React, { useState, useMemo } from 'react';
import { Search } from 'lucide-react';
import ExcelTable from '../components/ExcelTable';

const TableDebug = () => {
  const [searchTerm, setSearchTerm] = useState('');

  // Mock Data matching the screenshot structure
  const vehicles = useMemo(() => {
    // Top specific rows to match screenshot
    const topRows = [
      { id: 1, modelo: 'TEO0G02', placa: 'TEO0G02', status: 'Em uso', motorista: 'Larissa Ribeiro de Souza', combustivel: 'Gasolina', tipo: 'Passeio', marca: 'Fiat', ano: '2020', cidade: 'São Paulo', empresa: 'Empresa A', financiamento: 'Sim', financeira: 'Banco X' },
      { id: 2, modelo: 'HFB3A70', placa: 'HFB3A70', status: 'Não informado', motorista: 'Não atribuído', combustivel: 'Etanol', tipo: 'Utilitário', marca: 'VW', ano: '2021', cidade: 'Rio', empresa: 'Empresa B', financiamento: 'Não', financeira: '-' },
      { id: 3, modelo: 'LUN1968', placa: 'LUN1968', status: 'Manutenção', motorista: 'Carlos Silva', combustivel: 'Diesel', tipo: 'Caminhão', marca: 'Volvo', ano: '2019', cidade: 'Curitiba', empresa: 'Empresa A', financiamento: 'Sim', financeira: 'Banco Y' },
       // ... mix of data
    ];
    
    // Fill rest with randomized variety
    const fillRows = Array.from({ length: 40 }, (_, i) => ({
        id: 10 + i,
        modelo: `FLEX${i}`,
        placa: `ABC${10 + i}99`,
        status: ['Em uso', 'Manutenção', 'Vendido'][i % 3], // Varied status
        motorista: i % 2 === 0 ? 'Motorista Teste' : 'Não atribuído',
        combustivel: ['Flex', 'Gasolina', 'Diesel'][i % 3],
        tipo: ['Passeio', 'Utilitário', 'Caminhão'][i % 3],
        marca: ['Fiat', 'VW', 'Ford', 'Chevrolet'][i % 4],
        ano: String(2015 + (i % 10)),
        cidade: ['São Paulo', 'Rio', 'Belo Horizonte'][i % 3],
        empresa: ['Empresa A', 'Empresa B', 'Empresa C'][i % 3],
        financiamento: i % 2 === 0 ? 'Sim' : 'Não',
        financeira: i % 2 === 0 ? `Banco ${['X', 'Y', 'Z'][i % 3]}` : '-'
     }));

     return [...topRows, ...fillRows];
  }, []);

   const columns = [
    { header: 'MODELO', field: 'modelo', width: '120px' },
    { header: 'PLACA', field: 'placa', width: '100px', className: 'text-[#eab308] font-bold' }, // Yellow text for Placa
    { 
        header: 'STATUS', 
        field: 'status', 
        width: '140px',
        render: (row) => (
            row.status === 'Em uso' 
            ? <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider bg-[#1d4ed8] text-white">Em uso</span>
            : <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider bg-[#333] text-[#aaa]">Não informado</span>
        )
    },
    { header: 'MOTORISTA ATUAL', field: 'motorista', width: '200px' },
    { header: 'COMBUSTÍVEL', field: 'combustivel', width: '120px' },
    { header: 'TIPO', field: 'tipo', width: '100px' },
    { header: 'MARCA', field: 'marca', width: '120px' },
    { header: 'ANO', field: 'ano', width: '80px' },
    { header: 'CIDADE', field: 'cidade', width: '120px' },
  ];

  return (
    <div className="min-h-screen bg-[#111] text-white p-8 font-sans">
      <div className="mb-8">
        <h1 className="text-3xl font-black text-[#eab308] mb-2 flex items-center gap-3">
          <span className="p-2 bg-[#eab308]/10 rounded-lg">🔧</span>
          Debug - Tabela Prafrot
        </h1>
        <p className="text-slate-400">Teste standalone da tabela Excel-style (Pixel Perfect)</p>
      </div>

      <div className="flex items-center gap-4 mb-6">
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" size={18} />
          <input 
            type="text" 
            placeholder="Buscar placa..." 
            className="w-full bg-[#1a1a1a] border border-[#333] rounded px-10 py-2 text-sm text-slate-200 focus:outline-none focus:border-[#eab308] placeholder:text-slate-600 font-medium"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
        <button className="px-4 py-2 bg-[#eab308] text-black font-bold rounded hover:bg-[#ca9a00] transition-colors flex items-center gap-2 text-sm">
          + Novo
        </button>
      </div>

      {/* New ExcelTable Component */}
      <div className="h-[600px]">
        <ExcelTable 
          data={vehicles} 
          columns={columns} 
          filterDefs={[
            { field: 'empresa', label: 'Empresa', type: 'select' },
            { field: 'placa', label: 'Placa', type: 'text', placeholder: 'por placa' },
            { field: 'status', label: 'Status', type: 'select' },
            { field: 'combustivel', label: 'Combustível', type: 'select' },
            { field: 'tipo', label: 'Tipo', type: 'select' },
            { field: 'modelo', label: 'Modelo', type: 'text', placeholder: 'por modelo' },
            { field: 'financiamento', label: 'Financiamento', type: 'select' },
            { field: 'financeira', label: 'Financiador', type: 'text', placeholder: 'financiador' },
            { field: 'motorista', label: 'Proprietário', type: 'text', placeholder: 'proprietário' }
          ]}
        />
      </div>

    </div>
  );
};

export default TableDebug;