import { ChevronLeft, ChevronRight } from 'lucide-react'
import { formatWeekRange, upcomingMonday } from '../lib/utils'

interface WeekRangeNavProps {
  /** ISO Monday date of the currently-displayed week (YYYY-MM-DD). */
  weekStart: string
  /** True when the displayed week is the upcoming Mon-Sun week. */
  isCurrentWeek: boolean
  onPrev: () => void
  onNext: () => void
  onJumpHome: () => void
}

/**
 * Week-range navigation with clickable brackets. Renders the
 * `[<]  Mon DD — Sun DD  [>]` pattern + an optional `This week` chip
 * when the displayed week is not the upcoming week.
 *
 * Replaces the Sprint 5 inline segmented control. The bracket chevrons
 * step by 7 days; clicking the range label jumps back to the upcoming
 * week (the default webui landing week). Keyboard-accessible: every
 * interactive element is a real `<button>` with an `aria-label`.
 */
export function WeekRangeNav({
  weekStart,
  isCurrentWeek,
  onPrev,
  onNext,
  onJumpHome,
}: WeekRangeNavProps) {
  return (
    <div
      className="inline-flex items-center rounded-lg border border-surface-200 bg-white"
      role="group"
      aria-label="Week navigation"
    >
      <button
        type="button"
        onClick={onPrev}
        aria-label="Previous week"
        title="Previous week"
        className="p-2 text-surface-600 hover:bg-surface-100 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary-400"
      >
        <ChevronLeft className="w-4 h-4" />
      </button>
      <button
        type="button"
        onClick={onJumpHome}
        aria-label={`Jump to upcoming week (currently ${formatWeekRange(upcomingMonday())})`}
        title="Jump to upcoming week"
        className={`px-3 py-2 text-sm font-medium border-x border-surface-200 focus:outline-none focus:ring-2 focus:ring-primary-400 ${
          isCurrentWeek
            ? 'text-primary-700 bg-primary-50'
            : 'text-surface-600 hover:bg-surface-100'
        }`}
      >
        {formatWeekRange(weekStart)}
      </button>
      <button
        type="button"
        onClick={onNext}
        aria-label="Next week"
        title="Next week"
        className="p-2 text-surface-600 hover:bg-surface-100 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-primary-400"
      >
        <ChevronRight className="w-4 h-4" />
      </button>
      {!isCurrentWeek && (
        <button
          type="button"
          onClick={onJumpHome}
          className="ml-2 inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md bg-primary-50 text-primary-700 hover:bg-primary-100 focus:outline-none focus:ring-2 focus:ring-primary-400"
          aria-label="Jump to upcoming week"
          title="Jump to upcoming week"
        >
          This week
        </button>
      )}
    </div>
  )
}
