trello_fake/components/project-detail/project-task-gantt.tsx

"use client";

import Link from "next/link";
import { useEffect, useMemo, useRef, useState } from "react";
import {
  AlertTriangle,
  CalendarClock,
  CalendarDays,
  CheckCircle2,
  ChevronLeft,
  ChevronRight,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Task, TASK_STATUS_CONFIG } from "@/types/task";

type Zoom = "fit" | "week" | "day";

interface ProjectTaskGanttProps {
  tasks: Task[];
}

interface TaskTimelineItem {
  task: Task;
  start: Date;
  end: Date;
}

interface Tick {
  key: string;
  label: string;
  date: Date;
}

const LEFT_COL_WIDTH = 340;
const ROW_HEIGHT = 56;

function startOfDay(date: Date): Date {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}

function addDays(date: Date, days: number): Date {
  const next = new Date(date);
  next.setDate(next.getDate() + days);
  return next;
}

function diffDays(start: Date, end: Date): number {
  const msPerDay = 1000 * 60 * 60 * 24;
  return Math.floor((startOfDay(end).getTime() - startOfDay(start).getTime()) / msPerDay);
}

function parseTaskRange(task: Task): { start: Date; end: Date } | null {
  const startRaw = task.startDate || task.plannedStartDate || task.endDate || task.plannedEndDate;
  const endRaw = task.endDate || task.plannedEndDate || task.startDate || task.plannedStartDate;

  if (!startRaw || !endRaw) return null;

  const a = startOfDay(new Date(startRaw));
  const b = startOfDay(new Date(endRaw));
  if (isNaN(a.getTime()) || isNaN(b.getTime())) return null;

  return a <= b ? { start: a, end: b } : { start: b, end: a };
}

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

function monday(date: Date): Date {
  const d = startOfDay(date);
  const day = d.getDay();
  const offset = day === 0 ? -6 : 1 - day;
  return addDays(d, offset);
}

function buildWeekTicks(start: Date, end: Date): Tick[] {
  const ticks: Tick[] = [];
  let cursor = monday(start);
  while (cursor <= end) {
    ticks.push({
      key: `w-${cursor.getFullYear()}-${cursor.getMonth()}-${cursor.getDate()}`,
      label: cursor.toLocaleDateString("es-ES", { day: "2-digit", month: "short" }).toUpperCase(),
      date: cursor,
    });
    cursor = addDays(cursor, 7);
  }
  return ticks;
}

function buildDayTicks(start: Date, end: Date): Tick[] {
  const ticks: Tick[] = [];
  let cursor = startOfDay(start);
  while (cursor <= end) {
    ticks.push({
      key: `d-${cursor.getFullYear()}-${cursor.getMonth()}-${cursor.getDate()}`,
      label: cursor.toLocaleDateString("es-ES", { day: "2-digit" }),
      date: cursor,
    });
    cursor = addDays(cursor, 1);
  }
  return ticks;
}

export function ProjectTaskGantt({ tasks }: ProjectTaskGanttProps) {
  const [zoom, setZoom] = useState<Zoom>("fit");
  const [windowStartOffset, setWindowStartOffset] = useState(0);
  const viewportRef = useRef<HTMLDivElement | null>(null);
  const [viewportWidth, setViewportWidth] = useState(0);

  useEffect(() => {
    if (!viewportRef.current) return;

    const observer = new ResizeObserver((entries) => {
      const entry = entries[0];
      if (!entry) return;
      setViewportWidth(Math.floor(entry.contentRect.width));
    });

    observer.observe(viewportRef.current);
    return () => observer.disconnect();
  }, []);

  const timelineItems = useMemo<TaskTimelineItem[]>(() => {
    return tasks
      .map((task) => {
        const range = parseTaskRange(task);
        if (!range) return null;
        return { task, start: range.start, end: range.end };
      })
      .filter((item): item is TaskTimelineItem => item !== null)
      .sort((a, b) => a.start.getTime() - b.start.getTime());
  }, [tasks]);

  if (tasks.length === 0) {
    return (
      <Card>
        <CardContent className="py-12 text-center">
          <CalendarDays className="w-10 h-10 text-muted-foreground/60 mx-auto mb-3" />
          <p className="font-medium text-foreground">No hay tareas para mostrar en el Gantt</p>
          <p className="text-sm text-muted-foreground mt-1">Crea tareas con fechas para planificar el proyecto.</p>
        </CardContent>
      </Card>
    );
  }

  if (timelineItems.length === 0) {
    return (
      <Card>
        <CardContent className="py-12 text-center">
          <CalendarClock className="w-10 h-10 text-muted-foreground/60 mx-auto mb-3" />
          <p className="font-medium text-foreground">Faltan fechas en las tareas</p>
          <p className="text-sm text-muted-foreground mt-1">Asigna fecha de inicio y fin para usar el planificador.</p>
        </CardContent>
      </Card>
    );
  }

  const projectStart = new Date(Math.min(...timelineItems.map((item) => item.start.getTime())));
  const projectEnd = new Date(Math.max(...timelineItems.map((item) => item.end.getTime())));

  const fullStart = addDays(projectStart, -2);
  const fullEnd = addDays(projectEnd, 2);
  const fullDurationDays = Math.max(1, diffDays(fullStart, fullEnd) + 1);

  const completed = tasks.filter((task) => task.status === "2").length;
  const overdue = timelineItems.filter((item) => item.end < startOfDay(new Date()) && item.task.status !== "2").length;

  // Nueva filosofia:
  // - fit: todo el rango en pantalla (sin scroll horizontal)
  // - week/day: ventana movil con navegacion
  const windowDays = zoom === "fit" ? fullDurationDays : zoom === "week" ? 56 : 21;
  const clampedOffset = Math.max(0, Math.min(windowStartOffset, Math.max(0, fullDurationDays - windowDays)));
  const visibleStart = addDays(fullStart, clampedOffset);
  const visibleEnd = addDays(visibleStart, windowDays - 1);
  const visibleDurationDays = Math.max(1, diffDays(visibleStart, visibleEnd) + 1);

  const canGoBack = zoom !== "fit" && clampedOffset > 0;
  const canGoForward = zoom !== "fit" && clampedOffset + windowDays < fullDurationDays;

  const ticks = zoom === "day" ? buildDayTicks(visibleStart, visibleEnd) : buildWeekTicks(visibleStart, visibleEnd);

  const fitTimelineWidth = Math.max(
    360,
    (viewportWidth > 0 ? viewportWidth : LEFT_COL_WIDTH + 640) - LEFT_COL_WIDTH
  );

  const maxTimelineWidth = Math.max(320, fitTimelineWidth);
  const baseTickWidth = zoom === "fit" ? 72 : zoom === "week" ? 84 : 36;
  const tickWidth = Math.min(baseTickWidth, maxTimelineWidth / Math.max(1, ticks.length));
  const timelineWidth = Math.max(320, ticks.length * tickWidth);

  const today = startOfDay(new Date());
  const showToday = today >= visibleStart && today <= visibleEnd;
  const todayPercent = showToday ? (diffDays(visibleStart, today) / visibleDurationDays) * 100 : null;

  const goBack = () => {
    const step = zoom === "day" ? 7 : 28;
    setWindowStartOffset((current) => Math.max(0, current - step));
  };

  const goForward = () => {
    const step = zoom === "day" ? 7 : 28;
    setWindowStartOffset((current) => Math.min(Math.max(0, fullDurationDays - windowDays), current + step));
  };

  const setZoomAndReset = (next: Zoom) => {
    setZoom(next);
    setWindowStartOffset(0);
  };

  return (
    <div className="space-y-4 w-full min-w-0 overflow-x-hidden">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex flex-wrap gap-2">
          <Badge variant="outline">{tasks.length} tareas</Badge>
          <Badge variant="outline">{completed} completadas</Badge>
          <Badge variant="outline">{formatDate(visibleStart)} - {formatDate(visibleEnd)}</Badge>
          {overdue > 0 && (
            <Badge className="bg-red-100 text-red-700 hover:bg-red-100 dark:bg-red-900/35 dark:text-red-300">
              <AlertTriangle className="w-3.5 h-3.5 mr-1" />
              {overdue} retrasadas
            </Badge>
          )}
        </div>

        <div className="flex items-center gap-2">
          <div className="flex items-center gap-1 border rounded-md p-1">
            <Button size="sm" variant={zoom === "fit" ? "default" : "ghost"} onClick={() => setZoomAndReset("fit")}>Ajustar</Button>
            <Button size="sm" variant={zoom === "week" ? "default" : "ghost"} onClick={() => setZoomAndReset("week")}>Semanas</Button>
            <Button size="sm" variant={zoom === "day" ? "default" : "ghost"} onClick={() => setZoomAndReset("day")}>Días</Button>
          </div>

          {zoom !== "fit" && (
            <div className="flex items-center gap-1">
              <Button size="icon" variant="outline" onClick={goBack} disabled={!canGoBack} aria-label="Semana anterior">
                <ChevronLeft className="w-4 h-4" />
              </Button>
              <Button size="icon" variant="outline" onClick={goForward} disabled={!canGoForward} aria-label="Semana siguiente">
                <ChevronRight className="w-4 h-4" />
              </Button>
            </div>
          )}
        </div>
      </div>

      <Card className="border shadow-sm overflow-hidden w-full max-w-full">
        <CardContent className="p-0 w-full max-w-full overflow-hidden">
          <TooltipProvider>
            <div
              ref={viewportRef}
              className="w-full max-w-full max-h-[620px] overflow-x-auto overflow-y-auto overscroll-x-contain [scrollbar-gutter:stable_both-edges]"
            >
            <div
              style={{
                minWidth: zoom === "fit" ? "100%" : `${LEFT_COL_WIDTH + timelineWidth}px`,
                width: zoom === "fit" ? "100%" : "max-content",
              }}
            >
            <div
              className="border-b sticky top-0 z-20 bg-card/95 backdrop-blur"
              style={{ display: "grid", gridTemplateColumns: `${LEFT_COL_WIDTH}px ${timelineWidth}px` }}
            >
              <div className="h-12 border-r px-4 flex items-center text-xs font-semibold text-muted-foreground sticky left-0 z-30 bg-card/95">
                Tarea
              </div>
              <div className="h-12 flex">
                {ticks.map((tick) => (
                    <div
                      key={tick.key}
                      className="border-r flex items-center justify-center"
                      style={{ width: `${tickWidth}px` }}
                      title={tick.label}
                    >
                    <span className="text-[11px] font-medium text-muted-foreground uppercase">{tick.label}</span>
                  </div>
                ))}
              </div>
            </div>

            {timelineItems.map((item) => {
              const statusConfig = TASK_STATUS_CONFIG[item.task.status];
              const startsInWindow = item.end >= visibleStart && item.start <= visibleEnd;

              const startOffset = Math.max(0, diffDays(visibleStart, item.start));
              const endOffset = Math.min(visibleDurationDays, diffDays(visibleStart, item.end) + 1);
              const leftPercent = (startOffset / visibleDurationDays) * 100;
              const widthPercent = Math.max(0.7, ((endOffset - startOffset) / visibleDurationDays) * 100);
              const taskDurationDays = Math.max(1, diffDays(item.start, item.end) + 1);

              return (
                <div
                  key={item.task.id}
                  className="border-b"
                  style={{ display: "grid", gridTemplateColumns: `${LEFT_COL_WIDTH}px ${timelineWidth}px` }}
                >
                  <Link
                    href={`/tareas/${item.task.id}`}
                    className="h-[56px] border-r px-4 py-2 hover:bg-muted/50 transition-colors sticky left-0 z-10 bg-background"
                  >
                    <p className="text-sm font-semibold text-foreground truncate">{item.task.title}</p>
                    <div className="mt-1.5 flex items-center gap-2">
                      <Badge variant="outline" className={`text-[10px] px-1.5 py-0 h-5 ${statusConfig.bgClass}`}>
                        {statusConfig.label}
                      </Badge>
                      <span className="text-[11px] text-muted-foreground">{item.task.progress}%</span>
                      {item.task.status === "2" && <CheckCircle2 className="w-3.5 h-3.5 text-green-500" />}
                    </div>
                  </Link>

                  <div className="relative h-[56px]">
                    <div className="absolute inset-0 flex pointer-events-none">
                      {ticks.map((tick) => (
                        <div key={`grid-${item.task.id}-${tick.key}`} className="border-r" style={{ width: `${tickWidth}px` }} />
                      ))}
                    </div>

                    {todayPercent !== null && (
                      <div className="absolute top-0 bottom-0 w-px bg-red-400/70 z-[1]" style={{ left: `${todayPercent}%` }} />
                    )}

                    {startsInWindow && (() => {
                      const barWidthPx = Math.max((widthPercent / 100) * timelineWidth, zoom === "day" ? 28 : 40);
                      const showFullLabel = barWidthPx >= 72;
                      const showCompactLabel = !showFullLabel && barWidthPx >= 52;

                      return (
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Link
                              href={`/tareas/${item.task.id}`}
                              className="absolute top-1/2 -translate-y-1/2 h-9 rounded-md transition-all hover:scale-[1.01] hover:shadow-sm"
                              style={{
                                left: `${leftPercent}%`,
                                width: `${widthPercent}%`,
                                minWidth: zoom === "day" ? "28px" : "40px",
                              }}
                              aria-label={`${item.task.title} - ${item.task.progress}%`}
                            >
                              <div className="absolute inset-0 rounded-md bg-blue-100 dark:bg-blue-900/40" />
                              <div
                                className="absolute inset-y-0 left-0 rounded-md bg-gradient-to-r from-blue-500 to-violet-600"
                                style={{ width: `${Math.max(0, Math.min(100, item.task.progress))}%` }}
                              />
                              <div className="relative h-full px-2.5 flex items-center z-10">
                                {showFullLabel && (
                                  <span className="text-[11px] font-semibold text-white drop-shadow truncate">
                                    {`${item.task.progress}%`}
                                  </span>
                                )}
                                {showCompactLabel && (
                                  <span className="text-[11px] font-semibold text-white drop-shadow truncate">
                                    {`${item.task.progress}`}
                                  </span>
                                )}
                              </div>
                            </Link>
                          </TooltipTrigger>
                          <TooltipContent side="top" className="max-w-xs">
                            <div className="space-y-1 text-xs">
                              <p className="font-semibold text-sm">{item.task.title}</p>
                              <p><span className="text-muted-foreground">Progreso:</span> {item.task.progress}%</p>
                              <p><span className="text-muted-foreground">Estado:</span> {statusConfig.label}</p>
                              <p><span className="text-muted-foreground">Inicio:</span> {formatDate(item.start)}</p>
                              <p><span className="text-muted-foreground">Fin:</span> {formatDate(item.end)}</p>
                              <p><span className="text-muted-foreground">Duración:</span> {taskDurationDays} día{taskDurationDays === 1 ? "" : "s"}</p>
                            </div>
                          </TooltipContent>
                        </Tooltip>
                      );
                    })()}
                  </div>
                </div>
              );
            })}
            </div>
          </div>
          </TooltipProvider>
        </CardContent>
      </Card>
    </div>
  );
}