'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 { Checkbox } from '@/components/ui/checkbox';
import { ArrowLeft, Save, Calendar, Users, Check, X } from 'lucide-react';
import { toast } from 'sonner';
import { format } from 'date-fns';
import { es } from 'date-fns/locale';

interface Evento {
  id: string;
  tipo: string;
  descripcion: string;
  fecha: string;
  hora: string;
  lugar: string;
  categorias: string[];
  estado: string;
}

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

interface AsistenciaItem {
  alumnoId: string;
  usuarioId: string;
  nombre: string;
  presente: boolean;
}

export default function AsistenciasPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [eventos, setEventos] = useState<Evento[]>([]);
  const [selectedEvento, setSelectedEvento] = useState<string>('');
  const [eventoActual, setEventoActual] = useState<Evento | null>(null);
  const [alumnos, setAlumnos] = useState<Alumno[]>([]);
  const [asistencias, setAsistencias] = useState<AsistenciaItem[]>([]);

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

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

  const fetchEventos = async () => {
    try {
      const response = await fetch('/api/eventos?estado=PROGRAMADO');
      if (response.ok) {
        const data = await response.json();
        setEventos(data.eventos || []);
      }
    } catch (error) {
      toast.error('Error al cargar eventos');
    }
  };

  const fetchAlumnos = async (categorias: string[]) => {
    try {
      setLoading(true);
      const response = await fetch('/api/alumnos');
      if (response.ok) {
        const data = await response.json();
        // Filtrar alumnos por categorías del evento
        const alumnosFiltrados = (data.alumnos || []).filter((alumno: Alumno) => 
          categorias.includes(alumno.categoria)
        );
        setAlumnos(alumnosFiltrados);
        
        // Inicializar lista de asistencias
        const asistenciasInit: AsistenciaItem[] = alumnosFiltrados.map((alumno: Alumno) => ({
          alumnoId: alumno.id,
          usuarioId: alumno.usuario.id,
          nombre: `${alumno.usuario.nombres} ${alumno.usuario.apellidos}`,
          presente: false
        }));
        setAsistencias(asistenciasInit);
      }
    } catch (error) {
      toast.error('Error al cargar alumnos');
    } finally {
      setLoading(false);
    }
  };

  const handleEventoChange = (eventoId: string) => {
    setSelectedEvento(eventoId);
    const evento = eventos.find(e => e.id === eventoId);
    setEventoActual(evento || null);
    if (evento) {
      fetchAlumnos(evento.categorias);
    }
  };

  const toggleAsistencia = (alumnoId: string) => {
    setAsistencias(prev => 
      prev.map(a => 
        a.alumnoId === alumnoId 
          ? { ...a, presente: !a.presente }
          : a
      )
    );
  };

  const marcarTodos = (presente: boolean) => {
    setAsistencias(prev => prev.map(a => ({ ...a, presente })));
  };

  const handleGuardarAsistencia = async () => {
    if (!selectedEvento) {
      toast.error('Selecciona un evento');
      return;
    }

    setSaving(true);
    try {
      // Guardar cada asistencia
      const promises = asistencias.map(async (asistencia) => {
        const response = await fetch('/api/asistencias', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            eventoId: selectedEvento,
            usuarioId: asistencia.usuarioId,
            presente: asistencia.presente
          })
        });
        return response.ok;
      });

      const results = await Promise.all(promises);
      const exitosos = results.filter(r => r).length;

      if (exitosos === asistencias.length) {
        toast.success(`Asistencia guardada: ${asistencias.filter(a => a.presente).length} presentes de ${asistencias.length}`);
      } else {
        toast.warning(`Se guardaron ${exitosos} de ${asistencias.length} registros`);
      }
    } catch (error) {
      toast.error('Error al guardar asistencia');
    } finally {
      setSaving(false);
    }
  };

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

  const presentes = asistencias.filter(a => a.presente).length;
  const ausentes = asistencias.length - presentes;

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

      {/* Content */}
      <div className="max-w-4xl mx-auto px-4 py-8">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Calendar className="w-5 h-5" />
              Toma de Asistencia
            </CardTitle>
            <CardDescription>
              Selecciona un evento y registra la asistencia de los alumnos
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* Selector de Evento */}
            <div className="space-y-2">
              <label className="text-sm font-medium">Seleccionar Evento</label>
              <Select value={selectedEvento} onValueChange={handleEventoChange}>
                <SelectTrigger>
                  <SelectValue placeholder="Selecciona un evento..." />
                </SelectTrigger>
                <SelectContent>
                  {eventos.map((evento) => (
                    <SelectItem key={evento.id} value={evento.id}>
                      {evento.tipo} - {evento.descripcion} ({format(new Date(evento.fecha), 'dd/MM/yyyy', { locale: es })})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* Info del Evento */}
            {eventoActual && (
              <div className="bg-blue-50 p-4 rounded-lg">
                <h3 className="font-medium text-blue-900">{eventoActual.descripcion}</h3>
                <div className="text-sm text-blue-700 mt-1">
                  <p><strong>Fecha:</strong> {format(new Date(eventoActual.fecha), "EEEE d 'de' MMMM yyyy", { locale: es })}</p>
                  <p><strong>Hora:</strong> {eventoActual.hora}</p>
                  <p><strong>Lugar:</strong> {eventoActual.lugar || 'No especificado'}</p>
                  <p><strong>Categorías:</strong> {eventoActual.categorias.join(', ')}</p>
                </div>
              </div>
            )}

            {/* Lista de Asistencia */}
            {selectedEvento && (
              <>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Users className="w-5 h-5 text-gray-500" />
                    <span className="font-medium">Lista de Alumnos</span>
                    <span className="text-sm text-gray-500">({asistencias.length} alumnos)</span>
                  </div>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm" onClick={() => marcarTodos(true)}>
                      <Check className="w-4 h-4 mr-1" /> Todos Presentes
                    </Button>
                    <Button variant="outline" size="sm" onClick={() => marcarTodos(false)}>
                      <X className="w-4 h-4 mr-1" /> Todos Ausentes
                    </Button>
                  </div>
                </div>

                {/* Estadísticas */}
                <div className="flex gap-4">
                  <div className="flex items-center gap-2 bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
                    <Check className="w-4 h-4" /> Presentes: {presentes}
                  </div>
                  <div className="flex items-center gap-2 bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">
                    <X className="w-4 h-4" /> Ausentes: {ausentes}
                  </div>
                </div>

                {loading ? (
                  <div className="text-center py-8">Cargando alumnos...</div>
                ) : asistencias.length === 0 ? (
                  <div className="text-center py-8 text-gray-500">
                    No hay alumnos en las categorías de este evento
                  </div>
                ) : (
                  <div className="border rounded-lg divide-y">
                    {asistencias.map((asistencia) => (
                      <div
                        key={asistencia.alumnoId}
                        className={`flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 transition-colors ${
                          asistencia.presente ? 'bg-green-50' : ''
                        }`}
                        onClick={() => toggleAsistencia(asistencia.alumnoId)}
                      >
                        <span className="font-medium">{asistencia.nombre}</span>
                        <Checkbox
                          checked={asistencia.presente}
                          onCheckedChange={() => toggleAsistencia(asistencia.alumnoId)}
                          onClick={(e) => e.stopPropagation()}
                        />
                      </div>
                    ))}
                  </div>
                )}

                {/* Botón Guardar */}
                <div className="flex justify-end pt-4">
                  <Button
                    onClick={handleGuardarAsistencia}
                    disabled={saving || asistencias.length === 0}
                    className="bg-green-600 hover:bg-green-700"
                  >
                    <Save className="w-4 h-4 mr-2" />
                    {saving ? 'Guardando...' : 'Guardar Asistencia'}
                  </Button>
                </div>
              </>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}