import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { MapPin, Flag, Mail, Shield, Eye, Phone, Calendar, Users } from 'lucide-react';
import { router } from '@inertiajs/react';

export interface RepresentativeCardProps {
  id: number;
  name: string;
  country: string;
  city?: string;
  description?: string;
  photo?: string;
  email?: string;
  phone?: string;
  verified?: boolean;
  role?: string;
  since?: string;
  index?: number; 
  onViewProfile?: () => void;
}

export default function RepresentativeCard({
  id,
  name,
  country,
  city,
  description,
  photo,
  email,
  phone,
  verified = true,
  role = "Representante Oficial",
  since = "2023",
  index = 0,
  onViewProfile,
}: RepresentativeCardProps) {
  const isEven = index % 2 === 0;

  return (
    <Card className="group relative overflow-hidden border-2 border-transparent hover:border-yellow-400/50 bg-gradient-to-br from-zinc-900 to-zinc-800/90 transition-all duration-300">
      <div className={`flex flex-col md:flex-row gap-6 p-6 ${!isEven ? 'md:flex-row-reverse' : ''}`}>
        {/* Columna Foto */}
        <div className="relative flex-shrink-0 w-full md:w-72 h-80 md:h-auto rounded-xl overflow-hidden">
          <img
            src={photo || "/landing/1.jpg"}
            alt={name}
            className="w-full h-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-500"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent opacity-60 group-hover:opacity-40 transition-opacity" />
          
          {/* Badge flotante */}
          {verified && (
            <Badge className="absolute top-4 right-4 bg-blue-600/90 text-white backdrop-blur-sm">
              <Shield className="w-3.5 h-3.5 mr-1" /> Verificado
            </Badge>
          )}
        </div>

        {/* Columna Info */}
        <div className="flex-1 flex flex-col justify-between py-2">
          <div className="space-y-6">
            {/* Encabezado */}
            <div>
              <h2 className="text-3xl font-bold text-white group-hover:text-yellow-400 transition-colors">
                {name}
              </h2>
              <p className="text-yellow-400 font-medium mt-1">{role}</p>
            </div>

            {/* Stats juntos */}
            <div className="flex items-center gap-6">
              <div className="flex items-center gap-2 text-white/80">
                <MapPin className="w-5 h-5 text-yellow-400" />
                <span className="text-base">
                  {city ? `${city}, ` : ''}{country}
                </span>
              </div>
              <div className="flex items-center gap-2 text-white/80">
                <Calendar className="w-5 h-5 text-yellow-400" />
                <span className="text-base">Desde {since}</span>
              </div>
            </div>

            {/* Descripción */}
            {description && (
              <p className="text-white/70 text-lg leading-relaxed max-w-2xl">
                {description}
              </p>
            )}
          </div>

          {/* Botones de acción */}
          <div className="flex flex-wrap gap-4 mt-8">
            <Button
              onClick={onViewProfile}
              className="bg-yellow-400 text-black hover:bg-yellow-500 rounded-xl font-semibold px-8 flex-1 md:flex-none"
            >
              <Eye className="w-5 h-5 mr-2" />
              Ver Perfil
            </Button>
            {email && (
              <Button
                asChild
                variant="outline"
                className="border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-black rounded-xl font-semibold px-8 flex-1 md:flex-none"
              >
                <a href={`mailto:${email}`}>
                  <Mail className="w-5 h-5 mr-2" />
                  Contactar
                </a>
              </Button>
            )}
          </div>
        </div>
      </div>
    </Card>
  );
}