trello_fake/components/gantt/gantt-page.tsx

"use client";

import { useState, useEffect, useMemo, useRef, useCallback } from "react";
import { useRouter } from "next/navigation";
import {
  GanttChart as GanttIcon,
  AlertCircle,
  ChevronLeft,
  ChevronRight,
  Calendar,
  History,
  Clock,
  Filter,
} from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
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 dark:bg-blue-900/40", hex: "#3b82f6" },
  { bg: "bg-violet-500", light: "bg-violet-100 dark:bg-violet-900/40", hex: "#8b5cf6" },
  { bg: "bg-cyan-500", light: "bg-cyan-100 dark:bg-cyan-900/40", hex: "#06b6d4" },
  { bg: "bg-emerald-500", light: "bg-emerald-100 dark:bg-emerald-900/40", hex: "#10b981" },
  { bg: "bg-amber-500", light: "bg-amber-100 dark:bg-amber-900/40", hex: "#f59e0b" },
  { bg: "bg-rose-500", light: "bg-rose-100 dark:bg-rose-900/40", hex: "#f43f5e" },
  { bg: "bg-pink-500", light: "bg-pink-100 dark:bg-pink-900/40", hex: "#ec4899" },
  { bg: "bg-indigo-500", light: "bg-indigo-100 dark:bg-indigo-900/40", hex: "#6366f1" },
  { bg: "bg-teal-500", light: "bg-teal-100 dark:bg-teal-900/40", hex: "#14b8a6" },
  { bg: "bg-orange-500", light: "bg-orange-100 dark:bg-orange-900/40", hex: "#f97316" },
];

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

const MONTH_WIDTH_PX = 120; // Ancho fijo por mes en modo scroll

type ViewMode = "month" | "quarter" | "year";
type TimeRange = "future" | "past" | "all";

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

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

function getDaysBetween(start: Date, end: Date): number {
  return Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
}

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;
}

export default function GanttPage() {
  const router = useRouter();
  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>("all");
  const [viewOffset, setViewOffset] = useState(0);

  // Refs para sincronizar scroll vertical entre nombres y timeline
  const namesRef = useRef<HTMLDivElement>(null);
  const timelineRef = useRef<HTMLDivElement>(null);
  const isSyncing = useRef(false);

  const syncScroll = useCallback((source: "names" | "timeline") => {
    if (isSyncing.current) return;
    isSyncing.current = true;
    const from = source === "names" ? namesRef.current : timelineRef.current;
    const to = source === "names" ? timelineRef.current : namesRef.current;
    if (from && to) {
      to.scrollTop = from.scrollTop;
    }
    requestAnimationFrame(() => { isSyncing.current = false; });
  }, []);

  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 por estado
  const statusFiltered = useMemo(() => {
    if (statusFilter === "all") return projects;
    return projects.filter(p => p.status === statusFilter);
  }, [projects, statusFilter]);

  // Filtrar por rango temporal
  const filteredProjects = useMemo(() => {
    const now = new Date();
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

    if (timeRange === "future") {
      return statusFiltered.filter(p => new Date(p.endDate) >= today);
    } else if (timeRange === "past") {
      return statusFiltered.filter(p => new Date(p.endDate) < today);
    }
    return statusFiltered; // "all"
  }, [statusFiltered, timeRange]);

  // Calcular meses del timeline completo
  const allMonths = useMemo(() => {
    if (filteredProjects.length === 0) {
      const now = new Date();
      const start = new Date(now.getFullYear(), now.getMonth() - 3, 1);
      const end = new Date(now.getFullYear(), now.getMonth() + 3, 0);
      return getMonthsBetween(start, end);
    }

    const allStartDates = filteredProjects.map(p => new Date(p.startDate));
    const allEndDates = filteredProjects.map(p => new Date(p.endDate));
    const minStart = new Date(Math.min(...allStartDates.map(d => d.getTime())));
    const maxEnd = new Date(Math.max(...allEndDates.map(d => d.getTime())));

    const now = new Date();
    const currentMonthStart = new Date(now.getFullYear(), now.getMonth(), 1);
    const currentMonthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0);

    if (timeRange === "future") {
      return getMonthsBetween(currentMonthStart, new Date(maxEnd.getFullYear(), maxEnd.getMonth() + 1, 0));
    } else if (timeRange === "past") {
      return getMonthsBetween(new Date(minStart.getFullYear(), minStart.getMonth(), 1), currentMonthEnd);
    }
    // "all": desde el primer proyecto hasta el último
    return getMonthsBetween(
      new Date(minStart.getFullYear(), minStart.getMonth(), 1),
      new Date(maxEnd.getFullYear(), maxEnd.getMonth() + 1, 0)
    );
  }, [filteredProjects, timeRange]);

  // Meses visibles: en modo "all" se muestran todos (scroll), en otros modos se pagina
  const visibleMonths = useMemo(() => {
    if (timeRange === "all") return allMonths;

    const monthsToShow = viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12;

    if (timeRange === "past") {
      const maxOff = Math.max(0, allMonths.length - monthsToShow);
      const startIdx = Math.max(0, maxOff - viewOffset);
      return allMonths.slice(startIdx, startIdx + monthsToShow);
    }
    const startIdx = Math.max(0, Math.min(viewOffset, allMonths.length - monthsToShow));
    return allMonths.slice(startIdx, startIdx + monthsToShow);
  }, [allMonths, viewMode, viewOffset, timeRange]);

  // Rango visible en días
  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 (solo para modos paginados, no "all")
  const monthsToShow = viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12;
  const maxOffset = Math.max(0, allMonths.length - monthsToShow);
  const canGoBack = timeRange !== "all" && viewOffset > 0;
  const canGoForward = timeRange !== "all" && 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);

  // ¿El timeline usa ancho fijo (scroll horizontal) o flexible (fill)?
  const useFixedWidth = timeRange === "all";
  const timelineInnerWidth = useFixedWidth ? visibleMonths.length * MONTH_WIDTH_PX : undefined;

  if (error) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <AlertCircle className="w-16 h-16 text-red-400 dark:text-red-500 mx-auto mb-4" />
          <p className="text-red-600 dark:text-red-400 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-background">
      {/* Header */}
      <header className="bg-card border-b 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-foreground">Diagrama de Gantt</h1>
                <p className="text-sm text-muted-foreground">
                  Timeline de {filteredProjects.length} proyecto{filteredProjects.length !== 1 ? "s" : ""}
                </p>
              </div>
            </div>

            {/* Controles */}
            <div className="flex items-center gap-3 flex-wrap">
              {/* Filtro de estado */}
              <Select value={statusFilter} onValueChange={(v) => { setStatusFilter(v); setViewOffset(0); }}>
                <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" />
                  Todos
                </Button>
              </div>

              {/* Selector de vista y navegación - solo en modos paginados */}
              {timeRange !== "all" && (
                <>
                  <Select value={viewMode} onValueChange={(v: ViewMode) => { setViewMode(v); setViewOffset(0); }}>
                    <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>

                  <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 */}
      <main className="flex-1 overflow-hidden px-4 sm:px-6 lg:px-8 py-6">
        {loading ? (
          <GanttSkeleton />
        ) : filteredProjects.length === 0 ? (
          <Card className="border">
            <CardContent className="py-16 text-center">
              <GanttIcon className="w-16 h-16 text-muted-foreground/50 mx-auto mb-4" />
              <h3 className="text-xl font-semibold text-foreground">No hay proyectos</h3>
              <p className="text-muted-foreground mt-2">No se encontraron proyectos con los filtros seleccionados</p>
            </CardContent>
          </Card>
        ) : (
          <Card className="border h-full flex flex-col overflow-hidden">
            <CardContent className="p-0 flex-1 overflow-hidden">
              <div className="flex h-full overflow-hidden">
                {/* Columna de nombres - fija, scroll vertical */}
                <div className="w-56 flex-shrink-0 border-r bg-muted/50 flex flex-col">
                  {/* Header nombres */}
                  <div className="h-12 border-b flex items-center px-4 flex-shrink-0">
                    <span className="font-semibold text-sm text-foreground">Proyecto</span>
                  </div>
                  {/* Lista nombres - scroll vertical */}
                  <div
                    ref={namesRef}
                    className="flex-1 overflow-y-auto overflow-x-hidden"
                    onScroll={() => syncScroll("names")}
                  >
                    {filteredProjects.map((project, index) => {
                      const color = getProjectColor(index);
                      return (
                        <div
                          key={project.id}
                          className="h-12 border-b flex items-center px-4 hover:bg-muted transition-colors cursor-pointer"
                          onClick={() => router.push(`/proyectos/${project.id}`)}
                        >
                          <div className="flex items-center gap-2.5 min-w-0">
                            <div className={`w-2.5 h-2.5 rounded-full ${color.bg} flex-shrink-0`} />
                            <div className="min-w-0">
                              <p className="text-sm font-medium text-foreground truncate" title={project.name}>
                                {project.name}
                              </p>
                              <p className="text-[11px] text-muted-foreground">{STATUS_LABELS[project.status]} · {project.progress}%</p>
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>

                {/* Timeline - scroll horizontal (en modo "all") + scroll vertical sincronizado */}
                <div
                  ref={timelineRef}
                  className="flex-1 min-w-0 overflow-auto"
                  onScroll={() => syncScroll("timeline")}
                >
                  <div style={{ width: timelineInnerWidth ? `${timelineInnerWidth}px` : "100%", minWidth: useFixedWidth ? undefined : "100%" }}>
                    {/* Header meses */}
                    <div className="h-12 border-b flex sticky top-0 z-10 bg-card">
                      {visibleMonths.map((month) => {
                        const isCurrentMonth = new Date().getMonth() === month.month && new Date().getFullYear() === month.year;
                        return (
                          <div
                            key={`${month.year}-${month.month}`}
                            className={`border-r flex items-center justify-center ${
                              isCurrentMonth ? "bg-blue-50 dark:bg-blue-950/30" : "bg-card"
                            }`}
                            style={{ width: useFixedWidth ? `${MONTH_WIDTH_PX}px` : undefined, flex: useFixedWidth ? "none" : 1 }}
                          >
                            <span className={`text-xs font-medium ${isCurrentMonth ? "text-blue-700 dark:text-blue-400" : "text-muted-foreground"}`}>
                              {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);

                        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(0.5, ((endOffset - startOffset) / totalDays) * 100);

                        const isVisible = projectEnd >= visibleStart && projectStart <= visibleEnd;
                        const isOverdue = projectEnd < new Date() && project.progress < 100 && project.status === "1";

                        return (
                          <div key={project.id} className="h-12 border-b 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={`border-r ${isCurrentMonth ? "bg-blue-50/30 dark:bg-blue-950/20" : ""}`}
                                    style={{ width: useFixedWidth ? `${MONTH_WIDTH_PX}px` : undefined, flex: useFixedWidth ? "none" : 1 }}
                                  />
                                );
                              })}
                            </div>

                            {/* Barra del proyecto */}
                            {isVisible && (
                              <Tooltip>
                                <TooltipTrigger asChild>
                                  <div
                                    className={`absolute top-1.5 h-9 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: "16px",
                                    }}
                                    onClick={() => router.push(`/proyectos/${project.id}`)}
                                  >
                                    <div className={`absolute inset-0 ${color.light} rounded-md`} />
                                    <div
                                      className={`absolute inset-y-0 left-0 ${color.bg} rounded-md transition-all`}
                                      style={{ width: `${project.progress}%` }}
                                    />
                                    <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-muted-foreground">Estado:</span> {STATUS_LABELS[project.status]}</p>
                                      <p><span className="text-muted-foreground">Progreso:</span> {project.progress}%</p>
                                      <p><span className="text-muted-foreground">Inicio:</span> {formatDate(project.startDate)}</p>
                                      <p><span className="text-muted-foreground">Fin:</span> {formatDate(project.endDate)}</p>
                                      <p><span className="text-muted-foreground">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 h-full">
      <CardContent className="p-0 h-full">
        <div className="flex h-full">
          <div className="w-56 flex-shrink-0 border-r bg-muted/50">
            <div className="h-12 border-b flex items-center px-4">
              <Skeleton className="h-4 w-20" />
            </div>
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="h-12 border-b flex items-center px-4">
                <div className="flex items-center gap-2.5">
                  <Skeleton className="w-2.5 h-2.5 rounded-full" />
                  <div>
                    <Skeleton className="h-3.5 w-28 mb-1" />
                    <Skeleton className="h-2.5 w-16" />
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="flex-1">
            <div className="h-12 border-b flex">
              {Array.from({ length: 6 }).map((_, i) => (
                <div key={i} className="flex-1 border-r flex items-center justify-center">
                  <Skeleton className="h-3.5 w-16" />
                </div>
              ))}
            </div>
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="h-12 border-b px-4 flex items-center">
                <Skeleton className="h-7 w-full max-w-md rounded-md" />
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}