import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import {
  BadgeCheck,
  CalendarClock,
  CalendarDays,
  CheckCircle2,
  Globe2,
  Info,
  MapPin,
  ShieldCheck,
  Star,
  Trophy,
  Users,
} from 'lucide-react';

type OwnerStatusCardProps = {
  isVerified: boolean;
  isHomologated: boolean;
};

type OwnerAboutCardProps = {
  about: string;
  location: string;
  website: string;
  joined: string;
};

type Affiliation = {
  name: string;
  logoUrl: string;
  highlighted?: boolean;
};

type OwnerAffiliationsCardProps = {
  affiliations: Affiliation[];
};

export function OwnerStatusCard({ isVerified, isHomologated }: OwnerStatusCardProps) {
  return (
    <Card className="bg-surface/30 border-surface rounded-xl">
      <CardHeader className="p-6 pb-0">
        <CardTitle className="text-sm uppercase tracking-wider flex items-center gap-2 text-white">
          <CheckCircle2 className="w-5 h-5 text-primary" />
          Estado
        </CardTitle>
      </CardHeader>
      <CardContent className="p-6 pt-4">
        <div className="flex flex-col gap-2 text-sm text-white">
          <div className="flex items-center gap-2">
            <BadgeCheck className={`w-4 h-4 ${isVerified ? 'text-green-400' : 'text-text-secondary'}`} />
            <span>{isVerified ? 'Verificado' : 'No verificado'}</span>
          </div>
          <div className="flex items-center gap-2">
            <ShieldCheck className={`w-4 h-4 ${isHomologated ? 'text-blue-400' : 'text-text-secondary'}`} />
            <span>{isHomologated ? 'Homologado' : 'No homologado'}</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

export function OwnerAboutCard({ about, location, website, joined }: OwnerAboutCardProps) {
  return (
    <Card className="bg-surface/30 border-surface rounded-xl">
      <CardHeader className="p-6 pb-0">
        <CardTitle className="text-sm uppercase tracking-wider flex items-center gap-2 text-white">
          <Info className="w-5 h-5 text-primary" />
          Sobre mí
        </CardTitle>
      </CardHeader>
      <CardContent className="p-6 pt-4">
        <p className="text-text-secondary text-sm leading-relaxed mb-6">{about}</p>

        <div className="flex flex-col gap-4">
          <div className="flex items-center gap-3 text-sm text-white">
            <div className="size-8 rounded-full bg-surface flex items-center justify-center text-primary">
              <MapPin className="w-4 h-4 text-primary" />
            </div>
            <span>{location}</span>
          </div>

          <div className="flex items-center gap-3 text-sm text-white">
            <div className="size-8 rounded-full bg-surface flex items-center justify-center text-primary">
              <Globe2 className="w-4 h-4 text-primary" />
            </div>
            <a className="hover:text-primary transition-colors" href={website} target="_blank" rel="noreferrer">
              {website === '#' ? 'Sitio web' : website}
            </a>
          </div>

          <div className="flex items-center gap-3 text-sm text-white">
            <div className="size-8 rounded-full bg-surface flex items-center justify-center text-primary">
              <CalendarDays className="w-4 h-4 text-primary" />
            </div>
            <span>Se unió el {joined}</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

export function OwnerTrophyCard() {
  return (
    <Card className="bg-surface/30 border-surface rounded-xl">
      <CardHeader className="p-6 pb-0">
        <CardTitle className="text-sm uppercase tracking-wider flex items-center gap-2 text-white">
          <Trophy className="w-5 h-5 text-yellow-500" />
          Sala de trofeos
        </CardTitle>
      </CardHeader>
      <CardContent className="p-6 pt-4">
        <p className="text-text-secondary text-sm">Sin trofeos disponibles.</p>
      </CardContent>
    </Card>
  );
}

export function OwnerScheduleCard() {
  return (
    <Card className="bg-surface/30 border-surface rounded-xl">
      <CardHeader className="p-6 pb-0">
        <CardTitle className="text-sm uppercase tracking-wider flex items-center gap-2 text-white">
          <CalendarClock className="w-5 h-5 text-primary" />
          Calendario 2024
        </CardTitle>
      </CardHeader>
      <CardContent className="p-6 pt-4">
        <p className="text-text-secondary text-sm">Sin eventos disponibles.</p>
      </CardContent>
    </Card>
  );
}

export function OwnerAffiliationsCard({ affiliations }: OwnerAffiliationsCardProps) {
  return (
    <Card className="bg-surface/30 border-surface rounded-xl">
      <CardHeader className="p-6 pb-0">
        <CardTitle className="text-sm uppercase tracking-wider flex items-center gap-2 text-white">
          <Users className="w-5 h-5 text-primary" />
          Afiliaciones
        </CardTitle>
      </CardHeader>
      <CardContent className="p-6 pt-4">
        <div className="flex flex-wrap gap-4">
          {affiliations.map((affiliation) => (
            <Tooltip key={affiliation.name}>
              <TooltipTrigger asChild>
                <div className="group flex flex-col items-center gap-2 cursor-pointer">
                  <div className="size-14 rounded-full bg-white p-1 ring-2 ring-transparent group-hover:ring-primary transition-all relative">
                    <div
                      className="w-full h-full rounded-full bg-black bg-cover bg-center"
                      style={{ backgroundImage: `url("${affiliation.logoUrl}")` }}
                    />
                    {affiliation.highlighted && (
                      <div className="absolute -bottom-1 -right-1 bg-primary text-secondary rounded-full p-[2px] border-2 border-surface">
                        <Star className="w-3 h-3" />
                      </div>
                    )}
                  </div>
                  <span className="text-xs text-text-secondary group-hover:text-white">{affiliation.name}</span>
                </div>
              </TooltipTrigger>
              <TooltipContent>{affiliation.name}</TooltipContent>
            </Tooltip>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}