"use client";

// components/flow/FlowProgress.tsx
// Honest progress indicator: "Paso N de 3" plus a labeled step list. Only the
// three steps the buyer controls are counted (register, upsell, review); the
// provider popup and confirmation are outcomes, not steps (ux.md 2 cross-screen
// notes). Active step is distinguishable WITHOUT color (a filled dot + bold
// weight + an aria-current), per WCAG color-is-not-the-only-signal.

import * as React from "react";
import { PROGRESS_STEPS, type FlowStep } from "./types";

export interface FlowProgressProps {
  current: FlowStep;
}

export function FlowProgress({ current }: FlowProgressProps) {
  // "pay" is an outcome, not a controlled step; pin the indicator to review.
  const effective: FlowStep = current === "pay" ? "review" : current;
  const index = PROGRESS_STEPS.findIndex((s) => s.step === effective);
  const stepNumber = index < 0 ? 1 : index + 1;
  const total = PROGRESS_STEPS.length;

  return (
    <nav aria-label="Progreso de la inscripción" className="flex flex-col gap-2">
      <p className="font-body text-caption font-medium text-muted-label">
        Paso {stepNumber} de {total}
      </p>
      <ol className="flex items-center gap-2" role="list">
        {PROGRESS_STEPS.map((s, i) => {
          const done = i < stepNumber - 1;
          const active = i === stepNumber - 1;
          return (
            <li key={s.step} className="flex flex-1 items-center gap-2">
              <span
                aria-hidden="true"
                className={[
                  "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-micro font-bold",
                  active
                    ? "bg-primary text-on-primary"
                    : done
                      ? "bg-steelblue text-on-primary"
                      : "bg-track text-muted-label",
                ].join(" ")}
              >
                {i + 1}
              </span>
              <span
                aria-current={active ? "step" : undefined}
                className={[
                  "font-body text-caption",
                  active
                    ? "font-bold text-ink-strong"
                    : "font-medium text-muted-label",
                ].join(" ")}
              >
                {s.label}
              </span>
            </li>
          );
        })}
      </ol>
    </nav>
  );
}