'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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  ArrowLeft,
  Plus,
  Trophy,
  Calendar,
  Users,
  Target,
  ChevronRight,
  Edit,
  Trash2,
  Award,
} from 'lucide-react';
import { toast } from 'sonner';
import { format } from 'date-fns';
import { es } from 'date-fns/locale';

interface Campeonato {
  id: string;
  nombre: string;
  categoria: string;
  fechaInicio: string;
  fechaFin: string;
  organizador: string;
  activo: boolean;
  jugadores: { id: string; usuario: { nombres: string; apellidos: string } }[];
  cuerpoTecnico: { id: string; usuario: { nombres: string; apellidos: string } }[];
  partidos: {
    id: string;
    fecha: string;
    rival: string;
    golesAFavor: number | null;
    golesEnContra: number | null;
  }[];
  stats: {
    partidosJugados: number;
    victorias: number;
    empates: number;
    derrotas: number;
    golesAFavor: number;
    golesEnContra: number;
  };
}

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

interface Profesor {
  id: string;
  usuario: { nombres: string; apellidos: string };
}

export default function CampeonatosPage() {
  const { data: session, status } = useSession() || {};
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [campeonatos, setCampeonatos] = useState<Campeonato[]>([]);
  const [selectedCampeonato, setSelectedCampeonato] = useState<Campeonato | null>(null);
  const [showCreateDialog, setShowCreateDialog] = useState(false);
  const [showPartidoDialog, setShowPartidoDialog] = useState(false);
  const [alumnos, setAlumnos] = useState<Alumno[]>([]);
  const [profesores, setProfesores] = useState<Profesor[]>([]);
  const [filterCategoria, setFilterCategoria] = useState('todas');
  const [filterActivo, setFilterActivo] = useState('todos');

  const [newCampeonato, setNewCampeonato] = useState({
    nombre: '',
    categoria: '',
    fechaInicio: '',
    fechaFin: '',
    organizador: '',
    jugadoresIds: [] as string[],
    profesoresIds: [] as string[],
  });

  const [newPartido, setNewPartido] = useState({
    fecha: '',
    rival: '',
    golesAFavor: '',
    golesEnContra: '',
  });

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

  useEffect(() => {
    fetchCampeonatos();
    fetchAlumnos();
    fetchProfesores();
  }, [filterCategoria, filterActivo]);

  const fetchCampeonatos = async () => {
    try {
      setLoading(true);
      let url = '/api/campeonatos?';
      if (filterCategoria !== 'todas') url += `categoria=${filterCategoria}&`;
      if (filterActivo !== 'todos') url += `activo=${filterActivo === 'activos'}&`;

      const res = await fetch(url);
      const data = await res.json();
      if (res.ok) {
        setCampeonatos(data.campeonatos);
      } else {
        toast.error(data.error || 'Error al cargar campeonatos');
      }
    } catch {
      toast.error('Error de conexión');
    } finally {
      setLoading(false);
    }
  };

  const fetchAlumnos = async () => {
    try {
      const res = await fetch('/api/alumnos');
      const data = await res.json();
      if (res.ok) {
        setAlumnos(data.alumnos || []);
      }
    } catch {
      console.error('Error fetching alumnos');
    }
  };

  const fetchProfesores = async () => {
    try {
      const res = await fetch('/api/profesores');
      const data = await res.json();
      if (res.ok) {
        setProfesores(data.profesores || []);
      }
    } catch {
      console.error('Error fetching profesores');
    }
  };

  const handleCreateCampeonato = async () => {
    if (!newCampeonato.nombre || !newCampeonato.categoria || !newCampeonato.fechaInicio || !newCampeonato.fechaFin) {
      toast.error('Completa los campos requeridos');
      return;
    }

    try {
      const res = await fetch('/api/campeonatos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newCampeonato),
      });

      if (res.ok) {
        toast.success('Campeonato creado');
        setShowCreateDialog(false);
        setNewCampeonato({
          nombre: '',
          categoria: '',
          fechaInicio: '',
          fechaFin: '',
          organizador: '',
          jugadoresIds: [],
          profesoresIds: [],
        });
        fetchCampeonatos();
      } else {
        const data = await res.json();
        toast.error(data.error || 'Error al crear campeonato');
      }
    } catch {
      toast.error('Error de conexión');
    }
  };

  const handleAddPartido = async () => {
    if (!selectedCampeonato || !newPartido.fecha || !newPartido.rival) {
      toast.error('Completa los campos requeridos');
      return;
    }

    try {
      const res = await fetch(`/api/campeonatos/${selectedCampeonato.id}/partidos`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...newPartido,
          golesAFavor: newPartido.golesAFavor ? parseInt(newPartido.golesAFavor) : null,
          golesEnContra: newPartido.golesEnContra ? parseInt(newPartido.golesEnContra) : null,
        }),
      });

      if (res.ok) {
        toast.success('Partido agregado');
        setShowPartidoDialog(false);
        setNewPartido({ fecha: '', rival: '', golesAFavor: '', golesEnContra: '' });
        fetchCampeonatos();
      } else {
        const data = await res.json();
        toast.error(data.error || 'Error al agregar partido');
      }
    } catch {
      toast.error('Error de conexión');
    }
  };

  const handleDeleteCampeonato = async (id: string) => {
    if (!confirm('¿Eliminar este campeonato? Se eliminarán todos los partidos y estadísticas asociadas.')) return;

    try {
      const res = await fetch(`/api/campeonatos/${id}`, { method: 'DELETE' });
      if (res.ok) {
        toast.success('Campeonato eliminado');
        setSelectedCampeonato(null);
        fetchCampeonatos();
      } else {
        const data = await res.json();
        toast.error(data.error || 'Error al eliminar');
      }
    } catch {
      toast.error('Error de conexión');
    }
  };

  const handleUpdatePartido = async (partidoId: string, golesAFavor: number, golesEnContra: number) => {
    if (!selectedCampeonato) return;

    try {
      const res = await fetch(`/api/campeonatos/${selectedCampeonato.id}/partidos/${partidoId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ golesAFavor, golesEnContra }),
      });

      if (res.ok) {
        toast.success('Resultado actualizado');
        fetchCampeonatos();
      } else {
        const data = await res.json();
        toast.error(data.error || 'Error al actualizar');
      }
    } catch {
      toast.error('Error de conexión');
    }
  };

  if (status === 'loading' || loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-600"></div>
      </div>
    );
  }

  const categorias = [...new Set(alumnos.map((a) => a.categoria))].sort();
  const isCoordinador = session?.user?.rol === 'COORDINADOR';
  const canEdit = ['COORDINADOR', 'PROFESOR'].includes(session?.user?.rol || '');

  return (
    <div className="container mx-auto p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Button variant="ghost" onClick={() => router.push('/dashboard')}>
            <ArrowLeft className="h-4 w-4 mr-2" />
            Volver
          </Button>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Campeonatos</h1>
            <p className="text-gray-500">Gestión de torneos y competencias</p>
          </div>
        </div>
        <div className="flex gap-2">
          <Select value={filterCategoria} onValueChange={setFilterCategoria}>
            <SelectTrigger className="w-32">
              <SelectValue placeholder="Categoría" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="todas">Todas</SelectItem>
              {categorias.map((cat) => (
                <SelectItem key={cat} value={cat}>
                  {cat}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Select value={filterActivo} onValueChange={setFilterActivo}>
            <SelectTrigger className="w-32">
              <SelectValue placeholder="Estado" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="todos">Todos</SelectItem>
              <SelectItem value="activos">Activos</SelectItem>
              <SelectItem value="finalizados">Finalizados</SelectItem>
            </SelectContent>
          </Select>
          {isCoordinador && (
            <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
              <DialogTrigger asChild>
                <Button className="bg-green-600 hover:bg-green-700">
                  <Plus className="h-4 w-4 mr-2" />
                  Nuevo Campeonato
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                <DialogHeader>
                  <DialogTitle>Crear Campeonato</DialogTitle>
                </DialogHeader>
                <div className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>Nombre *</Label>
                      <Input
                        value={newCampeonato.nombre}
                        onChange={(e) => setNewCampeonato({ ...newCampeonato, nombre: e.target.value })}
                        placeholder="Copa Primavera 2026"
                      />
                    </div>
                    <div>
                      <Label>Categoría *</Label>
                      <Select
                        value={newCampeonato.categoria}
                        onValueChange={(v) => setNewCampeonato({ ...newCampeonato, categoria: v })}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccionar" />
                        </SelectTrigger>
                        <SelectContent>
                          {categorias.map((cat) => (
                            <SelectItem key={cat} value={cat}>
                              {cat}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>Fecha Inicio *</Label>
                      <Input
                        type="date"
                        value={newCampeonato.fechaInicio}
                        onChange={(e) => setNewCampeonato({ ...newCampeonato, fechaInicio: e.target.value })}
                      />
                    </div>
                    <div>
                      <Label>Fecha Fin *</Label>
                      <Input
                        type="date"
                        value={newCampeonato.fechaFin}
                        onChange={(e) => setNewCampeonato({ ...newCampeonato, fechaFin: e.target.value })}
                      />
                    </div>
                  </div>
                  <div>
                    <Label>Organizador</Label>
                    <Input
                      value={newCampeonato.organizador}
                      onChange={(e) => setNewCampeonato({ ...newCampeonato, organizador: e.target.value })}
                      placeholder="Liga Infantil de Santiago"
                    />
                  </div>
                  <Button onClick={handleCreateCampeonato} className="w-full bg-green-600 hover:bg-green-700">
                    Crear Campeonato
                  </Button>
                </div>
              </DialogContent>
            </Dialog>
          )}
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Lista de campeonatos */}
        <div className="lg:col-span-1 space-y-4">
          <h2 className="font-semibold text-lg">Campeonatos ({campeonatos.length})</h2>
          {campeonatos.length === 0 ? (
            <Card>
              <CardContent className="p-8 text-center text-gray-500">
                <Trophy className="h-12 w-12 mx-auto mb-4 opacity-50" />
                <p>No hay campeonatos registrados</p>
              </CardContent>
            </Card>
          ) : (
            campeonatos.map((camp) => (
              <Card
                key={camp.id}
                className={`cursor-pointer transition hover:shadow-md ${
                  selectedCampeonato?.id === camp.id ? 'ring-2 ring-green-500' : ''
                }`}
                onClick={() => setSelectedCampeonato(camp)}
              >
                <CardContent className="p-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <div className="flex items-center gap-2">
                        <Trophy className="h-5 w-5 text-amber-500" />
                        <h3 className="font-semibold">{camp.nombre}</h3>
                      </div>
                      <p className="text-sm text-gray-500">Cat. {camp.categoria}</p>
                      <p className="text-xs text-gray-400">
                        {format(new Date(camp.fechaInicio), "d 'de' MMM", { locale: es })} -{' '}
                        {format(new Date(camp.fechaFin), "d 'de' MMM yyyy", { locale: es })}
                      </p>
                    </div>
                    <div className="text-right">
                      <Badge variant={camp.activo ? 'default' : 'secondary'}>
                        {camp.activo ? 'Activo' : 'Finalizado'}
                      </Badge>
                      <p className="text-sm mt-1">
                        <span className="text-green-600 font-bold">{camp.stats.victorias}V</span>
                        <span className="text-gray-400 mx-1">-</span>
                        <span className="text-yellow-600 font-bold">{camp.stats.empates}E</span>
                        <span className="text-gray-400 mx-1">-</span>
                        <span className="text-red-600 font-bold">{camp.stats.derrotas}D</span>
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))
          )}
        </div>

        {/* Detalle del campeonato */}
        <div className="lg:col-span-2">
          {selectedCampeonato ? (
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="flex items-center gap-2">
                      <Trophy className="h-6 w-6 text-amber-500" />
                      {selectedCampeonato.nombre}
                    </CardTitle>
                    <CardDescription>
                      Categoría {selectedCampeonato.categoria} • {selectedCampeonato.organizador}
                    </CardDescription>
                  </div>
                  {isCoordinador && (
                    <div className="flex gap-2">
                      <Button variant="outline" size="icon">
                        <Edit className="h-4 w-4" />
                      </Button>
                      <Button
                        variant="outline"
                        size="icon"
                        className="text-red-500"
                        onClick={() => handleDeleteCampeonato(selectedCampeonato.id)}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  )}
                </div>
              </CardHeader>
              <CardContent>
                <Tabs defaultValue="resumen">
                  <TabsList className="mb-4">
                    <TabsTrigger value="resumen">Resumen</TabsTrigger>
                    <TabsTrigger value="partidos">Partidos</TabsTrigger>
                    <TabsTrigger value="plantel">Plantel</TabsTrigger>
                  </TabsList>

                  <TabsContent value="resumen">
                    <div className="grid grid-cols-3 gap-4 mb-6">
                      <div className="text-center p-4 bg-green-50 rounded-lg">
                        <p className="text-3xl font-bold text-green-600">{selectedCampeonato.stats.victorias}</p>
                        <p className="text-sm text-gray-500">Victorias</p>
                      </div>
                      <div className="text-center p-4 bg-yellow-50 rounded-lg">
                        <p className="text-3xl font-bold text-yellow-600">{selectedCampeonato.stats.empates}</p>
                        <p className="text-sm text-gray-500">Empates</p>
                      </div>
                      <div className="text-center p-4 bg-red-50 rounded-lg">
                        <p className="text-3xl font-bold text-red-600">{selectedCampeonato.stats.derrotas}</p>
                        <p className="text-sm text-gray-500">Derrotas</p>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between">
                        <span>Partidos Jugados</span>
                        <span className="font-semibold">{selectedCampeonato.stats.partidosJugados}</span>
                      </div>
                      <div className="flex justify-between">
                        <span>Goles a Favor</span>
                        <span className="font-semibold text-green-600">+{selectedCampeonato.stats.golesAFavor}</span>
                      </div>
                      <div className="flex justify-between">
                        <span>Goles en Contra</span>
                        <span className="font-semibold text-red-600">-{selectedCampeonato.stats.golesEnContra}</span>
                      </div>
                      <div className="flex justify-between border-t pt-2">
                        <span>Diferencia de Goles</span>
                        <span
                          className={`font-bold ${
                            selectedCampeonato.stats.golesAFavor - selectedCampeonato.stats.golesEnContra >= 0
                              ? 'text-green-600'
                              : 'text-red-600'
                          }`}
                        >
                          {selectedCampeonato.stats.golesAFavor - selectedCampeonato.stats.golesEnContra > 0 ? '+' : ''}
                          {selectedCampeonato.stats.golesAFavor - selectedCampeonato.stats.golesEnContra}
                        </span>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="partidos">
                    {canEdit && (
                      <Dialog open={showPartidoDialog} onOpenChange={setShowPartidoDialog}>
                        <DialogTrigger asChild>
                          <Button className="mb-4 bg-green-600 hover:bg-green-700">
                            <Plus className="h-4 w-4 mr-2" />
                            Agregar Partido
                          </Button>
                        </DialogTrigger>
                        <DialogContent>
                          <DialogHeader>
                            <DialogTitle>Agregar Partido</DialogTitle>
                          </DialogHeader>
                          <div className="space-y-4">
                            <div>
                              <Label>Fecha *</Label>
                              <Input
                                type="date"
                                value={newPartido.fecha}
                                onChange={(e) => setNewPartido({ ...newPartido, fecha: e.target.value })}
                              />
                            </div>
                            <div>
                              <Label>Rival *</Label>
                              <Input
                                value={newPartido.rival}
                                onChange={(e) => setNewPartido({ ...newPartido, rival: e.target.value })}
                                placeholder="Club Deportivo..."
                              />
                            </div>
                            <div className="grid grid-cols-2 gap-4">
                              <div>
                                <Label>Goles a Favor</Label>
                                <Input
                                  type="number"
                                  min="0"
                                  value={newPartido.golesAFavor}
                                  onChange={(e) => setNewPartido({ ...newPartido, golesAFavor: e.target.value })}
                                  placeholder="-"
                                />
                              </div>
                              <div>
                                <Label>Goles en Contra</Label>
                                <Input
                                  type="number"
                                  min="0"
                                  value={newPartido.golesEnContra}
                                  onChange={(e) => setNewPartido({ ...newPartido, golesEnContra: e.target.value })}
                                  placeholder="-"
                                />
                              </div>
                            </div>
                            <Button onClick={handleAddPartido} className="w-full">
                              Agregar Partido
                            </Button>
                          </div>
                        </DialogContent>
                      </Dialog>
                    )}

                    {selectedCampeonato.partidos.length === 0 ? (
                      <p className="text-center text-gray-500 py-8">No hay partidos registrados</p>
                    ) : (
                      <div className="space-y-3">
                        {selectedCampeonato.partidos.map((partido) => {
                          const resultado =
                            partido.golesAFavor === null || partido.golesEnContra === null
                              ? 'PENDIENTE'
                              : partido.golesAFavor > partido.golesEnContra
                              ? 'VICTORIA'
                              : partido.golesAFavor < partido.golesEnContra
                              ? 'DERROTA'
                              : 'EMPATE';

                          return (
                            <div
                              key={partido.id}
                              className={`p-4 rounded-lg border ${
                                resultado === 'VICTORIA'
                                  ? 'border-green-200 bg-green-50'
                                  : resultado === 'DERROTA'
                                  ? 'border-red-200 bg-red-50'
                                  : resultado === 'EMPATE'
                                  ? 'border-yellow-200 bg-yellow-50'
                                  : 'border-gray-200 bg-gray-50'
                              }`}
                            >
                              <div className="flex items-center justify-between">
                                <div>
                                  <p className="text-sm text-gray-500">
                                    {format(new Date(partido.fecha), "EEEE d 'de' MMMM", { locale: es })}
                                  </p>
                                  <p className="font-semibold">vs {partido.rival}</p>
                                </div>
                                <div className="text-right">
                                  {partido.golesAFavor !== null && partido.golesEnContra !== null ? (
                                    <p className="text-2xl font-bold">
                                      <span className="text-green-600">{partido.golesAFavor}</span>
                                      <span className="text-gray-400 mx-2">-</span>
                                      <span className="text-red-600">{partido.golesEnContra}</span>
                                    </p>
                                  ) : (
                                    <Badge variant="outline">Por jugar</Badge>
                                  )}
                                </div>
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    )}
                  </TabsContent>

                  <TabsContent value="plantel">
                    <div className="space-y-4">
                      <div>
                        <h4 className="font-medium mb-2 flex items-center gap-2">
                          <Users className="h-4 w-4" />
                          Jugadores ({selectedCampeonato.jugadores.length})
                        </h4>
                        {selectedCampeonato.jugadores.length === 0 ? (
                          <p className="text-sm text-gray-500">No hay jugadores asignados</p>
                        ) : (
                          <div className="grid grid-cols-2 gap-2">
                            {selectedCampeonato.jugadores.map((j) => (
                              <div key={j.id} className="p-2 bg-gray-50 rounded text-sm">
                                {j.usuario.nombres} {j.usuario.apellidos}
                              </div>
                            ))}
                          </div>
                        )}
                      </div>
                      <div>
                        <h4 className="font-medium mb-2 flex items-center gap-2">
                          <Award className="h-4 w-4" />
                          Cuerpo Técnico ({selectedCampeonato.cuerpoTecnico.length})
                        </h4>
                        {selectedCampeonato.cuerpoTecnico.length === 0 ? (
                          <p className="text-sm text-gray-500">No hay cuerpo técnico asignado</p>
                        ) : (
                          <div className="grid grid-cols-2 gap-2">
                            {selectedCampeonato.cuerpoTecnico.map((p) => (
                              <div key={p.id} className="p-2 bg-blue-50 rounded text-sm">
                                {p.usuario.nombres} {p.usuario.apellidos}
                              </div>
                            ))}
                          </div>
                        )}
                      </div>
                    </div>
                  </TabsContent>
                </Tabs>
              </CardContent>
            </Card>
          ) : (
            <Card>
              <CardContent className="p-12 text-center text-gray-500">
                <Trophy className="h-16 w-16 mx-auto mb-4 opacity-30" />
                <p>Selecciona un campeonato para ver los detalles</p>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  );
}