import { BadgeCheck, Dog, Calendar, User, Hash, Award, Heart } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';

interface AnimalDetailsModalProps {
    isOpen: boolean;
    onClose: () => void;
    animal: any | null;
}

export default function AnimalDetailsModal({ isOpen, onClose, animal }: AnimalDetailsModalProps) {
    if (!animal) return null;
    console.log('Animal details:', animal);
    
    const formatDate = (date: string) => {
        return new Date(date).toLocaleDateString('es-ES', { 
            year: 'numeric', 
            month: 'long', 
            day: 'numeric' 
        });
    };

    const calculateAge = (birthDate: string) => {
        const birth = new Date(birthDate);
        const today = new Date();
        const years = today.getFullYear() - birth.getFullYear();
        const months = today.getMonth() - birth.getMonth();
        
        if (years === 0) return `${months} meses`;
        if (months < 0) return `${years - 1} años`;
        return `${years} años`;
    };

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="w-full max-w-[98vw] pb-4 sm:max-w-lg">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        <BadgeCheck className="h-5 w-5 text-green-500" />
                        Animal Encontrado
                    </DialogTitle>
                    <DialogDescription>
                        Información del animal registrado
                    </DialogDescription>
                </DialogHeader>
                
                <div className="space-y-4 py-2">
                    {/* Imagen del animal */}
                    {animal.main_photo && (
                        <div className="flex justify-center">
                            <img 
                                src={animal.main_photo} 
                                alt={animal.name} 
                                className="w-24 h-24 rounded-full object-cover border-2 border-primary shadow-md" 
                            />
                        </div>
                    )}

                    {/* Nombre principal */}
                    <div className="text-center">
                        <h2 className="text-2xl font-bold">{animal.name}</h2>
                        {animal.verified && (
                            <p className="text-sm text-green-600 flex items-center justify-center gap-1 mt-1">
                                <BadgeCheck className="h-4 w-4" />
                                Verificado
                            </p>
                        )}
                    </div>

                    {/* Información en grid compacto */}
                    <div className="grid gap-2 text-sm">
                        <div className="flex items-center justify-between p-2 border rounded-lg">
                            <span className="text-muted-foreground flex items-center gap-2">
                                <Dog className="h-4 w-4" />
                                Raza
                            </span>
                            <span className="font-semibold">{animal.breed?.name || 'N/A'}</span>
                        </div>

                        <div className="flex items-center justify-between p-2 border rounded-lg">
                            <span className="text-muted-foreground flex items-center gap-2">
                                <Calendar className="h-4 w-4" />
                                Edad
                            </span>
                            <span className="font-semibold">
                                {animal.birth_date ? calculateAge(animal.birth_date) : 'N/A'}
                            </span>
                        </div>

                        <div className="flex items-center justify-between p-2 border rounded-lg">
                            <span className="text-muted-foreground flex items-center gap-2">
                                <User className="h-4 w-4" />
                                Propietario
                            </span>
                            <span className="font-semibold">{animal.owner?.name || 'N/A'}</span>
                        </div>

                        {animal.awards > 0 && (
                            <div className="flex items-center justify-between p-2 border rounded-lg">
                                <span className="text-muted-foreground flex items-center gap-2">
                                    <Award className="h-4 w-4" />
                                    Premios
                                </span>
                                <span className="font-semibold">{animal.awards}</span>
                            </div>
                        )}

                        {animal.followers > 0 && (
                            <div className="flex items-center justify-between p-2 border rounded-lg">
                                <span className="text-muted-foreground flex items-center gap-2">
                                    <Heart className="h-4 w-4" />
                                    Seguidores
                                </span>
                                <span className="font-semibold">{animal.followers}</span>
                            </div>
                        )}

                        <div className="flex flex-col gap-1 p-2 border rounded-lg">
                            <span className="text-muted-foreground flex items-center gap-2 text-xs">
                                <Hash className="h-3 w-3" />
                                Código NFC
                            </span>
                            <span className="font-mono text-xs break-all">{animal.nfc_chip_serial}</span>
                        </div>
                    </div>
                </div>

                <DialogFooter>
                    <DialogClose asChild>
                        <Button variant="outline" type="button">
                            Cerrar
                        </Button>
                    </DialogClose>
                    <Button type="button" onClick={onClose}>
                        Nueva búsqueda
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}