'use client';

import { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Checkbox } from '@/components/ui/checkbox';
import { Slider } from '@/components/ui/slider';
import { ArrowLeft, Save, Trophy } from 'lucide-react';
import { toast } from 'sonner';

interface Alumno {
  id: string;
  categoria: string;
  usuario: {
    id: string;
    nombres: string;
    apellidos: string;
  };
}

const POSICIONES = [
  'Portero',
  'Defensa Central',
  'Lateral Derecho',
  'Lateral Izquierdo',
  'Mediocampista Central',
  'Mediocampista Ofensivo',
  'Mediocampista Defensivo',
  'Extremo Derecho',
  'Extremo Izquierdo',
  'Delantero Centro',
  'Segundo Delantero'
];

const CRITERIOS = [
  { key: 'tecnica', label: 'Técnica', description: 'Control del balón, pases, regate' },
  { key: 'fuerza', label: 'Fuerza', description: 'Potencia física y disparo' },
  { key: 'ataque', label: 'Ataque', description: 'Capacidad ofensiva y finalización' },
  { key: 'defensa', label: 'Defensa', description: 'Marcaje, anticipación, recuperación' },
  { key: 'resistencia', label: 'Resistencia', description: 'Aguante físico durante el partido' },
  { key: 'velocidad', label: 'Velocidad', description: 'Rapidez en desplazamientos' }
];

export default function NuevaEvaluacionDeportivaPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [alumnos, setAlumnos] = useState<Alumno[]>([]);
  
  const [formData, setFormData] = useState({
    alumnoId: '',
    tecnica: 3,
    fuerza: 3,
    ataque: 3,
    defensa: 3,
    resistencia: 3,
    velocidad: 3,
    posicionesPreferentes: [] as string[],
    observaciones: ''
  });

  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/auth/signin');
    } else if (status === 'authenticated') {
      if (session?.user?.rol !== 'COORDINADOR' && session?.user?.rol !== 'PROFESOR') {
        toast.error('No tienes permisos para crear evaluaciones');
        router.push('/dashboard');
      }
    }
  }, [status, session, router]);

  useEffect(() => {
    fetchAlumnos();
  }, []);

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

  const togglePosicion = (posicion: string) => {
    setFormData(prev => {
      const existe = prev.posicionesPreferentes.includes(posicion);
      return {
        ...prev,
        posicionesPreferentes: existe
          ? prev.posicionesPreferentes.filter(p => p !== posicion)
          : [...prev.posicionesPreferentes, posicion]
      };
    });
  };

  const calcularPuntajeTotal = () => {
    const suma = formData.tecnica + formData.fuerza + formData.ataque + 
                 formData.defensa + formData.resistencia + formData.velocidad;
    return (suma / 6).toFixed(1);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!formData.alumnoId) {
      toast.error('Selecciona un alumno');
      return;
    }

    setLoading(true);
    try {
      const puntajeTotal = parseFloat(calcularPuntajeTotal());
      
      const response = await fetch('/api/evaluaciones/deportivas', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          alumnoId: formData.alumnoId,
          tecnica: formData.tecnica,
          fuerza: formData.fuerza,
          ataque: formData.ataque,
          defensa: formData.defensa,
          resistencia: formData.resistencia,
          velocidad: formData.velocidad,
          puntajeTotal,
          posicionesPreferentes: formData.posicionesPreferentes,
          observaciones: formData.observaciones
        })
      });

      if (response.ok) {
        toast.success('Evaluación deportiva creada exitosamente');
        router.push('/dashboard/evaluaciones');
      } else {
        const error = await response.json();
        toast.error(error.error || 'Error al crear evaluación');
      }
    } catch (error) {
      toast.error('Error de conexión');
    } finally {
      setLoading(false);
    }
  };

  if (status === 'loading') {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-lg">Cargando...</div>
      </div>
    );
  }

  const getColorByValue = (value: number) => {
    if (value <= 2) return 'text-red-600';
    if (value <= 3) return 'text-yellow-600';
    return 'text-green-600';
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 py-4">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => router.push('/dashboard/evaluaciones')}
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Volver a Evaluaciones
          </Button>
        </div>
      </header>

      {/* Content */}
      <div className="max-w-4xl mx-auto px-4 py-8">
        <form onSubmit={handleSubmit}>
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="flex items-center gap-2">
                    <Trophy className="w-5 h-5" />
                    Nueva Evaluación Deportiva
                  </CardTitle>
                  <CardDescription>
                    Evalúa las habilidades deportivas del alumno (escala 1-5)
                  </CardDescription>
                </div>
                <div className="bg-green-100 text-green-800 px-4 py-2 rounded-lg text-lg font-bold">
                  Promedio: {calcularPuntajeTotal()}
                </div>
              </div>
            </CardHeader>
            <CardContent className="space-y-8">
              {/* Selector de Alumno */}
              <div className="space-y-2">
                <Label>Alumno *</Label>
                <Select
                  value={formData.alumnoId}
                  onValueChange={(value) => setFormData({ ...formData, alumnoId: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Selecciona un alumno..." />
                  </SelectTrigger>
                  <SelectContent>
                    {alumnos.map((alumno) => (
                      <SelectItem key={alumno.id} value={alumno.id}>
                        {alumno.usuario.nombres} {alumno.usuario.apellidos} ({alumno.categoria})
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* Criterios de Evaluación */}
              <div className="space-y-6">
                <h3 className="text-lg font-semibold">Criterios de Evaluación</h3>
                {CRITERIOS.map((criterio) => (
                  <div key={criterio.key} className="space-y-2">
                    <div className="flex items-center justify-between">
                      <div>
                        <Label className="text-base">{criterio.label}</Label>
                        <p className="text-sm text-gray-500">{criterio.description}</p>
                      </div>
                      <span className={`text-2xl font-bold ${getColorByValue(formData[criterio.key as keyof typeof formData] as number)}`}>
                        {formData[criterio.key as keyof typeof formData]}
                      </span>
                    </div>
                    <Slider
                      value={[formData[criterio.key as keyof typeof formData] as number]}
                      onValueChange={(value) => setFormData({ ...formData, [criterio.key]: value[0] })}
                      max={5}
                      min={1}
                      step={1}
                      className="w-full"
                    />
                    <div className="flex justify-between text-xs text-gray-400">
                      <span>1 - Muy bajo</span>
                      <span>2 - Bajo</span>
                      <span>3 - Medio</span>
                      <span>4 - Alto</span>
                      <span>5 - Excelente</span>
                    </div>
                  </div>
                ))}
              </div>

              {/* Posiciones Preferentes */}
              <div className="space-y-4">
                <Label className="text-lg font-semibold">Posiciones Preferentes</Label>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                  {POSICIONES.map((posicion) => (
                    <div
                      key={posicion}
                      className={`flex items-center gap-2 p-3 border rounded-lg cursor-pointer transition-colors ${
                        formData.posicionesPreferentes.includes(posicion)
                          ? 'bg-blue-50 border-blue-300'
                          : 'hover:bg-gray-50'
                      }`}
                      onClick={() => togglePosicion(posicion)}
                    >
                      <Checkbox
                        checked={formData.posicionesPreferentes.includes(posicion)}
                        onCheckedChange={() => togglePosicion(posicion)}
                      />
                      <span className="text-sm">{posicion}</span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Observaciones */}
              <div className="space-y-2">
                <Label htmlFor="observaciones">Observaciones</Label>
                <Textarea
                  id="observaciones"
                  placeholder="Notas adicionales sobre el rendimiento del alumno..."
                  value={formData.observaciones}
                  onChange={(e) => setFormData({ ...formData, observaciones: e.target.value })}
                  rows={3}
                />
              </div>

              {/* Botones */}
              <div className="flex items-center gap-4 pt-4">
                <Button type="submit" disabled={loading}>
                  <Save className="w-4 h-4 mr-2" />
                  {loading ? 'Guardando...' : 'Guardar Evaluación'}
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => router.push('/dashboard/evaluaciones')}
                  disabled={loading}
                >
                  Cancelar
                </Button>
              </div>
            </CardContent>
          </Card>
        </form>
      </div>
    </div>
  );
}