Nexus/apps/web/src/components/timeline/TimelineHeader.tsx

"use client";

import { clsx } from "clsx";
import { MONTHS_SHORT } from "./timelineConstants.js";

interface TimelineHeaderProps {
  monthGroups: { label: string; colCount: number }[];
  dates: Date[];
  CELL_WIDTH: number;
  LABEL_WIDTH: number;
  HEADER_MONTH_HEIGHT: number;
  HEADER_DAY_HEIGHT: number;
  zoom: "day" | "week" | "month";
  viewMode: "resource" | "project";
  today: Date;
}

export function TimelineHeader({
  monthGroups,
  dates,
  CELL_WIDTH,
  LABEL_WIDTH,
  HEADER_MONTH_HEIGHT,
  HEADER_DAY_HEIGHT,
  zoom,
  viewMode,
  today,
}: TimelineHeaderProps) {
  return (
    <>
      {/* Month header */}
      <div
        className="sticky top-0 z-40 flex bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800"
        style={{ height: HEADER_MONTH_HEIGHT }}
      >
        <div className="flex-shrink-0 border-r border-gray-200 dark:border-gray-700" style={{ width: LABEL_WIDTH }} />
        <div className="flex">
          {monthGroups.map((m, i) => (
            <div
              key={i}
              className="text-xs font-semibold text-gray-500 dark:text-gray-400 border-r border-gray-200 dark:border-gray-700 px-2 flex items-center bg-gray-50 dark:bg-gray-800"
              style={{ width: m.colCount * CELL_WIDTH }}
            >
              {m.label}
            </div>
          ))}
        </div>
      </div>

      {/* Day header — hidden at month zoom (cells too narrow for labels) */}
      {zoom !== "month" && (
        <div
          className="sticky z-40 flex bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 select-none"
          style={{ top: HEADER_MONTH_HEIGHT, height: HEADER_DAY_HEIGHT }}
        >
          <div
            className="flex-shrink-0 border-r border-gray-200 dark:border-gray-700 flex items-center px-4 text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider"
            style={{ width: LABEL_WIDTH }}
          >
            {viewMode === "resource" ? "Resource" : "Project / Resource"}
          </div>
          <div className="flex">
            {dates.map((date, i) => {
              const isToday = date.toDateString() === today.toDateString();
              const isMonday = date.getDay() === 1;
              const isSaturday = date.getDay() === 6;
              const isSunday = date.getDay() === 0;
              // Week zoom: show label only on Mondays to avoid overcrowding
              const showLabel = zoom === "day" || isMonday;
              return (
                <div
                  key={i}
                  className={clsx(
                    "flex-shrink-0 border-r flex flex-col items-center justify-center text-xs overflow-hidden",
                    isToday ? "bg-brand-50 dark:bg-brand-950/40 border-brand-200 dark:border-brand-800" :
                    isSaturday ? "bg-amber-50/60 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800" :
                    isSunday ? "bg-gray-100/80 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700" :
                    isMonday ? "border-gray-200 dark:border-gray-700" : "border-gray-100 dark:border-gray-800",
                  )}
                  style={{ width: CELL_WIDTH, height: HEADER_DAY_HEIGHT }}
                >
                  {showLabel && (
                    <>
                      <span className={clsx(
                        "font-medium leading-none",
                        isToday ? "text-brand-600" : isSaturday ? "text-amber-600 dark:text-amber-400" : "text-gray-600 dark:text-gray-300",
                      )}>
                        {zoom === "week"
                          ? `${date.getDate()} ${MONTHS_SHORT[date.getMonth()]}`
                          : date.getDate()}
                      </span>
                      {zoom === "day" && (
                        <span className={clsx(
                          "text-[9px] leading-none mt-0.5",
                          isSaturday ? "text-amber-400 dark:text-amber-500" : "text-gray-300 dark:text-gray-600",
                        )}>
                          {["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"][date.getDay()]}
                        </span>
                      )}
                    </>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      )}
    </>
  );
}