"use client"

import { cn } from "@/lib/utils"
import { Check } from "lucide-react"
import { useWizard } from "./wizard-context"

const STEP_LABELS: Record<number, string> = {
  1: "Bane & tid",
  2: "Spilleform",
  3: "Spillere",
  4: "Lag og rekkefølge",
  5: "Deling",
}

export function ProgressSteps() {
  const { state, visibleSteps } = useWizard()
  const currentIdx = visibleSteps.indexOf(state.step)

  return (
    <nav aria-label="Fremdrift">
      <ol className="flex items-center gap-1.5">
        {visibleSteps.map((stepNo, i) => {
          const isCurrent = i === currentIdx
          const isDone = i < currentIdx
          return (
            <li key={stepNo} className="flex min-w-0 flex-1 items-center gap-1.5">
              <div className="flex min-w-0 items-center gap-2">
                <span
                  className={cn(
                    "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold tabular-nums transition-colors",
                    isCurrent && "bg-[var(--nr-accent)] text-[var(--nr-accent-ink)]",
                    isDone && "bg-[var(--nr-accent-soft)] text-[var(--nr-accent)]",
                    !isCurrent && !isDone && "bg-[var(--nr-surface-2)] text-[var(--nr-faint)] ring-1 ring-inset ring-[var(--nr-border)]",
                  )}
                  aria-hidden="true"
                >
                  {isDone ? <Check className="h-3.5 w-3.5" strokeWidth={3} /> : i + 1}
                </span>
                <span
                  className={cn(
                    "hidden truncate text-xs font-medium sm:inline",
                    isCurrent ? "text-[var(--nr-ink)]" : "text-[var(--nr-muted)]",
                  )}
                  aria-current={isCurrent ? "step" : undefined}
                >
                  {STEP_LABELS[stepNo]}
                </span>
              </div>
              {i < visibleSteps.length - 1 ? (
                <span
                  aria-hidden="true"
                  className={cn(
                    "h-px flex-1 transition-colors",
                    isDone ? "bg-[var(--nr-accent-ring)]" : "bg-[var(--nr-border)]",
                  )}
                />
              ) : null}
            </li>
          )
        })}
      </ol>
      <p className="sr-only" aria-live="polite">
        Steg {currentIdx + 1} av {visibleSteps.length}: {STEP_LABELS[state.step]}
      </p>
    </nav>
  )
}