"use client";

import { useRouter } from "next/navigation";

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

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 }: WeekNavProps) {
  const router = useRouter();
  const nav = (delta: number) =>
    router.push(`/?week=${shiftWeek(weekStart, delta)}`);

  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
      <button
        onClick={() => nav(-1)}
        aria-label="Previous week"
        style={btnStyle}
      >
        ←
      </button>

      <span style={{
        fontSize: "1.1rem",
        fontWeight: 600,
        color: "var(--color-text)",
        minWidth: 220,
        textAlign: "center",
      }}>
        {formatLabel(weekDates)}
      </span>

      <button
        onClick={() => nav(1)}
        aria-label="Next week"
        style={btnStyle}
      >
        →
      </button>
    </div>
  );
}

const btnStyle: 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,
};