import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Dialog, DialogContent, DialogTrigger, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import {
    ShoppingBag, Info, MapPin, Calendar, Shield, Star, Users, Heart, Mail, 
    Smartphone, Globe, Instagram, Facebook, Hash, X, Bell, Camera, Flag,
    Trophy, Target, Medal, Phone
} from "lucide-react";

interface ProfileContentProps {
    profile: any;
}

export default function ProfileContentRepresentative({ profile }: ProfileContentProps) {
    const [activeTab, setActiveTab] = useState("informacion");

    // Fallback de datos para representante
    const fallback = {
        nombre: "Juan Pérez",
        descripcion: "Representante oficial de BullyApp para la región Lima, Perú.",
        ubicacion: "Lima, Perú",
        fecha_inicio: "2022-01-10",
        verificado: true,
        zonas_representadas: ["Lima Norte", "Lima Sur", "Callao"],
        eventos_organizados: 24,
        comunidad_miembros: 1500,
        telefono: "+51 999 888 777",
        email: "juan.perez@bullyapp.com",
        eventos: [
            {
                nombre: "BullyApp Meet & Greet 2024",
                fecha: "2024-03-15",
                lugar: "Plaza Mayor, Lima",
                descripcion: "Encuentro de la comunidad Bully",
                asistentes: 200
            }
        ],
        certificaciones: [
            {
                titulo: "Representante Oficial BullyApp",
                fecha: "2023-01-15",
                estado: "Vigente"
            }
        ],
        galeria: [
            "/landing/1.jpg",
            "/landing/1.jpg",
            "/landing/1.jpg"
        ],
        redes_sociales: {
            instagram: "@bullyapp_lima",
            facebook: "BullyApp Lima Oficial",
            tiktok: "@bullyapp_lima"
        }
    };

    const data = { ...fallback, ...profile };

    const tabOptions = [
        { value: "informacion", label: "Información Personal", icon: <Info className="h-4 w-4" /> },
        { value: "eventos", label: "Eventos y Actividades", icon: <Trophy className="h-4 w-4" /> },
        { value: "galeria", label: "Galería", icon: <Camera className="h-4 w-4" /> }
    ];

    return (
        <div className="mt-8">
            <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
                <TabsList className="hidden md:grid w-full grid-cols-3">
                    {tabOptions.map(tab => (
                        <TabsTrigger key={tab.value} value={tab.value} className="flex items-center gap-2">
                            {tab.icon}
                            {tab.label}
                        </TabsTrigger>
                    ))}
                </TabsList>

                {/* Selector móvil */}
                <div className="md:hidden mb-4 flex justify-center w-full">
                    <Select value={activeTab} onValueChange={setActiveTab}>
                        <SelectTrigger className="w-full max-w-sm rounded-lg border border-zinc-700 bg-zinc-900 text-zinc-100 p-2 text-sm">
                            <SelectValue placeholder="Selecciona una sección" />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectGroup>
                                {tabOptions.map(tab => (
                                    <SelectItem key={tab.value} value={tab.value}>
                                        <div className="flex items-center gap-2">
                                            {tab.icon}
                                            {tab.label}
                                        </div>
                                    </SelectItem>
                                ))}
                            </SelectGroup>
                        </SelectContent>
                    </Select>
                </div>

                {/* TAB INFORMACIÓN */}
                <TabsContent value="informacion" className="space-y-6">
                    <Card className="border border-zinc-700 bg-zinc-900 text-white">
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <Info className="w-5 h-5 text-yellow-400" />
                                Información del Representante
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div className="space-y-3">
                                    <div className="flex items-center gap-2 p-2 border border-zinc-700 rounded-lg">
                                        <Flag className="w-4 h-4 text-yellow-400" />
                                        <div>
                                            <p className="text-xs text-zinc-400">Zonas que representa</p>
                                            <div className="flex flex-wrap gap-2 mt-1">
                                                {data.zonas_representadas.map((zona: string, i: number) => (
                                                    <Badge key={i} variant="outline">
                                                        {zona}
                                                    </Badge>
                                                ))}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-2 p-2 border border-zinc-700 rounded-lg">
                                        <Phone className="w-4 h-4 text-yellow-400" />
                                        <div>
                                            <p className="text-xs text-zinc-400">Teléfono</p>
                                            <p className="font-medium">{data.telefono}</p>
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-2 p-2 border border-zinc-700 rounded-lg">
                                        <Mail className="w-4 h-4 text-yellow-400" />
                                        <div>
                                            <p className="text-xs text-zinc-400">Email</p>
                                            <p className="font-medium">{data.email}</p>
                                        </div>
                                    </div>
                                </div>
                                <div className="space-y-3">
                                    <div className="flex items-center gap-2 p-2 border border-zinc-700 rounded-lg">
                                        <Target className="w-4 h-4 text-yellow-400" />
                                        <div>
                                            <p className="text-xs text-zinc-400">Eventos Organizados</p>
                                            <p className="font-medium">{data.eventos_organizados}</p>
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-2 p-2 border border-zinc-700 rounded-lg">
                                        <Users className="w-4 h-4 text-yellow-400" />
                                        <div>
                                            <p className="text-xs text-zinc-400">Comunidad</p>
                                            <p className="font-medium">{data.comunidad_miembros} miembros</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </CardContent>
                    </Card>

                    {/* Certificaciones */}
                    <Card className="border border-zinc-700 bg-zinc-900 text-white">
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <Shield className="w-5 h-5 text-yellow-400" />
                                Certificaciones
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="space-y-4">
                                {data.certificaciones.map((cert: any, i: number) => (
                                    <div key={i} className="flex items-center justify-between p-4 border border-zinc-700 rounded-lg">
                                        <div className="flex items-center gap-3">
                                            <Medal className="w-5 h-5 text-yellow-400" />
                                            <div>
                                                <p className="font-medium text-white">{cert.titulo}</p>
                                                <p className="text-sm text-white/70">{cert.fecha}</p>
                                            </div>
                                        </div>
                                        <Badge 
                                            className={cert.estado === "Vigente" ? "bg-green-600" : "bg-yellow-600"}
                                        >
                                            {cert.estado}
                                        </Badge>
                                    </div>
                                ))}
                            </div>
                        </CardContent>
                    </Card>
                </TabsContent>

                {/* TAB EVENTOS */}
                <TabsContent value="eventos" className="space-y-6">
                    <Card className="border border-zinc-700 bg-zinc-900 text-white">
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <Trophy className="w-5 h-5 text-yellow-400" />
                                Eventos y Actividades
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="space-y-6">
                                {data.eventos.map((evento: any, i: number) => (
                                    <div key={i} className="border border-zinc-700 rounded-lg p-4">
                                        <div className="flex items-start justify-between">
                                            <div>
                                                <h3 className="text-lg font-semibold text-white">{evento.nombre}</h3>
                                                <div className="flex items-center gap-4 mt-2 text-sm text-white/70">
                                                    <div className="flex items-center gap-1">
                                                        <Calendar className="w-4 h-4 text-yellow-400" />
                                                        {evento.fecha}
                                                    </div>
                                                    <div className="flex items-center gap-1">
                                                        <MapPin className="w-4 h-4 text-yellow-400" />
                                                        {evento.lugar}
                                                    </div>
                                                    <div className="flex items-center gap-1">
                                                        <Users className="w-4 h-4 text-yellow-400" />
                                                        {evento.asistentes} asistentes
                                                    </div>
                                                </div>
                                                <p className="mt-3 text-white/80">{evento.descripcion}</p>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </CardContent>
                    </Card>
                </TabsContent>

                {/* TAB GALERÍA */}
                <TabsContent value="galeria" className="space-y-6">
                    <Card className="border border-zinc-700 bg-zinc-900 text-white">
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <Camera className="w-5 h-5 text-yellow-400" />
                                Galería de Imágenes
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                            {data.galeria.map((img: string, i: number) => (
                                <Dialog key={i}>
                                    <DialogTrigger asChild>
                                        <div className="aspect-square overflow-hidden rounded-lg border border-zinc-700 hover:border-yellow-400 transition-colors cursor-pointer">
                                            <img
                                                src={img}
                                                alt={`Foto ${i+1}`}
                                                className="w-full h-full object-cover"
                                                loading="lazy"
                                            />
                                        </div>
                                    </DialogTrigger>
                                    <DialogContent className="max-w-3xl p-0 bg-black border-none">
                                        <DialogTitle className="sr-only">Vista ampliada de la imagen</DialogTitle>
                                        <DialogDescription className="sr-only">
                                            Imagen ampliada. Usa ESC para cerrar.
                                        </DialogDescription>
                                        <button className="absolute top-2 right-2 text-white">
                                            <X className="w-6 h-6" />
                                        </button>
                                        <img src={img} className="w-full h-auto rounded-lg" />
                                    </DialogContent>
                                </Dialog>
                            ))}
                        </CardContent>
                    </Card>
                </TabsContent>
            </Tabs>
        </div>
    );
}