Project-Management-V2/frontend/app/main/overview/dashboard/components/activeProjectTimeLine/index.tsx

"use client";

import { getAllActiveProjectsTimelineApi } from "@/app/utils/api/projectApi";
import { Card } from "ikoncomponents";
import { useEffect, useMemo, useState } from "react";
import {
  ResponsiveContainer,
  CartesianGrid,
  XAxis,
  YAxis,
  Tooltip,
  BarChart,
  Bar,
  Cell,
  ReferenceLine,
} from "recharts";

const months = [
  "Jan", "Feb", "Mar", "Apr", "May", "Jun", 
  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];

const colors = [
  "#62D6B0",
  "#7C6AE6",
  "#F09B7E",
  "#4DA3FF",
  "#FFB84D",
  "#FF6B81",
];

export default function ProjectTimelineChart() {
  const [projects, setProjects] = useState<any[]>([]);

  useEffect(() => {
    const fetchTimelineData = async () => {
      try {
        const response = await getAllActiveProjectsTimelineApi();

        const formattedProjects = response.map((project: any, index: number) => ({
          ...project,
          color: colors[index % colors.length],
        }));

        setProjects(formattedProjects);
      } catch (error) {
        console.error("Error fetching timeline data:", error);
      }
    };

    fetchTimelineData();
  }, []);

  // 1. Process your raw api dates into startOffsets and visual durations
  const chartData = useMemo(() => {
    return projects.map((project) => {
      const startDate = new Date(project.startDate);
      const endDate = new Date(project.endDate);

      const startMonth = startDate.getMonth();
      const endMonth = endDate.getMonth();
      
      // Calculate continuous month count width span
      const duration = Math.max(1, endMonth - startMonth + 1);

      return {
        projectName: project.projectName,
        startOffset: startMonth,
        duration: duration,
        color: project.color,
        rawStartDate: project.startDate,
        rawEndDate: project.endDate,
      };
    });
  }, [projects]);

  // 2. Dynamic Year calculations pulled safely from the project timeline data
  const currentYear = useMemo(() => {
    if (projects.length === 0) return new Date().getFullYear();
    return new Date(projects[0].startDate).getFullYear();
  }, [projects]);

  const currentMonth = new Date().getMonth();

  // Custom tooltips configuration mapping to raw date text strings
  const CustomTooltip = ({ active, payload }: any) => {
    if (active && payload && payload.length) {
      const data = payload[0].payload;
      return (
        <div className="bg-background border border-border p-3 rounded-xl shadow-md text-xs">
          <p className="font-bold mb-1 text-foreground">{data.projectName}</p>
          <p className="text-muted-foreground">
            {data.rawStartDate} → {data.rawEndDate}
          </p>
        </div>
      );
    }
    return null;
  };

  return (
    <Card className="w-full rounded-2xl p-4">
      {/* Chart Header & Dynamic Legends */}
      <div className="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <h2 className="text-xl font-semibold">
          Project Timeline — {currentYear}
        </h2>

        <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
          {projects.map((project) => (
            <div
              key={project.projectIdentifier}
              className="flex items-center gap-2"
            >
              <div
                className="h-3 w-3 rounded-sm"
                style={{ backgroundColor: project.color }}
              />
              <span className="text-foreground">{project.projectName}</span>
            </div>
          ))}

          <div className="flex items-center gap-2">
            <div className="h-4 w-0.5 bg-red-500" />
            <span className="text-foreground">Today</span>
          </div>
        </div>
      </div>

      {/* Chart Canvas Wrap */}
      <div className="h-80">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            data={chartData}
            layout="vertical"
            stackOffset="none"
            margin={{ top: 5, right: 10, left: -10, bottom: 5 }}
            barCategoryGap="30%"
          >
            <CartesianGrid
              stroke="#E5E7EB"
              vertical={true}
              horizontal={true}
            />

            <XAxis
              type="number"
              domain={[0, 11]}
              ticks={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]}
              tickFormatter={(value) => months[value]}
              tickLine={false}
              axisLine={false}
              orientation="top"
              className="text-xs font-medium text-muted-foreground"
            />

            <YAxis
              type="category"
              dataKey="projectName"
              tickLine={false}
              axisLine={false}
              width={120}
              className="text-sm font-semibold text-foreground"
            />

            <Tooltip content={<CustomTooltip />} />

            {/* "Today" Reference Line indicator */}
            <ReferenceLine
              x={currentMonth}
              stroke="red"
              strokeDasharray="5 5"
              strokeWidth={1.5}
            />

            {/* Invisible offset pushing real data blocks forward to match target calendar periods */}
            <Bar
              dataKey="startOffset"
              stackId="timeline"
              fill="transparent"
              legendType="none"
            />

            {/* Rendered Colored Blocks */}
            <Bar dataKey="duration" stackId="timeline" radius={6}>
              {chartData.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} />
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
}