import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Award, Eye, Heart, House, MapPin, Shield, Users, Calendar } from 'lucide-react';
import { useState } from 'react';

interface CardOwnerProps {
    id?: string | number;
    image?: string;
    name: string;
    lastname?: string;
    nationality?: string;
    city?: string;
    register_date?: string;
    pets?: number;
    kennels?: number;
    isPro?: boolean;
    onFollow?: () => void;
    onContact?: () => void;
    description?: string;
}

export default function CardOwner({
    id,
    image = '/landing/avatar2.webp',
    name,
    lastname,
    nationality,
    city,
    register_date,
    pets = 0,
    kennels = 0,
    isPro = false,
    onFollow,
    onContact,
    description,
}: CardOwnerProps) {
    const [isHovered, setIsHovered] = useState(false);
    const fullName = lastname ? `${name} ${lastname}` : name;

    return (
        <Card
            className={`w-full h-[420px] rounded-[30px] relative overflow-hidden ${
                isHovered ? 'border-[3px] border-yellow-400' : 'border border-zinc-700'
            } bg-zinc-900 transition-all duration-300`}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
        >
            {/* Imagen principal */}
            <div className="absolute inset-0 h-full w-full">
                <img
                    src={image}
                    alt={fullName}
                    className="h-full w-full object-cover brightness-90"
                />
            </div>

            {/* Gradiente */}
            <div className="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-transparent"></div>

            {/* Badge Premium */}
            {isPro && (
                <div className="absolute top-4 right-4 z-10">
                    <Badge className="bg-yellow-400 text-black font-bold px-3 py-1 flex items-center gap-1">
                        <Shield className="h-3 w-3" />
                        <span>PREMIUM</span>
                    </Badge>
                </div>
            )}
            
            {/* Badges de contadores */}
            <div className="absolute top-4 left-4 flex gap-2 z-10">
                <Badge className="bg-zinc-800/90 text-white border border-yellow-400/30 flex items-center gap-1">
                    <Award className="h-3 w-3 text-yellow-400" />
                    <span>{pets} Mascota{pets !== 1 ? 's' : ''}</span>
                </Badge>
                
                {kennels > 0 && (
                    <Badge className="bg-zinc-800/90 text-white border border-yellow-400/30 flex items-center gap-1">
                        <House className="h-3 w-3 text-yellow-400" />
                        <span>{kennels} Criadero{kennels !== 1 ? 's' : ''}</span>
                    </Badge>
                )}
            </div>
            
            {/* Contenido inferior */}
            <div className="absolute bottom-0 left-0 right-0 p-6 z-10">
                <h3 className="text-xl font-bold text-white mb-3">{fullName}</h3>
                
                {city && nationality && (
                    <div className="flex items-center gap-1 text-sm text-white/80 mb-2">
                        <MapPin className="h-4 w-4 text-yellow-400" />
                        <span>{city}, {nationality}</span>
                    </div>
                )}
                
                <div className="mb-4 grid grid-cols-1 gap-y-1 text-sm">
                    {register_date && (
                        <div className="flex items-center gap-2">
                            <Calendar className="h-4 w-4 text-yellow-400" />
                            <span className="text-white/90">
                                Miembro desde {new Date(register_date).toLocaleDateString()}
                            </span>
                        </div>
                    )}
                    
                    <div className="flex items-center gap-2">
                        <Users className="h-4 w-4 text-yellow-400" />
                        <span className="text-white/90">
                            {pets > 0 ? `${pets} mascota${pets !== 1 ? 's' : ''} registrada${pets !== 1 ? 's' : ''}` : 'Sin mascotas registradas'}
                        </span>
                    </div>
                    
                    <div className="flex items-center gap-2">
                        <House className="h-4 w-4 text-yellow-400" />
                        <span className="text-white/90">
                            {kennels > 0 ? `${kennels} criadero${kennels !== 1 ? 's' : ''}` : 'Sin criaderos'}
                        </span>
                    </div>
                </div>
                
                {description && (
                    <p className="mb-4 text-center text-sm leading-tight text-white/90 line-clamp-2">
                        {description}
                    </p>
                )}

                <div className="flex justify-center gap-4 mt-auto">
                    <Button
                        variant="outline"
                        size="sm"
                        className={`flex-1 flex items-center justify-center gap-1 rounded-xl ${
                            isHovered
                                ? 'border-yellow-400 text-yellow-400'
                                : 'border-zinc-500 text-white hover:border-yellow-400 hover:text-yellow-400'
                        }`}
                        onClick={onFollow}
                    >
                        <Heart className="h-4 w-4" />
                        Seguir
                    </Button>
                    
                    <Button
                        variant="default"
                        size="sm" 
                        className={`flex-1 flex items-center justify-center gap-1 rounded-xl ${
                            isHovered
                                ? 'bg-yellow-400 text-black border-yellow-400'
                                : 'bg-transparent border-2 border-yellow-400 text-white hover:bg-yellow-400 hover:text-black'
                        }`}
                        onClick={onContact}
                    >
                        <Eye className="h-4 w-4" />
                        Ver Perfil
                    </Button>
                </div>
            </div>
        </Card>
    );
}