"use client"

/**
 * Exxat DS Wizard — sequential stepper (not Tabs).
 *
 * UX policy (see apps/web/docs/wizard-pattern.md):
 * - WIZARD_RECOMMENDED_MAX_STEPS = 6 — prefer fewer top-level chapters
 * - WIZARD_SCROLL_THRESHOLD = 5 — horizontal scroll + auto-scroll active step
 * - Horizontal overflow: HorizontalScrollControls (exxat-horizontal-scroll.mdc)
 *
 * Variants: numbered | icons | compact
 * Orientations: horizontal | vertical
 */

import * as React from "react"

import { cn } from "../../lib/utils"
import { Button } from "./button"
import {
  HorizontalScrollControls,
  HorizontalScrollViewport,
  useHorizontalScrollAffordances,
  useHorizontalScrollItemIntoView,
} from "./horizontal-scroll-controls"

/** PatternFly / USWDS: prefer ≤6 top-level chapters; split long flows instead. */
export const WIZARD_RECOMMENDED_MAX_STEPS = 6

/** Above this count the nav scrolls and compact variant is recommended horizontally. */
export const WIZARD_SCROLL_THRESHOLD = 5

export interface WizardStep {
  id: string
  label: string
  description?: string
  /** Font Awesome class, e.g. `fa-user-graduate` */
  icon?: string
  /** When set, step renders in error state (validation failed). */
  error?: boolean
}

/** Sequential stepper states — not interchangeable with Tabs. */
export type WizardStepStatus =
  | "completed"
  | "current"
  | "upcoming"
  | "disabled"
  | "error"

type WizardOrientation = "horizontal" | "vertical"
type WizardVariant = "numbered" | "icons" | "compact"

interface WizardContextValue {
  steps: WizardStep[]
  current: number
  orientation: WizardOrientation
  variant: WizardVariant
  linear: boolean
  onStepClick?: (index: number) => void
}

const WizardContext = React.createContext<WizardContextValue | null>(null)

function useWizard() {
  const ctx = React.useContext(WizardContext)
  if (!ctx) {
    throw new Error("Wizard subcomponents must be used within <Wizard>")
  }
  return ctx
}

function resolveStepStatus(
  index: number,
  current: number,
  step: WizardStep,
  linear: boolean,
): WizardStepStatus {
  if (step.error && index === current) return "error"
  if (index < current) return "completed"
  if (index === current) return "current"
  if (linear) return "disabled"
  return "upcoming"
}

function wizardMarkerClass(status: WizardStepStatus, variant: WizardVariant) {
  return cn(
    "flex shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors",
    variant === "compact" ? "size-6" : "size-9",
    status === "completed" && "border-brand bg-brand text-brand-foreground",
    status === "current" && "border-brand bg-brand-tint-subtle text-brand",
    status === "upcoming" && "border-border bg-muted/30 text-muted-foreground",
    status === "disabled" && "border-border bg-muted/30 text-muted-foreground",
    status === "error" && "border-destructive bg-destructive/15 text-destructive-ink",
  )
}

function wizardLabelClass(status: WizardStepStatus) {
  return cn(
    "text-sm leading-4",
    status === "current" && "font-medium text-foreground",
    status === "completed" && "font-medium text-brand dark:text-foreground hc:text-foreground",
    status === "upcoming" && "text-muted-foreground",
    status === "disabled" && "text-muted-foreground",
    status === "error" && "font-medium text-destructive-ink",
  )
}

function wizardConnectorClass(status: WizardStepStatus) {
  return cn(
    "shrink-0 rounded-full bg-border transition-colors",
    status === "completed" && "bg-brand",
  )
}

function statusHint(status: WizardStepStatus): string {
  switch (status) {
    case "completed":
      return "completed"
    case "current":
      return "current step"
    case "disabled":
      return "not yet available"
    case "error":
      return "has errors"
    default:
      return "upcoming"
  }
}

interface WizardProps {
  steps: WizardStep[]
  current: number
  orientation?: WizardOrientation
  variant?: WizardVariant
  linear?: boolean
  onStepClick?: (index: number) => void
  className?: string
  children: React.ReactNode
}

function Wizard({
  steps,
  current,
  orientation = "horizontal",
  variant = "numbered",
  linear = true,
  onStepClick,
  className,
  children,
}: WizardProps) {
  if (process.env.NODE_ENV !== "production" && steps.length > WIZARD_RECOMMENDED_MAX_STEPS) {
    console.warn(
      `[Wizard] ${steps.length} top-level steps exceeds the recommended max of ${WIZARD_RECOMMENDED_MAX_STEPS}. ` +
        "Split into fewer chapters or use substeps inside each panel (PatternFly / USWDS).",
    )
  }

  const value = React.useMemo(
    () => ({ steps, current, orientation, variant, linear, onStepClick }),
    [steps, current, orientation, variant, linear, onStepClick],
  )

  return (
    <WizardContext.Provider value={value}>
      <div
        data-slot="wizard"
        className={cn(
          "flex flex-col gap-6",
          orientation === "vertical" && "lg:flex-row lg:items-start lg:gap-8",
          className,
        )}
      >
        {children}
      </div>
    </WizardContext.Provider>
  )
}

function WizardProgress({
  className,
  formatLabel,
}: {
  className?: string
  formatLabel?: (current: number, total: number) => string
}) {
  const { steps, current } = useWizard()
  const total = steps.length
  const label = formatLabel
    ? formatLabel(current + 1, total)
    : `Step ${current + 1} of ${total}`

  return (
    <p
      data-slot="wizard-progress"
      className={cn("text-sm leading-4 text-muted-foreground", className)}
      aria-live="polite"
    >
      <span className="sr-only">Progress: </span>
      {label}
    </p>
  )
}

/** Optional guidance when the flow has many top-level steps. */
function WizardStepGuidance({ className }: { className?: string }) {
  const { steps } = useWizard()
  if (steps.length <= WIZARD_RECOMMENDED_MAX_STEPS) return null

  return (
    <p
      role="note"
      className={cn("text-sm leading-4 text-muted-foreground", className)}
    >
      Long flows work best with {WIZARD_RECOMMENDED_MAX_STEPS} or fewer top-level steps.
      Consider grouping fields inside each step or switching to a vertical rail with scroll.
    </p>
  )
}

function WizardNav({ className }: { className?: string }) {
  const { steps, current, orientation, variant, linear, onStepClick } = useWizard()
  const scrollRef = React.useRef<HTMLDivElement>(null)
  const activeStepRef = React.useRef<HTMLLIElement | null>(null)
  const {
    canScrollLeft,
    canScrollRight,
    overflowing,
    scrollPrev,
    scrollNext,
  } = useHorizontalScrollAffordances(scrollRef)

  useHorizontalScrollItemIntoView(scrollRef, activeStepRef, [current, steps.length])

  React.useLayoutEffect(() => {
    if (orientation !== "vertical") return
    activeStepRef.current?.scrollIntoView({
      block: "nearest",
      behavior: "smooth",
    })
  }, [current, orientation, steps.length])

  const listContent = steps.map((step, idx) => {
    const status = resolveStepStatus(idx, current, step, linear)
    const isLast = idx === steps.length - 1
    const clickable = Boolean(onStepClick) && status === "completed"
    const statusText = statusHint(status)
    const isActive = status === "current"

    const markerContent =
      status === "completed" ? (
        <i
          className="fa-solid fa-check text-sm text-brand-foreground"
          aria-hidden="true"
        />
      ) : status === "error" ? (
        <i className="fa-light fa-circle-exclamation text-sm" aria-hidden="true" />
      ) : variant === "icons" && step.icon ? (
        <i className={cn("fa-light text-sm", step.icon)} aria-hidden="true" />
      ) : variant === "compact" ? (
        <span className="size-2.5 rounded-full bg-current" aria-hidden="true" />
      ) : (
        <span className="tabular-nums">{idx + 1}</span>
      )

    const marker = (
      <div className={wizardMarkerClass(status, variant)}>{markerContent}</div>
    )

    const markerNode = clickable ? (
      <button
        type="button"
        onClick={() => onStepClick?.(idx)}
        className="cursor-pointer rounded-full focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
        aria-label={`Step ${idx + 1} of ${steps.length}: ${step.label}, ${statusText}. Go back to this step.`}
      >
        {marker}
      </button>
    ) : (
      marker
    )

    const connectorStatus: WizardStepStatus =
      idx < current ? "completed" : "upcoming"

    const connector = !isLast ? (
      <div
        aria-hidden="true"
        className={cn(
          wizardConnectorClass(connectorStatus),
          orientation === "vertical" ? "h-5 w-0.5" : "h-0.5 min-w-4 flex-1",
        )}
      />
    ) : null

    const liRef = isActive ? activeStepRef : undefined

    if (orientation === "vertical") {
      return (
        <li
          key={step.id}
          ref={liRef}
          aria-current={isActive ? "step" : undefined}
          className="flex w-full items-start gap-3 py-2"
        >
          <div className="flex flex-col items-center">
            {markerNode}
            {connector}
          </div>
          <div className="min-w-0 flex-1">
            <p className={wizardLabelClass(status)}>{step.label}</p>
            {step.description ? (
              <p className="text-sm leading-4 text-muted-foreground">
                {step.description}
              </p>
            ) : null}
          </div>
        </li>
      )
    }

    return (
      <li
        key={step.id}
        ref={liRef}
        aria-current={isActive ? "step" : undefined}
        className="flex min-w-24 shrink-0 items-start"
      >
        <div className="flex min-w-20 shrink-0 flex-col items-center gap-2 px-1">
          {markerNode}
          <p className={cn(wizardLabelClass(status), "text-center")}>{step.label}</p>
        </div>
        {connector ? (
          <div className="mt-[1.125rem] flex min-w-4 w-8 shrink-0 items-center px-1">
            {connector}
          </div>
        ) : null}
      </li>
    )
  })

  if (orientation === "vertical") {
    const tallRail = steps.length > WIZARD_SCROLL_THRESHOLD
    return (
      <nav
        aria-label={`Wizard steps, ${steps.length} total`}
        className={cn(
          tallRail && "max-h-96 overflow-y-auto pe-1",
          className,
        )}
      >
        <ol className="flex flex-col">{listContent}</ol>
      </nav>
    )
  }

  return (
    <nav
      aria-label={`Wizard steps, ${steps.length} total`}
      className={cn("min-w-0", className)}
    >
      <div className="flex min-w-0 items-start gap-1.5">
        <HorizontalScrollViewport
          ref={scrollRef}
          label="Wizard steps"
          className="items-start pb-1"
        >
          <ol className="flex w-max min-w-full items-start">{listContent}</ol>
        </HorizontalScrollViewport>
        {overflowing ? (
          <HorizontalScrollControls
            ariaLabel="Wizard steps"
            layout="group"
            canScrollLeft={canScrollLeft}
            canScrollRight={canScrollRight}
            onScrollPrev={scrollPrev}
            onScrollNext={scrollNext}
            className="mt-[0.625rem] shrink-0 self-start"
          />
        ) : null}
      </div>
    </nav>
  )
}

function WizardContent({
  className,
  children,
}: {
  className?: string
  children: React.ReactNode
}) {
  return (
    <div data-slot="wizard-content" className={cn("min-w-0 flex-1", className)}>
      {children}
    </div>
  )
}

/** Step heading — wire to WizardPanel via matching `id`. */
function WizardStepHeading({
  id,
  children,
  className,
}: {
  id: string
  children: React.ReactNode
  className?: string
}) {
  return (
    <h2
      id={`wizard-step-heading-${id}`}
      className={cn(
        "mb-4 text-base font-semibold leading-5 text-foreground",
        className,
      )}
    >
      {children}
    </h2>
  )
}

function WizardPanel({
  step,
  children,
  className,
}: {
  step: number | string
  children: React.ReactNode
  className?: string
}) {
  const { steps, current } = useWizard()
  const activeStep = steps[current]
  const active =
    typeof step === "number"
      ? step === current
      : activeStep?.id === step

  if (!active || !activeStep) return null

  return (
    <div
      data-slot="wizard-panel"
      role="group"
      aria-labelledby={`wizard-step-heading-${activeStep.id}`}
      className={cn("animate-in fade-in-0 duration-200", className)}
    >
      {children}
    </div>
  )
}

interface WizardFooterProps {
  className?: string
  showBack?: boolean
  backLabel?: string
  nextLabel?: string
  submitLabel?: string
  submitting?: boolean
  onBack?: () => void
  onNext?: () => void
  onSubmit?: () => void
}

function WizardFooter({
  className,
  showBack = true,
  backLabel = "Back",
  nextLabel = "Next",
  submitLabel = "Submit",
  submitting,
  onBack,
  onNext,
  onSubmit,
}: WizardFooterProps) {
  const { steps, current } = useWizard()
  const isLast = current >= steps.length - 1

  return (
    <div
      data-slot="wizard-footer"
      className={cn(
        "flex items-center justify-between gap-3 border-t border-border pt-4",
        className,
      )}
    >
      <div>
        {showBack && current > 0 ? (
          <Button type="button" variant="outline" onClick={onBack} disabled={submitting}>
            {backLabel}
          </Button>
        ) : null}
      </div>
      <div>
        {isLast ? (
          <Button type="button" onClick={onSubmit} disabled={submitting}>
            {submitLabel}
          </Button>
        ) : (
          <Button type="button" onClick={onNext} disabled={submitting}>
            {nextLabel}
          </Button>
        )}
      </div>
    </div>
  )
}

export {
  Wizard,
  WizardNav,
  WizardProgress,
  WizardStepGuidance,
  WizardContent,
  WizardStepHeading,
  WizardPanel,
  WizardFooter,
  useWizard,
  resolveStepStatus,
  wizardMarkerClass,
  wizardLabelClass,
}