import React, { useMemo, useRef, useState, useEffect } from 'react';
import {
  Flag,
  Calendar,
  Clock,
  Briefcase,
  CheckCircle2,
  AlertCircle,
  Plus,
  Coins,
  ChevronLeft,
  ChevronRight,
  ZoomIn,
  ZoomOut,
  Compass,
  ArrowRight,
  Sparkles,
} from 'lucide-react';
import { Project, Milestone, Activity, ApprovalStatus, Priority } from '../../types';
import { formatDate, formatZAR, getApprovalStatusBadge, getPriorityBadge } from '../../lib/formatters';

interface ProjectTimelineGanttProps {
  project: Project;
  milestones: Milestone[];
  activities: Activity[];
  approvedBudgetTotal?: number;
  approvedBudgetsCount?: number;
  onManageMilestones: () => void;
  onManageActivities: () => void;
}

export const ProjectTimelineGantt: React.FC<ProjectTimelineGanttProps> = ({
  project,
  milestones,
  activities,
  approvedBudgetTotal = 0,
  approvedBudgetsCount = 0,
  onManageMilestones,
  onManageActivities,
}) => {
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const [zoomLevel, setZoomLevel] = useState<'compact' | 'standard' | 'expanded'>('standard');
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(false);

  // Compute timeline boundaries, first/last milestones, and ruler ticks
  const timelineData = useMemo(() => {
    const dates: number[] = [];

    if (project.startedAt) dates.push(new Date(project.startedAt).getTime());
    if (project.endedAt) dates.push(new Date(project.endedAt).getTime());

    milestones.forEach((m) => {
      if (m.dueAt) dates.push(new Date(m.dueAt).getTime());
    });

    activities.forEach((a) => {
      if (a.performedAt) dates.push(new Date(a.performedAt).getTime());
    });

    const now = Date.now();
    dates.push(now);

    let startMs: number;
    let endMs: number;

    if (dates.length > 0 && Math.min(...dates) !== Math.max(...dates)) {
      startMs = Math.min(...dates);
      endMs = Math.max(...dates);
      // Aesthetic buffer (6% on each side, minimum 10 days)
      const buffer = Math.max((endMs - startMs) * 0.06, 10 * 24 * 60 * 60 * 1000);
      startMs -= buffer;
      endMs += buffer;
    } else {
      // Default fallback
      startMs = now - 60 * 24 * 60 * 60 * 1000;
      endMs = now + 240 * 24 * 60 * 60 * 1000;
    }

    const totalDurationMs = endMs - startMs;

    // Helper to calculate percentage offset along timeline
    const getPercent = (timeMs: number): number => {
      const clamped = Math.max(startMs, Math.min(endMs, timeMs));
      return ((clamped - startMs) / totalDurationMs) * 100;
    };

    // Monthly ruler ticks
    const ticks: { label: string; yearLabel?: string; percent: number; isStartOfYear: boolean; isQuarter: boolean }[] = [];
    const currDate = new Date(startMs);
    currDate.setDate(1);
    currDate.setHours(0, 0, 0, 0);

    while (currDate.getTime() <= endMs) {
      if (currDate.getTime() >= startMs) {
        const monthNum = currDate.getMonth();
        ticks.push({
          label: currDate.toLocaleDateString('en-GB', { month: 'short' }),
          yearLabel: currDate.getFullYear().toString(),
          percent: getPercent(currDate.getTime()),
          isStartOfYear: monthNum === 0,
          isQuarter: monthNum % 3 === 0,
        });
      }
      currDate.setMonth(currDate.getMonth() + 1);
    }

    // Sort milestones chronologically
    const sortedMilestones = [...milestones].sort(
      (a, b) => new Date(a.dueAt || 0).getTime() - new Date(b.dueAt || 0).getTime()
    );

    // Identify first and last milestones
    const firstMilestone = sortedMilestones.length > 0 ? sortedMilestones[0] : null;
    const lastMilestone = sortedMilestones.length > 0 ? sortedMilestones[sortedMilestones.length - 1] : null;

    // Sort activities chronologically
    const sortedActivities = [...activities].sort(
      (a, b) => new Date(a.performedAt || 0).getTime() - new Date(b.performedAt || 0).getTime()
    );

    const todayPercent = getPercent(now);
    const isTodayInRange = todayPercent >= 0 && todayPercent <= 100;

    const projectStartPercent = project.startedAt ? getPercent(new Date(project.startedAt).getTime()) : null;
    const projectEndPercent = project.endedAt ? getPercent(new Date(project.endedAt).getTime()) : null;

    return {
      startMs,
      endMs,
      totalDurationDays: Math.round(totalDurationMs / (1000 * 60 * 60 * 24)),
      getPercent,
      ticks,
      sortedMilestones,
      firstMilestone,
      lastMilestone,
      sortedActivities,
      todayPercent,
      isTodayInRange,
      projectStartPercent,
      projectEndPercent,
    };
  }, [project, milestones, activities]);

  // Check scroll capability
  const updateScrollState = () => {
    const el = scrollContainerRef.current;
    if (!el) return;
    setCanScrollLeft(el.scrollLeft > 10);
    setCanScrollRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 10);
  };

  useEffect(() => {
    updateScrollState();
    const el = scrollContainerRef.current;
    if (el) {
      el.addEventListener('scroll', updateScrollState);
      window.addEventListener('resize', updateScrollState);
    }
    return () => {
      if (el) el.removeEventListener('scroll', updateScrollState);
      window.removeEventListener('resize', updateScrollState);
    };
  }, [timelineData, zoomLevel]);

  // Horizontal shift handlers (requirement 4)
  const handleScrollLeft = () => {
    if (!scrollContainerRef.current) return;
    scrollContainerRef.current.scrollBy({ left: -360, behavior: 'smooth' });
  };

  const handleScrollRight = () => {
    if (!scrollContainerRef.current) return;
    scrollContainerRef.current.scrollBy({ left: 360, behavior: 'smooth' });
  };

  // Quick jump handlers (requirement 5)
  const scrollToPercent = (percent: number) => {
    const el = scrollContainerRef.current;
    if (!el) return;
    const totalWidth = el.scrollWidth;
    const clientWidth = el.clientWidth;
    const targetScrollLeft = (percent / 100) * totalWidth - clientWidth / 2;
    el.scrollTo({ left: Math.max(0, targetScrollLeft), behavior: 'smooth' });
  };

  const scrollToMilestone = (m: Milestone) => {
    if (!m.dueAt) return;
    const pct = timelineData.getPercent(new Date(m.dueAt).getTime());
    scrollToPercent(pct);
  };

  const scrollToToday = () => {
    if (timelineData.isTodayInRange) {
      scrollToPercent(timelineData.todayPercent);
    }
  };

  const scrollToProjectStart = () => {
    if (timelineData.projectStartPercent !== null) {
      scrollToPercent(timelineData.projectStartPercent);
    } else if (timelineData.firstMilestone) {
      scrollToMilestone(timelineData.firstMilestone);
    }
  };

  const scrollToProjectEnd = () => {
    if (timelineData.projectEndPercent !== null) {
      scrollToPercent(timelineData.projectEndPercent);
    } else if (timelineData.lastMilestone) {
      scrollToMilestone(timelineData.lastMilestone);
    }
  };

  // Zoom width classes
  const canvasWidthClass =
    zoomLevel === 'compact'
      ? 'min-w-[1200px]'
      : zoomLevel === 'standard'
      ? 'min-w-[1900px]'
      : 'min-w-[2800px]';

  const verifiedMilestonesCount = milestones.filter((m) => m.status === ApprovalStatus.Approved).length;
  const milestoneProgress = milestones.length > 0 ? Math.round((verifiedMilestonesCount / milestones.length) * 100) : 0;
  const totalActivityBudget = activities.reduce((sum, a) => sum + (Number(a.amount) || 0), 0);

  return (
    <div className="bg-[#0b101c] rounded-2xl border border-slate-800/80 p-4 sm:p-5 space-y-4 shadow-xl w-full min-w-0 relative">
      {/* Timeline Header, Key Stats & Enhanced Navigation Bar */}
      <div className="flex flex-col xl:flex-row xl:items-center justify-between gap-3.5 pb-4 border-b border-slate-800/80 min-w-0">
        {/* Title & Span Info */}
        <div className="flex items-center gap-3 min-w-0 flex-1">
          <div className="h-10 w-10 rounded-2xl bg-gradient-to-br from-blue-600/20 to-indigo-600/20 border border-blue-500/30 flex items-center justify-center text-blue-400 shadow-md shadow-blue-500/10 shrink-0">
            <Calendar className="w-5 h-5" />
          </div>
          <div className="min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <h4 className="text-sm font-bold text-white tracking-wide uppercase">
                Implementation Schedule & Timeline Gantt
              </h4>
              <span className="text-[11px] font-semibold text-blue-400 bg-blue-500/10 px-2 py-0.5 rounded-full border border-blue-500/30">
                {timelineData.totalDurationDays} Days Span
              </span>
              {project.startedAt && project.endedAt && (
                <span className="text-[11px] text-slate-400 font-mono">
                  ({formatDate(project.startedAt)} &rarr; {formatDate(project.endedAt)})
                </span>
              )}
            </div>
            <p className="text-xs text-slate-400 mt-0.5 truncate">
              Chronological alignment of contractual deliverables, work breakdown activities, and target milestones.
            </p>
          </div>
        </div>

        {/* Enhanced Navigation Toolbar (Quick Jump, Zoom, Scroll Controls) */}
        <div className="flex items-center gap-2 flex-wrap shrink-0">
          {/* Quick Jump Buttons (Requirement 5) */}
          <div className="flex items-center gap-1.5 p-1 bg-slate-900/90 rounded-xl border border-slate-800 text-xs flex-wrap">
            <span className="text-[10px] uppercase font-bold text-slate-500 px-1.5 hidden sm:inline">Jump:</span>

            {/* Jump to First Milestone */}
            {timelineData.firstMilestone ? (
              <button
                type="button"
                onClick={() => scrollToMilestone(timelineData.firstMilestone!)}
                className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-[11px] font-semibold bg-emerald-500/15 hover:bg-emerald-500/25 text-emerald-300 border border-emerald-500/30 transition cursor-pointer shadow-xs"
                title={`Jump to First Milestone: "${timelineData.firstMilestone.name}" (${formatDate(timelineData.firstMilestone.dueAt)})`}
              >
                <Flag className="w-3 h-3 text-emerald-400" />
                <span className="max-w-[120px] truncate">
                  Start: {timelineData.firstMilestone.name}
                </span>
              </button>
            ) : project.startedAt ? (
              <button
                type="button"
                onClick={scrollToProjectStart}
                className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-[11px] font-semibold bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition cursor-pointer"
                title={`Jump to Project Start (${formatDate(project.startedAt)})`}
              >
                <Calendar className="w-3 h-3 text-blue-400" />
                <span>Start Date</span>
              </button>
            ) : null}

            {/* Jump to Today */}
            {timelineData.isTodayInRange && (
              <button
                type="button"
                onClick={scrollToToday}
                className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-[11px] font-semibold bg-amber-500/15 hover:bg-amber-500/25 text-amber-300 border border-amber-500/40 transition cursor-pointer shadow-xs"
                title="Jump directly to current date on timeline"
              >
                <Clock className="w-3 h-3 text-amber-400" />
                <span>Today</span>
              </button>
            )}

            {/* Jump to Last Milestone */}
            {timelineData.lastMilestone ? (
              <button
                type="button"
                onClick={() => scrollToMilestone(timelineData.lastMilestone!)}
                className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-[11px] font-semibold bg-indigo-500/15 hover:bg-indigo-500/25 text-indigo-300 border border-indigo-500/30 transition cursor-pointer shadow-xs"
                title={`Jump to Final Milestone: "${timelineData.lastMilestone.name}" (${formatDate(timelineData.lastMilestone.dueAt)})`}
              >
                <CheckCircle2 className="w-3 h-3 text-indigo-400" />
                <span className="max-w-[120px] truncate">
                  Final: {timelineData.lastMilestone.name}
                </span>
              </button>
            ) : project.endedAt ? (
              <button
                type="button"
                onClick={scrollToProjectEnd}
                className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-[11px] font-semibold bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition cursor-pointer"
                title={`Jump to Project Target End (${formatDate(project.endedAt)})`}
              >
                <Calendar className="w-3 h-3 text-indigo-400" />
                <span>Target End</span>
              </button>
            ) : null}
          </div>

          {/* Zoom Level Selector */}
          <div className="flex items-center p-0.5 bg-slate-900/90 rounded-xl border border-slate-800 text-[11px]">
            <button
              type="button"
              onClick={() => setZoomLevel('compact')}
              className={`px-2 py-1 rounded-lg font-medium transition cursor-pointer ${
                zoomLevel === 'compact'
                  ? 'bg-blue-600 text-white shadow-xs'
                  : 'text-slate-400 hover:text-white'
              }`}
              title="Compact View (Fits broader duration)"
            >
              Fit
            </button>
            <button
              type="button"
              onClick={() => setZoomLevel('standard')}
              className={`px-2 py-1 rounded-lg font-medium transition cursor-pointer ${
                zoomLevel === 'standard'
                  ? 'bg-blue-600 text-white shadow-xs'
                  : 'text-slate-400 hover:text-white'
              }`}
              title="Standard View (Balanced spacing)"
            >
              Standard
            </button>
            <button
              type="button"
              onClick={() => setZoomLevel('expanded')}
              className={`px-2 py-1 rounded-lg font-medium transition cursor-pointer ${
                zoomLevel === 'expanded'
                  ? 'bg-blue-600 text-white shadow-xs'
                  : 'text-slate-400 hover:text-white'
              }`}
              title="Expanded View (Deep detail, optimal for scrolling)"
            >
              Expanded
            </button>
          </div>

          {/* Scroll Shift Buttons in Top Header */}
          <div className="flex items-center gap-1">
            <button
              type="button"
              onClick={handleScrollLeft}
              disabled={!canScrollLeft}
              className="p-1.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-slate-300 hover:text-white border border-slate-700/80 transition cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
              title="Shift timeline left (360px)"
              aria-label="Scroll left"
            >
              <ChevronLeft className="w-4 h-4" />
            </button>
            <button
              type="button"
              onClick={handleScrollRight}
              disabled={!canScrollRight}
              className="p-1.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-slate-300 hover:text-white border border-slate-700/80 transition cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
              title="Shift timeline right (360px)"
              aria-label="Scroll right"
            >
              <ChevronRight className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>

      {/* Milestone & Activity Legend & Milestone Span Pill */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2.5 text-xs text-slate-400 flex-wrap">
        <div className="flex items-center gap-3 flex-wrap">
          <span className="flex items-center gap-1.5">
            <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-sm shadow-emerald-500/50 inline-block" />
            <strong className="text-slate-300">Verified Milestone</strong>
          </span>
          <span className="flex items-center gap-1.5">
            <span className="w-2.5 h-2.5 rounded-full bg-amber-500 shadow-sm shadow-amber-500/50 inline-block" />
            <strong className="text-slate-300">Pending Review</strong>
          </span>
          <span className="flex items-center gap-1.5">
            <span className="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-sm shadow-blue-500/50 inline-block" />
            <strong className="text-slate-300">Contractual Deliverable</strong>
          </span>
          <span className="flex items-center gap-1.5">
            <span className="w-2.5 h-2.5 rounded-sm bg-cyan-500 shadow-sm shadow-cyan-500/50 inline-block" />
            <strong className="text-slate-300">Work Activity</strong>
          </span>
        </div>

        {/* First & Last Milestone Span Pill (Requirement 5) */}
        {timelineData.firstMilestone && timelineData.lastMilestone && (
          <div className="flex items-center gap-1.5 text-[11px] font-mono bg-slate-900/90 px-3 py-1 rounded-full border border-slate-800 text-slate-300">
            <span className="text-emerald-400 font-semibold">1st: {formatDate(timelineData.firstMilestone.dueAt)}</span>
            <ArrowRight className="w-3 h-3 text-slate-500" />
            <span className="text-indigo-400 font-semibold">Final: {formatDate(timelineData.lastMilestone.dueAt)}</span>
          </div>
        )}
      </div>

      {/* Scrollable Timeline Visualization Container */}
      <div className="relative group/timeline rounded-2xl border border-slate-800/90 bg-[#070b13] overflow-hidden shadow-2xl">
        {/* Scrollable Viewport */}
        <div
          ref={scrollContainerRef}
          className="overflow-x-auto scrollbar-thin scrollbar-thumb-slate-700 scrollbar-track-slate-900 scroll-smooth w-full select-none"
        >
          {/* Inner Canvas with expansive width */}
          <div className={`relative pt-7 pb-14 px-6 min-h-[340px] ${canvasWidthClass}`}>
            {/* Background vertical month grid lines */}
            <div className="absolute inset-0 pointer-events-none">
              {timelineData.ticks.map((tick, idx) => (
                <div
                  key={idx}
                  className={`absolute top-0 bottom-0 w-px ${
                    tick.isStartOfYear
                      ? 'bg-blue-500/30 border-dashed border-l border-blue-500/40'
                      : tick.isQuarter
                      ? 'bg-slate-700/50'
                      : 'bg-slate-800/40'
                  }`}
                  style={{ left: `${tick.percent}%` }}
                />
              ))}

              {/* Project Start Line Marker */}
              {timelineData.projectStartPercent !== null && (
                <div
                  className="absolute top-0 bottom-0 z-10 flex flex-col items-center pointer-events-none"
                  style={{ left: `${timelineData.projectStartPercent}%` }}
                >
                  <span className="px-2 py-0.5 text-[9px] font-bold text-blue-300 bg-blue-600/30 border border-blue-500/50 rounded-full whitespace-nowrap shadow-md">
                    Start: {formatDate(project.startedAt)}
                  </span>
                  <div className="w-px h-full bg-blue-500/50 border-dashed border-l border-blue-400 mt-1" />
                </div>
              )}

              {/* Project Target End Line Marker */}
              {timelineData.projectEndPercent !== null && (
                <div
                  className="absolute top-0 bottom-0 z-10 flex flex-col items-center pointer-events-none"
                  style={{ left: `${timelineData.projectEndPercent}%` }}
                >
                  <span className="px-2 py-0.5 text-[9px] font-bold text-indigo-300 bg-indigo-600/30 border border-indigo-500/50 rounded-full whitespace-nowrap shadow-md">
                    End: {formatDate(project.endedAt)}
                  </span>
                  <div className="w-px h-full bg-indigo-500/50 border-dashed border-l border-indigo-400 mt-1" />
                </div>
              )}

              {/* Today line marker */}
              {timelineData.isTodayInRange && (
                <div
                  className="absolute top-0 bottom-0 z-20 flex flex-col items-center pointer-events-none"
                  style={{ left: `${timelineData.todayPercent}%` }}
                >
                  <span className="px-2.5 py-0.5 text-[9px] font-bold text-amber-300 bg-amber-500/30 border border-amber-400/60 rounded-full whitespace-nowrap shadow-lg shadow-amber-500/25">
                    Today
                  </span>
                  <div className="w-px h-full bg-amber-400 border-l border-amber-400 shadow-md shadow-amber-400/40 mt-1" />
                </div>
              )}
            </div>

            {/* Month Scale / Ruler */}
            <div className="relative h-9 border-b border-slate-800 text-[11px] font-mono text-slate-400 mb-6">
              {timelineData.ticks.map((tick, idx) => (
                <div
                  key={idx}
                  className="absolute transform -translate-x-1/2 flex flex-col items-center"
                  style={{ left: `${tick.percent}%` }}
                >
                  <div className="flex items-center gap-1">
                    <span
                      className={
                        tick.isStartOfYear
                          ? 'text-blue-400 font-bold text-xs'
                          : tick.isQuarter
                          ? 'text-slate-200 font-semibold'
                          : 'text-slate-400'
                      }
                    >
                      {tick.label}
                    </span>
                    {tick.isStartOfYear && (
                      <span className="text-[9px] text-blue-300 font-mono bg-blue-500/20 px-1 rounded">
                        {tick.yearLabel}
                      </span>
                    )}
                  </div>
                  <span className="h-2 w-px bg-slate-700 mt-1" />
                </div>
              ))}
            </div>

            {/* Layer 1: Contractual Deliverables & Milestones Track */}
            <div className="relative z-10 mb-8 space-y-2.5">
              <div className="flex items-center justify-between text-xs font-bold text-slate-200 px-1 gap-2 flex-wrap">
                <span className="flex items-center gap-2 text-blue-400">
                  <Flag className="w-4 h-4 text-blue-400" />
                  Contractual Deliverables & Milestones ({milestones.length})
                </span>
                <button
                  type="button"
                  onClick={onManageMilestones}
                  className="text-xs text-blue-400 hover:text-blue-300 hover:underline cursor-pointer flex items-center gap-1 font-semibold whitespace-nowrap"
                >
                  <Plus className="w-3.5 h-3.5" /> Add / Manage Milestones
                </button>
              </div>

              {timelineData.sortedMilestones.length === 0 ? (
                <div className="p-6 bg-slate-900/40 rounded-xl border border-dashed border-slate-800 text-center text-xs text-slate-400">
                  No contractual milestones defined yet. Click &quot;Add / Manage Milestones&quot; to establish deliverables.
                </div>
              ) : (
                <div className="relative h-28 bg-slate-900/60 rounded-2xl border border-slate-800/80 flex items-center px-4 shadow-inner">
                  {/* Base connecting line */}
                  <div className="absolute left-4 right-4 h-1.5 bg-slate-800 rounded-full overflow-hidden">
                    {/* Visual progress overlay */}
                    <div
                      className="h-full bg-gradient-to-r from-emerald-500 to-blue-500 rounded-full transition-all duration-300"
                      style={{ width: `${milestoneProgress}%` }}
                    />
                  </div>

                  {/* Milestone Pins */}
                  {timelineData.sortedMilestones.map((m, idx) => {
                    const mTime = new Date(m.dueAt || 0).getTime();
                    const pos = timelineData.getPercent(mTime);
                    const isApproved = m.status === ApprovalStatus.Approved;
                    const isPending = m.status === ApprovalStatus.Pending;
                    const isFirst = timelineData.firstMilestone?.id === m.id;
                    const isLast = timelineData.lastMilestone?.id === m.id && timelineData.sortedMilestones.length > 1;
                    const priBadge = getPriorityBadge(m.priority);

                    return (
                      <div
                        key={m.id || idx}
                        className="absolute group z-10 -translate-x-1/2 cursor-pointer transition-all duration-200"
                        style={{ left: `${Math.min(97, Math.max(3, pos))}%` }}
                        onClick={onManageMilestones}
                      >
                        {/* First / Last Milestone Distinctive Badge Indicator (Requirement 5) */}
                        {isFirst && (
                          <div className="absolute -top-7 left-1/2 -translate-x-1/2 whitespace-nowrap">
                            <span className="px-2 py-0.5 rounded-full text-[9px] font-bold bg-emerald-500/25 border border-emerald-400 text-emerald-300 shadow-md flex items-center gap-1">
                              <Sparkles className="w-2.5 h-2.5 text-emerald-400" />
                              1st Milestone
                            </span>
                          </div>
                        )}
                        {isLast && !isFirst && (
                          <div className="absolute -top-7 left-1/2 -translate-x-1/2 whitespace-nowrap">
                            <span className="px-2 py-0.5 rounded-full text-[9px] font-bold bg-indigo-500/25 border border-indigo-400 text-indigo-300 shadow-md flex items-center gap-1">
                              <CheckCircle2 className="w-2.5 h-2.5 text-indigo-400" />
                              Final Close-out
                            </span>
                          </div>
                        )}

                        {/* Milestone Flag Icon Bubble */}
                        <div
                          className={`h-9 w-9 rounded-2xl flex items-center justify-center shadow-lg transition-transform group-hover:scale-125 border ${
                            isApproved
                              ? 'bg-emerald-500/25 border-emerald-400 text-emerald-300 shadow-emerald-500/30'
                              : isPending
                              ? 'bg-amber-500/25 border-amber-400 text-amber-300 shadow-amber-500/30'
                              : 'bg-blue-500/25 border-blue-400 text-blue-300 shadow-blue-500/30'
                          } ${isFirst ? 'ring-2 ring-emerald-400/50' : ''} ${isLast ? 'ring-2 ring-indigo-400/50' : ''}`}
                        >
                          <Flag className="w-4 h-4 fill-current" />
                        </div>

                        {/* Deliverable Label */}
                        <div className="mt-1 text-center whitespace-nowrap">
                          <span className="text-[11px] font-bold text-slate-200 block max-w-[130px] truncate group-hover:text-white">
                            {m.name}
                          </span>
                          <span className="text-[10px] text-slate-400 font-mono block">
                            {formatDate(m.dueAt)}
                          </span>
                        </div>

                        {/* Rich Hover Card */}
                        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 hidden group-hover:flex flex-col w-64 p-3 bg-slate-900 border border-slate-700/90 rounded-2xl shadow-2xl text-left z-30 pointer-events-none backdrop-blur-md">
                          <div className="flex items-center justify-between gap-1 mb-1.5">
                            <span className="text-[10px] font-mono text-blue-400 font-semibold">
                              Milestone #{m.id}
                            </span>
                            <span className={`text-[9px] px-2 py-0.5 rounded border ${priBadge.className}`}>
                              {priBadge.label}
                            </span>
                          </div>
                          <p className="text-xs font-bold text-white leading-tight mb-2">{m.name}</p>
                          <div className="flex items-center justify-between text-[11px] text-slate-400 pt-2 border-t border-slate-800">
                            <span className="flex items-center gap-1 font-mono">
                              <Clock className="w-3.5 h-3.5 text-slate-500" />
                              {formatDate(m.dueAt)}
                            </span>
                            <span className={isApproved ? 'text-emerald-400 font-bold' : 'text-amber-400 font-semibold'}>
                              {isApproved ? '✓ Verified' : '● Pending Review'}
                            </span>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>

            {/* Layer 2: Work Breakdown Activities Track */}
            <div className="relative z-10 space-y-2.5">
              <div className="flex items-center justify-between text-xs font-bold text-slate-200 px-1 gap-2 flex-wrap">
                <span className="flex items-center gap-2 text-cyan-400">
                  <Briefcase className="w-4 h-4 text-cyan-400" />
                  Work Breakdown Activities ({activities.length})
                </span>
                <button
                  type="button"
                  onClick={onManageActivities}
                  className="text-xs text-cyan-400 hover:text-cyan-300 hover:underline cursor-pointer flex items-center gap-1 font-semibold whitespace-nowrap"
                >
                  <Plus className="w-3.5 h-3.5" /> Add / Manage Activities
                </button>
              </div>

              {timelineData.sortedActivities.length === 0 ? (
                <div className="p-4 bg-slate-900/40 rounded-xl border border-dashed border-slate-800 text-center text-xs text-slate-400">
                  No activities recorded in work breakdown structure.
                </div>
              ) : (
                <div className="space-y-2">
                  {timelineData.sortedActivities.slice(0, 5).map((act, idx) => {
                    const aTime = new Date(act.performedAt || project.startedAt || Date.now()).getTime();
                    const pos = timelineData.getPercent(aTime);

                    return (
                      <div
                        key={act.id || idx}
                        className="group relative flex items-center p-2.5 rounded-xl bg-slate-900/80 hover:bg-slate-800/90 border border-slate-800 hover:border-slate-700 transition cursor-pointer"
                        onClick={onManageActivities}
                      >
                        <div className="w-56 shrink-0 pr-3 border-r border-slate-800 truncate">
                          <span className="text-xs font-semibold text-white block truncate group-hover:text-cyan-300 transition">
                            {act.title}
                          </span>
                          <span className="text-[10px] text-slate-400">{act.category || 'Operations'}</span>
                        </div>

                        <div className="flex-1 relative h-7 mx-4 flex items-center">
                          <div className="w-full h-1 bg-slate-800 rounded-full" />
                          <div
                            className="absolute h-5 rounded-lg bg-cyan-500/20 border border-cyan-400/60 px-2.5 flex items-center text-[10px] font-bold text-cyan-300 shadow-md shadow-cyan-500/20 -translate-x-1/2 whitespace-nowrap group-hover:scale-105 transition"
                            style={{ left: `${Math.min(95, Math.max(5, pos))}%` }}
                          >
                            <Coins className="w-3 h-3 mr-1 text-cyan-400" />
                            {formatZAR(act.amount)}
                          </div>
                        </div>

                        <div className="w-32 shrink-0 text-right font-mono text-xs text-slate-400">
                          {formatDate(act.performedAt)}
                        </div>
                      </div>
                    );
                  })}

                  {activities.length > 5 && (
                    <div className="text-center pt-1">
                      <button
                        type="button"
                        onClick={onManageActivities}
                        className="text-xs text-cyan-400 hover:text-cyan-300 font-semibold hover:underline cursor-pointer"
                      >
                        + View all {activities.length} work breakdown tasks &rarr;
                      </button>
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* BOTTOM NAVIGATION ARROWS (EXACTLY WHERE RED ARROWS WERE IN USER'S SCREENSHOT) */}
        {/* Bottom Left Navigation Arrow Button */}
        <div className="absolute bottom-3.5 left-4 z-20">
          <button
            type="button"
            onClick={handleScrollLeft}
            aria-label="Shift timeline left"
            title="Shift timeline left (360px)"
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-900/95 hover:bg-blue-600 text-slate-200 hover:text-white border border-slate-700 hover:border-blue-500 shadow-2xl backdrop-blur-md transition-all cursor-pointer group active:scale-95"
          >
            <ChevronLeft className="w-4 h-4 text-blue-400 group-hover:text-white group-hover:-translate-x-0.5 transition-transform" />
            <span className="text-[11px] font-bold uppercase tracking-wider">Earlier</span>
          </button>
        </div>

        {/* Bottom Right Navigation Arrow Button */}
        <div className="absolute bottom-3.5 right-4 z-20">
          <button
            type="button"
            onClick={handleScrollRight}
            aria-label="Shift timeline right"
            title="Shift timeline right (360px)"
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-900/95 hover:bg-blue-600 text-slate-200 hover:text-white border border-slate-700 hover:border-blue-500 shadow-2xl backdrop-blur-md transition-all cursor-pointer group active:scale-95"
          >
            <span className="text-[11px] font-bold uppercase tracking-wider">Later</span>
            <ChevronRight className="w-4 h-4 text-blue-400 group-hover:text-white group-hover:translate-x-0.5 transition-transform" />
          </button>
        </div>
      </div>
    </div>
  );
};