SixFlagsSuperCalendar/components/WeekNav.tsx

"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";

interface WeekNavProps {
  weekStart: string;   // YYYY-MM-DD (Sunday)
  weekDates: string[]; // 7 dates YYYY-MM-DD
  isCurrentWeek: boolean;
  coastersOnly: boolean;
  hasCoasterData: boolean;
}

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

function formatLabel(dates: string[]): string {
  const s = new Date(dates[0] + "T00:00:00");
  const e = new Date(dates[6] + "T00:00:00");
  if (s.getFullYear() === e.getFullYear() && s.getMonth() === e.getMonth()) {
    return `${MONTHS[s.getMonth()]} ${s.getDate()}–${e.getDate()}, ${s.getFullYear()}`;
  }
  const startStr = `${MONTHS[s.getMonth()]} ${s.getDate()}`;
  const endStr   = `${MONTHS[e.getMonth()]} ${e.getDate()}, ${e.getFullYear()}`;
  return `${startStr} – ${endStr}`;
}

function shiftWeek(weekStart: string, delta: number): string {
  const d = new Date(weekStart + "T00:00:00");
  d.setDate(d.getDate() + delta * 7);
  return d.toISOString().slice(0, 10);
}

export function WeekNav({ weekStart, weekDates, isCurrentWeek, coastersOnly, hasCoasterData }: WeekNavProps) {
  const router = useRouter();
  const weekParam = `week=${weekStart}`;
  const nav = (delta: number) => {
    const base = `/?week=${shiftWeek(weekStart, delta)}`;
    router.push(coastersOnly ? `${base}&coasters=1` : base);
  };
  const toggleCoasters = () => {
    router.push(coastersOnly ? `/?${weekParam}` : `/?${weekParam}&coasters=1`);
  };

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
      if (e.key === "ArrowLeft")  nav(-1);
      if (e.key === "ArrowRight") nav(1);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [weekStart]);

  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <button
        onClick={() => nav(-1)}
        aria-label="Previous week"
        style={navBtnStyle}
        onMouseOver={(e) => Object.assign((e.target as HTMLElement).style, navBtnHover)}
        onMouseOut={(e) => Object.assign((e.target as HTMLElement).style, navBtnStyle)}
      >
        ←
      </button>

      {!isCurrentWeek && (
        <button
          onClick={() => router.push("/")}
          aria-label="Jump to current week"
          style={todayBtnStyle}
          onMouseOver={(e) => Object.assign((e.target as HTMLElement).style, todayBtnHover)}
          onMouseOut={(e) => Object.assign((e.target as HTMLElement).style, todayBtnStyle)}
        >
          Today
        </button>
      )}

      <span style={{
        fontSize: "1rem",
        fontWeight: 600,
        color: "var(--color-text)",
        minWidth: 200,
        textAlign: "center",
        letterSpacing: "-0.01em",
        fontVariantNumeric: "tabular-nums",
      }}>
        {formatLabel(weekDates)}
      </span>

      <button
        onClick={() => nav(1)}
        aria-label="Next week"
        style={navBtnStyle}
        onMouseOver={(e) => Object.assign((e.target as HTMLElement).style, navBtnHover)}
        onMouseOut={(e) => Object.assign((e.target as HTMLElement).style, navBtnStyle)}
      >
        →
      </button>

      {hasCoasterData && (
        <button
          onClick={toggleCoasters}
          style={{
            marginLeft: 8,
            display: "flex",
            alignItems: "center",
            gap: 5,
            padding: "4px 12px",
            borderRadius: 20,
            border: coastersOnly ? "1px solid var(--color-accent)" : "1px solid var(--color-border)",
            background: coastersOnly ? "var(--color-accent-muted)" : "var(--color-surface)",
            color: coastersOnly ? "var(--color-accent)" : "var(--color-text-muted)",
            fontSize: "0.72rem",
            fontWeight: 600,
            cursor: "pointer",
            transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
            whiteSpace: "nowrap",
          }}
        >
          🎢 Coasters
        </button>
      )}
    </div>
  );
}

const navBtnStyle: React.CSSProperties = {
  padding: "6px 14px",
  borderRadius: 6,
  border: "1px solid var(--color-border)",
  background: "var(--color-surface)",
  color: "var(--color-text-muted)",
  cursor: "pointer",
  fontSize: "1rem",
  lineHeight: 1,
  transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
};

const navBtnHover: React.CSSProperties = {
  padding: "6px 14px",
  borderRadius: 6,
  border: "1px solid var(--color-text-dim)",
  background: "var(--color-surface-2)",
  color: "var(--color-text-secondary)",
  cursor: "pointer",
  fontSize: "1rem",
  lineHeight: 1,
  transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
};

const todayBtnStyle: React.CSSProperties = {
  padding: "5px 12px",
  borderRadius: 6,
  border: "1px solid var(--color-accent-muted)",
  background: "transparent",
  color: "var(--color-accent)",
  cursor: "pointer",
  fontSize: "0.75rem",
  fontWeight: 600,
  letterSpacing: "0.04em",
  textTransform: "uppercase",
  lineHeight: 1,
  transition: "background 150ms ease, color 150ms ease",
};

const todayBtnHover: React.CSSProperties = {
  padding: "5px 12px",
  borderRadius: 6,
  border: "1px solid var(--color-accent-muted)",
  background: "var(--color-accent-muted)",
  color: "var(--color-accent-text)",
  cursor: "pointer",
  fontSize: "0.75rem",
  fontWeight: 600,
  letterSpacing: "0.04em",
  textTransform: "uppercase",
  lineHeight: 1,
  transition: "background 150ms ease, color 150ms ease",
};