"use client";

interface WeekPickerProps {
  selectedMonday: string;
  onChange: (monday: string) => void;
}

function getMondayDate(dateStr: string): Date {
  const [y, m, d] = dateStr.split("-").map(Number);
  return new Date(y, m - 1, d);
}

function formatDate(date: Date): string {
  const yyyy = date.getFullYear();
  const mm = String(date.getMonth() + 1).padStart(2, "0");
  const dd = String(date.getDate()).padStart(2, "0");
  return `${yyyy}-${mm}-${dd}`;
}

function formatWeekLabel(dateStr: string): string {
  const date = getMondayDate(dateStr);
  return date.toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });
}

function ChevronLeft() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M15 18l-6-6 6-6" />
    </svg>
  );
}

function ChevronRight() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 18l6-6-6-6" />
    </svg>
  );
}

export function WeekPicker({ selectedMonday, onChange }: WeekPickerProps) {
  const shiftWeek = (offset: number) => {
    const date = getMondayDate(selectedMonday);
    date.setDate(date.getDate() + offset * 7);
    onChange(formatDate(date));
  };

  return (
    <div className="flex items-center gap-3">
      <button
        onClick={() => shiftWeek(-1)}
        className="p-1.5 rounded-lg text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800 transition-colors"
        aria-label="Previous week"
      >
        <ChevronLeft />
      </button>
      <span className="text-sm font-medium text-zinc-200 min-w-[160px] text-center">
        Week of {formatWeekLabel(selectedMonday)}
      </span>
      <button
        onClick={() => shiftWeek(1)}
        className="p-1.5 rounded-lg text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800 transition-colors"
        aria-label="Next week"
      >
        <ChevronRight />
      </button>
    </div>
  );
}