testes/src_2/components/shared/KanbanBoard/KanbanBoard.debug.jsx

import React, { useState } from 'react';
import { KanbanBoard } from './KanbanBoard';
import { Button } from '@/components/ui/button';
import { CreditCard, Car, RefreshCw, Plus, Trash2 } from 'lucide-react';

/**
 * Kanban Board Debug Wrapper
 * Contains mock data and controls for laboratory testing.
 */
export const KanbanBoardDebug = () => {
  const [columns, setColumns] = useState([
    {
      id: 'waiting',
      title: 'Aguardando Análise',
      color: 'slate',
      cards: [
        { 
          id: 1, 
          title: 'JOSIMAR XAVIER DE OLIVEIRA', 
          date: '01/12/2026',
          details: [
            { label: 'CPF', value: '109.265.067-90', icon: CreditCard },
            { label: 'Placa', value: 'SRN1J25', icon: Car }
          ] 
        },
        { 
          id: 2, 
          title: 'PABLO ALEXSANDER SILVA', 
          date: '01/12/2026',
          details: [
            { label: 'CPF', value: '143.670.086-81', icon: CreditCard },
            { label: 'Placa', value: '00000', icon: Car }
          ] 
        },
        { 
          id: 3, 
          title: 'Igor Rodrigues Da Costa', 
          date: '01/12/2026',
          details: [
            { label: 'CPF', value: '123.744.366-08', icon: CreditCard },
            { label: 'Placa', value: 'Alugado', icon: Car }
          ] 
        },
        { 
          id: 4, 
          title: 'Osvaldo Alves Gomes', 
          date: '11/07/2024',
          details: [
            { label: 'CPF', value: '096.021.397-06', icon: CreditCard },
            { label: 'Placa', value: '0', icon: Car }
          ] 
        }
      ]
    },
    {
      id: 'analyzing',
      title: 'Em Análise',
      color: 'blue',
      cards: []
    },
    {
      id: 'pending',
      title: 'Pendências / Revisão',
      color: 'orange',
      cards: []
    },
    {
      id: 'approved',
      title: 'Aprovado',
      color: 'emerald',
      cards: []
    },
    {
      id: 'rejected',
      title: 'Recusado',
      color: 'red',
      cards: [
        { 
          id: 10, 
          title: 'Ana Karla Doe', 
          date: 'Invalid Date',
          details: [
            { label: 'CPF', value: '12035478956', icon: CreditCard },
            { label: 'Placa', value: 'Não informado', icon: Car }
          ] 
        },
        { 
          id: 11, 
          title: 'ANTONIO ROBERTO FROES', 
          date: 'Invalid Date',
          details: [
            { label: 'CPF', value: '116.618.296-78', icon: CreditCard },
            { label: 'Placa', value: 'SGL8E97', icon: Car }
          ] 
        }
      ]
    }
  ]);

  const addRandomCard = () => {
    const targetColIdx = Math.floor(Math.random() * columns.length);
    const newColumns = [...columns];
    const newCard = {
      id: Date.now(),
      title: 'USUÁRIO DE TESTE ' + Math.floor(Math.random() * 100),
      date: new Date().toLocaleDateString(),
      details: [
        { label: 'CPF', value: '000.000.000-00', icon: CreditCard },
        { label: 'Placa', value: 'ABC1234', icon: Car }
      ]
    };
    newColumns[targetColIdx].cards = [newCard, ...newColumns[targetColIdx].cards];
    setColumns(newColumns);
  };

  const clearAll = () => {
    setColumns(columns.map(col => ({ ...col, cards: [] })));
  };

  return (
    <div className="flex flex-col gap-6 h-full">
      {/* Debug Controls */}
      <div className="flex items-center justify-between px-2">
        <div className="flex flex-col">
          <h4 className="text-[10px] font-black uppercase text-purple-500 tracking-[0.2em] mb-1">Laboratório Kanban</h4>
          <p className="text-[9px] text-slate-500 font-bold uppercase tracking-widest">Simule estados e fluxos do componente</p>
        </div>
        
        <div className="flex gap-2">
          <Button 
            variant="outline" 
            size="sm" 
            onClick={addRandomCard}
            className="h-8 text-[10px] font-bold uppercase tracking-wider border-purple-500/20 text-purple-500 hover:bg-purple-500/5"
          >
            <Plus size={12} className="mr-2" /> Adicionar Card
          </Button>
          <Button 
            variant="outline" 
            size="sm" 
            onClick={clearAll}
            className="h-8 text-[10px] font-bold uppercase tracking-wider border-rose-500/20 text-rose-500 hover:bg-rose-500/5"
          >
            <Trash2 size={12} className="mr-2" /> Limpar Tudo
          </Button>
          <Button 
            variant="ghost" 
            size="sm" 
            onClick={() => window.location.reload()}
            className="h-8 text-[10px] font-bold uppercase tracking-wider text-slate-500"
          >
            <RefreshCw size={12} className="mr-2" /> Reset
          </Button>
        </div>
      </div>

      {/* The Component */}
      <div className="flex-1 bg-white/5 rounded-3xl border border-white/5 overflow-hidden p-6">
        <KanbanBoard columns={columns} />
      </div>
    </div>
  );
};