saas_app/src/packages/administrativo/components/TPessoa/TPessoaTableFormColumnsDialog.tsx

import { ColumnDef } from '@tanstack/react-table';
import { ArrowUpDownIcon } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { FormatCPF } from '@/shared/actions/CPF/FormatCPF';
import { FormatDateTime } from '@/shared/actions/dateTime/FormatDateTime';
import { FormatPhone } from '@/shared/actions/phone/FormatPhone';
import GetNameInitials from '@/shared/actions/text/GetNameInitials';
import empty from '@/shared/actions/validations/empty';

import TPessoaInterface from '../../interfaces/TPessoa/TPessoaInterface';

/**
 * Função para criar a definição das colunas da tabela
 */
export function TPessoaTableFormColumnsDialog(setSelectedTPessoa: React.Dispatch<React.SetStateAction<any | null>>): ColumnDef<TPessoaInterface>[] {
  return [
    {
      id: 'select',
      header: '',
      cell: ({ row, table }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => {
            // Limpa todas as seleções antes de selecionar uma nova
            table.resetRowSelection();
            row.toggleSelected(!!value);
            setSelectedTPessoa(value ? row.original : null);
          }}
          aria-label="Select row"
        />
      ),
      enableSorting: false,
      enableHiding: false,
    },
    // ID
    {
      accessorKey: 'pessoa_id',
      header: ({ column }) => (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          # <ArrowUpDownIcon className="ml-1 h-4 w-4" />
        </Button>
      ),
      cell: ({ row }) => Number(row.getValue('pessoa_id')),
      enableSorting: false,
    },

    // Nome / Email / Foto
    {
      id: 'nome_completo',
      accessorFn: (row) => row,
      header: ({ column }) => (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Nome / Email <ArrowUpDownIcon className="ml-1 h-4 w-4 cursor-pointer" />
        </Button>
      ),
      cell: ({ row }) => {
        const pessoa = row.original;

        return (
          <div className="flex items-center gap-3">
            {/* Foto ou Iniciais */}
            <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-gray-200">
              {pessoa.foto ? (
                <img
                  src={pessoa.foto}
                  alt={pessoa.nome || 'Avatar'}
                  className="h-full w-full object-cover"
                />
              ) : (
                <span className="text-sm font-medium text-gray-700">
                  {GetNameInitials(pessoa.nome)}
                </span>
              )}
            </div>

            {/* Nome e Email */}
            <div>
              <div className="font-semibold text-gray-900 capitalize">{pessoa.nome || '-'}</div>
              <div className="text-sm text-gray-500">
                {empty(pessoa.email) ? 'Email não informado' : pessoa.email}
              </div>
            </div>
          </div>
        );
      },
      sortingFn: (a, b) =>
        (a.original.nome?.toLowerCase() || '').localeCompare(b.original.nome?.toLowerCase() || ''),
    },

    // CPF
    {
      accessorKey: 'cpf_cnpj',
      header: ({ column }) => (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          CPF <ArrowUpDownIcon className="ml-1 h-4 w-4 cursor-pointer" />
        </Button>
      ),
      cell: ({ row }) => FormatCPF(row.getValue('cpf_cnpj')),
    },

    // Telefone
    {
      accessorKey: 'telefone',
      header: ({ column }) => (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Telefone <ArrowUpDownIcon className="ml-1 h-4 w-4 cursor-pointer" />
        </Button>
      ),
      cell: ({ row }) => FormatPhone(row.getValue('telefone')),
    },

    // Cidade / UF
    {
      id: 'cidade_uf',
      accessorFn: (row) => `${row.cidade}/${row.uf}`,
      header: ({ column }) => (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Cidade/UF <ArrowUpDownIcon className="ml-1 h-4 w-4 cursor-pointer" />
        </Button>
      ),
      cell: ({ row }) => <span>{row.getValue('cidade_uf') || '-'}</span>,
      sortingFn: (a, b) =>
        `${a.original.cidade}/${a.original.uf}`
          .toLowerCase()
          .localeCompare(`${b.original.cidade}/${b.original.uf}`.toLowerCase()),
    },

    // Data de cadastro
    {
      accessorKey: 'data_cadastro',
      header: ({ column }) => (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Cadastro <ArrowUpDownIcon className="ml-1 h-4 w-4 cursor-pointer" />
        </Button>
      ),
      cell: ({ row }) => FormatDateTime(row.getValue('data_cadastro')),
      sortingFn: 'datetime',
    },

  ];
}