import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Link } from '@inertiajs/react';
import { Eye, Heart, Shield } from 'lucide-react';
import { useState } from 'react';

export interface CardProfileProps {
    id?: string | number;
    image?: string;
    name: string;
    species?: string;
    breed?: string;
    color?: string;
    age?: string;
    status?: string;
    isVerified?: boolean;
    onFollow?: () => void;
    onContact?: () => void;
    description?: string;
    ranking?: number;
}

export default function CardBully({
    id,
    image = '/landing/avatar2.webp',
    name,
    species,
    breed,
    color,
    age,
    status = 'active',
    isVerified = false,
    onFollow,
    onContact,
    description,
    ranking,
}: CardProfileProps) {
    const [isHovered, setIsHovered] = useState(false);

    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={name}
                    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>

            {/* Badges flotantes */}
            <div className="absolute top-4 right-4 flex gap-2 z-10">
                <Badge
                    className={`${status === 'active' ? 'bg-green-600' : 'bg-gray-600'} text-white`}
                >
                    {status === 'active' ? 'Activo' : 'Inactivo'}
                </Badge>
                
                {isVerified && (
                    <Badge className="bg-blue-600 text-white flex items-center gap-1">
                        <Shield className="h-3 w-3" />
                        <span>Certificado</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">{name}</h3>
                
                <div className="mb-4 grid grid-cols-2 gap-x-4 gap-y-1 text-sm">
                    {breed && (
                        <div className="flex justify-between">
                            <span className="text-yellow-400 font-medium">Raza:</span>
                            <span className="text-white/90 truncate ml-2">{breed}</span>
                        </div>
                    )}
                    
                    {color && (
                        <div className="flex justify-between">
                            <span className="text-yellow-400 font-medium">Color:</span>
                            <span className="text-white/90 truncate ml-2">{color}</span>
                        </div>
                    )}
                    
                    {age && (
                        <div className="flex justify-between">
                            <span className="text-yellow-400 font-medium">Edad:</span>
                            <span className="text-white/90 truncate ml-2">{age}</span>
                        </div>
                    )}
                    
                    {species && (
                        <div className="flex justify-between">
                            <span className="text-yellow-400 font-medium">Especie:</span>
                            <span className="text-white/90 truncate ml-2">{species}</span>
                        </div>
                    )}
                </div>
                
                {description && (
                    <p className="mb-5 text-center text-sm leading-tight text-white/90 line-clamp-2">
                        {description}
                    </p>
                )}

                <div className="flex justify-center gap-4">
                    <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>
    );
}