'use client'

import { useEffect, useState } from 'react'
import { useSession } from 'next-auth/react'
import { useRouter, useSearchParams } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Input } from '@/components/ui/input'
import { toast } from 'sonner'
import { format } from 'date-fns'
import { es } from 'date-fns/locale'
import {
  ArrowLeft,
  User,
  Users,
  Phone,
  Mail,
  MapPin,
  Calendar,
  Activity,
  Target,
  CreditCard,
  Trophy,
  Ruler,
  Weight,
  Heart,
  Shield,
  Star,
  TrendingUp,
  CheckCircle,
  Clock,
  Search,
  ClipboardList,
  Pencil,
  Save,
  X
} from 'lucide-react'
import { ProgresoSilueta } from '@/components/progreso-silueta'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

interface PerfilData {
  alumno: {
    id: string
    categoria: string
    apodo: string | null
    peso: number | null
    altura: number | null
    piernaHabil: string | null
    tallaCamiseta: string | null
    tallaPantalon: string | null
    largoPie: number | null
    posicionPrincipal: string | null
    posicionesSecundarias: string[]
    centroSaludNombre: string | null
    centroSaludUbicacion: string | null
    alergias: string | null
    condicionesPreexistentes: string | null
    lesiones: string | null
    seguroEscolar: boolean
    modalidadPago: string | null
    estadoPagoMatricula: string
    puntajeDeportivo: number | null
    usuario: {
      id: string
      rut: string
      nombres: string
      apellidos: string
      nombreCorto: string
      fechaNacimiento: string
      telefono: string[]
      email: string
      direccionCalle: string
      direccionNumero: string
      direccionDepto: string | null
      direccionComuna: string
      direccionRegion: string
      foto: string | null
      fechaIngreso: string
      escuela: {
        nombre: string
      }
    }
    apoderado: {
      nombres: string
      apellidos: string
      rut: string
      telefono: string[]
      email: string[]
      relacionConAlumno: string
      otroContactoNombre: string | null
      otroContactoTelefono: string | null
    }
    evaluacionesFisicas: Array<{
      id: string
      fecha: string
      puntajeAgilidad: number
      tiempoVelocidad: number | null
      alturaVertical: number | null
      distanciaHorizontal: number | null
      puntajeTotal: number | null
      observaciones: string | null
      evaluador: { nombres: string; apellidos: string }
    }>
    evaluacionesDeportivas: Array<{
      id: string
      fecha: string
      tecnica: number
      fuerza: number
      ataque: number
      defensa: number
      resistencia: number
      velocidad: number
      puntajeTotal: number
      posicionesPreferentes: string[]
      observaciones: string | null
      evaluador: { nombres: string; apellidos: string }
    }>
    objetivos: Array<{
      id: string
      tipo: string
      objetivoFinal: string
      objetivoInicial: string
      objetivosIntermedios: string[]
      progreso: number
      completado: boolean
      fechaCreacion: string
      profesor: { nombres: string; apellidos: string }
    }>
    pagos: Array<{
      id: string
      fecha: string
      monto: number
      concepto: string
      metodoPago: string
    }>
  }
  estadisticasAsistencia: {
    total: number
    presentes: number
    ausentes: number
    porTipo: {
      entrenamientos: { total: number; presentes: number }
      amistosos: { total: number; presentes: number }
      campeonatos: { total: number; presentes: number }
    }
  }
  resumenPagos: {
    totalPagado: number
    cantidadPagos: number
    ultimoPago: { fecha: string; monto: number; concepto: string } | null
  }
  promedios: {
    fisico: number | null
    deportivo: number | null
  }
  objetivosResumen: {
    activos: number
    completados: number
    total: number
  }
  permisos: {
    esPropio: boolean
    esApoderado: boolean
    esProfesorCoordinador: boolean
  }
}

interface AlumnoListItem {
  id: string
  categoria: string
  usuario: {
    nombres: string
    apellidos: string
    rut: string
  }
}

export default function PerfilAlumnoPage() {
  const { data: session, status } = useSession() || {}
  const router = useRouter()
  const searchParams = useSearchParams()
  const alumnoIdParam = searchParams.get('id')

  const [perfil, setPerfil] = useState<PerfilData | null>(null)
  const [loading, setLoading] = useState(true)
  const [alumnos, setAlumnos] = useState<AlumnoListItem[]>([])
  const [searchTerm, setSearchTerm] = useState('')
  const [selectedAlumnoId, setSelectedAlumnoId] = useState<string | null>(alumnoIdParam)
  
  // Estados para el modal de edición
  const [editModalOpen, setEditModalOpen] = useState(false)
  const [saving, setSaving] = useState(false)
  const [editData, setEditData] = useState({
    nombres: '',
    apellidos: '',
    telefono: '',
    email: '',
    apodo: '',
    peso: '',
    altura: '',
    piernaHabil: '',
    posicionPrincipal: '',
    tallaCamiseta: '',
    tallaPantalon: '',
    modalidadPago: ''
  })

  const userRole = (session?.user as { rol?: string })?.rol
  const isProfesorOrCoordinador = userRole === 'COORDINADOR' || userRole === 'PROFESOR'

  // Fetch alumnos list for professors/coordinators
  useEffect(() => {
    if (isProfesorOrCoordinador) {
      fetchAlumnos()
    }
  }, [isProfesorOrCoordinador])

  // Fetch profile when alumnoId changes
  useEffect(() => {
    if (selectedAlumnoId) {
      fetchPerfil(selectedAlumnoId)
    } else if (!isProfesorOrCoordinador && status === 'authenticated') {
      // For students, fetch their own profile
      fetchOwnProfile()
    }
  }, [selectedAlumnoId, status, isProfesorOrCoordinador])

  const fetchAlumnos = async () => {
    try {
      const response = await fetch('/api/alumnos')
      const data = await response.json()
      if (data.alumnos) {
        setAlumnos(data.alumnos)
      }
    } catch (error) {
      toast.error('Error al cargar lista de alumnos')
    }
  }

  const fetchOwnProfile = async () => {
    try {
      // First get the alumno ID for the current user
      const response = await fetch('/api/alumnos')
      const data = await response.json()
      const userRut = (session?.user as { rut?: string })?.rut
      const ownAlumno = data.alumnos?.find((a: AlumnoListItem) => a.usuario.rut === userRut)
      if (ownAlumno) {
        setSelectedAlumnoId(ownAlumno.id)
      } else {
        setLoading(false)
        toast.error('No se encontró tu perfil de alumno')
      }
    } catch (error) {
      setLoading(false)
      toast.error('Error al cargar tu perfil')
    }
  }

  const fetchPerfil = async (alumnoId: string) => {
    setLoading(true)
    try {
      const response = await fetch(`/api/alumnos/${alumnoId}/perfil`)
      if (!response.ok) {
        const error = await response.json()
        throw new Error(error.error || 'Error al cargar perfil')
      }
      const data = await response.json()
      setPerfil(data)
    } catch (error) {
      toast.error(error instanceof Error ? error.message : 'Error al cargar perfil')
    } finally {
      setLoading(false)
    }
  }

  // Funciones para editar alumno
  const openEditModal = () => {
    if (!perfil) return
    setEditData({
      nombres: perfil.alumno.usuario.nombres,
      apellidos: perfil.alumno.usuario.apellidos,
      telefono: perfil.alumno.usuario.telefono.join(', '),
      email: perfil.alumno.usuario.email,
      apodo: perfil.alumno.apodo || '',
      peso: perfil.alumno.peso?.toString() || '',
      altura: perfil.alumno.altura?.toString() || '',
      piernaHabil: perfil.alumno.piernaHabil || '',
      posicionPrincipal: perfil.alumno.posicionPrincipal || '',
      tallaCamiseta: perfil.alumno.tallaCamiseta || '',
      tallaPantalon: perfil.alumno.tallaPantalon || '',
      modalidadPago: perfil.alumno.modalidadPago || ''
    })
    setEditModalOpen(true)
  }

  const handleEditChange = (field: string, value: string) => {
    setEditData(prev => ({ ...prev, [field]: value }))
  }

  const saveChanges = async () => {
    if (!perfil || !selectedAlumnoId) return
    
    setSaving(true)
    try {
      const response = await fetch(`/api/alumnos/${selectedAlumnoId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          usuario: {
            id: perfil.alumno.usuario.id,
            nombres: editData.nombres,
            apellidos: editData.apellidos,
            telefono: editData.telefono.split(',').map(t => t.trim()).filter(Boolean),
            email: editData.email
          },
          alumno: {
            apodo: editData.apodo || null,
            categoria: perfil.alumno.categoria,
            peso: editData.peso ? parseFloat(editData.peso) : null,
            altura: editData.altura ? parseFloat(editData.altura) : null,
            piernaHabil: editData.piernaHabil || null,
            posicionPrincipal: editData.posicionPrincipal || null,
            tallaCamiseta: editData.tallaCamiseta || null,
            tallaPantalon: editData.tallaPantalon || null,
            modalidadPago: editData.modalidadPago || null
          }
        })
      })

      if (!response.ok) {
        const error = await response.json()
        throw new Error(error.error || 'Error al guardar cambios')
      }

      toast.success('Datos actualizados correctamente')
      setEditModalOpen(false)
      // Recargar perfil
      fetchPerfil(selectedAlumnoId)
    } catch (error) {
      toast.error(error instanceof Error ? error.message : 'Error al guardar cambios')
    } finally {
      setSaving(false)
    }
  }

  const filteredAlumnos = alumnos.filter(a => {
    const fullName = `${a.usuario.nombres} ${a.usuario.apellidos}`.toLowerCase()
    const term = searchTerm.toLowerCase()
    return fullName.includes(term) || a.usuario.rut.includes(term)
  })

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP' }).format(amount)
  }

  const calcularEdad = (fechaNacimiento: string) => {
    const hoy = new Date()
    const nacimiento = new Date(fechaNacimiento)
    let edad = hoy.getFullYear() - nacimiento.getFullYear()
    const mes = hoy.getMonth() - nacimiento.getMonth()
    if (mes < 0 || (mes === 0 && hoy.getDate() < nacimiento.getDate())) {
      edad--
    }
    return edad
  }

  const getTipoObjetivoBadge = (tipo: string) => {
    const colors: Record<string, string> = {
      'TACTICO': 'bg-blue-100 text-blue-800',
      'TECNICO': 'bg-green-100 text-green-800',
      'PSICOLOGICO': 'bg-purple-100 text-purple-800'
    }
    return colors[tipo] || 'bg-gray-100 text-gray-800'
  }

  if (status === 'loading' || (loading && selectedAlumnoId)) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">Cargando información...</p>
        </div>
      </div>
    )
  }

  // Show student selector for professors/coordinators
  if (isProfesorOrCoordinador && !selectedAlumnoId) {
    return (
      <div className="min-h-screen bg-gray-50 p-6">
        <div className="max-w-4xl mx-auto">
          <Button
            variant="ghost"
            onClick={() => router.push('/dashboard')}
            className="mb-6"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Volver al Dashboard
          </Button>

          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <ClipboardList className="w-6 h-6 text-green-600" />
                Consola de Información del Alumno
              </CardTitle>
              <CardDescription>
                Seleccione un alumno para ver su información completa
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="relative mb-4">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                <Input
                  placeholder="Buscar por nombre o RUT..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>

              <div className="space-y-2 max-h-96 overflow-y-auto">
                {filteredAlumnos.map((alumno) => (
                  <div
                    key={alumno.id}
                    onClick={() => setSelectedAlumnoId(alumno.id)}
                    className="p-4 border rounded-lg cursor-pointer hover:bg-green-50 hover:border-green-300 transition-colors"
                  >
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                          <User className="w-5 h-5 text-green-600" />
                        </div>
                        <div>
                          <p className="font-medium">
                            {alumno.usuario.nombres} {alumno.usuario.apellidos}
                          </p>
                          <p className="text-sm text-gray-500">RUT: {alumno.usuario.rut}</p>
                        </div>
                      </div>
                      <Badge variant="outline">Cat. {alumno.categoria}</Badge>
                    </div>
                  </div>
                ))}
                {filteredAlumnos.length === 0 && (
                  <p className="text-center text-gray-500 py-8">No se encontraron alumnos</p>
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    )
  }

  if (!perfil) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <p className="text-gray-600">No se encontró información del alumno</p>
      </div>
    )
  }

  const { alumno, estadisticasAsistencia, resumenPagos, promedios, objetivosResumen, permisos } = perfil
  const porcentajeAsistencia = estadisticasAsistencia.total > 0 
    ? Math.round((estadisticasAsistencia.presentes / estadisticasAsistencia.total) * 100) 
    : 0

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <Button
            variant="ghost"
            onClick={() => {
              if (isProfesorOrCoordinador) {
                setSelectedAlumnoId(null)
                setPerfil(null)
              } else {
                router.push('/dashboard')
              }
            }}
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            {isProfesorOrCoordinador ? 'Seleccionar otro alumno' : 'Volver al Dashboard'}
          </Button>
          
          <div className="flex items-center gap-2">
            {permisos.esPropio && <Badge className="bg-blue-100 text-blue-800">Mi Perfil</Badge>}
            {permisos.esApoderado && <Badge className="bg-purple-100 text-purple-800">Apoderado</Badge>}
            {permisos.esProfesorCoordinador && <Badge className="bg-green-100 text-green-800">Staff</Badge>}
          </div>
        </div>

        {/* Profile Header Card */}
        <Card className="mb-6 overflow-hidden">
          <div className="bg-gradient-to-r from-green-600 to-green-700 p-6 text-white">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-6">
                <div className="w-24 h-24 bg-white/20 rounded-full flex items-center justify-center">
                  <User className="w-12 h-12" />
                </div>
                <div>
                  <h1 className="text-3xl font-bold">
                    {alumno.usuario.nombres} {alumno.usuario.apellidos}
                  </h1>
                  {alumno.apodo && <p className="text-green-100">"{alumno.apodo}"</p>}
                  <div className="flex items-center gap-4 mt-2">
                    <Badge className="bg-white/20 text-white">Categoría {alumno.categoria}</Badge>
                    <span className="text-green-100">{calcularEdad(alumno.usuario.fechaNacimiento)} años</span>
                    <span className="text-green-100">{alumno.usuario.escuela.nombre}</span>
                  </div>
                </div>
              </div>
              {/* Botón Editar - solo para Coordinador/Profesor */}
              {isProfesorOrCoordinador && (
                <Button
                  onClick={openEditModal}
                  variant="outline"
                  className="bg-white/10 border-white/30 text-white hover:bg-white/20"
                >
                  <Pencil className="w-4 h-4 mr-2" />
                  Editar Datos
                </Button>
              )}
            </div>
          </div>
          
          {/* Quick Stats */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-6 bg-gray-50">
            <div className="text-center">
              <p className="text-2xl font-bold text-green-600">{porcentajeAsistencia}%</p>
              <p className="text-sm text-gray-500">Asistencia</p>
            </div>
            <div className="text-center">
              <p className="text-2xl font-bold text-blue-600">{promedios.deportivo?.toFixed(1) || '-'}</p>
              <p className="text-sm text-gray-500">Prom. Deportivo</p>
            </div>
            <div className="text-center">
              <p className="text-2xl font-bold text-purple-600">{objetivosResumen.completados}/{objetivosResumen.total}</p>
              <p className="text-sm text-gray-500">Objetivos</p>
            </div>
            <div className="text-center">
              <p className="text-2xl font-bold text-amber-600">{formatCurrency(resumenPagos.totalPagado)}</p>
              <p className="text-sm text-gray-500">Total Pagado</p>
            </div>
          </div>
        </Card>

        {/* Silueta de Progreso */}
        <div className="grid md:grid-cols-3 gap-6 mb-6">
          <div className="md:col-span-1">
            <ProgresoSilueta
              evaluacionesFisicas={alumno.evaluacionesFisicas}
              evaluacionesDeportivas={alumno.evaluacionesDeportivas}
              objetivos={alumno.objetivos}
              nombre={alumno.usuario.nombres}
            />
          </div>
          <div className="md:col-span-2">
            <Card className="h-full">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <TrendingUp className="w-5 h-5 text-green-600" />
                  Etapas de Desarrollo
                </CardTitle>
                <CardDescription>
                  Progreso del alumno basado en las evaluaciones del profesor
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {/* Etapa Física */}
                  <div className="p-4 border rounded-lg bg-blue-50 border-blue-200">
                    <div className="flex items-center justify-between mb-2">
                      <span className="font-medium text-blue-800">Etapa Física</span>
                      <Badge className={alumno.evaluacionesFisicas.length > 0 ? 'bg-blue-500' : 'bg-gray-400'}>
                        {alumno.evaluacionesFisicas.length > 0 
                          ? `${alumno.evaluacionesFisicas.length} evaluación(es)` 
                          : 'Pendiente'}
                      </Badge>
                    </div>
                    <p className="text-sm text-blue-700">
                      {alumno.evaluacionesFisicas.length > 0 
                        ? `Última evaluación: ${format(new Date(alumno.evaluacionesFisicas[alumno.evaluacionesFisicas.length - 1].fecha), 'dd/MM/yyyy', { locale: es })}`
                        : 'Aún no se han realizado evaluaciones físicas'}
                    </p>
                    {alumno.evaluacionesFisicas.length > 0 && (
                      <div className="mt-2 grid grid-cols-2 gap-2 text-sm">
                        <div><span className="text-blue-600">Agilidad:</span> {alumno.evaluacionesFisicas[alumno.evaluacionesFisicas.length - 1].puntajeAgilidad}/10</div>
                        <div><span className="text-blue-600">Velocidad:</span> {alumno.evaluacionesFisicas[alumno.evaluacionesFisicas.length - 1].tiempoVelocidad || '-'}s</div>
                      </div>
                    )}
                  </div>

                  {/* Etapa Deportiva */}
                  <div className="p-4 border rounded-lg bg-amber-50 border-amber-200">
                    <div className="flex items-center justify-between mb-2">
                      <span className="font-medium text-amber-800">Etapa Deportiva</span>
                      <Badge className={alumno.evaluacionesDeportivas.length > 0 ? 'bg-amber-500' : 'bg-gray-400'}>
                        {alumno.evaluacionesDeportivas.length > 0 
                          ? `${alumno.evaluacionesDeportivas.length} evaluación(es)` 
                          : 'Pendiente'}
                      </Badge>
                    </div>
                    <p className="text-sm text-amber-700">
                      {alumno.evaluacionesDeportivas.length > 0 
                        ? `Última evaluación: ${format(new Date(alumno.evaluacionesDeportivas[alumno.evaluacionesDeportivas.length - 1].fecha), 'dd/MM/yyyy', { locale: es })}`
                        : 'Aún no se han realizado evaluaciones deportivas'}
                    </p>
                    {alumno.evaluacionesDeportivas.length > 0 && (
                      <div className="mt-2 grid grid-cols-3 gap-2 text-sm">
                        <div><span className="text-amber-600">Técnica:</span> {alumno.evaluacionesDeportivas[alumno.evaluacionesDeportivas.length - 1].tecnica}/5</div>
                        <div><span className="text-amber-600">Fuerza:</span> {alumno.evaluacionesDeportivas[alumno.evaluacionesDeportivas.length - 1].fuerza}/5</div>
                        <div><span className="text-amber-600">Total:</span> {alumno.evaluacionesDeportivas[alumno.evaluacionesDeportivas.length - 1].puntajeTotal.toFixed(1)}/5</div>
                      </div>
                    )}
                  </div>

                  {/* Etapa de Objetivos */}
                  <div className="p-4 border rounded-lg bg-purple-50 border-purple-200">
                    <div className="flex items-center justify-between mb-2">
                      <span className="font-medium text-purple-800">Objetivos Individuales</span>
                      <Badge className={alumno.objetivos.length > 0 ? 'bg-purple-500' : 'bg-gray-400'}>
                        {objetivosResumen.completados}/{objetivosResumen.total} completados
                      </Badge>
                    </div>
                    <p className="text-sm text-purple-700">
                      {alumno.objetivos.length > 0 
                        ? `${objetivosResumen.activos} objetivo(s) activo(s)`
                        : 'No hay objetivos asignados aún'}
                    </p>
                    {alumno.objetivos.length > 0 && (
                      <div className="mt-2">
                        <Progress 
                          value={(objetivosResumen.completados / objetivosResumen.total) * 100} 
                          className="h-2"
                        />
                      </div>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>

        {/* Tabs with all information */}
        <Tabs defaultValue="personal" className="space-y-6">
          <TabsList className="grid grid-cols-2 md:grid-cols-6 gap-2">
            <TabsTrigger value="personal">Personal</TabsTrigger>
            <TabsTrigger value="fisico">Físico</TabsTrigger>
            <TabsTrigger value="asistencia">Asistencia</TabsTrigger>
            <TabsTrigger value="evaluaciones">Evaluaciones</TabsTrigger>
            <TabsTrigger value="objetivos">Objetivos</TabsTrigger>
            <TabsTrigger value="pagos">Pagos</TabsTrigger>
          </TabsList>

          {/* Personal Information Tab */}
          <TabsContent value="personal">
            <div className="grid md:grid-cols-2 gap-6">
              {/* Student Info */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <User className="w-5 h-5 text-green-600" />
                    Datos Personales
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <p className="text-sm text-gray-500">RUT</p>
                      <p className="font-medium">{alumno.usuario.rut}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-500">Fecha de Nacimiento</p>
                      <p className="font-medium">
                        {format(new Date(alumno.usuario.fechaNacimiento), 'dd/MM/yyyy', { locale: es })}
                      </p>
                    </div>
                  </div>
                  <div>
                    <p className="text-sm text-gray-500 flex items-center gap-1"><Mail className="w-3 h-3" /> Email</p>
                    <p className="font-medium">{alumno.usuario.email}</p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-500 flex items-center gap-1"><Phone className="w-3 h-3" /> Teléfono</p>
                    <p className="font-medium">{alumno.usuario.telefono.join(', ') || '-'}</p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-500 flex items-center gap-1"><MapPin className="w-3 h-3" /> Dirección</p>
                    <p className="font-medium">
                      {alumno.usuario.direccionCalle} {alumno.usuario.direccionNumero}
                      {alumno.usuario.direccionDepto && `, Depto ${alumno.usuario.direccionDepto}`}
                    </p>
                    <p className="text-sm text-gray-600">
                      {alumno.usuario.direccionComuna}, {alumno.usuario.direccionRegion}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-500 flex items-center gap-1"><Calendar className="w-3 h-3" /> Fecha de Ingreso</p>
                    <p className="font-medium">
                      {format(new Date(alumno.usuario.fechaIngreso), 'dd/MM/yyyy', { locale: es })}
                    </p>
                  </div>
                </CardContent>
              </Card>

              {/* Guardian Info */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Users className="w-5 h-5 text-purple-600" />
                    Apoderado
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <p className="text-sm text-gray-500">Nombre Completo</p>
                    <p className="font-medium">{alumno.apoderado.nombres} {alumno.apoderado.apellidos}</p>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <p className="text-sm text-gray-500">RUT</p>
                      <p className="font-medium">{alumno.apoderado.rut}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-500">Relación</p>
                      <Badge variant="outline">{alumno.apoderado.relacionConAlumno}</Badge>
                    </div>
                  </div>
                  <div>
                    <p className="text-sm text-gray-500 flex items-center gap-1"><Phone className="w-3 h-3" /> Teléfono</p>
                    <p className="font-medium">{alumno.apoderado.telefono.join(', ') || '-'}</p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-500 flex items-center gap-1"><Mail className="w-3 h-3" /> Email</p>
                    <p className="font-medium">{alumno.apoderado.email.join(', ') || '-'}</p>
                  </div>
                  {alumno.apoderado.otroContactoNombre && (
                    <div className="pt-4 border-t">
                      <p className="text-sm text-gray-500">Contacto de Emergencia</p>
                      <p className="font-medium">{alumno.apoderado.otroContactoNombre}</p>
                      <p className="text-sm text-gray-600">{alumno.apoderado.otroContactoTelefono}</p>
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* Physical Info Tab */}
          <TabsContent value="fisico">
            <div className="grid md:grid-cols-2 gap-6">
              {/* Physical Characteristics */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Ruler className="w-5 h-5 text-blue-600" />
                    Características Físicas
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="p-4 bg-gray-50 rounded-lg text-center">
                      <Weight className="w-6 h-6 mx-auto text-gray-400 mb-2" />
                      <p className="text-2xl font-bold">{alumno.peso || '-'}</p>
                      <p className="text-sm text-gray-500">Peso (kg)</p>
                    </div>
                    <div className="p-4 bg-gray-50 rounded-lg text-center">
                      <Ruler className="w-6 h-6 mx-auto text-gray-400 mb-2" />
                      <p className="text-2xl font-bold">{alumno.altura || '-'}</p>
                      <p className="text-sm text-gray-500">Altura (cm)</p>
                    </div>
                  </div>
                  <div className="mt-4 space-y-3">
                    <div className="flex justify-between">
                      <span className="text-gray-500">Pierna Hábil</span>
                      <span className="font-medium">{alumno.piernaHabil || '-'}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-500">Talla Camiseta</span>
                      <span className="font-medium">{alumno.tallaCamiseta || '-'}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-500">Talla Pantalón</span>
                      <span className="font-medium">{alumno.tallaPantalon || '-'}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-500">Largo del Pie</span>
                      <span className="font-medium">{alumno.largoPie ? `${alumno.largoPie} cm` : '-'}</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Positions */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Trophy className="w-5 h-5 text-amber-600" />
                    Posiciones en Cancha
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <p className="text-sm text-gray-500 mb-2">Posición Principal</p>
                      {alumno.posicionPrincipal ? (
                        <Badge className="bg-green-100 text-green-800 text-lg px-4 py-2">
                          {alumno.posicionPrincipal}
                        </Badge>
                      ) : (
                        <p className="text-gray-400">No definida</p>
                      )}
                    </div>
                    <div>
                      <p className="text-sm text-gray-500 mb-2">Posiciones Secundarias</p>
                      <div className="flex flex-wrap gap-2">
                        {alumno.posicionesSecundarias.length > 0 ? (
                          alumno.posicionesSecundarias.map((pos, idx) => (
                            <Badge key={idx} variant="outline">{pos}</Badge>
                          ))
                        ) : (
                          <p className="text-gray-400">No definidas</p>
                        )}
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Health Info */}
              <Card className="md:col-span-2">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Heart className="w-5 h-5 text-red-600" />
                    Información de Salud
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid md:grid-cols-3 gap-6">
                    <div>
                      <p className="text-sm text-gray-500">Centro de Salud</p>
                      <p className="font-medium">{alumno.centroSaludNombre || '-'}</p>
                      <p className="text-sm text-gray-600">{alumno.centroSaludUbicacion || ''}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-500">Alergias</p>
                      <p className="font-medium">{alumno.alergias || 'Ninguna registrada'}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-500">Condiciones Preexistentes</p>
                      <p className="font-medium">{alumno.condicionesPreexistentes || 'Ninguna registrada'}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-500">Lesiones</p>
                      <p className="font-medium">{alumno.lesiones || 'Ninguna registrada'}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-500">Seguro Escolar</p>
                      <Badge variant={alumno.seguroEscolar ? 'default' : 'destructive'}>
                        {alumno.seguroEscolar ? 'Activo' : 'No activo'}
                      </Badge>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* Attendance Tab */}
          <TabsContent value="asistencia">
            <div className="grid md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Activity className="w-5 h-5 text-green-600" />
                    Resumen de Asistencia
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-center mb-6">
                    <div className="relative inline-block">
                      <div className="w-32 h-32 rounded-full border-8 border-gray-200 flex items-center justify-center">
                        <div 
                          className="absolute inset-0 rounded-full"
                          style={{
                            background: `conic-gradient(#16a34a ${porcentajeAsistencia}%, #e5e7eb ${porcentajeAsistencia}%)`
                          }}
                        />
                        <div className="w-24 h-24 bg-white rounded-full flex items-center justify-center z-10">
                          <span className="text-3xl font-bold text-green-600">{porcentajeAsistencia}%</span>
                        </div>
                      </div>
                    </div>
                    <p className="mt-4 text-gray-600">
                      {estadisticasAsistencia.presentes} de {estadisticasAsistencia.total} eventos
                    </p>
                  </div>
                  <div className="space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-gray-600">Presentes</span>
                      <Badge className="bg-green-100 text-green-800">{estadisticasAsistencia.presentes}</Badge>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-600">Ausentes</span>
                      <Badge className="bg-red-100 text-red-800">{estadisticasAsistencia.ausentes}</Badge>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Asistencia por Tipo de Evento</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* Entrenamientos */}
                  <div>
                    <div className="flex justify-between mb-1">
                      <span className="text-sm text-gray-600">Entrenamientos</span>
                      <span className="text-sm font-medium">
                        {estadisticasAsistencia.porTipo.entrenamientos.presentes}/{estadisticasAsistencia.porTipo.entrenamientos.total}
                      </span>
                    </div>
                    <Progress 
                      value={estadisticasAsistencia.porTipo.entrenamientos.total > 0 
                        ? (estadisticasAsistencia.porTipo.entrenamientos.presentes / estadisticasAsistencia.porTipo.entrenamientos.total) * 100 
                        : 0} 
                    />
                  </div>
                  {/* Amistosos */}
                  <div>
                    <div className="flex justify-between mb-1">
                      <span className="text-sm text-gray-600">Amistosos</span>
                      <span className="text-sm font-medium">
                        {estadisticasAsistencia.porTipo.amistosos.presentes}/{estadisticasAsistencia.porTipo.amistosos.total}
                      </span>
                    </div>
                    <Progress 
                      value={estadisticasAsistencia.porTipo.amistosos.total > 0 
                        ? (estadisticasAsistencia.porTipo.amistosos.presentes / estadisticasAsistencia.porTipo.amistosos.total) * 100 
                        : 0} 
                      className="bg-blue-100"
                    />
                  </div>
                  {/* Campeonatos */}
                  <div>
                    <div className="flex justify-between mb-1">
                      <span className="text-sm text-gray-600">Campeonatos</span>
                      <span className="text-sm font-medium">
                        {estadisticasAsistencia.porTipo.campeonatos.presentes}/{estadisticasAsistencia.porTipo.campeonatos.total}
                      </span>
                    </div>
                    <Progress 
                      value={estadisticasAsistencia.porTipo.campeonatos.total > 0 
                        ? (estadisticasAsistencia.porTipo.campeonatos.presentes / estadisticasAsistencia.porTipo.campeonatos.total) * 100 
                        : 0} 
                      className="bg-amber-100"
                    />
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* Evaluations Tab */}
          <TabsContent value="evaluaciones">
            <div className="grid md:grid-cols-2 gap-6">
              {/* Physical Evaluations */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Activity className="w-5 h-5 text-blue-600" />
                    Evaluaciones Físicas
                  </CardTitle>
                  <CardDescription>
                    {alumno.evaluacionesFisicas.length > 0 
                      ? `Promedio: ${promedios.fisico?.toFixed(1) || '-'} | ${alumno.evaluacionesFisicas.length} evaluación(es)`
                      : 'Sin evaluaciones registradas'}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  {/* Parámetros de Evaluación */}
                  <div className="mb-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
                    <h4 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
                      <ClipboardList className="w-4 h-4" />
                      Parámetros de Evaluación Física
                    </h4>
                    
                    {/* Test de Agilidad */}
                    <div className="mb-3">
                      <p className="text-sm font-medium text-blue-700 mb-2">Test de Agilidad (10 posturas):</p>
                      <div className="grid grid-cols-2 gap-1 text-xs text-gray-600">
                        <span>• Sentadilla profunda</span>
                        <span>• Paso al frente</span>
                        <span>• Alineación en línea</span>
                        <span>• Movilidad de hombro</span>
                        <span>• Elevación pierna recta</span>
                        <span>• Estabilidad del tronco</span>
                        <span>• Estabilidad en rotación</span>
                        <span>• Sentadilla con brazos</span>
                        <span>• Equilibrio unipodal</span>
                        <span>• Flexibilidad dorsal</span>
                      </div>
                    </div>
                    
                    {/* Otros tests */}
                    <div className="grid grid-cols-3 gap-2 text-xs">
                      <div className="p-2 bg-white rounded border text-center">
                        <span className="font-medium text-blue-700">Velocidad 15m</span>
                        <p className="text-gray-500">segundos</p>
                      </div>
                      <div className="p-2 bg-white rounded border text-center">
                        <span className="font-medium text-blue-700">Salto Vertical</span>
                        <p className="text-gray-500">centímetros</p>
                      </div>
                      <div className="p-2 bg-white rounded border text-center">
                        <span className="font-medium text-blue-700">Salto Horizontal</span>
                        <p className="text-gray-500">centímetros</p>
                      </div>
                    </div>
                  </div>

                  {/* Evaluaciones registradas */}
                  {alumno.evaluacionesFisicas.length > 0 ? (
                    <div className="space-y-4">
                      <h4 className="font-medium text-gray-700 border-b pb-2">Historial de Evaluaciones</h4>
                      {alumno.evaluacionesFisicas.slice(0, 5).map((eval_) => (
                        <div key={eval_.id} className="p-4 bg-gray-50 rounded-lg">
                          <div className="flex justify-between items-start mb-2">
                            <span className="text-sm text-gray-500">
                              {format(new Date(eval_.fecha), 'dd/MM/yyyy', { locale: es })}
                            </span>
                            <Badge variant="outline">
                              Puntaje: {eval_.puntajeTotal?.toFixed(1) || '-'}
                            </Badge>
                          </div>
                          <div className="grid grid-cols-2 gap-2 text-sm">
                            <div className="flex items-center gap-1">
                              <span className="text-gray-500">Agilidad:</span>
                              <span className="font-medium">{eval_.puntajeAgilidad}/10</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <span className="text-gray-500">Velocidad:</span>
                              <span className="font-medium">{eval_.tiempoVelocidad ? `${eval_.tiempoVelocidad}s` : '-'}</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <span className="text-gray-500">S. Vertical:</span>
                              <span className="font-medium">{eval_.alturaVertical ? `${eval_.alturaVertical}cm` : '-'}</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <span className="text-gray-500">S. Horizontal:</span>
                              <span className="font-medium">{eval_.distanciaHorizontal ? `${eval_.distanciaHorizontal}cm` : '-'}</span>
                            </div>
                          </div>
                          {eval_.observaciones && (
                            <p className="text-xs text-gray-500 mt-2 italic">"{eval_.observaciones}"</p>
                          )}
                          <p className="text-xs text-gray-400 mt-2">
                            Evaluador: {eval_.evaluador.nombres} {eval_.evaluador.apellidos}
                          </p>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="text-center py-4 text-gray-500 bg-gray-50 rounded-lg">
                      <Activity className="w-8 h-8 mx-auto mb-2 text-gray-400" />
                      <p className="text-sm">Aún no se han registrado evaluaciones físicas</p>
                      <p className="text-xs text-gray-400 mt-1">Los parámetros arriba indican lo que se evaluará</p>
                    </div>
                  )}
                </CardContent>
              </Card>

              {/* Sports Evaluations */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Star className="w-5 h-5 text-amber-600" />
                    Evaluaciones Deportivas
                  </CardTitle>
                  <CardDescription>
                    {alumno.evaluacionesDeportivas.length > 0 
                      ? `Promedio: ${promedios.deportivo?.toFixed(1) || '-'} | ${alumno.evaluacionesDeportivas.length} evaluación(es)`
                      : 'Sin evaluaciones registradas'}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  {/* Parámetros de Evaluación */}
                  <div className="mb-4 p-4 bg-amber-50 rounded-lg border border-amber-200">
                    <h4 className="font-semibold text-amber-800 mb-3 flex items-center gap-2">
                      <Trophy className="w-4 h-4" />
                      Parámetros de Evaluación Deportiva
                    </h4>
                    
                    {/* Criterios */}
                    <div className="space-y-2 mb-3">
                      <p className="text-sm font-medium text-amber-700">Criterios (escala 1-5):</p>
                      <div className="grid grid-cols-2 gap-2 text-xs">
                        <div className="p-2 bg-white rounded border">
                          <span className="font-medium text-amber-700">Técnica</span>
                          <p className="text-gray-500">Control, pases, regate</p>
                        </div>
                        <div className="p-2 bg-white rounded border">
                          <span className="font-medium text-amber-700">Fuerza</span>
                          <p className="text-gray-500">Potencia física y disparo</p>
                        </div>
                        <div className="p-2 bg-white rounded border">
                          <span className="font-medium text-amber-700">Ataque</span>
                          <p className="text-gray-500">Capacidad ofensiva, finalización</p>
                        </div>
                        <div className="p-2 bg-white rounded border">
                          <span className="font-medium text-amber-700">Defensa</span>
                          <p className="text-gray-500">Marcaje, anticipación</p>
                        </div>
                        <div className="p-2 bg-white rounded border">
                          <span className="font-medium text-amber-700">Resistencia</span>
                          <p className="text-gray-500">Aguante físico</p>
                        </div>
                        <div className="p-2 bg-white rounded border">
                          <span className="font-medium text-amber-700">Velocidad</span>
                          <p className="text-gray-500">Rapidez en desplazamientos</p>
                        </div>
                      </div>
                    </div>
                    
                    {/* Posiciones */}
                    <div className="text-xs">
                      <p className="font-medium text-amber-700 mb-1">Posiciones Preferentes:</p>
                      <p className="text-gray-500">Portero, Defensa Central, Laterales, Mediocampistas, Extremos, Delanteros</p>
                    </div>
                  </div>

                  {/* Evaluaciones registradas */}
                  {alumno.evaluacionesDeportivas.length > 0 ? (
                    <div className="space-y-4">
                      <h4 className="font-medium text-gray-700 border-b pb-2">Historial de Evaluaciones</h4>
                      {alumno.evaluacionesDeportivas.slice(0, 5).map((eval_) => (
                        <div key={eval_.id} className="p-4 bg-gray-50 rounded-lg">
                          <div className="flex justify-between items-start mb-2">
                            <span className="text-sm text-gray-500">
                              {format(new Date(eval_.fecha), 'dd/MM/yyyy', { locale: es })}
                            </span>
                            <Badge className="bg-amber-100 text-amber-800">
                              Prom: {eval_.puntajeTotal.toFixed(1)}
                            </Badge>
                          </div>
                          <div className="grid grid-cols-3 gap-2 text-sm mb-2">
                            <div className="text-center p-1 bg-white rounded">
                              <span className="text-xs text-gray-500">Técnica</span>
                              <p className="font-bold text-amber-600">{eval_.tecnica}</p>
                            </div>
                            <div className="text-center p-1 bg-white rounded">
                              <span className="text-xs text-gray-500">Fuerza</span>
                              <p className="font-bold text-amber-600">{eval_.fuerza}</p>
                            </div>
                            <div className="text-center p-1 bg-white rounded">
                              <span className="text-xs text-gray-500">Ataque</span>
                              <p className="font-bold text-amber-600">{eval_.ataque}</p>
                            </div>
                            <div className="text-center p-1 bg-white rounded">
                              <span className="text-xs text-gray-500">Defensa</span>
                              <p className="font-bold text-amber-600">{eval_.defensa}</p>
                            </div>
                            <div className="text-center p-1 bg-white rounded">
                              <span className="text-xs text-gray-500">Resistencia</span>
                              <p className="font-bold text-amber-600">{eval_.resistencia}</p>
                            </div>
                            <div className="text-center p-1 bg-white rounded">
                              <span className="text-xs text-gray-500">Velocidad</span>
                              <p className="font-bold text-amber-600">{eval_.velocidad}</p>
                            </div>
                          </div>
                          {eval_.posicionesPreferentes.length > 0 && (
                            <div className="flex flex-wrap gap-1 mt-2">
                              {eval_.posicionesPreferentes.map((pos, idx) => (
                                <Badge key={idx} variant="outline" className="text-xs">{pos}</Badge>
                              ))}
                            </div>
                          )}
                          {eval_.observaciones && (
                            <p className="text-xs text-gray-500 mt-2 italic">"{eval_.observaciones}"</p>
                          )}
                          <p className="text-xs text-gray-400 mt-2">
                            Evaluador: {eval_.evaluador.nombres} {eval_.evaluador.apellidos}
                          </p>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="text-center py-4 text-gray-500 bg-gray-50 rounded-lg">
                      <Star className="w-8 h-8 mx-auto mb-2 text-gray-400" />
                      <p className="text-sm">Aún no se han registrado evaluaciones deportivas</p>
                      <p className="text-xs text-gray-400 mt-1">Los parámetros arriba indican lo que se evaluará</p>
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* Objectives Tab */}
          <TabsContent value="objetivos">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Target className="w-5 h-5 text-purple-600" />
                  Objetivos Individuales
                </CardTitle>
                <CardDescription>
                  {objetivosResumen.completados} completados de {objetivosResumen.total} objetivos
                </CardDescription>
              </CardHeader>
              <CardContent>
                {alumno.objetivos.length > 0 ? (
                  <div className="space-y-4">
                    {alumno.objetivos.map((obj) => (
                      <div key={obj.id} className="p-4 border rounded-lg">
                        <div className="flex items-start justify-between mb-3">
                          <div>
                            <Badge className={getTipoObjetivoBadge(obj.tipo)}>
                              {obj.tipo}
                            </Badge>
                            <h4 className="font-medium mt-2">{obj.objetivoFinal}</h4>
                          </div>
                          {obj.completado ? (
                            <CheckCircle className="w-6 h-6 text-green-600" />
                          ) : (
                            <Clock className="w-6 h-6 text-amber-600" />
                          )}
                        </div>
                        <div className="mb-3">
                          <div className="flex justify-between text-sm mb-1">
                            <span>Progreso</span>
                            <span className="font-medium">{obj.progreso}%</span>
                          </div>
                          <Progress value={obj.progreso} />
                        </div>
                        <div className="text-sm text-gray-600 space-y-1">
                          <p><strong>Punto de partida:</strong> {obj.objetivoInicial}</p>
                          {obj.objetivosIntermedios.length > 0 && (
                            <div>
                              <strong>Pasos intermedios:</strong>
                              <ul className="list-disc list-inside ml-2">
                                {obj.objetivosIntermedios.map((paso, idx) => (
                                  <li key={idx}>{paso}</li>
                                ))}
                              </ul>
                            </div>
                          )}
                        </div>
                        <p className="text-xs text-gray-400 mt-2">
                          Creado por: {obj.profesor.nombres} {obj.profesor.apellidos} | 
                          {format(new Date(obj.fechaCreacion), ' dd/MM/yyyy', { locale: es })}
                        </p>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className="text-center text-gray-500 py-8">Sin objetivos registrados</p>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          {/* Payments Tab */}
          <TabsContent value="pagos">
            <div className="grid md:grid-cols-3 gap-6 mb-6">
              <Card>
                <CardContent className="pt-6">
                  <div className="text-center">
                    <CreditCard className="w-8 h-8 mx-auto text-green-600 mb-2" />
                    <p className="text-2xl font-bold">{formatCurrency(resumenPagos.totalPagado)}</p>
                    <p className="text-sm text-gray-500">Total Pagado</p>
                  </div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-6">
                  <div className="text-center">
                    <TrendingUp className="w-8 h-8 mx-auto text-blue-600 mb-2" />
                    <p className="text-2xl font-bold">{resumenPagos.cantidadPagos}</p>
                    <p className="text-sm text-gray-500">Pagos Realizados</p>
                  </div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-6">
                  <div className="text-center">
                    <Shield className="w-8 h-8 mx-auto text-purple-600 mb-2" />
                    <Badge variant={alumno.estadoPagoMatricula === 'SIN_DEUDA' ? 'default' : 'destructive'}>
                      {alumno.estadoPagoMatricula === 'SIN_DEUDA' ? 'Al día' : 
                       alumno.estadoPagoMatricula === 'PARCIAL' ? 'Pago parcial' : 'Pendiente'}
                    </Badge>
                    <p className="text-sm text-gray-500 mt-2">Estado Matrícula</p>
                  </div>
                </CardContent>
              </Card>
            </div>

            <Card>
              <CardHeader>
                <CardTitle>Historial de Pagos</CardTitle>
              </CardHeader>
              <CardContent>
                {alumno.pagos.length > 0 ? (
                  <div className="overflow-x-auto">
                    <table className="w-full">
                      <thead>
                        <tr className="border-b">
                          <th className="text-left py-3 px-4">Fecha</th>
                          <th className="text-left py-3 px-4">Concepto</th>
                          <th className="text-left py-3 px-4">Método</th>
                          <th className="text-right py-3 px-4">Monto</th>
                        </tr>
                      </thead>
                      <tbody>
                        {alumno.pagos.map((pago) => (
                          <tr key={pago.id} className="border-b hover:bg-gray-50">
                            <td className="py-3 px-4">
                              {format(new Date(pago.fecha), 'dd/MM/yyyy', { locale: es })}
                            </td>
                            <td className="py-3 px-4">
                              <Badge variant="outline">{pago.concepto}</Badge>
                            </td>
                            <td className="py-3 px-4 text-gray-600">{pago.metodoPago}</td>
                            <td className="py-3 px-4 text-right font-medium text-green-600">
                              {formatCurrency(pago.monto)}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                ) : (
                  <p className="text-center text-gray-500 py-8">Sin pagos registrados</p>
                )}
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

        {/* Modal de Edición de Datos */}
        <Dialog open={editModalOpen} onOpenChange={setEditModalOpen}>
          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle className="flex items-center gap-2">
                <Pencil className="w-5 h-5 text-green-600" />
                Editar Datos del Alumno
              </DialogTitle>
              <DialogDescription>
                Modifica la información del alumno. Los campos marcados con * son obligatorios.
              </DialogDescription>
            </DialogHeader>

            <div className="grid gap-6 py-4">
              {/* Datos Personales */}
              <div className="space-y-4">
                <h3 className="font-semibold text-gray-800 border-b pb-2">Datos Personales</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="nombres">Nombres *</Label>
                    <Input
                      id="nombres"
                      value={editData.nombres}
                      onChange={(e) => handleEditChange('nombres', e.target.value)}
                      placeholder="Nombres"
                    />
                  </div>
                  <div>
                    <Label htmlFor="apellidos">Apellidos *</Label>
                    <Input
                      id="apellidos"
                      value={editData.apellidos}
                      onChange={(e) => handleEditChange('apellidos', e.target.value)}
                      placeholder="Apellidos"
                    />
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="email">Email</Label>
                    <Input
                      id="email"
                      type="email"
                      value={editData.email}
                      onChange={(e) => handleEditChange('email', e.target.value)}
                      placeholder="correo@ejemplo.com"
                    />
                  </div>
                  <div>
                    <Label htmlFor="telefono">Teléfonos (separados por coma)</Label>
                    <Input
                      id="telefono"
                      value={editData.telefono}
                      onChange={(e) => handleEditChange('telefono', e.target.value)}
                      placeholder="+56 9 1234 5678"
                    />
                  </div>
                </div>
                <div>
                  <Label htmlFor="apodo">Apodo / Nombre de Camiseta</Label>
                  <Input
                    id="apodo"
                    value={editData.apodo}
                    onChange={(e) => handleEditChange('apodo', e.target.value)}
                    placeholder="Apodo del jugador"
                  />
                </div>
              </div>

              {/* Datos Físicos */}
              <div className="space-y-4">
                <h3 className="font-semibold text-gray-800 border-b pb-2">Datos Físicos</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="peso">Peso (kg)</Label>
                    <Input
                      id="peso"
                      type="number"
                      step="0.1"
                      value={editData.peso}
                      onChange={(e) => handleEditChange('peso', e.target.value)}
                      placeholder="35.5"
                    />
                  </div>
                  <div>
                    <Label htmlFor="altura">Altura (cm)</Label>
                    <Input
                      id="altura"
                      type="number"
                      step="0.1"
                      value={editData.altura}
                      onChange={(e) => handleEditChange('altura', e.target.value)}
                      placeholder="145"
                    />
                  </div>
                </div>
              </div>

              {/* Datos Deportivos */}
              <div className="space-y-4">
                <h3 className="font-semibold text-gray-800 border-b pb-2">Datos Deportivos</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="piernaHabil">Pierna Hábil</Label>
                    <Select
                      value={editData.piernaHabil}
                      onValueChange={(value) => handleEditChange('piernaHabil', value)}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Seleccionar" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="DERECHA">Derecha</SelectItem>
                        <SelectItem value="IZQUIERDA">Izquierda</SelectItem>
                        <SelectItem value="AMBIDIESTRO">Ambidiestro</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <Label htmlFor="posicionPrincipal">Posición Principal</Label>
                    <Select
                      value={editData.posicionPrincipal}
                      onValueChange={(value) => handleEditChange('posicionPrincipal', value)}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Seleccionar" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="PORTERO">Portero</SelectItem>
                        <SelectItem value="DEFENSA_CENTRAL">Defensa Central</SelectItem>
                        <SelectItem value="LATERAL_DERECHO">Lateral Derecho</SelectItem>
                        <SelectItem value="LATERAL_IZQUIERDO">Lateral Izquierdo</SelectItem>
                        <SelectItem value="MEDIOCAMPISTA">Mediocampista</SelectItem>
                        <SelectItem value="VOLANTE_DEFENSIVO">Volante Defensivo</SelectItem>
                        <SelectItem value="VOLANTE_OFENSIVO">Volante Ofensivo</SelectItem>
                        <SelectItem value="EXTREMO_DERECHO">Extremo Derecho</SelectItem>
                        <SelectItem value="EXTREMO_IZQUIERDO">Extremo Izquierdo</SelectItem>
                        <SelectItem value="DELANTERO">Delantero Centro</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </div>

              {/* Tallas */}
              <div className="space-y-4">
                <h3 className="font-semibold text-gray-800 border-b pb-2">Tallas de Equipamiento</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="tallaCamiseta">Talla Camiseta</Label>
                    <Select
                      value={editData.tallaCamiseta}
                      onValueChange={(value) => handleEditChange('tallaCamiseta', value)}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Seleccionar" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="4">Talla 4</SelectItem>
                        <SelectItem value="6">Talla 6</SelectItem>
                        <SelectItem value="8">Talla 8</SelectItem>
                        <SelectItem value="10">Talla 10</SelectItem>
                        <SelectItem value="12">Talla 12</SelectItem>
                        <SelectItem value="14">Talla 14</SelectItem>
                        <SelectItem value="S">S</SelectItem>
                        <SelectItem value="M">M</SelectItem>
                        <SelectItem value="L">L</SelectItem>
                        <SelectItem value="XL">XL</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <Label htmlFor="tallaPantalon">Talla Pantalón</Label>
                    <Select
                      value={editData.tallaPantalon}
                      onValueChange={(value) => handleEditChange('tallaPantalon', value)}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Seleccionar" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="4">Talla 4</SelectItem>
                        <SelectItem value="6">Talla 6</SelectItem>
                        <SelectItem value="8">Talla 8</SelectItem>
                        <SelectItem value="10">Talla 10</SelectItem>
                        <SelectItem value="12">Talla 12</SelectItem>
                        <SelectItem value="14">Talla 14</SelectItem>
                        <SelectItem value="S">S</SelectItem>
                        <SelectItem value="M">M</SelectItem>
                        <SelectItem value="L">L</SelectItem>
                        <SelectItem value="XL">XL</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </div>

              {/* Modalidad de Pago */}
              <div className="space-y-4">
                <h3 className="font-semibold text-gray-800 border-b pb-2">Información Administrativa</h3>
                <div>
                  <Label htmlFor="modalidadPago">Modalidad de Pago</Label>
                  <Select
                    value={editData.modalidadPago}
                    onValueChange={(value) => handleEditChange('modalidadPago', value)}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccionar" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="MATRICULA">Solo Matrícula</SelectItem>
                      <SelectItem value="POR_CLASE">Por Clase</SelectItem>
                      <SelectItem value="MENSUAL">Mensual</SelectItem>
                      <SelectItem value="SEMESTRAL">Semestral</SelectItem>
                      <SelectItem value="ANUAL">Anual</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </div>

            <DialogFooter className="flex gap-2">
              <Button
                variant="outline"
                onClick={() => setEditModalOpen(false)}
                disabled={saving}
              >
                <X className="w-4 h-4 mr-2" />
                Cancelar
              </Button>
              <Button
                onClick={saveChanges}
                disabled={saving || !editData.nombres || !editData.apellidos}
                className="bg-green-600 hover:bg-green-700"
              >
                {saving ? (
                  <>
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                    Guardando...
                  </>
                ) : (
                  <>
                    <Save className="w-4 h-4 mr-2" />
                    Guardar Cambios
                  </>
                )}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  )
}