'use client';

import { useEffect, useState, useCallback } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useToast } from '@/hooks/use-toast';
import { LoadingSpinner } from '@/components/ui/loading-spinner';
import { useI18n } from '@/contexts/I18nContext';
import { ConfirmDeleteDialog } from '@/components/ConfirmDeleteDialog';
import { ArrowLeft, Calendar, File, Mail, Phone, Plus, Edit, Trash2, Upload, X, Building2 } from 'lucide-react';

interface PersonDocument {
    id: string;
    titulo: string;
    tipo: string;
    arquivo: string;
    dataEmissao?: string | null;
    dataValidade?: string | null;
}

interface Person {
    id: string;
    nomeCompleto: string;
    dataNascimento?: string | null;
    departamento?: string | null;
    email?: string | null;
    telefone?: string | null;
    foto?: string | null;
    observacoes?: string | null;
    isActive?: boolean;
    createdAt?: string | null;
    updatedAt?: string | null;
    documentos: PersonDocument[];
}

export default function PersonDetailPage() {
    const params = useParams();
    const router = useRouter();
    const { toast } = useToast();
    const { t } = useI18n();

    const safeT = useCallback(
        (key: string, fallback: string) => {
            const value = t(key);
            if (!value || value === key) return fallback;
            return value;
        },
        [t],
    );

    const [loading, setLoading] = useState(true);
    const [person, setPerson] = useState<Person | null>(null);

    const [editOpen, setEditOpen] = useState(false);
    const [editForm, setEditForm] = useState({
        nomeCompleto: '',
        dataNascimento: '',
        departamento: '',
        email: '',
        telefone: '',
        observacoes: '',
        foto: '',
    });
    const [selectedFotoFile, setSelectedFotoFile] = useState<File | null>(null);
    const [fotoPreview, setFotoPreview] = useState<string>('');
    const [isDraggingFoto, setIsDraggingFoto] = useState(false);

    const [docDialogOpen, setDocDialogOpen] = useState(false);
    const [editingDoc, setEditingDoc] = useState<PersonDocument | null>(null);
    const [docForm, setDocForm] = useState({
        titulo: '',
        tipo: '',
        dataValidade: '',
    });
    const [selectedDocFile, setSelectedDocFile] = useState<File | null>(null);
    const [isDraggingFile, setIsDraggingFile] = useState(false);
    const [uploading, setUploading] = useState(false);
    const [deleteDocDialogOpen, setDeleteDocDialogOpen] = useState(false);
    const [deleteDocTarget, setDeleteDocTarget] = useState<PersonDocument | null>(null);

    const fetchPerson = useCallback(async () => {
        try {
            const res = await fetch(`/api/people/${params.id}`);
            if (!res.ok) {
                toast({
                    title: safeT('common.error', 'Erro'),
                    description: safeT('people.loadError', 'Erro ao carregar pessoa'),
                    variant: 'destructive',
                });
                router.push('/module-people/admin/people');
                return;
            }
            const data = await res.json();
            setPerson(data);
            setEditForm({
                nomeCompleto: data.nomeCompleto || '',
                dataNascimento: data.dataNascimento ? new Date(data.dataNascimento).toISOString().slice(0, 10) : '',
                departamento: data.departamento || '',
                email: data.email || '',
                telefone: data.telefone || '',
                observacoes: data.observacoes || '',
                foto: data.foto || '',
            });
            setFotoPreview(data.foto || '');
        } catch (error) {
            toast({
                title: safeT('common.error', 'Erro'),
                description: safeT('people.loadError', 'Erro ao carregar pessoa'),
                variant: 'destructive',
            });
            router.push('/module-people/admin/people');
        } finally {
            setLoading(false);
        }
    }, [params.id, router, toast, safeT]);

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

    const handlePersonSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!person) return;
        try {
            let fotoUrl: string | null = editForm.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;
                }
            } else if (editForm.foto === '') {
                fotoUrl = null;
            }

            const res = await fetch(`/api/people/${person.id}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ ...editForm, foto: fotoUrl }),
            });
            if (res.ok) {
                toast({
                    title: safeT('common.success', 'Sucesso'),
                    description: safeT('people.updated', 'Pessoa atualizada com sucesso'),
                });
                setEditOpen(false);
                setSelectedFotoFile(null);
                setFotoPreview('');
                fetchPerson();
            } 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 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);
        }
    };

    useEffect(() => {
        if (editOpen && editForm.foto) {
            setFotoPreview(editForm.foto);
        } else if (!editOpen) {
            setFotoPreview('');
            setSelectedFotoFile(null);
        }
    }, [editOpen, editForm.foto]);

    const handleDocSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!person) return;
        try {
            let arquivoUrl = editingDoc?.arquivo || '';

            if (selectedDocFile) {
                setUploading(true);
                try {
                    const { uploadFileDirectToFirebase } = await import('@/lib/upload-firebase-direct');
                    arquivoUrl = await uploadFileDirectToFirebase(selectedDocFile, 'document', (progress) => {});
                    setUploading(false);
                } catch (error: any) {
                    toast({
                        title: safeT('common.error', 'Erro'),
                        description: error?.message || safeT('people.docSaveError', 'Erro ao carregar o ficheiro'),
                        variant: 'destructive',
                    });
                    setUploading(false);
                    return;
                }
            } else if (!editingDoc) {
                toast({
                    title: safeT('common.error', 'Erro'),
                    description: safeT('people.docFileRequired', 'Selecione um ficheiro para o documento'),
                    variant: 'destructive',
                });
                return;
            }

            const url = editingDoc ? `/api/people-documents/${editingDoc.id}` : '/api/people-documents';
            const method = editingDoc ? 'PUT' : 'POST';

            const res = await fetch(url, {
                method,
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    personId: person.id,
                    titulo: docForm.titulo,
                    tipo: docForm.tipo || 'OUTRO',
                    arquivo: arquivoUrl,
                    dataValidade: docForm.dataValidade || undefined,
                }),
            });

            if (res.ok) {
                toast({
                    title: safeT('common.success', 'Sucesso'),
                    description: editingDoc
                        ? safeT('people.docUpdated', 'Documento de pessoa atualizado com sucesso')
                        : safeT('people.docCreated', 'Documento de pessoa criado com sucesso'),
                });
                setDocDialogOpen(false);
                setEditingDoc(null);
                setDocForm({
                    titulo: '',
                    tipo: '',
                    dataValidade: '',
                });
                setSelectedDocFile(null);
                fetchPerson();
            } else {
                const error = await res.json();
                toast({
                    title: safeT('common.error', 'Erro'),
                    description: error.error || safeT('people.docSaveError', 'Erro ao guardar documento de pessoa'),
                    variant: 'destructive',
                });
            }
        } catch (error) {
            toast({
                title: safeT('common.error', 'Erro'),
                description: safeT('people.docSaveError', 'Erro ao guardar documento de pessoa'),
                variant: 'destructive',
            });
        }
    };

    const handleDragOverFile = (e: React.DragEvent) => {
        e.preventDefault();
        setIsDraggingFile(true);
    };

    const handleDragLeaveFile = () => {
        setIsDraggingFile(false);
    };

    const handleDropFile = (e: React.DragEvent) => {
        e.preventDefault();
        setIsDraggingFile(false);
        const file = e.dataTransfer.files[0];
        if (file) {
            if (file.size > 10 * 1024 * 1024) {
                toast({
                    title: safeT('common.error', 'Erro'),
                    description: safeT('people.fileTooBig', 'Ficheiro muito grande. Máximo 10MB.'),
                    variant: 'destructive',
                });
                return;
            }
            setSelectedDocFile(file);
        }
    };

    const handleDeleteDoc = async (docId: string) => {
        try {
            const res = await fetch(`/api/people-documents/${docId}`, {
                method: 'DELETE',
            });
            if (res.ok) {
                toast({
                    title: safeT('common.success', 'Sucesso'),
                    description: safeT('people.docDeleted', 'Documento de pessoa eliminado com sucesso'),
                });
                fetchPerson();
            } else {
                toast({
                    title: safeT('common.error', 'Erro'),
                    description: safeT('people.docDeleteError', 'Erro ao deletar documento de pessoa'),
                    variant: 'destructive',
                });
            }
        } catch (error) {
            toast({
                title: safeT('common.error', 'Erro'),
                description: safeT('people.docDeleteError', 'Erro ao deletar documento de pessoa'),
                variant: 'destructive',
            });
        }
    };

    if (loading) return <LoadingSpinner />;
    if (!person) return null;

    return (
        <div className='min-h-screen bg-gray-50 dark:bg-gray-900 py-6 px-4'>
            <div className='max-w-7xl mx-auto space-y-6'>
                <div className='flex items-center justify-between'>
                    <Button
                        variant='outline'
                        onClick={() => router.push('/module-people/admin/people')}
                        className='mb-0'
                    >
                        <ArrowLeft className='mr-2 h-4 w-4' />
                        {safeT('common.back', 'Voltar')}
                    </Button>
                </div>

                <Card className='overflow-hidden shadow-lg dark:bg-gray-800'>
                    <div className='grid md:grid-cols-2 gap-6 p-6'>
                        {person.foto ? (
                            <div className='relative group'>
                                <img
                                    src={person.foto}
                                    alt={person.nomeCompleto}
                                    className='w-full h-80 object-cover rounded-lg shadow-md'
                                />
                                <div className='absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity rounded-lg' />
                            </div>
                        ) : (
                            <div className='w-full h-80 rounded-lg bg-gradient-to-br from-blue-500 to-green-500 flex items-center justify-center shadow-md'>
                                <div className='text-white text-6xl font-bold'>
                                    {person.nomeCompleto
                                        .split(' ')
                                        .map((n) => n[0])
                                        .join('')
                                        .slice(0, 2)
                                        .toUpperCase()}
                                </div>
                            </div>
                        )}

                        <div className='space-y-6'>
                            <div>
                                <h1 className='text-3xl font-bold mb-2 dark:text-white'>{person.nomeCompleto}</h1>
                                {person.departamento && (
                                    <div className='flex items-center gap-2 text-lg text-gray-600 dark:text-gray-300'>
                                        <Building2 className='h-5 w-5' />
                                        <span>{person.departamento}</span>
                                    </div>
                                )}
                            </div>

                            <div className='grid grid-cols-2 gap-4 pt-4 border-t dark:border-gray-700'>
                                {person.dataNascimento && (
                                    <div className='space-y-1'>
                                        <div className='flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400'>
                                            <Calendar className='h-4 w-4' />
                                            <span>{safeT('people.birthDate', 'Data de nascimento')}</span>
                                        </div>
                                        <p className='text-lg font-semibold'>
                                            {new Date(person.dataNascimento).toLocaleDateString('pt-BR')}
                                        </p>
                                    </div>
                                )}
                                {person.email && (
                                    <div className='space-y-1'>
                                        <div className='flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400'>
                                            <Mail className='h-4 w-4' />
                                            <span>Email</span>
                                        </div>
                                        <p className='text-lg font-semibold truncate'>{person.email}</p>
                                    </div>
                                )}
                                {person.telefone && (
                                    <div className='space-y-1'>
                                        <div className='flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400'>
                                            <Phone className='h-4 w-4' />
                                            <span>{safeT('people.phone', 'Telefone')}</span>
                                        </div>
                                        <p className='text-lg font-semibold'>{person.telefone}</p>
                                    </div>
                                )}
                            </div>

                            {person.observacoes && (
                                <div className='pt-4 border-t dark:border-gray-700'>
                                    <Label className='text-sm font-semibold mb-2 block'>
                                        {safeT('people.notes', 'Observações')}
                                    </Label>
                                    <p className='text-gray-700 dark:text-gray-300 leading-relaxed'>
                                        {person.observacoes}
                                    </p>
                                </div>
                            )}

                            <Button
                                variant='outline'
                                size='sm'
                                className='mt-2'
                                onClick={() => setEditOpen(true)}
                            >
                                <Edit className='h-4 w-4 mr-2' />
                                {safeT('common.edit', 'Editar')}
                            </Button>
                        </div>
                    </div>
                </Card>

                <Tabs
                    defaultValue='documents'
                    className='space-y-4'
                >
                    <TabsList className='grid w-full grid-cols-1'>
                        <TabsTrigger
                            value='documents'
                            className='flex items-center gap-2'
                        >
                            <File className='h-4 w-4' />
                            {safeT('people.tab.documents', 'Documentos')}
                        </TabsTrigger>
                    </TabsList>

                    <TabsContent
                        value='documents'
                        className='space-y-4'
                    >
                        <Card className='shadow-md dark:bg-gray-800'>
                            <CardHeader>
                                <div className='flex justify-between items-center'>
                                    <div>
                                        <CardTitle className='flex items-center gap-2'>
                                            <File className='h-5 w-5' />
                                            {safeT('people.documents', 'Documentos de pessoas')}
                                        </CardTitle>
                                        <CardDescription className='mt-1'>
                                            {safeT(
                                                'people.docsDescription',
                                                'Gestão de documentos de qualificação (FPC, visitas médicas, etc.).',
                                            )}
                                        </CardDescription>
                                    </div>
                                    <Button
                                        onClick={() => {
                                            setEditingDoc(null);
                                            setDocForm({
                                                titulo: '',
                                                tipo: '',
                                                dataValidade: '',
                                            });
                                            setSelectedDocFile(null);
                                            setDocDialogOpen(true);
                                        }}
                                    >
                                        <Plus className='mr-2 h-4 w-4' />
                                        {safeT('people.newDocument', 'Novo documento')}
                                    </Button>
                                </div>
                            </CardHeader>
                            <CardContent>
                                {person.documentos.length === 0 ? (
                                    <div className='py-12 text-center'>
                                        <File className='h-12 w-12 mx-auto text-gray-400 mb-4' />
                                        <p className='text-gray-500 dark:text-gray-400'>
                                            {safeT('people.noDocuments', 'Nenhum documento de pessoa cadastrado')}
                                        </p>
                                        <p className='text-sm text-gray-400 dark:text-gray-500 mt-2'>
                                            {safeT('people.clickToAdd', 'Clique em "Novo documento" para começar')}
                                        </p>
                                    </div>
                                ) : (
                                    <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4'>
                                        {person.documentos.map((doc) => (
                                            <Card
                                                key={doc.id}
                                                className='hover:shadow-lg transition-shadow dark:bg-gray-700'
                                            >
                                                <CardHeader className='pb-3'>
                                                    <div className='flex items-start justify-between'>
                                                        <div className='flex-1'>
                                                            <CardTitle className='text-base mb-1'>
                                                                {doc.titulo}
                                                            </CardTitle>
                                                            <CardDescription className='text-xs'>
                                                                {doc.tipo}
                                                            </CardDescription>
                                                        </div>
                                                        <File className='h-5 w-5 text-blue-500 flex-shrink-0 ml-2' />
                                                    </div>
                                                </CardHeader>
                                                <CardContent className='pt-0'>
                                                    {doc.dataEmissao && (
                                                        <div className='flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 mb-2'>
                                                            <Calendar className='h-3 w-3' />
                                                            <span>
                                                                {safeT('documents.issueDate', 'Emissão')}:{' '}
                                                                {new Date(doc.dataEmissao).toLocaleDateString('pt-BR')}
                                                            </span>
                                                        </div>
                                                    )}
                                                    {doc.dataValidade && (
                                                        <div className='flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 mb-3'>
                                                            <Calendar className='h-3 w-3' />
                                                            <span>
                                                                {safeT('documents.expiration', 'Vence em')}:{' '}
                                                                {new Date(doc.dataValidade).toLocaleDateString('pt-BR')}
                                                            </span>
                                                        </div>
                                                    )}
                                                    <div className='flex gap-2 pt-3 border-t dark:border-gray-600'>
                                                        {doc.arquivo && (
                                                            <Button
                                                                variant='outline'
                                                                size='sm'
                                                                className='flex-1'
                                                                onClick={() => window.open(doc.arquivo, '_blank')}
                                                            >
                                                                <File className='h-3 w-3 mr-1' />
                                                                {safeT('common.open', 'Abrir')}
                                                            </Button>
                                                        )}
                                                        <Button
                                                            variant='outline'
                                                            size='sm'
                                                            onClick={() => {
                                                                setEditingDoc(doc);
                                                                setDocForm({
                                                                    titulo: doc.titulo,
                                                                    tipo: doc.tipo,
                                                                    dataValidade: doc.dataValidade
                                                                        ? new Date(doc.dataValidade)
                                                                              .toISOString()
                                                                              .slice(0, 10)
                                                                        : '',
                                                                });
                                                                setSelectedDocFile(null);
                                                                setDocDialogOpen(true);
                                                            }}
                                                        >
                                                            <Edit className='h-3 w-3' />
                                                        </Button>
                                                        <Button
                                                            variant='outline'
                                                            size='sm'
                                                            onClick={() => {
                                                                setDeleteDocTarget(doc);
                                                                setDeleteDocDialogOpen(true);
                                                            }}
                                                        >
                                                            <Trash2 className='h-3 w-3' />
                                                        </Button>
                                                    </div>
                                                </CardContent>
                                            </Card>
                                        ))}
                                    </div>
                                )}
                            </CardContent>
                        </Card>
                    </TabsContent>
                </Tabs>

                <Dialog
                    open={editOpen}
                    onOpenChange={setEditOpen}
                >
                    <DialogContent>
                        <form onSubmit={handlePersonSubmit}>
                            <DialogHeader>
                                <DialogTitle>{safeT('people.edit', 'Editar 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={editForm.nomeCompleto}
                                        onChange={(e) => setEditForm({ ...editForm, 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={editForm.dataNascimento}
                                        onChange={(e) => setEditForm({ ...editForm, dataNascimento: e.target.value })}
                                    />
                                </div>
                                <div className='grid gap-2'>
                                    <Label htmlFor='departamento'>{safeT('people.department', 'Departamento')}</Label>
                                    <Input
                                        id='departamento'
                                        value={editForm.departamento}
                                        onChange={(e) => setEditForm({ ...editForm, departamento: e.target.value })}
                                    />
                                </div>
                                <div className='grid gap-2'>
                                    <Label htmlFor='email'>Email</Label>
                                    <Input
                                        id='email'
                                        type='email'
                                        value={editForm.email}
                                        onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
                                    />
                                </div>
                                <div className='grid gap-2'>
                                    <Label htmlFor='telefone'>{safeT('people.phone', 'Telefone')}</Label>
                                    <Input
                                        id='telefone'
                                        value={editForm.telefone}
                                        onChange={(e) => setEditForm({ ...editForm, telefone: e.target.value })}
                                    />
                                </div>
                                <div className='grid gap-2'>
                                    <Label htmlFor='foto'>{safeT('people.photo', 'Foto')}</Label>
                                    {fotoPreview || (editForm.foto && !selectedFotoFile) ? (
                                        <div className='relative'>
                                            <img
                                                src={fotoPreview || editForm.foto}
                                                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('');
                                                    setEditForm({
                                                        ...editForm,
                                                        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 className='grid gap-2'>
                                    <Label htmlFor='observacoes'>{safeT('people.notes', 'Observações')}</Label>
                                    <Input
                                        id='observacoes'
                                        value={editForm.observacoes}
                                        onChange={(e) => setEditForm({ ...editForm, observacoes: e.target.value })}
                                    />
                                </div>
                            </div>
                            <DialogFooter>
                                <Button
                                    type='button'
                                    variant='outline'
                                    onClick={() => setEditOpen(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>

                <Dialog
                    open={docDialogOpen}
                    onOpenChange={setDocDialogOpen}
                >
                    <DialogContent className='max-w-2xl max-h-[90vh] overflow-y-auto'>
                        <form onSubmit={handleDocSubmit}>
                            <DialogHeader>
                                <DialogTitle>
                                    {editingDoc
                                        ? safeT('people.editDocument', 'Editar documento')
                                        : safeT('people.newDocument', 'Novo documento')}
                                </DialogTitle>
                            </DialogHeader>
                            <div className='grid gap-4 py-4'>
                                <div className='grid gap-2'>
                                    <Label htmlFor='docTitulo'>{safeT('documents.titleField', 'Título')} *</Label>
                                    <Input
                                        id='docTitulo'
                                        value={docForm.titulo}
                                        onChange={(e) => setDocForm({ ...docForm, titulo: e.target.value })}
                                        required
                                    />
                                </div>
                                <div className='grid gap-2'>
                                    <Label htmlFor='docTipo'>{safeT('documents.type', 'Tipo')} *</Label>
                                    <Input
                                        id='docTipo'
                                        value={docForm.tipo}
                                        onChange={(e) => setDocForm({ ...docForm, tipo: e.target.value })}
                                        required
                                    />
                                </div>
                                <div className='grid gap-2'>
                                    <Label htmlFor='docValidade'>
                                        {safeT('documents.expiration', 'Data de validade')}
                                    </Label>
                                    <Input
                                        id='docValidade'
                                        type='date'
                                        value={docForm.dataValidade}
                                        onChange={(e) => setDocForm({ ...docForm, dataValidade: e.target.value })}
                                    />
                                </div>
                                <div className='grid gap-2'>
                                    <Label htmlFor='docFile'>{safeT('documents.file', 'Ficheiro')} *</Label>
                                    {!selectedDocFile && editingDoc && (
                                        <div className='text-sm text-gray-600 dark:text-gray-400'>
                                            Ficheiro atual: {editingDoc.arquivo.split('/').pop()}
                                        </div>
                                    )}
                                    {selectedDocFile ? (
                                        <div className='border-2 border-blue-500 rounded-lg p-4 bg-blue-50 dark:bg-blue-900/20'>
                                            <div className='flex items-center justify-between'>
                                                <div className='flex items-center gap-2'>
                                                    <File className='h-5 w-5 text-blue-600' />
                                                    <span className='text-sm font-medium'>{selectedDocFile.name}</span>
                                                    <span className='text-xs text-gray-500'>
                                                        ({(selectedDocFile.size / 1024 / 1024).toFixed(2)} MB)
                                                    </span>
                                                </div>
                                                <Button
                                                    type='button'
                                                    variant='ghost'
                                                    size='sm'
                                                    onClick={() => setSelectedDocFile(null)}
                                                >
                                                    <X className='h-4 w-4' />
                                                </Button>
                                            </div>
                                        </div>
                                    ) : (
                                        <div
                                            onDragOver={handleDragOverFile}
                                            onDragLeave={handleDragLeaveFile}
                                            onDrop={handleDropFile}
                                            className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
                                                isDraggingFile
                                                    ? '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'>
                                                {isDraggingFile
                                                    ? safeT('documents.dropHere', 'Solte o ficheiro aqui')
                                                    : safeT('documents.dragHere', 'Arraste e solte o ficheiro aqui')}
                                            </p>
                                            <p className='text-xs text-gray-500 mb-4'>{safeT('documents.or', 'ou')}</p>
                                            <Input
                                                id='docFile'
                                                type='file'
                                                accept='.pdf,.doc,.docx,.xls,.xlsx,.txt,.jpg,.jpeg,.png,.webp'
                                                className='hidden'
                                                onChange={(e) => {
                                                    const file = e.target.files?.[0];
                                                    if (file) {
                                                        if (file.size > 10 * 1024 * 1024) {
                                                            toast({
                                                                title: safeT('common.error', 'Erro'),
                                                                description: safeT(
                                                                    'people.fileTooBig',
                                                                    'Ficheiro muito grande. Tamanho máximo: 10MB',
                                                                ),
                                                                variant: 'destructive',
                                                            });
                                                            return;
                                                        }
                                                        setSelectedDocFile(file);
                                                    }
                                                }}
                                                required={!editingDoc}
                                            />
                                            <Label
                                                htmlFor='docFile'
                                                className='cursor-pointer inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm'
                                            >
                                                {safeT('documents.selectFile', 'Selecionar ficheiro')}
                                            </Label>
                                            <p className='text-xs text-gray-500 mt-2'>
                                                {safeT(
                                                    'documents.fileFormats',
                                                    'Formatos suportados: PDF, DOC, XLS, imagens, etc.',
                                                )}
                                            </p>
                                        </div>
                                    )}
                                </div>
                            </div>
                            <DialogFooter>
                                <Button
                                    type='button'
                                    variant='outline'
                                    onClick={() => setDocDialogOpen(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>

                <ConfirmDeleteDialog
                    open={deleteDocDialogOpen}
                    onOpenChange={setDeleteDocDialogOpen}
                    entityLabel={safeT('people.document', 'Documento')}
                    identifier={deleteDocTarget?.titulo || ''}
                    onConfirm={async () => {
                        if (!deleteDocTarget) return;
                        await handleDeleteDoc(deleteDocTarget.id);
                        setDeleteDocTarget(null);
                    }}
                />
            </div>
        </div>
    );
}