'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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ArrowLeft, Plus, Activity, Trophy, Eye } from 'lucide-react';
import { toast } from 'sonner';
import { format } from 'date-fns';
import { es } from 'date-fns/locale';

interface EvaluacionFisica {
  id: string;
  fecha: string;
  puntajeAgilidad: number;
  puntajeVelocidad: number;
  puntajeVertical: number;
  puntajeHorizontal: number;
  puntajeTotal: number;
  observaciones: string;
  alumno: {
    usuario: {
      nombres: string;
      apellidos: string;
    };
  };
  evaluador: {
    nombres: string;
    apellidos: string;
  };
}

interface EvaluacionDeportiva {
  id: string;
  fecha: string;
  tecnica: number;
  fuerza: number;
  ataque: number;
  defensa: number;
  resistencia: number;
  velocidad: number;
  puntajeTotal: number;
  posicionesPreferentes: string[];
  observaciones: string;
  alumno: {
    usuario: {
      nombres: string;
      apellidos: string;
    };
  };
  evaluador: {
    nombres: string;
    apellidos: string;
  };
}

export default function EvaluacionesPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [evaluacionesFisicas, setEvaluacionesFisicas] = useState<EvaluacionFisica[]>([]);
  const [evaluacionesDeportivas, setEvaluacionesDeportivas] = useState<EvaluacionDeportiva[]>([]);

  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/auth/signin');
    }
  }, [status, router]);

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

  const fetchEvaluaciones = async () => {
    try {
      setLoading(true);
      const [fisicasRes, deportivasRes] = await Promise.all([
        fetch('/api/evaluaciones/fisicas'),
        fetch('/api/evaluaciones/deportivas')
      ]);

      if (fisicasRes.ok) {
        const data = await fisicasRes.json();
        setEvaluacionesFisicas(data.evaluaciones || []);
      }

      if (deportivasRes.ok) {
        const data = await deportivasRes.json();
        setEvaluacionesDeportivas(data.evaluaciones || []);
      }
    } catch (error) {
      toast.error('Error al cargar evaluaciones');
    } finally {
      setLoading(false);
    }
  };

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

  const canCreate = session?.user?.rol === 'COORDINADOR' || session?.user?.rol === 'PROFESOR';

  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">
          <div className="flex items-center justify-between">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => router.push('/dashboard')}
            >
              <ArrowLeft className="w-4 h-4 mr-2" />
              Volver al Dashboard
            </Button>
          </div>
        </div>
      </header>

      {/* Content */}
      <div className="max-w-6xl mx-auto px-4 py-8">
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>Evaluaciones</CardTitle>
                <CardDescription>
                  Gestiona las evaluaciones físicas y deportivas de los alumnos
                </CardDescription>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <Tabs defaultValue="fisicas" className="w-full">
              <TabsList className="grid w-full grid-cols-2">
                <TabsTrigger value="fisicas" className="flex items-center gap-2">
                  <Activity className="w-4 h-4" />
                  Evaluaciones Físicas
                </TabsTrigger>
                <TabsTrigger value="deportivas" className="flex items-center gap-2">
                  <Trophy className="w-4 h-4" />
                  Evaluaciones Deportivas
                </TabsTrigger>
              </TabsList>

              {/* Tab Evaluaciones Físicas */}
              <TabsContent value="fisicas" className="space-y-4">
                {canCreate && (
                  <div className="flex justify-end">
                    <Button onClick={() => router.push('/dashboard/evaluaciones/fisicas/nueva')}>
                      <Plus className="w-4 h-4 mr-2" />
                      Nueva Evaluación Física
                    </Button>
                  </div>
                )}

                {evaluacionesFisicas.length === 0 ? (
                  <div className="text-center py-8 text-gray-500">
                    No hay evaluaciones físicas registradas
                  </div>
                ) : (
                  <div className="overflow-x-auto">
                    <table className="w-full">
                      <thead>
                        <tr className="border-b bg-gray-50">
                          <th className="text-left p-3 font-medium">Fecha</th>
                          <th className="text-left p-3 font-medium">Alumno</th>
                          <th className="text-left p-3 font-medium">Agilidad</th>
                          <th className="text-left p-3 font-medium">Velocidad</th>
                          <th className="text-left p-3 font-medium">Salto V.</th>
                          <th className="text-left p-3 font-medium">Salto H.</th>
                          <th className="text-left p-3 font-medium">Total</th>
                          <th className="text-left p-3 font-medium">Evaluador</th>
                        </tr>
                      </thead>
                      <tbody>
                        {evaluacionesFisicas.map((ev) => (
                          <tr key={ev.id} className="border-b hover:bg-gray-50">
                            <td className="p-3">
                              {format(new Date(ev.fecha), 'dd/MM/yyyy', { locale: es })}
                            </td>
                            <td className="p-3">
                              {ev.alumno?.usuario?.nombres} {ev.alumno?.usuario?.apellidos}
                            </td>
                            <td className="p-3">{ev.puntajeAgilidad}/10</td>
                            <td className="p-3">{ev.puntajeVelocidad?.toFixed(1) || 0}</td>
                            <td className="p-3">{ev.puntajeVertical?.toFixed(1) || 0}</td>
                            <td className="p-3">{ev.puntajeHorizontal?.toFixed(1) || 0}</td>
                            <td className="p-3 font-medium">
                              <span className="bg-blue-100 text-blue-800 px-2 py-1 rounded">
                                {ev.puntajeTotal?.toFixed(1) || 0}
                              </span>
                            </td>
                            <td className="p-3 text-sm text-gray-600">
                              {ev.evaluador?.nombres} {ev.evaluador?.apellidos}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </TabsContent>

              {/* Tab Evaluaciones Deportivas */}
              <TabsContent value="deportivas" className="space-y-4">
                {canCreate && (
                  <div className="flex justify-end">
                    <Button onClick={() => router.push('/dashboard/evaluaciones/deportivas/nueva')}>
                      <Plus className="w-4 h-4 mr-2" />
                      Nueva Evaluación Deportiva
                    </Button>
                  </div>
                )}

                {evaluacionesDeportivas.length === 0 ? (
                  <div className="text-center py-8 text-gray-500">
                    No hay evaluaciones deportivas registradas
                  </div>
                ) : (
                  <div className="overflow-x-auto">
                    <table className="w-full">
                      <thead>
                        <tr className="border-b bg-gray-50">
                          <th className="text-left p-3 font-medium">Fecha</th>
                          <th className="text-left p-3 font-medium">Alumno</th>
                          <th className="text-left p-3 font-medium">Técnica</th>
                          <th className="text-left p-3 font-medium">Fuerza</th>
                          <th className="text-left p-3 font-medium">Ataque</th>
                          <th className="text-left p-3 font-medium">Defensa</th>
                          <th className="text-left p-3 font-medium">Resistencia</th>
                          <th className="text-left p-3 font-medium">Total</th>
                          <th className="text-left p-3 font-medium">Posiciones</th>
                        </tr>
                      </thead>
                      <tbody>
                        {evaluacionesDeportivas.map((ev) => (
                          <tr key={ev.id} className="border-b hover:bg-gray-50">
                            <td className="p-3">
                              {format(new Date(ev.fecha), 'dd/MM/yyyy', { locale: es })}
                            </td>
                            <td className="p-3">
                              {ev.alumno?.usuario?.nombres} {ev.alumno?.usuario?.apellidos}
                            </td>
                            <td className="p-3">{ev.tecnica}/5</td>
                            <td className="p-3">{ev.fuerza}/5</td>
                            <td className="p-3">{ev.ataque}/5</td>
                            <td className="p-3">{ev.defensa}/5</td>
                            <td className="p-3">{ev.resistencia}/5</td>
                            <td className="p-3 font-medium">
                              <span className="bg-green-100 text-green-800 px-2 py-1 rounded">
                                {ev.puntajeTotal?.toFixed(1) || 0}
                              </span>
                            </td>
                            <td className="p-3 text-sm">
                              {ev.posicionesPreferentes?.join(', ') || '-'}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}