'use client'

import { useMemo } from 'react'

interface ProgresoSiluetaProps {
  evaluacionesFisicas: Array<{
    puntajeAgilidad: number
    tiempoVelocidad: number | null
    alturaVertical: number | null
    distanciaHorizontal: number | null
    puntajeTotal: number | null
  }>
  evaluacionesDeportivas: Array<{
    tecnica: number
    fuerza: number
    ataque: number
    defensa: number
    resistencia: number
    velocidad: number
    puntajeTotal: number
  }>
  objetivos: Array<{
    progreso: number
    completado: boolean
  }>
  nombre?: string
}

export function ProgresoSilueta({
  evaluacionesFisicas,
  evaluacionesDeportivas,
  objetivos,
  nombre = 'Alumno'
}: ProgresoSiluetaProps) {
  const { progresoTotal, detalles } = useMemo(() => {
    // Calcular progreso de evaluaciones físicas (puntajeAgilidad es de 0-10)
    let progresoFisico = 0
    if (evaluacionesFisicas.length > 0) {
      const ultimaFisica = evaluacionesFisicas[evaluacionesFisicas.length - 1]
      progresoFisico = (ultimaFisica.puntajeAgilidad / 10) * 100
    }

    // Calcular progreso de evaluaciones deportivas (puntajeTotal es de 1-5, promedio)
    let progresoDeportivo = 0
    if (evaluacionesDeportivas.length > 0) {
      const ultimaDeportiva = evaluacionesDeportivas[evaluacionesDeportivas.length - 1]
      progresoDeportivo = ((ultimaDeportiva.puntajeTotal - 1) / 4) * 100
    }

    // Calcular progreso de objetivos
    let progresoObjetivos = 0
    if (objetivos.length > 0) {
      const promedioObjetivos = objetivos.reduce((acc, obj) => acc + obj.progreso, 0) / objetivos.length
      progresoObjetivos = promedioObjetivos
    }

    // Calcular progreso total ponderado
    let totalPonderado = 0
    let factores = 0

    if (evaluacionesFisicas.length > 0) {
      totalPonderado += progresoFisico * 0.3
      factores += 0.3
    }
    if (evaluacionesDeportivas.length > 0) {
      totalPonderado += progresoDeportivo * 0.4
      factores += 0.4
    }
    if (objetivos.length > 0) {
      totalPonderado += progresoObjetivos * 0.3
      factores += 0.3
    }

    const progresoTotal = factores > 0 ? Math.round(totalPonderado / factores) : 0

    return {
      progresoTotal,
      detalles: {
        fisico: Math.round(progresoFisico),
        deportivo: Math.round(progresoDeportivo),
        objetivos: Math.round(progresoObjetivos)
      }
    }
  }, [evaluacionesFisicas, evaluacionesDeportivas, objetivos])

  // Determinar color según progreso
  const getColor = (progreso: number) => {
    if (progreso >= 80) return '#22c55e' // green-500
    if (progreso >= 60) return '#84cc16' // lime-500
    if (progreso >= 40) return '#eab308' // yellow-500
    if (progreso >= 20) return '#f97316' // orange-500
    return '#ef4444' // red-500
  }

  const fillColor = getColor(progresoTotal)
  const fillHeight = progresoTotal // percentage

  // Obtener etiqueta descriptiva
  const getEtiqueta = (progreso: number) => {
    if (progreso >= 80) return 'Excelente'
    if (progreso >= 60) return 'Muy Bien'
    if (progreso >= 40) return 'En Progreso'
    if (progreso >= 20) return 'Iniciando'
    return 'Sin evaluar'
  }

  return (
    <div className="flex flex-col items-center p-4 bg-gradient-to-b from-green-50 to-white rounded-xl border border-green-100">
      <h3 className="text-lg font-semibold text-gray-700 mb-2">Progreso de Desarrollo</h3>
      
      <div className="relative w-48 h-64">
        {/* SVG Silueta de niño/niña futbolista */}
        <svg
          viewBox="0 0 200 300"
          className="w-full h-full"
          style={{ overflow: 'visible' }}
        >
          {/* Definición del gradiente de progreso */}
          <defs>
            <linearGradient id="progressGradient" x1="0%" y1="100%" x2="0%" y2="0%">
              <stop offset="0%" stopColor={fillColor} stopOpacity="0.9" />
              <stop offset={`${fillHeight}%`} stopColor={fillColor} stopOpacity="0.9" />
              <stop offset={`${fillHeight}%`} stopColor="#e5e7eb" stopOpacity="0.5" />
              <stop offset="100%" stopColor="#e5e7eb" stopOpacity="0.5" />
            </linearGradient>
            <linearGradient id="shineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="white" stopOpacity="0.3" />
              <stop offset="50%" stopColor="white" stopOpacity="0" />
              <stop offset="100%" stopColor="white" stopOpacity="0.1" />
            </linearGradient>
            {/* Clip path para la silueta */}
            <clipPath id="siluetaClip">
              {/* Cabeza */}
              <circle cx="100" cy="35" r="28" />
              {/* Cuello */}
              <rect x="90" y="58" width="20" height="15" />
              {/* Cuerpo - camiseta */}
              <path d="M60 73 L140 73 L145 140 L55 140 Z" />
              {/* Brazos */}
              <path d="M60 73 L40 75 L35 120 L50 122 L55 90 L60 90" />
              <path d="M140 73 L160 75 L165 120 L150 122 L145 90 L140 90" />
              {/* Pantalón */}
              <path d="M55 140 L65 190 L85 190 L100 155 L115 190 L135 190 L145 140 Z" />
              {/* Piernas */}
              <rect x="65" y="190" width="22" height="60" rx="5" />
              <rect x="113" y="190" width="22" height="60" rx="5" />
              {/* Pies - botines */}
              <ellipse cx="76" cy="260" rx="18" ry="12" />
              <ellipse cx="124" cy="260" rx="18" ry="12" />
              {/* Balón de fútbol */}
              <circle cx="165" cy="250" r="22" />
            </clipPath>
          </defs>

          {/* Fondo de la silueta (parte no completada) */}
          <g clipPath="url(#siluetaClip)">
            <rect x="0" y="0" width="200" height="300" fill="#e5e7eb" opacity="0.5" />
            {/* Relleno de progreso */}
            <rect 
              x="0" 
              y={300 - (fillHeight * 2.8)} 
              width="200" 
              height={fillHeight * 2.8} 
              fill={fillColor}
              opacity="0.85"
            />
          </g>

          {/* Borde de la silueta */}
          {/* Cabeza */}
          <circle cx="100" cy="35" r="28" fill="none" stroke="#374151" strokeWidth="2" />
          {/* Pelo corto estilo futbolista */}
          <path 
            d="M72 28 Q75 10, 100 8 Q125 10, 128 28" 
            fill="none" 
            stroke="#374151" 
            strokeWidth="3"
          />
          {/* Cara - ojos y sonrisa */}
          <circle cx="88" cy="32" r="3" fill="#374151" />
          <circle cx="112" cy="32" r="3" fill="#374151" />
          <path d="M90 45 Q100 52, 110 45" fill="none" stroke="#374151" strokeWidth="2" />
          
          {/* Cuello */}
          <rect x="90" y="58" width="20" height="15" fill="none" stroke="#374151" strokeWidth="2" />
          
          {/* Cuerpo - camiseta con detalles */}
          <path d="M60 73 L140 73 L145 140 L55 140 Z" fill="none" stroke="#374151" strokeWidth="2" />
          {/* Número en camiseta */}
          <text x="100" y="115" textAnchor="middle" fontSize="24" fontWeight="bold" fill="#374151" opacity="0.6">10</text>
          
          {/* Brazos */}
          <path d="M60 73 L40 75 L35 120 L50 122 L55 90" fill="none" stroke="#374151" strokeWidth="2" />
          <path d="M140 73 L160 75 L165 120 L150 122 L145 90" fill="none" stroke="#374151" strokeWidth="2" />
          
          {/* Manos */}
          <circle cx="42" cy="123" r="8" fill="none" stroke="#374151" strokeWidth="2" />
          <circle cx="158" cy="123" r="8" fill="none" stroke="#374151" strokeWidth="2" />
          
          {/* Pantalón */}
          <path d="M55 140 L65 190 L85 190 L100 155 L115 190 L135 190 L145 140 Z" fill="none" stroke="#374151" strokeWidth="2" />
          
          {/* Piernas */}
          <rect x="65" y="190" width="22" height="60" rx="5" fill="none" stroke="#374151" strokeWidth="2" />
          <rect x="113" y="190" width="22" height="60" rx="5" fill="none" stroke="#374151" strokeWidth="2" />
          
          {/* Canilleras */}
          <rect x="68" y="210" width="16" height="25" rx="3" fill="none" stroke="#374151" strokeWidth="1.5" />
          <rect x="116" y="210" width="16" height="25" rx="3" fill="none" stroke="#374151" strokeWidth="1.5" />
          
          {/* Pies - botines */}
          <ellipse cx="76" cy="260" rx="18" ry="12" fill="none" stroke="#374151" strokeWidth="2" />
          <ellipse cx="124" cy="260" rx="18" ry="12" fill="none" stroke="#374151" strokeWidth="2" />
          {/* Tacos */}
          <line x1="63" y1="268" x2="63" y2="275" stroke="#374151" strokeWidth="2" />
          <line x1="76" y1="270" x2="76" y2="277" stroke="#374151" strokeWidth="2" />
          <line x1="89" y1="268" x2="89" y2="275" stroke="#374151" strokeWidth="2" />
          <line x1="111" y1="268" x2="111" y2="275" stroke="#374151" strokeWidth="2" />
          <line x1="124" y1="270" x2="124" y2="277" stroke="#374151" strokeWidth="2" />
          <line x1="137" y1="268" x2="137" y2="275" stroke="#374151" strokeWidth="2" />
          
          {/* Balón de fútbol */}
          <circle cx="165" cy="250" r="22" fill="none" stroke="#374151" strokeWidth="2" />
          {/* Patrón del balón */}
          <path d="M165 228 L160 240 L170 240 Z" fill="#374151" />
          <path d="M148 255 L158 250 L155 260 Z" fill="#374151" />
          <path d="M182 255 L172 250 L175 260 Z" fill="#374151" />
          <path d="M155 268 L165 262 L175 268" fill="none" stroke="#374151" strokeWidth="1.5" />
        </svg>

        {/* Indicador de porcentaje */}
        <div 
          className="absolute -right-2 flex items-center justify-center w-16 h-16 rounded-full shadow-lg border-4 border-white"
          style={{ 
            backgroundColor: fillColor,
            top: `${100 - fillHeight}%`,
            transform: 'translateY(-50%)'
          }}
        >
          <span className="text-white font-bold text-lg">{progresoTotal}%</span>
        </div>
      </div>

      {/* Etiqueta descriptiva */}
      <div 
        className="mt-3 px-4 py-2 rounded-full text-white font-semibold text-sm shadow-md"
        style={{ backgroundColor: fillColor }}
      >
        {getEtiqueta(progresoTotal)}
      </div>

      {/* Desglose de progreso */}
      <div className="mt-4 w-full space-y-2">
        <div className="flex items-center justify-between text-sm">
          <span className="text-gray-600 flex items-center gap-2">
            <span className="w-3 h-3 rounded-full bg-blue-500"></span>
            Físico
          </span>
          <span className="font-medium">
            {evaluacionesFisicas.length > 0 ? `${detalles.fisico}%` : 'Sin evaluar'}
          </span>
        </div>
        <div className="w-full bg-gray-200 rounded-full h-2">
          <div 
            className="bg-blue-500 h-2 rounded-full transition-all duration-500"
            style={{ width: `${detalles.fisico}%` }}
          />
        </div>

        <div className="flex items-center justify-between text-sm mt-2">
          <span className="text-gray-600 flex items-center gap-2">
            <span className="w-3 h-3 rounded-full bg-amber-500"></span>
            Deportivo
          </span>
          <span className="font-medium">
            {evaluacionesDeportivas.length > 0 ? `${detalles.deportivo}%` : 'Sin evaluar'}
          </span>
        </div>
        <div className="w-full bg-gray-200 rounded-full h-2">
          <div 
            className="bg-amber-500 h-2 rounded-full transition-all duration-500"
            style={{ width: `${detalles.deportivo}%` }}
          />
        </div>

        <div className="flex items-center justify-between text-sm mt-2">
          <span className="text-gray-600 flex items-center gap-2">
            <span className="w-3 h-3 rounded-full bg-purple-500"></span>
            Objetivos
          </span>
          <span className="font-medium">
            {objetivos.length > 0 ? `${detalles.objetivos}%` : 'Sin objetivos'}
          </span>
        </div>
        <div className="w-full bg-gray-200 rounded-full h-2">
          <div 
            className="bg-purple-500 h-2 rounded-full transition-all duration-500"
            style={{ width: `${detalles.objetivos}%` }}
          />
        </div>
      </div>

      {/* Leyenda */}
      <div className="mt-4 text-xs text-gray-500 text-center">
        <p>El progreso se calcula basado en las últimas evaluaciones</p>
        <p>del profesor y el avance en objetivos individuales.</p>
      </div>
    </div>
  )
}