'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 { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Checkbox } from '@/components/ui/checkbox';
import { ArrowLeft, Save, Activity } from 'lucide-react';
import { toast } from 'sonner';

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

const POSTURAS = [
  'Sentadilla profunda',
  'Paso al frente',
  'Alineación en línea',
  'Movilidad de hombro',
  'Elevación de pierna recta',
  'Estabilidad del tronco',
  'Estabilidad en rotación',
  'Sentadilla con brazos',
  'Equilibrio unipodal',
  'Flexibilidad dorsal'
];

export default function NuevaEvaluacionFisicaPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [alumnos, setAlumnos] = useState<Alumno[]>([]);
  
  const [formData, setFormData] = useState({
    alumnoId: '',
    posturas: [false, false, false, false, false, false, false, false, false, false],
    tiempoVelocidad: '',
    alturaVertical: '',
    distanciaHorizontal: '',
    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 togglePostura = (index: number) => {
    const newPosturas = [...formData.posturas];
    newPosturas[index] = !newPosturas[index];
    setFormData({ ...formData, posturas: newPosturas });
  };

  const calcularPuntajeAgilidad = () => {
    return formData.posturas.filter(p => p).length;
  };

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

    setLoading(true);
    try {
      const puntajeAgilidad = calcularPuntajeAgilidad();
      
      const response = await fetch('/api/evaluaciones/fisicas', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          alumnoId: formData.alumnoId,
          postura1: formData.posturas[0],
          postura2: formData.posturas[1],
          postura3: formData.posturas[2],
          postura4: formData.posturas[3],
          postura5: formData.posturas[4],
          postura6: formData.posturas[5],
          postura7: formData.posturas[6],
          postura8: formData.posturas[7],
          postura9: formData.posturas[8],
          postura10: formData.posturas[9],
          puntajeAgilidad,
          tiempoVelocidad: formData.tiempoVelocidad ? parseFloat(formData.tiempoVelocidad) : null,
          alturaVertical: formData.alturaVertical ? parseFloat(formData.alturaVertical) : null,
          distanciaHorizontal: formData.distanciaHorizontal ? parseFloat(formData.distanciaHorizontal) : null,
          observaciones: formData.observaciones
        })
      });

      if (response.ok) {
        toast.success('Evaluación física 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>
    );
  }

  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>
              <CardTitle className="flex items-center gap-2">
                <Activity className="w-5 h-5" />
                Nueva Evaluación Física
              </CardTitle>
              <CardDescription>
                Registra los resultados de las pruebas físicas del alumno
              </CardDescription>
            </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>

              {/* Test de Agilidad - 10 Posturas */}
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold">Test de Agilidad (10 Posturas)</h3>
                  <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                    Puntaje: {calcularPuntajeAgilidad()}/10
                  </span>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                  {POSTURAS.map((postura, index) => (
                    <div
                      key={index}
                      className={`flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition-colors ${
                        formData.posturas[index] ? 'bg-green-50 border-green-300' : 'hover:bg-gray-50'
                      }`}
                      onClick={() => togglePostura(index)}
                    >
                      <Checkbox
                        checked={formData.posturas[index]}
                        onCheckedChange={() => togglePostura(index)}
                      />
                      <span className="text-sm">{index + 1}. {postura}</span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Test de Velocidad */}
              <div className="space-y-2">
                <Label htmlFor="tiempoVelocidad">Test de Velocidad 15m (segundos)</Label>
                <Input
                  id="tiempoVelocidad"
                  type="number"
                  step="0.01"
                  placeholder="Ej: 3.25"
                  value={formData.tiempoVelocidad}
                  onChange={(e) => setFormData({ ...formData, tiempoVelocidad: e.target.value })}
                />
              </div>

              {/* Test de Saltabilidad */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="alturaVertical">Salto Vertical (cm)</Label>
                  <Input
                    id="alturaVertical"
                    type="number"
                    step="0.1"
                    placeholder="Ej: 35.5"
                    value={formData.alturaVertical}
                    onChange={(e) => setFormData({ ...formData, alturaVertical: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="distanciaHorizontal">Salto Horizontal (cm)</Label>
                  <Input
                    id="distanciaHorizontal"
                    type="number"
                    step="0.1"
                    placeholder="Ej: 150.0"
                    value={formData.distanciaHorizontal}
                    onChange={(e) => setFormData({ ...formData, distanciaHorizontal: e.target.value })}
                  />
                </div>
              </div>

              {/* Observaciones */}
              <div className="space-y-2">
                <Label htmlFor="observaciones">Observaciones</Label>
                <Textarea
                  id="observaciones"
                  placeholder="Notas adicionales sobre la evaluación..."
                  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>
  );
}