import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Calendar,
  Heart,
  MapPin,
  Medal,
  Shield,
  Flag,
  Trophy,
  Users,
  X,
  Target,
  Phone,
  Mail,
  Globe, Instagram, Facebook, Hash
} from "lucide-react";

interface ProfileHeaderProps {
  profile: any;
}

export default function ProfileHeaderRepresentative({ profile }: ProfileHeaderProps) {
  const [previewImage, setPreviewImage] = useState<string | null>(null);

  if (!profile) return null;

  const data = {
    nombre: profile.nombre || profile.name || "Juan Pérez",
    descripcion: profile.descripcion || "Representante oficial de BullyApp para la región Lima.",
    ubicacion: profile.ubicacion || "Lima, Perú",
    verificado: profile.verificado ?? true,
    fecha_inicio: profile.fecha_inicio || "2022-01-10",
    seguidores: profile.seguidores || 1200,
    seguidos: profile.seguidos || 80,
    me_gusta: profile.me_gusta || 3500,
    zonas_representadas: profile.zonas || ["Lima Norte", "Lima Sur", "Callao"],
    eventos_organizados: profile.eventos_organizados || 24,
    telefono: profile.telefono || "+51 999 888 777",
    email: profile.email || "juan.perez@bullyapp.com",
    eventos: profile.eventos || [
      {
        nombre: "BullyApp Meet & Greet 2024",
        fecha: "2024-03-15",
        lugar: "Plaza Mayor, Lima",
        asistentes: 200
      }
    ],
    certificaciones: profile.certificaciones || [
      {
        titulo: "Representante Oficial BullyApp",
        fecha: "2023-01-15"
      }
    ],
    redes_sociales: profile.redes_sociales || {
      instagram: "@bullyapp_lima",
      facebook: "BullyApp Lima Oficial",
      tiktok: "@bullyapp_lima"
    }
  };

  const profileImage = profile.foto || "/landing/1.jpg";
  const bannerImage = profile.banner || "/landing/1.jpg";
  const fechaInicio = data.fecha_inicio
    ? new Date(data.fecha_inicio).toLocaleDateString()
    : "—";
  const ultimoEvento = data.eventos && data.eventos.length > 0 ? data.eventos[0] : null;

  return (
    <div className="relative">
      <div
        className="mb-[-64px] h-80 w-full rounded-2xl bg-zinc-900 bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: `url(${bannerImage})`,
          boxShadow: "inset 0 0 0 2000px rgba(0, 0, 0, 0.5)"
        }}
      />
      <Card className="relative z-10 mt-[-64px] rounded-2xl border-none bg-zinc-900 shadow-xl">
        <CardContent className="p-6 md:p-8">
          <div className="flex flex-col items-center gap-8 md:flex-row md:items-start">
            {/* Columna izquierda */}
            <div className="flex w-full flex-col items-center md:w-auto md:items-center">
              {/* Avatar y stats similares al ejemplo */}
              <div
                className="relative mb-4 cursor-pointer transition-transform hover:scale-105"
                onClick={() => setPreviewImage(profileImage)}
              >
                <Avatar className="h-48 w-48 border-4 border-yellow-400 shadow-lg">
                  <AvatarImage src={profileImage} alt={data.nombre} />
                </Avatar>
              </div>
              
              {/* Stats */}
              <div className="mt-4 flex w-full justify-center gap-6 rounded-xl border border-zinc-700 bg-transparent p-4 shadow-sm">
                {/* Similar al ejemplo pero con los datos del representante */}
                <div className="flex flex-col items-center">
                  <span className="text-2xl font-bold text-white">{data.seguidores}</span>
                  <span className="text-xs text-white">Seguidores</span>
                </div>
                <div className="flex flex-col items-center">
                  <span className="text-2xl font-bold text-white">{data.eventos_organizados}</span>
                  <span className="text-xs text-white">Eventos</span>
                </div>
                <div className="flex flex-col items-center">
                  <span className="text-2xl font-bold text-white">{data.me_gusta}</span>
                  <span className="text-xs text-white">Me gusta</span>
                </div>
              </div>

              <Button className="mt-4 w-full bg-yellow-400 text-black hover:bg-yellow-500">
                <Heart className="mr-2 h-4 w-4" /> Seguir
              </Button>

              {/* Info rápida */}
              <div className="mt-4 w-full space-y-2">
                <div className="flex items-center rounded-lg border border-zinc-700 bg-transparent px-3 py-2 text-sm">
                  <Calendar className="mr-2 h-4 w-4 text-yellow-400" />
                  <span className="text-white">
                    Representante desde: <span className="font-medium">{fechaInicio}</span>
                  </span>
                </div>
                <div className="flex items-center rounded-lg border border-zinc-700 bg-transparent px-3 py-2 text-sm">
                  <Phone className="mr-2 h-4 w-4 text-yellow-400" />
                  <span className="text-white">
                    Teléfono: <span className="font-medium">{data.telefono}</span>
                  </span>
                </div>
                <div className="flex items-center rounded-lg border border-zinc-700 bg-transparent px-3 py-2 text-sm">
                  <Mail className="mr-2 h-4 w-4 text-yellow-400" />
                  <span className="text-white">
                    Email: <span className="font-medium">{data.email}</span>
                  </span>
                </div>
                {ultimoEvento && (
                  <div className="flex items-center rounded-lg border border-zinc-700 bg-transparent px-3 py-2 text-sm">
                    <Trophy className="mr-2 h-4 w-4 text-yellow-400" />
                    <span className="text-white">
                      Último evento: <span className="font-medium">{ultimoEvento.fecha}</span>
                    </span>
                  </div>
                )}

                {/* Redes sociales */}
                {data.redes_sociales && (
                  <div className="grid grid-cols-2 gap-2 mt-2">
                    {/* Similar al ejemplo pero con los datos del representante */}
                    {data.redes_sociales.instagram && (
                      <a href="#" className="flex items-center gap-1 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full px-2 py-1 text-xs text-white justify-center">
                        <Instagram className="w-3 h-3" />
                        Instagram
                      </a>
                    )}
                    {data.redes_sociales.facebook && (
                      <a href="#" className="flex items-center gap-1 bg-blue-600 rounded-full px-2 py-1 text-xs text-white justify-center">
                        <Facebook className="w-3 h-3" />
                        Facebook
                      </a>
                    )}
                    {data.redes_sociales.tiktok && (
                      <a href="#" className="flex items-center gap-1 bg-black rounded-full px-2 py-1 text-xs text-white justify-center col-span-2">
                        <Hash className="w-3 h-3" />
                        TikTok
                      </a>
                    )}
                  </div>
                )}
              </div>
            </div>

            {/* Columna central */}
            <div className="flex-1 space-y-4">
              <div>
                <h1 className="flex flex-wrap items-center gap-2 text-3xl font-bold text-white">
                  {data.nombre}
                  {data.verificado && (
                    <Badge className="flex items-center gap-1 bg-blue-600 text-white">
                      <Shield className="h-4 w-4 text-white" /> Verificado
                    </Badge>
                  )}
                </h1>
                <p className="text-lg text-white/80">{data.descripcion}</p>
              </div>

              {/* Zonas que representa */}
              <div className="rounded-lg border border-zinc-700 bg-zinc-800/30 p-4">
                <h3 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
                  <Flag className="h-4 w-4 text-yellow-400" />
                  Zonas que representa
                </h3>
                <div className="flex flex-wrap gap-2">
                  {data.zonas_representadas.map((zona: string, i: number) => (
                    <Badge key={i} variant="outline" className="border-yellow-400">
                      {zona}
                    </Badge>
                  ))}
                </div>
              </div>

              {/* Último evento destacado */}
              {ultimoEvento && (
                <div className="rounded-lg border border-zinc-700 bg-zinc-800/30 p-4">
                  <h3 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
                    <Trophy className="h-4 w-4 text-yellow-400" />
                    Último evento representado
                  </h3>
                  <div className="space-y-2">
                    <p className="font-medium text-white">{ultimoEvento.nombre}</p>
                    <div className="flex items-center gap-4 text-sm text-white/70">
                      <span className="flex items-center gap-1">
                        <Calendar className="h-4 w-4 text-yellow-400" />
                        {ultimoEvento.fecha}
                      </span>
                      <span className="flex items-center gap-1">
                        <MapPin className="h-4 w-4 text-yellow-400" />
                        {ultimoEvento.lugar}
                      </span>
                      <span className="flex items-center gap-1">
                        <Users className="h-4 w-4 text-yellow-400" />
                        {ultimoEvento.asistentes} asistentes
                      </span>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Preview de imagen ampliada */}
      {previewImage && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4 backdrop-blur-sm"
          onClick={() => setPreviewImage(null)}
        >
          <div className="relative max-h-[90vh] max-w-[90vw]">
            <Button
              variant="ghost"
              size="icon"
              className="absolute -top-2 -right-2 rounded-full bg-black text-white hover:bg-zinc-800"
              onClick={e => {
                e.stopPropagation();
                setPreviewImage(null);
              }}
            >
              <X className="h-5 w-5" />
            </Button>
            <img
              src={previewImage}
              alt="Foto ampliada"
              className="max-h-[85vh] max-w-[85vw] rounded-lg object-contain shadow-2xl"
            />
          </div>
        </div>
      )}
    </div>
  );
}