import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Heart,
  Mail,
  Share2,
  Calendar,
  MapPin,
  Layers,
  Nfc,
  ShieldCheck,
  Trophy,
  Award,
  Sparkles,
  AlertCircle,
} from "lucide-react";

interface AnimalHeroSectionProps {
  animal: any;
  calculateAge: (birthDate: string) => string | null;
}

export default function AnimalHeroSection({ animal, calculateAge }: AnimalHeroSectionProps) {
  const profileImage = animal?.main_photo || '/placeholder.svg';
  const bannerImage = animal?.gallery?.[0] || animal?.main_photo || '/landing/equipo1.jpg';

  const isInHeat = animal?.alerts?.some((alert: any) => 
    alert.type === 'celo' || alert.alert_type === 'celo' || 
    (alert.description && alert.description.toLowerCase().includes('celo'))
  );

  return (
    <div className="relative w-full">
      {/* Banner con gradiente */}
      <div
        className="w-full h-[400px] md:h-[500px] bg-cover bg-center bg-no-repeat relative"
        style={{ 
          backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(24,19,17,0.95) 100%), url(${bannerImage})` 
        }}
      >
        <div className="absolute inset-0 bg-gradient-to-t from-background-dark via-transparent to-transparent" />
        
        {/* Contenido del Hero */}
        <div className="absolute bottom-0 left-0 right-0 px-4 md:px-10 lg:px-40 pb-8">
          <div className="flex flex-col md:flex-row gap-6 md:gap-8 items-end md:items-center">
            {/* Foto Principal */}
            <div className="size-40 md:size-56 rounded-2xl bg-surface-dark border-4 border-background-light dark:border-background-dark shadow-2xl flex items-center justify-center overflow-hidden shrink-0">
              <img className="w-full h-full object-cover" src={profileImage} alt={animal?.name} />
            </div>

            {/* Información Principal */}
            <div className="flex-1 pb-2">
              {/* Nombre y Badges */}
              <div className="flex flex-wrap items-center gap-3 mb-3">
                <h1 className="text-4xl md:text-6xl font-black uppercase tracking-tight text-white drop-shadow-lg">
                  {animal?.name}
                </h1>
                {animal?.pedigree_verified && (
                  <Badge className="bg-emerald-500/90 text-white gap-1 px-3 py-1 text-xs">
                    <ShieldCheck className="w-3 h-3" />
                    Pedigrí
                  </Badge>
                )}
                {animal?.has_nfc_chip && (
                  <Badge className="bg-blue-500/90 text-white gap-1 px-3 py-1 text-xs">
                    <Nfc className="w-3 h-3" />
                    NFC
                  </Badge>
                )}
                {isInHeat && (
                  <Badge className="bg-pink-500 text-white gap-1 px-3 py-1 text-xs animate-pulse">
                    <AlertCircle className="w-3 h-3" />
                    EN CELO
                  </Badge>
                )}
              </div>

              {/* Info Grid - Más destacada */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mb-4">
                <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 border border-white/20">
                  <div className="flex items-center gap-2 text-white/80 mb-1">
                    <Calendar className="w-4 h-4" />
                    <span className="text-xs font-medium">Edad</span>
                  </div>
                  <p className="text-white font-bold text-sm">
                    {animal?.birth_date ? calculateAge(animal.birth_date) : '—'}
                  </p>
                </div>
                
                <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 border border-white/20">
                  <div className="flex items-center gap-2 text-white/80 mb-1">
                    <Trophy className="w-4 h-4" />
                    <span className="text-xs font-medium">Premios</span>
                  </div>
                  <p className="text-white font-bold text-sm">
                    {(animal?.awards ?? 0) > 0 ? animal.awards : 'Sin premios'}
                  </p>
                </div>

                <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 border border-white/20">
                  <div className="flex items-center gap-2 text-white/80 mb-1">
                    <Award className="w-4 h-4" />
                    <span className="text-xs font-medium">Camadas</span>
                  </div>
                  <p className="text-white font-bold text-sm">
                    {((animal?.father_litters?.length || 0) + (animal?.mother_litters?.length || 0)) > 0 
                      ? ((animal?.father_litters?.length || 0) + (animal?.mother_litters?.length || 0)) 
                      : 'Sin camadas'}
                  </p>
                </div>

                <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 border border-white/20">
                  <div className="flex items-center gap-2 text-white/80 mb-1">
                    <AlertCircle className="w-4 h-4" />
                    <span className="text-xs font-medium">Estado</span>
                  </div>
                  <p className="text-white font-bold text-sm">
                    {isInHeat ? 'En Celo' : 'Normal'}
                  </p>
                </div>
              </div>

              {/* Ubicación y Color */}
              <div className="flex flex-wrap items-center gap-4 text-sm text-white/80 mb-4">
                {animal?.owner?.city && (
                  <div className="flex items-center gap-1.5">
                    <MapPin className="w-4 h-4" />
                    <span>{animal.owner.city}</span>
                  </div>
                )}
                {animal?.color && (
                  <div className="flex items-center gap-1.5">
                    <Sparkles className="w-4 h-4" />
                    <span className="capitalize">{animal.color}</span>
                  </div>
                )}
                {(animal?.awards ?? 0) > 0 && (
                  <div className="flex items-center gap-1.5 bg-yellow-500/20 px-3 py-1 rounded-full">
                    <Trophy className="w-4 h-4 text-yellow-400" />
                    <span className="text-yellow-400 font-semibold">{animal.awards} Premio{(animal.awards ?? 0) > 1 ? 's' : ''}</span>
                  </div>
                )}
              </div>

              {/* Botones de Acción */}
              <div className="flex flex-wrap gap-3">
                <Button className="bg-primary hover:bg-primary/90 text-black black:text-white gap-2 h-11 px-6 rounded-lg font-semibold shadow-lg">
                  <Heart className="w-4 h-4" />
                  Seguir
                </Button>
                {animal?.owner && (
                  <Button className="bg-white/10 hover:bg-white/20 text-white border border-white/30 backdrop-blur-sm gap-2 h-11 px-6 rounded-lg">
                    <Mail className="w-4 h-4" />
                    Mensaje
                  </Button>
                )}
                <Button className="bg-white/10 hover:bg-white/20 text-white border border-white/30 backdrop-blur-sm size-11 rounded-lg">
                  <Share2 className="w-4 h-4" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}