'use client';

import { useEffect, useState } 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 {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { ArrowLeft, Plus, Calendar } 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 | null;
  estado: string;
  creador: {
    nombre: string;
    apellido: string;
  };
}

export default function EventosPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [eventos, setEventos] = useState<Evento[]>([]);
  const [loading, setLoading] = useState(true);

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

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

  const fetchEventos = async () => {
    try {
      const response = await fetch('/api/eventos');
      if (response.ok) {
        const data = await response.json();
        setEventos(data.eventos || []);
      } else {
        toast.error('Error al cargar los eventos');
      }
    } catch (error) {
      toast.error('Error de conexión');
    } finally {
      setLoading(false);
    }
  };

  const getEstadoBadge = (estado: string) => {
    const variants: Record<string, 'default' | 'secondary' | 'destructive'> = {
      'PROGRAMADO': 'default',
      'EN_CURSO': 'secondary',
      'COMPLETADO': 'secondary',
      'CANCELADO': 'destructive',
    };
    return variants[estado] || 'default';
  };

  if (status === 'loading' || 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">
          <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>
      </header>

      {/* Content */}
      <div className="max-w-7xl mx-auto px-4 py-8">
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle className="text-2xl">Gestión de Eventos</CardTitle>
                <CardDescription>
                  Programar entrenamientos, partidos y actividades
                </CardDescription>
              </div>
              <Button onClick={() => toast.info('Crear evento en desarrollo')}>
                <Plus className="w-4 h-4 mr-2" />
                Nuevo Evento
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <div className="border rounded-lg">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Fecha</TableHead>
                    <TableHead>Hora</TableHead>
                    <TableHead>Tipo</TableHead>
                    <TableHead>Descripción</TableHead>
                    <TableHead>Lugar</TableHead>
                    <TableHead>Estado</TableHead>
                    <TableHead>Creado por</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {eventos.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={7} className="text-center py-8">
                        No hay eventos programados
                      </TableCell>
                    </TableRow>
                  ) : (
                    eventos.map((evento) => (
                      <TableRow key={evento.id}>
                        <TableCell className="font-medium">
                          <div className="flex items-center gap-2">
                            <Calendar className="w-4 h-4 text-gray-400" />
                            {format(new Date(evento.fecha), 'dd/MM/yyyy', {
                              locale: es,
                            })}
                          </div>
                        </TableCell>
                        <TableCell>{evento.hora}</TableCell>
                        <TableCell>
                          <Badge variant="outline">{evento.tipo}</Badge>
                        </TableCell>
                        <TableCell>{evento.descripcion}</TableCell>
                        <TableCell>{evento.lugar || 'N/A'}</TableCell>
                        <TableCell>
                          <Badge variant={getEstadoBadge(evento.estado)}>
                            {evento.estado.replace('_', ' ')}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          {evento.creador.nombre} {evento.creador.apellido}
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>

            <div className="mt-4 text-sm text-gray-600">
              Total: {eventos.length} eventos
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}