trello_fake/components/gantt/gantt-page.tsx

"use client";

import { useState, useEffect, useMemo } from "react";
import {
  GanttChart as GanttIcon,
  AlertCircle,
  ChevronLeft,
  ChevronRight,
  Calendar,
  History,
  Clock,
  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";
type TimeRange = "future" | "past" | "all";

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 [timeRange, setTimeRange] = useState<TimeRange>("future");
  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(() => {
    let filtered = projects;
    
    // Filtrar por estado
    if (statusFilter !== "all") {
      filtered = filtered.filter(p => p.status === statusFilter);
    }
    
    // Filtrar por rango temporal
    const now = new Date();
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    
    if (timeRange === "future") {
      // Proyectos que terminan hoy o en el futuro
      filtered = filtered.filter(p => new Date(p.endDate) >= today);
    } else if (timeRange === "past") {
      // Proyectos que ya terminaron
      filtered = filtered.filter(p => new Date(p.endDate) < today);
    }
    // "all" no filtra
    
    return filtered;
  }, [projects, statusFilter, timeRange]);

  // Calcular rango de fechas del timeline basado en los proyectos
  // - Futuro: desde el mes actual hasta el fin del proyecto más tardío
  // - Pasado: desde el inicio del proyecto más antiguo hasta el mes actual
  // - Todo: desde el inicio del proyecto más antiguo hasta el fin del más tardío
  const { timelineStart, timelineEnd, months } = useMemo(() => {
    const now = new Date();
    const currentMonthStart = new Date(now.getFullYear(), now.getMonth(), 1);
    const currentMonthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0);
    
    // Si no hay proyectos, mostrar 12 meses desde el actual
    if (filteredProjects.length === 0) {
      const start = new Date(now.getFullYear(), now.getMonth() - 6, 1);
      const end = new Date(now.getFullYear(), now.getMonth() + 6, 0);
      return {
        timelineStart: start,
        timelineEnd: end,
        months: getMonthsBetween(start, end),
      };
    }
    
    // Calcular fechas extremas de los proyectos
    const allStartDates = filteredProjects.map(p => new Date(p.startDate));
    const allEndDates = filteredProjects.map(p => new Date(p.endDate));
    const minProjectStart = new Date(Math.min(...allStartDates.map(d => d.getTime())));
    const maxProjectEnd = new Date(Math.max(...allEndDates.map(d => d.getTime())));
    
    if (timeRange === "future") {
      // Desde el mes actual hasta el fin del proyecto más tardío
      const start = currentMonthStart;
      const end = new Date(maxProjectEnd.getFullYear(), maxProjectEnd.getMonth() + 1, 0);
      
      return {
        timelineStart: start,
        timelineEnd: end,
        months: getMonthsBetween(start, end),
      };
    } else if (timeRange === "past") {
      // Desde el inicio del proyecto más antiguo hasta el mes actual
      const start = new Date(minProjectStart.getFullYear(), minProjectStart.getMonth(), 1);
      const end = currentMonthEnd;
      
      return {
        timelineStart: start,
        timelineEnd: end,
        months: getMonthsBetween(start, end),
      };
    } else {
      // "all" - Desde el inicio del proyecto más antiguo hasta el fin del más tardío
      const start = new Date(minProjectStart.getFullYear(), minProjectStart.getMonth(), 1);
      const end = new Date(maxProjectEnd.getFullYear(), maxProjectEnd.getMonth() + 1, 0);
      
      return {
        timelineStart: start,
        timelineEnd: end,
        months: getMonthsBetween(start, end),
      };
    }
  }, [filteredProjects, timeRange]);

  // Calcular meses visibles según el modo de vista
  // En modo "todo", mostrar TODOS los meses (scroll horizontal en el timeline)
  // En modo "pasado", empezamos desde los meses más recientes
  const visibleMonths = useMemo(() => {
    // En modo "todo", mostrar todos los meses
    if (timeRange === "all") {
      return months;
    }
    
    const monthsToShow = viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12;
    
    if (timeRange === "past") {
      // En pasado, viewOffset 0 = meses más recientes (final del array)
      const maxOffset = Math.max(0, months.length - monthsToShow);
      const startIdx = Math.max(0, maxOffset - viewOffset);
      return months.slice(startIdx, startIdx + monthsToShow);
    } else {
      // En futuro, viewOffset 0 = primeros meses
      const startIdx = Math.max(0, Math.min(viewOffset, months.length - monthsToShow));
      return months.slice(startIdx, startIdx + monthsToShow);
    }
  }, [months, viewMode, viewOffset, timeRange]);

  // 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 monthsToShow = viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12;
  const maxOffset = Math.max(0, months.length - monthsToShow);
  const canGoBack = viewOffset > 0;
  const canGoForward = viewOffset < maxOffset;

  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;
    setViewOffset(Math.min(maxOffset, viewOffset + step));
  };

  const goToToday = () => {
    setViewOffset(0); // Volver al mes actual
  };

  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="h-screen flex flex-col bg-gradient-to-br from-gray-50 to-gray-100">
      {/* Header - siempre visible */}
      <header className="bg-white border-b border-gray-200 flex-shrink-0 z-10">
        <div className="px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between flex-wrap gap-4">
            <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 flex-wrap">
              {/* 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 rango temporal */}
              <div className="flex items-center gap-1 border rounded-lg p-1">
                <Button
                  variant={timeRange === "past" ? "default" : "ghost"}
                  size="sm"
                  onClick={() => { setTimeRange("past"); setViewOffset(0); }}
                >
                  <History className="w-4 h-4 mr-1" />
                  Pasado
                </Button>
                <Button
                  variant={timeRange === "future" ? "default" : "ghost"}
                  size="sm"
                  onClick={() => { setTimeRange("future"); setViewOffset(0); }}
                >
                  <Clock className="w-4 h-4 mr-1" />
                  Futuro
                </Button>
                <Button
                  variant={timeRange === "all" ? "default" : "ghost"}
                  size="sm"
                  onClick={() => { setTimeRange("all"); setViewOffset(0); }}
                >
                  <Calendar className="w-4 h-4 mr-1" />
                  Todo
                </Button>
              </div>

              {/* 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} disabled={viewOffset === 0}>
                  <Calendar className="w-4 h-4 mr-1" />
                  Inicio
                </Button>
                <Button variant="outline" size="icon" onClick={goForward} disabled={!canGoForward}>
                  <ChevronRight className="w-4 h-4" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Content - área scrollable */}
      <main className="flex-1 overflow-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 w-full">
            <CardContent className="p-0 overflow-hidden">
              <div className="flex w-full overflow-hidden">
                {/* Columna de nombres de proyectos - fija */}
                <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 - scroll horizontal en modo "todo" */}
                <div 
                  className={`${timeRange === "all" ? "overflow-x-auto overflow-y-hidden" : "overflow-hidden"}`}
                  style={{ width: "calc(100% - 256px)" }}
                >
                  <div style={{ width: timeRange === "all" ? `${visibleMonths.length * 100}px` : "100%" }}>
                    {/* Header con meses */}
                    <div className="h-16 border-b border-gray-200 flex">
                      {visibleMonths.map((month) => {
                        const isCurrentMonth = new Date().getMonth() === month.month && new Date().getFullYear() === month.year;
                        
                        return (
                          <div
                            key={`${month.year}-${month.month}`}
                            className={`flex-1 border-r border-gray-200 flex flex-col justify-center px-2 ${
                              isCurrentMonth ? "bg-blue-50" : "bg-white"
                            }`}
                          >
                            <span className={`text-xs font-medium ${isCurrentMonth ? "text-blue-700" : "text-gray-600"}`}>
                              {month.label}
                            </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 basado en días
                        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) => {
                                const isCurrentMonth = new Date().getMonth() === month.month && new Date().getFullYear() === month.year;
                                
                                return (
                                  <div
                                    key={`grid-${month.year}-${month.month}`}
                                    className={`flex-1 border-r border-gray-100 ${
                                      isCurrentMonth ? "bg-blue-50/30" : ""
                                    }`}
                                  />
                                );
                              })}
                            </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>
              </div>
            </CardContent>
          </Card>
        )}
      </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>
  );
}