"use client";

import { useSession } from "next-auth/react";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { 
  ArrowLeft, 
  Search, 
  Filter, 
  Eye, 
  CheckCircle, 
  XCircle,
  Calendar
} from "lucide-react";
import Link from "next/link";
import { useToast } from "@/hooks/use-toast";

interface Inscripcion {
  id: string;
  nombreEstudiante: string;
  apellidoEstudiante: string;
  fechaNacimiento: string;
  nombreContacto: string;
  apellidoContacto: string;
  telefonoContacto: string;
  emailContacto: string;
  estado: string;
  provincia: { nombre: string };
  comuna: { nombre: string };
  deporte?: { nombre: string };
  createdAt: string;
}

export default function InscripcionesAdminPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const { toast } = useToast();
  const [inscripciones, setInscripciones] = useState<Inscripcion[]>([]);
  const [filteredInscripciones, setFilteredInscripciones] = useState<Inscripcion[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState("todas");

  useEffect(() => {
    if (status === "loading") return;
    
    if (!session?.user || session.user.rol !== 'admin') {
      router.push('/admin/login');
      return;
    }

    fetchInscripciones();
  }, [session, status, router]);

  useEffect(() => {
    filterInscripciones();
  }, [inscripciones, searchTerm, statusFilter]);

  const fetchInscripciones = async () => {
    try {
      const response = await fetch('/api/inscripciones');
      if (response.ok) {
        const data = await response.json();
        setInscripciones(data);
      }
    } catch (error) {
      console.error('Error fetching inscripciones:', error);
      toast({
        title: "Error",
        description: "Error al cargar las inscripciones",
        variant: "destructive",
      });
    } finally {
      setIsLoading(false);
    }
  };

  const filterInscripciones = () => {
    let filtered = inscripciones;

    if (statusFilter !== "todas") {
      filtered = filtered.filter(i => i.estado === statusFilter);
    }

    if (searchTerm) {
      filtered = filtered.filter(i => 
        i.nombreEstudiante.toLowerCase().includes(searchTerm.toLowerCase()) ||
        i.apellidoEstudiante.toLowerCase().includes(searchTerm.toLowerCase()) ||
        i.nombreContacto.toLowerCase().includes(searchTerm.toLowerCase()) ||
        i.emailContacto.toLowerCase().includes(searchTerm.toLowerCase())
      );
    }

    setFilteredInscripciones(filtered);
  };

  const updateEstado = async (id: string, nuevoEstado: string) => {
    try {
      const response = await fetch(`/api/inscripciones/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ estado: nuevoEstado }),
      });

      if (response.ok) {
        toast({
          title: "Estado actualizado",
          description: `Inscripción ${nuevoEstado === 'aprobada' ? 'aprobada' : 'rechazada'} exitosamente`,
        });
        fetchInscripciones();
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Error al actualizar el estado",
        variant: "destructive",
      });
    }
  };

  const getStatusBadge = (estado: string) => {
    const configs = {
      pendiente: { color: "bg-yellow-100 text-yellow-800", label: "Pendiente" },
      aprobada: { color: "bg-green-100 text-green-800", label: "Aprobada" },
      rechazada: { color: "bg-red-100 text-red-800", label: "Rechazada" },
      en_curso: { color: "bg-blue-100 text-blue-800", label: "En Curso" },
    };

    const config = configs[estado as keyof typeof configs] || configs.pendiente;
    return <Badge className={config.color}>{config.label}</Badge>;
  };

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

  if (!session?.user || session.user.rol !== 'admin') {
    return null;
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b border-gray-200">
        <div className="container-custom">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center space-x-4">
              <Link 
                href="/admin/dashboard"
                className="inline-flex items-center text-gray-600 hover:text-[#00B8D4]"
              >
                <ArrowLeft className="h-4 w-4 mr-2" />
                Dashboard
              </Link>
              <h1 className="heading-primary text-2xl text-[#0A2240]">
                Gestión de Inscripciones
              </h1>
            </div>
          </div>
        </div>
      </header>

      <div className="container-custom py-8">
        {/* Filters */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Filtros</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-col md:flex-row gap-4">
              <div className="flex-1">
                <div className="relative">
                  <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                  <Input
                    placeholder="Buscar por nombre del estudiante o contacto..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-10"
                  />
                </div>
              </div>
              <div className="w-48">
                <Select value={statusFilter} onValueChange={setStatusFilter}>
                  <SelectTrigger>
                    <Filter className="h-4 w-4 mr-2" />
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="todas">Todas</SelectItem>
                    <SelectItem value="pendiente">Pendientes</SelectItem>
                    <SelectItem value="aprobada">Aprobadas</SelectItem>
                    <SelectItem value="rechazada">Rechazadas</SelectItem>
                    <SelectItem value="en_curso">En Curso</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Stats */}
        <div className="grid md:grid-cols-4 gap-4 mb-6">
          <Card>
            <CardContent className="p-4 text-center">
              <div className="text-2xl font-bold text-yellow-600">
                {inscripciones.filter(i => i.estado === 'pendiente').length}
              </div>
              <div className="text-sm text-gray-600">Pendientes</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4 text-center">
              <div className="text-2xl font-bold text-green-600">
                {inscripciones.filter(i => i.estado === 'aprobada').length}
              </div>
              <div className="text-sm text-gray-600">Aprobadas</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4 text-center">
              <div className="text-2xl font-bold text-red-600">
                {inscripciones.filter(i => i.estado === 'rechazada').length}
              </div>
              <div className="text-sm text-gray-600">Rechazadas</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4 text-center">
              <div className="text-2xl font-bold text-blue-600">
                {inscripciones.filter(i => i.estado === 'en_curso').length}
              </div>
              <div className="text-sm text-gray-600">En Curso</div>
            </CardContent>
          </Card>
        </div>

        {/* Inscripciones List */}
        <div className="space-y-4">
          {filteredInscripciones.length === 0 ? (
            <Card>
              <CardContent className="p-8 text-center">
                <div className="text-gray-500">
                  {searchTerm || statusFilter !== "todas" 
                    ? "No se encontraron inscripciones con los filtros aplicados" 
                    : "No hay inscripciones registradas"}
                </div>
              </CardContent>
            </Card>
          ) : (
            filteredInscripciones.map((inscripcion) => (
              <Card key={inscripcion.id}>
                <CardContent className="p-6">
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center space-x-2 mb-2">
                        <h3 className="text-lg font-semibold">
                          {inscripcion.nombreEstudiante} {inscripcion.apellidoEstudiante}
                        </h3>
                        {getStatusBadge(inscripcion.estado)}
                      </div>
                      
                      <div className="grid md:grid-cols-2 gap-4 text-sm text-gray-600">
                        <div>
                          <p><strong>Contacto:</strong> {inscripcion.nombreContacto} {inscripcion.apellidoContacto}</p>
                          <p><strong>Email:</strong> {inscripcion.emailContacto}</p>
                          <p><strong>Teléfono:</strong> {inscripcion.telefonoContacto}</p>
                        </div>
                        <div>
                          <p><strong>Ubicación:</strong> {inscripcion.comuna.nombre}, {inscripcion.provincia.nombre}</p>
                          {inscripcion.deporte && (
                            <p><strong>Deporte:</strong> {inscripcion.deporte.nombre}</p>
                          )}
                          <p><strong>Fecha:</strong> {new Date(inscripcion.createdAt).toLocaleDateString()}</p>
                        </div>
                      </div>
                    </div>

                    <div className="flex items-center space-x-2 ml-4">
                      {inscripcion.estado === 'pendiente' && (
                        <>
                          <Button
                            size="sm"
                            variant="outline"
                            className="text-green-600 hover:bg-green-50"
                            onClick={() => updateEstado(inscripcion.id, 'aprobada')}
                          >
                            <CheckCircle className="h-4 w-4 mr-1" />
                            Aprobar
                          </Button>
                          <Button
                            size="sm"
                            variant="outline"
                            className="text-red-600 hover:bg-red-50"
                            onClick={() => updateEstado(inscripcion.id, 'rechazada')}
                          >
                            <XCircle className="h-4 w-4 mr-1" />
                            Rechazar
                          </Button>
                        </>
                      )}
                      <Button size="sm" variant="outline">
                        <Eye className="h-4 w-4 mr-1" />
                        Ver Detalle
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))
          )}
        </div>
      </div>
    </div>
  );
}