'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 { Textarea } from '@/components/ui/textarea';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import {
  ArrowLeft,
  Plus,
  Calendar,
  ChevronLeft,
  ChevronRight,
  Edit,
  Trash2,
  Activity,
  Users,
  Trophy,
  Target,
  Star,
  Coffee,
} from 'lucide-react';
import { toast } from 'sonner';
import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isSameDay, addMonths, subMonths } from 'date-fns';
import { es } from 'date-fns/locale';

interface Planificacion {
  id: string;
  ano: number;
  mes: number;
  semana: number | null;
  categoria: string;
  tipo: string;
  titulo: string;
  descripcion: string | null;
  fechaInicio: string;
  fechaFin: string | null;
  lugar: string | null;
  responsableId: string | null;
  estado: string;
  campeonatoId: string | null;
  observaciones: string | null;
}

const tiposPlanificacion = [
  { value: 'ENTRENAMIENTO', label: 'Entrenamiento', icon: Activity, color: 'bg-green-500' },
  { value: 'PARTIDO_AMISTOSO', label: 'Partido Amistoso', icon: Users, color: 'bg-blue-500' },
  { value: 'CAMPEONATO', label: 'Campeonato', icon: Trophy, color: 'bg-amber-500' },
  { value: 'EVALUACION', label: 'Evaluación', icon: Target, color: 'bg-purple-500' },
  { value: 'EVENTO_ESPECIAL', label: 'Evento Especial', icon: Star, color: 'bg-pink-500' },
  { value: 'RECESO', label: 'Receso', icon: Coffee, color: 'bg-gray-500' },
];

const estadosPlanificacion = [
  { value: 'PLANIFICADO', label: 'Planificado', color: 'bg-gray-500' },
  { value: 'CONFIRMADO', label: 'Confirmado', color: 'bg-blue-500' },
  { value: 'EN_CURSO', label: 'En Curso', color: 'bg-yellow-500' },
  { value: 'COMPLETADO', label: 'Completado', color: 'bg-green-500' },
  { value: 'CANCELADO', label: 'Cancelado', color: 'bg-red-500' },
];

const mesesNombres = [
  'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
  'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre',
];

export default function PlanificacionPage() {
  const { data: session, status } = useSession() || {};
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [planificaciones, setPlanificaciones] = useState<Planificacion[]>([]);
  const [currentDate, setCurrentDate] = useState(new Date());
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
  const [showCreateDialog, setShowCreateDialog] = useState(false);
  const [selectedPlanificacion, setSelectedPlanificacion] = useState<Planificacion | null>(null);
  const [filterCategoria, setFilterCategoria] = useState('todas');
  const [filterTipo, setFilterTipo] = useState('todos');
  const [viewMode, setViewMode] = useState<'calendario' | 'lista'>('calendario');

  const [newPlan, setNewPlan] = useState({
    categoria: '',
    tipo: 'ENTRENAMIENTO',
    titulo: '',
    descripcion: '',
    fechaInicio: '',
    fechaFin: '',
    lugar: '',
    observaciones: '',
  });

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

  useEffect(() => {
    fetchPlanificaciones();
  }, [currentDate, filterCategoria, filterTipo]);

  const fetchPlanificaciones = async () => {
    try {
      setLoading(true);
      const ano = currentDate.getFullYear();
      const mes = currentDate.getMonth() + 1;
      let url = `/api/planificacion?ano=${ano}&mes=${mes}`;
      if (filterCategoria !== 'todas') url += `&categoria=${filterCategoria}`;
      if (filterTipo !== 'todos') url += `&tipo=${filterTipo}`;

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

  const handleCreatePlan = async () => {
    if (!newPlan.categoria || !newPlan.tipo || !newPlan.titulo || !newPlan.fechaInicio) {
      toast.error('Completa los campos requeridos');
      return;
    }

    const fechaInicio = new Date(newPlan.fechaInicio);
    
    try {
      const res = await fetch('/api/planificacion', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...newPlan,
          ano: fechaInicio.getFullYear(),
          mes: fechaInicio.getMonth() + 1,
          fechaFin: newPlan.fechaFin || null,
        }),
      });

      if (res.ok) {
        toast.success('Planificación creada');
        setShowCreateDialog(false);
        setNewPlan({
          categoria: '',
          tipo: 'ENTRENAMIENTO',
          titulo: '',
          descripcion: '',
          fechaInicio: '',
          fechaFin: '',
          lugar: '',
          observaciones: '',
        });
        fetchPlanificaciones();
      } else {
        const data = await res.json();
        toast.error(data.error || 'Error al crear planificación');
      }
    } catch {
      toast.error('Error de conexión');
    }
  };

  const handleDeletePlan = async (id: string) => {
    if (!confirm('¿Eliminar esta planificación?')) return;

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

  const handleUpdateEstado = async (id: string, estado: string) => {
    try {
      const res = await fetch(`/api/planificacion/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ estado }),
      });

      if (res.ok) {
        toast.success('Estado actualizado');
        fetchPlanificaciones();
      } 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 canEdit = ['COORDINADOR', 'PROFESOR'].includes(session?.user?.rol || '');

  // Calendario
  const monthStart = startOfMonth(currentDate);
  const monthEnd = endOfMonth(currentDate);
  const calendarDays = eachDayOfInterval({ start: monthStart, end: monthEnd });

  // Añadir días del mes anterior para completar la primera semana
  const startDayOfWeek = monthStart.getDay();
  const prevDays = Array.from({ length: startDayOfWeek }, (_, i) => {
    const date = new Date(monthStart);
    date.setDate(date.getDate() - (startDayOfWeek - i));
    return date;
  });

  // Añadir días del mes siguiente para completar la última semana
  const endDayOfWeek = monthEnd.getDay();
  const nextDays = Array.from({ length: 6 - endDayOfWeek }, (_, i) => {
    const date = new Date(monthEnd);
    date.setDate(date.getDate() + i + 1);
    return date;
  });

  const allDays = [...prevDays, ...calendarDays, ...nextDays];

  const getPlanificacionesForDate = (date: Date) => {
    return planificaciones.filter((p) => {
      const fechaInicio = new Date(p.fechaInicio);
      return isSameDay(fechaInicio, date);
    });
  };

  const getTipoInfo = (tipo: string) => {
    return tiposPlanificacion.find((t) => t.value === tipo) || tiposPlanificacion[0];
  };

  const getEstadoInfo = (estado: string) => {
    return estadosPlanificacion.find((e) => e.value === estado) || estadosPlanificacion[0];
  };

  const categorias = ['2012', '2013', '2014', '2015', '2016', '2017', '2018'];

  return (
    <div className="container mx-auto p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between flex-wrap gap-4">
        <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">Planificación Anual</h1>
            <p className="text-gray-500">Programación de actividades y temporada</p>
          </div>
        </div>
        <div className="flex gap-2 flex-wrap">
          <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={filterTipo} onValueChange={setFilterTipo}>
            <SelectTrigger className="w-40">
              <SelectValue placeholder="Tipo" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="todos">Todos</SelectItem>
              {tiposPlanificacion.map((t) => (
                <SelectItem key={t.value} value={t.value}>
                  {t.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {canEdit && (
            <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
              <DialogTrigger asChild>
                <Button className="bg-green-600 hover:bg-green-700">
                  <Plus className="h-4 w-4 mr-2" />
                  Nueva Actividad
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
                <DialogHeader>
                  <DialogTitle>Nueva Planificación</DialogTitle>
                </DialogHeader>
                <div className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>Categoría *</Label>
                      <Select
                        value={newPlan.categoria}
                        onValueChange={(v) => setNewPlan({ ...newPlan, categoria: v })}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccionar" />
                        </SelectTrigger>
                        <SelectContent>
                          {categorias.map((cat) => (
                            <SelectItem key={cat} value={cat}>
                              {cat}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label>Tipo *</Label>
                      <Select
                        value={newPlan.tipo}
                        onValueChange={(v) => setNewPlan({ ...newPlan, tipo: v })}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {tiposPlanificacion.map((t) => (
                            <SelectItem key={t.value} value={t.value}>
                              {t.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                  <div>
                    <Label>Título *</Label>
                    <Input
                      value={newPlan.titulo}
                      onChange={(e) => setNewPlan({ ...newPlan, titulo: e.target.value })}
                      placeholder="Entrenamiento táctico"
                    />
                  </div>
                  <div>
                    <Label>Descripción</Label>
                    <Textarea
                      value={newPlan.descripcion}
                      onChange={(e) => setNewPlan({ ...newPlan, descripcion: e.target.value })}
                      placeholder="Detalles de la actividad..."
                      rows={2}
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>Fecha Inicio *</Label>
                      <Input
                        type="datetime-local"
                        value={newPlan.fechaInicio}
                        onChange={(e) => setNewPlan({ ...newPlan, fechaInicio: e.target.value })}
                      />
                    </div>
                    <div>
                      <Label>Fecha Fin</Label>
                      <Input
                        type="datetime-local"
                        value={newPlan.fechaFin}
                        onChange={(e) => setNewPlan({ ...newPlan, fechaFin: e.target.value })}
                      />
                    </div>
                  </div>
                  <div>
                    <Label>Lugar</Label>
                    <Input
                      value={newPlan.lugar}
                      onChange={(e) => setNewPlan({ ...newPlan, lugar: e.target.value })}
                      placeholder="Cancha principal"
                    />
                  </div>
                  <div>
                    <Label>Observaciones</Label>
                    <Textarea
                      value={newPlan.observaciones}
                      onChange={(e) => setNewPlan({ ...newPlan, observaciones: e.target.value })}
                      placeholder="Notas adicionales..."
                      rows={2}
                    />
                  </div>
                  <Button onClick={handleCreatePlan} className="w-full bg-green-600 hover:bg-green-700">
                    Crear Planificación
                  </Button>
                </div>
              </DialogContent>
            </Dialog>
          )}
        </div>
      </div>

      {/* Navegación del mes */}
      <Card>
        <CardHeader className="pb-2">
          <div className="flex items-center justify-between">
            <Button variant="ghost" size="icon" onClick={() => setCurrentDate(subMonths(currentDate, 1))}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <CardTitle className="text-xl">
              {mesesNombres[currentDate.getMonth()]} {currentDate.getFullYear()}
            </CardTitle>
            <Button variant="ghost" size="icon" onClick={() => setCurrentDate(addMonths(currentDate, 1))}>
              <ChevronRight className="h-5 w-5" />
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          {/* Leyenda */}
          <div className="flex flex-wrap gap-3 mb-4">
            {tiposPlanificacion.map((t) => (
              <div key={t.value} className="flex items-center gap-1 text-xs">
                <div className={`w-3 h-3 rounded ${t.color}`}></div>
                <span>{t.label}</span>
              </div>
            ))}
          </div>

          {/* Calendario */}
          <div className="grid grid-cols-7 gap-1">
            {['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'].map((day) => (
              <div key={day} className="text-center font-medium text-gray-500 py-2 text-sm">
                {day}
              </div>
            ))}
            {allDays.map((day, index) => {
              const isCurrentMonth = isSameMonth(day, currentDate);
              const isToday = isSameDay(day, new Date());
              const dayPlans = getPlanificacionesForDate(day);

              return (
                <div
                  key={index}
                  className={`min-h-24 p-1 border rounded cursor-pointer transition ${
                    isCurrentMonth ? 'bg-white' : 'bg-gray-50'
                  } ${isToday ? 'ring-2 ring-green-500' : ''} hover:bg-gray-100`}
                  onClick={() => setSelectedDate(day)}
                >
                  <div className={`text-sm font-medium ${isCurrentMonth ? '' : 'text-gray-400'}`}>
                    {format(day, 'd')}
                  </div>
                  <div className="space-y-1 mt-1">
                    {dayPlans.slice(0, 3).map((plan) => {
                      const tipoInfo = getTipoInfo(plan.tipo);
                      return (
                        <div
                          key={plan.id}
                          className={`text-xs p-1 rounded text-white truncate ${tipoInfo.color}`}
                          title={plan.titulo}
                          onClick={(e) => {
                            e.stopPropagation();
                            setSelectedPlanificacion(plan);
                          }}
                        >
                          {plan.titulo}
                        </div>
                      );
                    })}
                    {dayPlans.length > 3 && (
                      <div className="text-xs text-gray-500">+{dayPlans.length - 3} más</div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </CardContent>
      </Card>

      {/* Detalle de planificación seleccionada */}
      {selectedPlanificacion && (
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <div className="flex items-center gap-2">
                  {(() => {
                    const TipoIcon = getTipoInfo(selectedPlanificacion.tipo).icon;
                    return <TipoIcon className="h-5 w-5" />;
                  })()}
                  <CardTitle>{selectedPlanificacion.titulo}</CardTitle>
                </div>
                <CardDescription>
                  Categoría {selectedPlanificacion.categoria} •{' '}
                  {format(new Date(selectedPlanificacion.fechaInicio), "EEEE d 'de' MMMM 'a las' HH:mm", { locale: es })}
                </CardDescription>
              </div>
              <div className="flex items-center gap-2">
                <Badge className={getEstadoInfo(selectedPlanificacion.estado).color}>
                  {getEstadoInfo(selectedPlanificacion.estado).label}
                </Badge>
                {canEdit && (
                  <>
                    <Select
                      value={selectedPlanificacion.estado}
                      onValueChange={(v) => handleUpdateEstado(selectedPlanificacion.id, v)}
                    >
                      <SelectTrigger className="w-36">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {estadosPlanificacion.map((e) => (
                          <SelectItem key={e.value} value={e.value}>
                            {e.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <Button
                      variant="outline"
                      size="icon"
                      className="text-red-500"
                      onClick={() => handleDeletePlan(selectedPlanificacion.id)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </>
                )}
                <Button variant="ghost" size="sm" onClick={() => setSelectedPlanificacion(null)}>
                  Cerrar
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <p className="text-sm text-gray-500">Tipo</p>
                <p className="font-medium">{getTipoInfo(selectedPlanificacion.tipo).label}</p>
              </div>
              {selectedPlanificacion.lugar && (
                <div>
                  <p className="text-sm text-gray-500">Lugar</p>
                  <p className="font-medium">{selectedPlanificacion.lugar}</p>
                </div>
              )}
              {selectedPlanificacion.descripcion && (
                <div className="md:col-span-2">
                  <p className="text-sm text-gray-500">Descripción</p>
                  <p>{selectedPlanificacion.descripcion}</p>
                </div>
              )}
              {selectedPlanificacion.observaciones && (
                <div className="md:col-span-2">
                  <p className="text-sm text-gray-500">Observaciones</p>
                  <p className="text-gray-700">{selectedPlanificacion.observaciones}</p>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}

      {/* Resumen del mes */}
      <Card>
        <CardHeader>
          <CardTitle>Resumen del Mes</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            {tiposPlanificacion.map((tipo) => {
              const count = planificaciones.filter((p) => p.tipo === tipo.value).length;
              const TipoIcon = tipo.icon;
              return (
                <div key={tipo.value} className="text-center p-4 bg-gray-50 rounded-lg">
                  <TipoIcon className={`h-8 w-8 mx-auto mb-2 ${tipo.color.replace('bg-', 'text-')}`} />
                  <p className="text-2xl font-bold">{count}</p>
                  <p className="text-xs text-gray-500">{tipo.label}</p>
                </div>
              );
            })}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}