"use client";

import { useState, useEffect, useMemo } from "react";
import {
  GanttChart as GanttIcon,
  AlertCircle,
  ChevronLeft,
  ChevronRight,
  Calendar,
  ZoomIn,
  ZoomOut,
  Filter,
} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { getProjects } from "@/lib/projectsService";
import { Project, ProjectStatus } from "@/types/project";

// Paleta de colores para proyectos
const PROJECT_COLORS = [
  { bg: "bg-blue-500", light: "bg-blue-100", text: "text-blue-700", hex: "#3b82f6" },
  { bg: "bg-violet-500", light: "bg-violet-100", text: "text-violet-700", hex: "#8b5cf6" },
  { bg: "bg-cyan-500", light: "bg-cyan-100", text: "text-cyan-700", hex: "#06b6d4" },
  { bg: "bg-emerald-500", light: "bg-emerald-100", text: "text-emerald-700", hex: "#10b981" },
  { bg: "bg-amber-500", light: "bg-amber-100", text: "text-amber-700", hex: "#f59e0b" },
  { bg: "bg-rose-500", light: "bg-rose-100", text: "text-rose-700", hex: "#f43f5e" },
  { bg: "bg-pink-500", light: "bg-pink-100", text: "text-pink-700", hex: "#ec4899" },
  { bg: "bg-indigo-500", light: "bg-indigo-100", text: "text-indigo-700", hex: "#6366f1" },
  { bg: "bg-teal-500", light: "bg-teal-100", text: "text-teal-700", hex: "#14b8a6" },
  { bg: "bg-orange-500", light: "bg-orange-100", text: "text-orange-700", hex: "#f97316" },
];

const STATUS_LABELS: Record<ProjectStatus, string> = {
  "0": "Borrador",
  "1": "Abierto",
  "2": "Cerrado",
};

type ViewMode = "month" | "quarter" | "year";

function getProjectColor(index: number) {
  return PROJECT_COLORS[index % PROJECT_COLORS.length];
}

// Formatear fecha
function formatDate(dateStr: string): string {
  const date = new Date(dateStr);
  return date.toLocaleDateString("es-ES", { day: "2-digit", month: "short", year: "numeric" });
}

// Obtener días entre dos fechas
function getDaysBetween(start: Date, end: Date): number {
  return Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
}

// Generar array de meses entre dos fechas
function getMonthsBetween(start: Date, end: Date): { month: number; year: number; label: string }[] {
  const months: { month: number; year: number; label: string }[] = [];
  const current = new Date(start.getFullYear(), start.getMonth(), 1);
  const endMonth = new Date(end.getFullYear(), end.getMonth(), 1);
  
  while (current <= endMonth) {
    months.push({
      month: current.getMonth(),
      year: current.getFullYear(),
      label: current.toLocaleDateString("es-ES", { month: "short", year: "numeric" }),
    });
    current.setMonth(current.getMonth() + 1);
  }
  
  return months;
}

// Obtener días en un mes
function getDaysInMonth(month: number, year: number): number {
  return new Date(year, month + 1, 0).getDate();
}

export default function GanttPage() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [viewMode, setViewMode] = useState<ViewMode>("month");
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [viewOffset, setViewOffset] = useState(0);

  useEffect(() => {
    async function loadProjects() {
      try {
        setLoading(true);
        const data = await getProjects();
        setProjects(data);
        setError(null);
      } catch (err) {
        console.error("Error loading projects:", err);
        setError("Error al cargar los proyectos");
      } finally {
        setLoading(false);
      }
    }
    loadProjects();
  }, []);

  // Filtrar proyectos
  const filteredProjects = useMemo(() => {
    if (statusFilter === "all") return projects;
    return projects.filter(p => p.status === statusFilter);
  }, [projects, statusFilter]);

  // Calcular rango de fechas del timeline
  const { timelineStart, timelineEnd, months } = useMemo(() => {
    if (filteredProjects.length === 0) {
      const now = new Date();
      return {
        timelineStart: new Date(now.getFullYear(), now.getMonth(), 1),
        timelineEnd: new Date(now.getFullYear(), now.getMonth() + 6, 0),
        months: [],
      };
    }

    const allDates = filteredProjects.flatMap(p => [new Date(p.startDate), new Date(p.endDate)]);
    const minDate = new Date(Math.min(...allDates.map(d => d.getTime())));
    const maxDate = new Date(Math.max(...allDates.map(d => d.getTime())));
    
    // Añadir margen de un mes antes y después
    const start = new Date(minDate.getFullYear(), minDate.getMonth() - 1, 1);
    const end = new Date(maxDate.getFullYear(), maxDate.getMonth() + 2, 0);
    
    return {
      timelineStart: start,
      timelineEnd: end,
      months: getMonthsBetween(start, end),
    };
  }, [filteredProjects]);

  // Calcular meses visibles según el modo de vista
  const visibleMonths = useMemo(() => {
    const monthsToShow = viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12;
    const startIdx = Math.max(0, Math.min(viewOffset, months.length - monthsToShow));
    return months.slice(startIdx, startIdx + monthsToShow);
  }, [months, viewMode, viewOffset]);

  // Calcular el ancho total en días para los meses visibles
  const { totalDays, visibleStart, visibleEnd } = useMemo(() => {
    if (visibleMonths.length === 0) {
      return { totalDays: 30, visibleStart: new Date(), visibleEnd: new Date() };
    }
    
    const first = visibleMonths[0];
    const last = visibleMonths[visibleMonths.length - 1];
    const start = new Date(first.year, first.month, 1);
    const end = new Date(last.year, last.month + 1, 0);
    
    return {
      totalDays: getDaysBetween(start, end),
      visibleStart: start,
      visibleEnd: end,
    };
  }, [visibleMonths]);

  // Navegación
  const canGoBack = viewOffset > 0;
  const canGoForward = viewOffset + (viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12) < months.length;

  const goBack = () => {
    const step = viewMode === "month" ? 1 : viewMode === "quarter" ? 3 : 6;
    setViewOffset(Math.max(0, viewOffset - step));
  };

  const goForward = () => {
    const step = viewMode === "month" ? 1 : viewMode === "quarter" ? 3 : 6;
    const maxOffset = Math.max(0, months.length - (viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12));
    setViewOffset(Math.min(maxOffset, viewOffset + step));
  };

  const goToToday = () => {
    const now = new Date();
    const todayIndex = months.findIndex(m => m.month === now.getMonth() && m.year === now.getFullYear());
    if (todayIndex >= 0) {
      setViewOffset(Math.max(0, todayIndex - 1));
    }
  };

  if (error) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
        <div className="text-center">
          <AlertCircle className="w-16 h-16 text-red-400 mx-auto mb-4" />
          <p className="text-red-600 text-lg">{error}</p>
          <button
            onClick={() => window.location.reload()}
            className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          >
            Reintentar
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg">
                <GanttIcon className="w-6 h-6 text-white" />
              </div>
              <div>
                <h1 className="text-2xl font-bold text-gray-900">Diagrama de Gantt</h1>
                <p className="text-sm text-gray-500">
                  Timeline de {filteredProjects.length} proyectos
                </p>
              </div>
            </div>

            {/* Controles */}
            <div className="flex items-center gap-3">
              {/* Filtro de estado */}
              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger className="w-40">
                  <Filter className="w-4 h-4 mr-2" />
                  <SelectValue placeholder="Estado" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Todos</SelectItem>
                  <SelectItem value="0">Borrador</SelectItem>
                  <SelectItem value="1">Abierto</SelectItem>
                  <SelectItem value="2">Cerrado</SelectItem>
                </SelectContent>
              </Select>

              {/* Selector de vista */}
              <Select value={viewMode} onValueChange={(v: ViewMode) => setViewMode(v)}>
                <SelectTrigger className="w-32">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="month">3 meses</SelectItem>
                  <SelectItem value="quarter">6 meses</SelectItem>
                  <SelectItem value="year">12 meses</SelectItem>
                </SelectContent>
              </Select>

              {/* Navegación */}
              <div className="flex items-center gap-1">
                <Button variant="outline" size="icon" onClick={goBack} disabled={!canGoBack}>
                  <ChevronLeft className="w-4 h-4" />
                </Button>
                <Button variant="outline" size="sm" onClick={goToToday}>
                  <Calendar className="w-4 h-4 mr-1" />
                  Hoy
                </Button>
                <Button variant="outline" size="icon" onClick={goForward} disabled={!canGoForward}>
                  <ChevronRight className="w-4 h-4" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Content */}
      <main className="max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {loading ? (
          <GanttSkeleton />
        ) : filteredProjects.length === 0 ? (
          <Card className="border-gray-200">
            <CardContent className="py-16 text-center">
              <GanttIcon className="w-16 h-16 text-gray-300 mx-auto mb-4" />
              <h3 className="text-xl font-semibold text-gray-700">No hay proyectos</h3>
              <p className="text-gray-500 mt-2">No se encontraron proyectos con los filtros seleccionados</p>
            </CardContent>
          </Card>
        ) : (
          <Card className="border-gray-200 overflow-hidden">
            <CardContent className="p-0">
              <div className="flex">
                {/* Columna de nombres de proyectos */}
                <div className="w-64 flex-shrink-0 border-r border-gray-200 bg-gray-50">
                  {/* Header */}
                  <div className="h-16 border-b border-gray-200 flex items-center px-4">
                    <span className="font-semibold text-gray-700">Proyecto</span>
                  </div>
                  {/* Lista de proyectos */}
                  {filteredProjects.map((project, index) => {
                    const color = getProjectColor(index);
                    return (
                      <div
                        key={project.id}
                        className="h-14 border-b border-gray-100 flex items-center px-4 hover:bg-gray-100 transition-colors"
                      >
                        <div className="flex items-center gap-3 min-w-0">
                          <div className={`w-3 h-3 rounded-full ${color.bg} flex-shrink-0`} />
                          <div className="min-w-0">
                            <p className="text-sm font-medium text-gray-800 truncate" title={project.name}>
                              {project.name}
                            </p>
                            <p className="text-xs text-gray-500">{project.progress}%</p>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>

                {/* Timeline */}
                <div className="flex-1 overflow-x-auto">
                  {/* Header con meses */}
                  <div className="h-16 border-b border-gray-200 flex">
                    {visibleMonths.map((month, idx) => {
                      const daysInMonth = getDaysInMonth(month.month, month.year);
                      const widthPercent = (daysInMonth / totalDays) * 100;
                      const isCurrentMonth = new Date().getMonth() === month.month && new Date().getFullYear() === month.year;
                      
                      return (
                        <div
                          key={`${month.year}-${month.month}`}
                          className={`flex-shrink-0 border-r border-gray-200 flex flex-col justify-center px-2 ${
                            isCurrentMonth ? "bg-blue-50" : "bg-white"
                          }`}
                          style={{ width: `${widthPercent}%`, minWidth: "80px" }}
                        >
                          <span className={`text-xs font-medium ${isCurrentMonth ? "text-blue-700" : "text-gray-600"}`}>
                            {month.label}
                          </span>
                          <span className="text-xs text-gray-400">{daysInMonth} días</span>
                        </div>
                      );
                    })}
                  </div>

                  {/* Barras del Gantt */}
                  <TooltipProvider>
                    {filteredProjects.map((project, index) => {
                      const color = getProjectColor(index);
                      const projectStart = new Date(project.startDate);
                      const projectEnd = new Date(project.endDate);
                      
                      // Calcular posición y ancho de la barra
                      const startOffset = Math.max(0, getDaysBetween(visibleStart, projectStart));
                      const endOffset = Math.min(totalDays, getDaysBetween(visibleStart, projectEnd));
                      
                      const leftPercent = (startOffset / totalDays) * 100;
                      const widthPercent = Math.max(1, ((endOffset - startOffset) / totalDays) * 100);
                      
                      // Verificar si el proyecto está visible en el rango actual
                      const isVisible = projectEnd >= visibleStart && projectStart <= visibleEnd;
                      const isOverdue = projectEnd < new Date() && project.progress < 100 && project.status === "1";
                      
                      return (
                        <div
                          key={project.id}
                          className="h-14 border-b border-gray-100 relative"
                        >
                          {/* Grid de meses */}
                          <div className="absolute inset-0 flex">
                            {visibleMonths.map((month, idx) => {
                              const daysInMonth = getDaysInMonth(month.month, month.year);
                              const monthWidthPercent = (daysInMonth / totalDays) * 100;
                              const isCurrentMonth = new Date().getMonth() === month.month && new Date().getFullYear() === month.year;
                              
                              return (
                                <div
                                  key={`grid-${month.year}-${month.month}`}
                                  className={`flex-shrink-0 border-r border-gray-100 ${
                                    isCurrentMonth ? "bg-blue-50/30" : ""
                                  }`}
                                  style={{ width: `${monthWidthPercent}%`, minWidth: "80px" }}
                                />
                              );
                            })}
                          </div>
                          
                          {/* Barra del proyecto */}
                          {isVisible && (
                            <Tooltip>
                              <TooltipTrigger asChild>
                                <div
                                  className={`absolute top-2 h-10 rounded-md cursor-pointer transition-all hover:scale-[1.02] hover:shadow-md ${
                                    isOverdue ? "ring-2 ring-red-400" : ""
                                  }`}
                                  style={{
                                    left: `${leftPercent}%`,
                                    width: `${widthPercent}%`,
                                    minWidth: "20px",
                                  }}
                                >
                                  {/* Fondo de la barra */}
                                  <div className={`absolute inset-0 ${color.light} rounded-md`} />
                                  
                                  {/* Progreso */}
                                  <div
                                    className={`absolute inset-y-0 left-0 ${color.bg} rounded-md transition-all`}
                                    style={{ width: `${project.progress}%` }}
                                  />
                                  
                                  {/* Contenido de la barra */}
                                  <div className="relative h-full flex items-center px-2 z-10">
                                    <span className="text-xs font-medium text-white truncate drop-shadow-sm">
                                      {project.progress >= 30 ? `${project.progress}%` : ""}
                                    </span>
                                  </div>
                                </div>
                              </TooltipTrigger>
                              <TooltipContent side="top" className="max-w-xs">
                                <div className="space-y-1">
                                  <p className="font-semibold">{project.name}</p>
                                  <div className="text-xs space-y-0.5">
                                    <p><span className="text-gray-500">Estado:</span> {STATUS_LABELS[project.status]}</p>
                                    <p><span className="text-gray-500">Progreso:</span> {project.progress}%</p>
                                    <p><span className="text-gray-500">Inicio:</span> {formatDate(project.startDate)}</p>
                                    <p><span className="text-gray-500">Fin:</span> {formatDate(project.endDate)}</p>
                                    <p><span className="text-gray-500">Cliente:</span> {project.client}</p>
                                    {isOverdue && (
                                      <p className="text-red-500 font-medium">Proyecto retrasado</p>
                                    )}
                                  </div>
                                </div>
                              </TooltipContent>
                            </Tooltip>
                          )}
                        </div>
                      );
                    })}
                  </TooltipProvider>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

        {/* Leyenda */}
        {!loading && filteredProjects.length > 0 && (
          <div className="mt-6 flex flex-wrap items-center gap-6">
            <div className="flex items-center gap-2">
              <div className="w-16 h-4 bg-gray-200 rounded relative overflow-hidden">
                <div className="absolute inset-y-0 left-0 w-1/2 bg-blue-500 rounded" />
              </div>
              <span className="text-sm text-gray-600">Progreso del proyecto</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 bg-blue-50 border-2 border-blue-500 rounded" />
              <span className="text-sm text-gray-600">Mes actual</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 bg-gray-200 ring-2 ring-red-400 rounded" />
              <span className="text-sm text-gray-600">Proyecto retrasado</span>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}

function GanttSkeleton() {
  return (
    <Card className="border-gray-200">
      <CardContent className="p-0">
        <div className="flex">
          <div className="w-64 flex-shrink-0 border-r border-gray-200 bg-gray-50">
            <div className="h-16 border-b border-gray-200 flex items-center px-4">
              <Skeleton className="h-4 w-20" />
            </div>
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="h-14 border-b border-gray-100 flex items-center px-4">
                <div className="flex items-center gap-3">
                  <Skeleton className="w-3 h-3 rounded-full" />
                  <div>
                    <Skeleton className="h-4 w-32 mb-1" />
                    <Skeleton className="h-3 w-12" />
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="flex-1">
            <div className="h-16 border-b border-gray-200 flex">
              {Array.from({ length: 3 }).map((_, i) => (
                <div key={i} className="flex-1 border-r border-gray-200 flex items-center justify-center">
                  <Skeleton className="h-4 w-20" />
                </div>
              ))}
            </div>
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="h-14 border-b border-gray-100 px-4 flex items-center">
                <Skeleton className="h-8 w-full max-w-md rounded-md" />
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}