'use client';

import { useEffect, useState, useCallback, useRef } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useSession } from 'next-auth/react';
import { useI18n } from '@/contexts/I18nContext';
import { LoadingSpinner } from '@/components/ui/loading-spinner';
import { Button } from '@/components/ui/button';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useToast } from '@/hooks/use-toast';
import {
    Plus,
    Edit,
    Trash2,
    Search,
    Filter,
    X,
    User,
    Mail,
    Phone,
    Building2,
    Calendar,
    File,
    Image as ImageIcon,
    Upload,
} from 'lucide-react';
import { ConfirmDeleteDialog } from '@/components/ConfirmDeleteDialog';
import { Pagination } from '@/components/ui/pagination';

interface Person {
    id: string;
    nomeCompleto: string;
    dataNascimento?: string | null;
    departamento?: string | null;
    email?: string | null;
    telefone?: string | null;
    foto?: string | null;
    isActive: boolean;
    createdAt: string;
    _count?: {
        documentos: number;
    };
}

export default function PeoplePage() {
    const { t } = useI18n();
    const { toast } = useToast();
    const router = useRouter();
    const { data: session } = useSession();

    const safeT = useCallback(
        (key: string, fallback: string) => {
            const value = t(key);
            if (!value || value === key) return fallback;
            return value;
        },
        [t],
    );
    const searchParams = useSearchParams();
    const [people, setPeople] = useState<Person[]>([]);
    const [loading, setLoading] = useState(true);
    const [open, setOpen] = useState(false);
    const [editing, setEditing] = useState<Person | null>(null);
    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
    const [deleteTarget, setDeleteTarget] = useState<Person | null>(null);

    const [searchTerm, setSearchTerm] = useState<string>('');
    const [filterDepartamento, setFilterDepartamento] = useState<string>('all');
    const [filterStatus, setFilterStatus] = useState<string>('all');
    const [currentPage, setCurrentPage] = useState(1);
    const [itemsPerPage, setItemsPerPage] = useState(10);

    const [formData, setFormData] = useState({
        nomeCompleto: '',
        dataNascimento: '',
        departamento: '',
        email: '',
        telefone: '',
        foto: '',
    });
    const [selectedFotoFile, setSelectedFotoFile] = useState<File | null>(null);
    const [fotoPreview, setFotoPreview] = useState<string>('');
    const [isDraggingFoto, setIsDraggingFoto] = useState(false);
    const [uploading, setUploading] = useState(false);

    const fetchPeople = useCallback(async () => {
        try {
            const res = await fetch('/api/people');
            if (res.ok) {
                const data = await res.json();
                setPeople(Array.isArray(data) ? data : []);
            } else {
                toast({
                    title: safeT('common.error', 'Erro'),
                    description: safeT('people.loadError', 'Erro ao carregar pessoas'),
                    variant: 'destructive',
                });
            }
        } catch (error) {
            toast({
                title: safeT('common.error', 'Erro'),
                description: safeT('people.loadError', 'Erro ao carregar pessoas'),
                variant: 'destructive',
            });
        } finally {
            setLoading(false);
        }
    }, [toast, safeT]);

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

    useEffect(() => {
        const pageParam = searchParams.get('page');
        if (pageParam) {
            const page = parseInt(pageParam, 10);
            if (!isNaN(page) && page > 0 && page !== currentPage) {
                setCurrentPage(page);
            }
        }
    }, [searchParams, currentPage]);

    const prevFilters = useRef({ searchTerm, filterDepartamento, filterStatus });

    useEffect(() => {
        const pageParam = searchParams.get('page');

        if (pageParam) {
            prevFilters.current = { searchTerm, filterDepartamento, filterStatus };
            return;
        }

        const filtersChanged =
            prevFilters.current.searchTerm !== searchTerm ||
            prevFilters.current.filterDepartamento !== filterDepartamento ||
            prevFilters.current.filterStatus !== filterStatus;

        if (filtersChanged) {
            setCurrentPage(1);
            router.push(`/module-people/admin/people`);
        }

        prevFilters.current = { searchTerm, filterDepartamento, filterStatus };
    }, [searchTerm, filterDepartamento, filterStatus, searchParams, router]);

    const handlePageChange = (page: number) => {
        setCurrentPage(page);
        const params = new URLSearchParams(searchParams.toString());
        params.set('page', page.toString());
        router.push(`/module-people/admin/people?${params.toString()}`);
    };

    const filteredPeople = Array.isArray(people)
        ? people.filter((person) => {
              const matchesSearch =
                  searchTerm === '' ||
                  person.nomeCompleto.toLowerCase().includes(searchTerm.toLowerCase()) ||
                  person.email?.toLowerCase().includes(searchTerm.toLowerCase()) ||
                  person.telefone?.toLowerCase().includes(searchTerm.toLowerCase()) ||
                  person.departamento?.toLowerCase().includes(searchTerm.toLowerCase());

              const matchesDepartamento = filterDepartamento === 'all' || person.departamento === filterDepartamento;
              const matchesStatus =
                  filterStatus === 'all' ||
                  (filterStatus === 'active' && person.isActive) ||
                  (filterStatus === 'inactive' && !person.isActive);

              return matchesSearch && matchesDepartamento && matchesStatus;
          })
        : [];

    const hasActiveFilters = filterDepartamento !== 'all' || filterStatus !== 'all' || searchTerm !== '';

    const clearAllFilters = () => {
        setSearchTerm('');
        setFilterDepartamento('all');
        setFilterStatus('all');
        setCurrentPage(1);
        router.push('/module-people/admin/people');
    };

    const departamentos = Array.isArray(people)
        ? Array.from(new Set(people.map((p) => p.departamento).filter(Boolean))).sort()
        : [];

    const totalPages = Math.ceil(filteredPeople.length / itemsPerPage);
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const paginatedPeople = filteredPeople.slice(startIndex, endIndex);

    const handleDragOverFoto = (e: React.DragEvent) => {
        e.preventDefault();
        setIsDraggingFoto(true);
    };

    const handleDragLeaveFoto = () => {
        setIsDraggingFoto(false);
    };

    const handleDropFoto = (e: React.DragEvent) => {
        e.preventDefault();
        setIsDraggingFoto(false);
        const file = e.dataTransfer.files[0];
        if (file) {
            if (file.size > 3 * 1024 * 1024) {
                toast({
                    title: safeT('common.error', 'Erro'),
                    description: safeT('people.fileTooBig', 'Ficheiro muito grande. Tamanho máximo: 3MB'),
                    variant: 'destructive',
                });
                return;
            }
            if (!file.type.startsWith('image/')) {
                toast({
                    title: safeT('common.error', 'Erro'),
                    description: safeT('people.onlyImages', 'Apenas imagens são permitidas'),
                    variant: 'destructive',
                });
                return;
            }
            setSelectedFotoFile(file);
            const reader = new FileReader();
            reader.onloadend = () => {
                setFotoPreview(reader.result as string);
            };
            reader.readAsDataURL(file);
        }
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            let fotoUrl = formData.foto;

            if (selectedFotoFile) {
                setUploading(true);
                try {
                    const { uploadFileDirect } = await import('@/lib/upload');
                    fotoUrl = await uploadFileDirect(selectedFotoFile, 'image');
                    setUploading(false);
                } catch (error: any) {
                    toast({
                        title: safeT('common.error', 'Erro'),
                        description: error.message || safeT('people.uploadError', 'Erro ao fazer upload da imagem'),
                        variant: 'destructive',
                    });
                    setUploading(false);
                    return;
                }
            }

            const url = editing ? `/api/people/${editing.id}` : '/api/people';
            const method = editing ? 'PUT' : 'POST';
            const user = session?.user as any;

            const res = await fetch(url, {
                method,
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    ...formData,
                    foto: fotoUrl,
                    organizationId: user?.organizationId,
                }),
            });

            if (res.ok) {
                toast({
                    title: safeT('common.success', 'Sucesso'),
                    description: editing
                        ? safeT('people.updated', 'Pessoa atualizada com sucesso')
                        : safeT('people.created', 'Pessoa criada com sucesso'),
                });
                setOpen(false);
                setEditing(null);
                setFormData({
                    nomeCompleto: '',
                    dataNascimento: '',
                    departamento: '',
                    email: '',
                    telefone: '',
                    foto: '',
                });
                setSelectedFotoFile(null);
                setFotoPreview('');
                fetchPeople();
            } else {
                const error = await res.json();
                toast({
                    title: safeT('common.error', 'Erro'),
                    description: error.error || safeT('people.saveError', 'Erro ao guardar pessoa'),
                    variant: 'destructive',
                });
            }
        } catch (error) {
            toast({
                title: safeT('common.error', 'Erro'),
                description: safeT('people.saveError', 'Erro ao guardar pessoa'),
                variant: 'destructive',
            });
        }
    };

    const handleEdit = (person: Person) => {
        router.push(`/module-people/admin/people/${person.id}`);
    };

    const handleDelete = async (id: string) => {
        try {
            const res = await fetch(`/api/people/${id}`, { method: 'DELETE' });
            if (res.ok) {
                toast({
                    title: safeT('common.success', 'Sucesso'),
                    description: safeT('people.deleted', 'Pessoa eliminada com sucesso'),
                });
                fetchPeople();
            } else {
                toast({
                    title: safeT('common.error', 'Erro'),
                    description: safeT('people.deleteError', 'Erro ao eliminar pessoa'),
                    variant: 'destructive',
                });
            }
        } catch (error) {
            toast({
                title: safeT('common.error', 'Erro'),
                description: safeT('people.deleteError', 'Erro ao eliminar pessoa'),
                variant: 'destructive',
            });
        }
    };

    if (loading) return <LoadingSpinner />;

    return (
        <div>
            <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4 sm:mb-6'>
                <div>
                    <h1 className='text-2xl sm:text-3xl font-bold dark:text-white'>
                        {safeT('modules.people.title', 'Pessoas')}
                    </h1>
                    <p className='text-sm text-gray-600 dark:text-gray-400 mt-1'>
                        {safeT(
                            'people.listDescription',
                            'Gestão de colaboradores e controlo de validade de documentos.',
                        )}
                    </p>
                </div>
                <Dialog
                    open={open}
                    onOpenChange={setOpen}
                >
                    <DialogTrigger asChild>
                        <Button
                            variant='default'
                            onClick={() => {
                                setEditing(null);
                                setFormData({
                                    nomeCompleto: '',
                                    dataNascimento: '',
                                    departamento: '',
                                    email: '',
                                    telefone: '',
                                    foto: '',
                                });
                                setSelectedFotoFile(null);
                                setFotoPreview('');
                            }}
                        >
                            <Plus className='mr-2 h-4 w-4' />
                            {safeT('people.new', 'Nova pessoa')}
                        </Button>
                    </DialogTrigger>
                    <DialogContent>
                        <form onSubmit={handleSubmit}>
                            <DialogHeader>
                                <DialogTitle>
                                    {editing
                                        ? safeT('people.edit', 'Editar pessoa')
                                        : safeT('people.new', 'Nova pessoa')}
                                </DialogTitle>
                                <DialogDescription>
                                    {safeT('form.fillData', 'Preencha os dados abaixo.')}
                                </DialogDescription>
                            </DialogHeader>
                            <div className='grid gap-4 py-4'>
                                <div className='grid gap-2'>
                                    <Label htmlFor='nomeCompleto'>{safeT('people.name', 'Nome completo')}</Label>
                                    <Input
                                        id='nomeCompleto'
                                        value={formData.nomeCompleto}
                                        onChange={(e) => setFormData({ ...formData, nomeCompleto: e.target.value })}
                                        required
                                    />
                                </div>
                                <div className='grid gap-2'>
                                    <Label htmlFor='dataNascimento'>
                                        {safeT('people.birthDate', 'Data de nascimento')}
                                    </Label>
                                    <Input
                                        id='dataNascimento'
                                        type='date'
                                        value={formData.dataNascimento}
                                        onChange={(e) => setFormData({ ...formData, dataNascimento: e.target.value })}
                                    />
                                </div>
                                <div className='grid gap-2'>
                                    <Label htmlFor='departamento'>{safeT('people.department', 'Departamento')}</Label>
                                    <Input
                                        id='departamento'
                                        value={formData.departamento}
                                        onChange={(e) => setFormData({ ...formData, departamento: e.target.value })}
                                    />
                                </div>
                                <div className='grid gap-2'>
                                    <Label htmlFor='email'>Email</Label>
                                    <Input
                                        id='email'
                                        type='email'
                                        value={formData.email}
                                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                                    />
                                </div>
                                <div className='grid gap-2'>
                                    <Label htmlFor='telefone'>{safeT('people.phone', 'Telefone')}</Label>
                                    <Input
                                        id='telefone'
                                        value={formData.telefone}
                                        onChange={(e) => setFormData({ ...formData, telefone: e.target.value })}
                                    />
                                </div>
                                <div className='grid gap-2'>
                                    <Label htmlFor='foto'>{safeT('people.photo', 'Foto')}</Label>
                                    {fotoPreview ? (
                                        <div className='relative'>
                                            <img
                                                src={fotoPreview}
                                                alt='Preview'
                                                className='w-full max-w-md h-48 object-cover rounded border'
                                            />
                                            <Button
                                                type='button'
                                                variant='ghost'
                                                size='sm'
                                                className='absolute top-2 right-2'
                                                onClick={() => {
                                                    setSelectedFotoFile(null);
                                                    setFotoPreview('');
                                                    setFormData({ ...formData, foto: '' });
                                                }}
                                            >
                                                <X className='h-4 w-4' />
                                            </Button>
                                        </div>
                                    ) : (
                                        <div
                                            onDragOver={handleDragOverFoto}
                                            onDragLeave={handleDragLeaveFoto}
                                            onDrop={handleDropFoto}
                                            className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
                                                isDraggingFoto
                                                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                                                    : 'border-gray-300 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-600'
                                            }`}
                                        >
                                            <Upload className='h-12 w-12 mx-auto mb-4 text-gray-400' />
                                            <p className='text-sm font-medium mb-2'>
                                                {isDraggingFoto
                                                    ? safeT('people.upload.drop', 'Solte a imagem aqui')
                                                    : safeT('people.upload.drag', 'Arraste e solte a imagem aqui')}
                                            </p>
                                            <p className='text-xs text-gray-500 mb-4'>
                                                {safeT('people.upload.or', 'ou')}
                                            </p>
                                            <Input
                                                id='foto'
                                                type='file'
                                                accept='image/jpeg,image/jpg,image/png,image/webp'
                                                onChange={(e) => {
                                                    const file = e.target.files?.[0];
                                                    if (file) {
                                                        if (file.size > 3 * 1024 * 1024) {
                                                            toast({
                                                                title: safeT('common.error', 'Erro'),
                                                                description: safeT(
                                                                    'people.fileTooBig',
                                                                    'Ficheiro muito grande. Tamanho máximo: 3MB',
                                                                ),
                                                                variant: 'destructive',
                                                            });
                                                            return;
                                                        }
                                                        if (!file.type.startsWith('image/')) {
                                                            toast({
                                                                title: safeT('common.error', 'Erro'),
                                                                description: safeT(
                                                                    'people.onlyImages',
                                                                    'Apenas imagens são permitidas',
                                                                ),
                                                                variant: 'destructive',
                                                            });
                                                            return;
                                                        }
                                                        setSelectedFotoFile(file);
                                                        const reader = new FileReader();
                                                        reader.onloadend = () => {
                                                            setFotoPreview(reader.result as string);
                                                        };
                                                        reader.readAsDataURL(file);
                                                    }
                                                }}
                                                className='hidden'
                                            />
                                            <Label
                                                htmlFor='foto'
                                                className='cursor-pointer inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm'
                                            >
                                                {safeT('people.upload.select', 'Selecionar imagem')}
                                            </Label>
                                            <p className='text-xs text-gray-500 mt-2'>
                                                {safeT('people.upload.maxSize', 'Tamanho máximo: 3MB')}
                                            </p>
                                        </div>
                                    )}
                                </div>
                            </div>
                            <DialogFooter>
                                <Button
                                    type='button'
                                    variant='outline'
                                    onClick={() => setOpen(false)}
                                >
                                    {safeT('common.cancel', 'Cancelar')}
                                </Button>
                                <Button
                                    type='submit'
                                    disabled={uploading}
                                >
                                    {uploading
                                        ? safeT('form.uploading', 'A guardar...')
                                        : safeT('common.save', 'Guardar')}
                                </Button>
                            </DialogFooter>
                        </form>
                    </DialogContent>
                </Dialog>
            </div>

            {}
            <div className='bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-4'>
                <div className='flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-4'>
                    <h2 className='text-base font-semibold flex items-center gap-2'>
                        <Filter className='h-4 w-4' />
                        {safeT('people.list.filters', 'Filtros de pessoas')}
                    </h2>
                    {hasActiveFilters && (
                        <Button
                            variant='outline'
                            size='sm'
                            onClick={clearAllFilters}
                            className='text-xs h-8'
                        >
                            <X className='h-3 w-3 mr-1' />
                            {safeT('people.list.clearFilters', 'Limpar filtros')}
                        </Button>
                    )}
                </div>

                <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3'>
                    <div className='lg:col-span-2'>
                        <div className='relative'>
                            <Input
                                id='search'
                                placeholder={safeT(
                                    'people.list.searchPlaceholder',
                                    'Procurar por nome, email, telefone...',
                                )}
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                                className='pl-9 pr-9 h-9'
                            />
                            <Search className='absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400' />
                            {searchTerm && (
                                <Button
                                    variant='ghost'
                                    size='icon'
                                    className='absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6'
                                    onClick={() => setSearchTerm('')}
                                >
                                    <X className='h-3 w-3' />
                                </Button>
                            )}
                        </div>
                    </div>

                    <Select
                        value={filterDepartamento}
                        onValueChange={setFilterDepartamento}
                    >
                        <SelectTrigger
                            id='filter-departamento'
                            className='h-9'
                        >
                            <SelectValue placeholder={safeT('people.department', 'Departamento')} />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value='all'>
                                {safeT('people.list.allDepartments', 'Todos os departamentos')}
                            </SelectItem>
                            {departamentos.map((dept) => (
                                <SelectItem
                                    key={dept}
                                    value={dept || ''}
                                >
                                    {dept}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>

                    <Select
                        value={filterStatus}
                        onValueChange={setFilterStatus}
                    >
                        <SelectTrigger
                            id='filter-status'
                            className='h-9'
                        >
                            <SelectValue placeholder={safeT('people.status', 'Status')} />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value='all'>{safeT('people.list.allStatus', 'Todos os status')}</SelectItem>
                            <SelectItem value='active'>{safeT('people.active', 'Ativo')}</SelectItem>
                            <SelectItem value='inactive'>{safeT('people.inactive', 'Inativo')}</SelectItem>
                        </SelectContent>
                    </Select>
                </div>

                <div className='flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 mt-3 pt-3 border-t dark:border-gray-700'>
                    <div className='text-xs text-gray-600 dark:text-gray-400'>
                        <span className='font-semibold'>{filteredPeople.length}</span> {safeT('form.of', 'de')}{' '}
                        <span className='font-semibold'>{Array.isArray(people) ? people.length : 0}</span>{' '}
                        {safeT('people.count', 'pessoas')}
                        {hasActiveFilters && (
                            <span className='ml-2 text-blue-600 dark:text-blue-400'>
                                {safeT('people.list.activeFilters', 'filtros ativos')}
                            </span>
                        )}
                    </div>
                    {hasActiveFilters && (
                        <div className='flex flex-wrap gap-1.5'>
                            {filterDepartamento !== 'all' && (
                                <span className='px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded text-xs'>
                                    {filterDepartamento}
                                </span>
                            )}
                            {filterStatus !== 'all' && (
                                <span className='px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded text-xs'>
                                    {filterStatus === 'active'
                                        ? safeT('people.active', 'Ativo')
                                        : safeT('people.inactive', 'Inativo')}
                                </span>
                            )}
                            {searchTerm && (
                                <span className='px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded text-xs'>
                                    &quot;{searchTerm}&quot;
                                </span>
                            )}
                        </div>
                    )}
                </div>
            </div>

            {}
            <div className='block sm:hidden space-y-4'>
                {filteredPeople.length === 0 ? (
                    <div className='bg-white dark:bg-gray-800 rounded-lg shadow p-6 text-center text-gray-500 dark:text-gray-400'>
                        {Array.isArray(people) && people.length === 0
                            ? safeT('people.noPeople', 'Nenhuma pessoa cadastrada')
                            : safeT('common.noResults', 'Nenhum resultado encontrado')}
                    </div>
                ) : (
                    paginatedPeople.map((person) => (
                        <div
                            key={person.id}
                            className='bg-white dark:bg-gray-800 rounded-lg shadow p-4'
                        >
                            <div className='flex gap-4 mb-3'>
                                {person.foto ? (
                                    <div className='w-16 h-16 rounded-full overflow-hidden border border-gray-200 dark:border-gray-700 flex-shrink-0'>
                                        <img
                                            src={person.foto}
                                            alt={person.nomeCompleto}
                                            className='w-full h-full object-cover'
                                        />
                                    </div>
                                ) : (
                                    <div className='w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-green-500 flex items-center justify-center text-white text-xl font-bold flex-shrink-0'>
                                        {person.nomeCompleto
                                            .split(' ')
                                            .map((n) => n[0])
                                            .join('')
                                            .slice(0, 2)
                                            .toUpperCase()}
                                    </div>
                                )}
                                <div className='flex-1 min-w-0'>
                                    <div className='flex items-center gap-2 mb-1'>
                                        <h3 className='font-semibold text-lg dark:text-white truncate'>
                                            {person.nomeCompleto}
                                        </h3>
                                        <span
                                            className={`px-2 py-0.5 rounded-full text-xs font-semibold flex-shrink-0 ${
                                                person.isActive
                                                    ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                                                    : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
                                            }`}
                                        >
                                            {person.isActive
                                                ? safeT('people.active', 'Ativo')
                                                : safeT('people.inactive', 'Inativo')}
                                        </span>
                                    </div>
                                    {person.departamento && (
                                        <div className='flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400 mb-1'>
                                            <Building2 className='h-3 w-3' />
                                            <span className='truncate'>{person.departamento}</span>
                                        </div>
                                    )}
                                    <div className='flex flex-col gap-1 mt-2 text-xs text-gray-500 dark:text-gray-400'>
                                        {person.email && (
                                            <div className='flex items-center gap-1'>
                                                <Mail className='h-3 w-3' />
                                                <span className='truncate'>{person.email}</span>
                                            </div>
                                        )}
                                        {person.telefone && (
                                            <div className='flex items-center gap-1'>
                                                <Phone className='h-3 w-3' />
                                                <span>{person.telefone}</span>
                                            </div>
                                        )}
                                        {person.dataNascimento && (
                                            <div className='flex items-center gap-1'>
                                                <Calendar className='h-3 w-3' />
                                                <span>
                                                    {new Date(person.dataNascimento).toLocaleDateString('pt-BR')}
                                                </span>
                                            </div>
                                        )}
                                        <div className='flex items-center gap-1'>
                                            <File className='h-3 w-3' />
                                            <span>
                                                {safeT('people.documents', 'Documentos')}:{' '}
                                                {person._count?.documentos ?? 0}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className='flex gap-2'>
                                <Button
                                    variant='outline'
                                    size='sm'
                                    className='flex-1'
                                    onClick={() => handleEdit(person)}
                                >
                                    <Edit className='h-4 w-4 mr-1' />
                                    {safeT('common.edit', 'Editar')}
                                </Button>
                                <Button
                                    variant='outline'
                                    size='sm'
                                    className='flex-1'
                                    onClick={() => {
                                        setDeleteTarget(person);
                                        setDeleteDialogOpen(true);
                                    }}
                                >
                                    <Trash2 className='h-4 w-4 mr-1' />
                                    {safeT('common.delete', 'Excluir')}
                                </Button>
                            </div>
                        </div>
                    ))
                )}
            </div>

            {filteredPeople.length > 0 && totalPages > 1 && (
                <div className='mt-4 block sm:hidden'>
                    <Pagination
                        currentPage={currentPage}
                        totalPages={totalPages}
                        onPageChange={handlePageChange}
                        itemsPerPage={itemsPerPage}
                        totalItems={filteredPeople.length}
                    />
                </div>
            )}

            {}
            <div className='hidden sm:block bg-white dark:bg-gray-800 rounded-lg shadow overflow-x-auto'>
                <Table>
                    <TableHeader>
                        <TableRow className='dark:border-gray-700'>
                            <TableHead className='dark:text-gray-300'>{safeT('people.name', 'Nome')}</TableHead>
                            <TableHead className='dark:text-gray-300'>
                                {safeT('people.department', 'Departamento')}
                            </TableHead>
                            <TableHead className='dark:text-gray-300'>
                                {safeT('people.birthDate', 'Data de nascimento')}
                            </TableHead>
                            <TableHead className='dark:text-gray-300'>Email</TableHead>
                            <TableHead className='dark:text-gray-300'>{safeT('people.phone', 'Telefone')}</TableHead>
                            <TableHead className='dark:text-gray-300'>
                                {safeT('people.documents', 'Documentos')}
                            </TableHead>
                            <TableHead className='dark:text-gray-300'>{safeT('common.actions', 'Ações')}</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {filteredPeople.length === 0 ? (
                            <TableRow className='dark:border-gray-700'>
                                <TableCell
                                    colSpan={7}
                                    className='text-center dark:text-gray-400'
                                >
                                    {Array.isArray(people) && people.length === 0
                                        ? safeT('people.noPeople', 'Nenhuma pessoa cadastrada')
                                        : safeT('common.noResults', 'Nenhum resultado encontrado')}
                                </TableCell>
                            </TableRow>
                        ) : (
                            paginatedPeople.map((person) => (
                                <TableRow
                                    key={person.id}
                                    className='dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors'
                                >
                                    <TableCell className='dark:text-gray-300'>
                                        <div className='flex items-center gap-2'>
                                            {person.foto ? (
                                                <div className='w-8 h-8 rounded-full overflow-hidden border border-gray-200 dark:border-gray-700'>
                                                    <img
                                                        src={person.foto}
                                                        alt={person.nomeCompleto}
                                                        className='w-full h-full object-cover'
                                                    />
                                                </div>
                                            ) : (
                                                <div className='w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-green-500 flex items-center justify-center text-white text-xs font-bold'>
                                                    {person.nomeCompleto
                                                        .split(' ')
                                                        .map((n) => n[0])
                                                        .join('')
                                                        .slice(0, 2)
                                                        .toUpperCase()}
                                                </div>
                                            )}
                                            <span className='font-medium'>{person.nomeCompleto}</span>
                                        </div>
                                    </TableCell>
                                    <TableCell className='dark:text-gray-300'>{person.departamento || '-'}</TableCell>
                                    <TableCell className='dark:text-gray-300'>
                                        {person.dataNascimento
                                            ? new Date(person.dataNascimento).toLocaleDateString('pt-BR')
                                            : '-'}
                                    </TableCell>
                                    <TableCell className='dark:text-gray-300'>
                                        {person.email ? (
                                            <span className='truncate max-w-[200px] inline-block'>{person.email}</span>
                                        ) : (
                                            '-'
                                        )}
                                    </TableCell>
                                    <TableCell className='dark:text-gray-300'>{person.telefone || '-'}</TableCell>
                                    <TableCell className='dark:text-gray-300'>
                                        {person._count?.documentos ?? 0}
                                    </TableCell>
                                    <TableCell>
                                        <div className='flex gap-2'>
                                            <Button
                                                variant='outline'
                                                size='icon'
                                                onClick={() => handleEdit(person)}
                                            >
                                                <Edit className='h-4 w-4' />
                                            </Button>
                                            <Button
                                                variant='outline'
                                                size='icon'
                                                onClick={() => {
                                                    setDeleteTarget(person);
                                                    setDeleteDialogOpen(true);
                                                }}
                                            >
                                                <Trash2 className='h-4 w-4' />
                                            </Button>
                                        </div>
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </div>

            {filteredPeople.length > 0 && totalPages > 1 && (
                <div className='mt-4 hidden sm:block'>
                    <Pagination
                        currentPage={currentPage}
                        totalPages={totalPages}
                        onPageChange={handlePageChange}
                        itemsPerPage={itemsPerPage}
                        totalItems={filteredPeople.length}
                    />
                </div>
            )}

            <ConfirmDeleteDialog
                open={deleteDialogOpen}
                onOpenChange={setDeleteDialogOpen}
                entityLabel={safeT('people.person', 'Pessoa')}
                identifier={deleteTarget?.nomeCompleto || ''}
                onConfirm={async () => {
                    if (!deleteTarget) return;
                    await handleDelete(deleteTarget.id);
                    setDeleteTarget(null);
                }}
            />
        </div>
    );
}