import type { CSSProperties, ReactNode } from "react";
import { LockKeyhole } from "lucide-react";

export type StageRailTone =
  | "neutral"
  | "success"
  | "warning"
  | "danger"
  | "active"
  | "partial";

export type StageRailItem = {
  id: string;
  label: string;
  detail?: string;
  statusLabel?: string;
  title?: string;
  icon?: ReactNode;
  tone?: StageRailTone;
  connectorTone?: StageRailTone;
  current?: boolean;
  locked?: boolean;
  lockedLabel?: string;
};

export type StageRailProps = {
  items: StageRailItem[];
  ariaLabel: string;
  className?: string;
  onSelect?: (id: string) => void;
};

const toneColors: Record<StageRailTone, string> = {
  neutral: "var(--line-dark)",
  success: "var(--green)",
  warning: "var(--amber)",
  danger: "var(--red)",
  active: "var(--blue)",
  partial: "var(--stage-rail-partial, #8069aa)"
};

export default function StageRail({
  items,
  ariaLabel,
  className = "",
  onSelect
}: StageRailProps) {
  return (
    <nav
      className={`stage-rail${className ? ` ${className}` : ""}`}
      aria-label={ariaLabel}
    >
      <div className="stage-rail-track">
        {items.map((item, index) => {
          const tone = item.tone ?? "neutral";
          const next = items[index + 1];
          const nextTone = next?.connectorTone ?? next?.tone ?? tone;
          const style = {
            "--stage-rail-color": toneColors[tone],
            "--stage-rail-line-color": toneColors[item.connectorTone ?? tone],
            "--stage-rail-line-next-color": toneColors[nextTone]
          } as CSSProperties;
          const content = (
            <>
              <span className="stage-rail-icon">{item.icon}</span>
              <span className="stage-rail-copy">
                <strong>
                  <span>{item.label}</span>
                  {item.locked ? (
                    <LockKeyhole
                      size={12}
                      aria-label={item.lockedLabel ?? "Locked"}
                    />
                  ) : null}
                </strong>
                {item.detail ? <small>{item.detail}</small> : null}
                {item.statusLabel ? (
                  <small className="stage-rail-status">{item.statusLabel}</small>
                ) : null}
              </span>
            </>
          );

          return (
            <div
              className="stage-rail-group"
              data-current={item.current || undefined}
              data-tone={tone}
              key={item.id}
              style={style}
            >
              {onSelect ? (
                <button
                  type="button"
                  className="stage-rail-item"
                  onClick={() => onSelect(item.id)}
                  aria-current={item.current ? "step" : undefined}
                  title={item.title}
                >
                  {content}
                </button>
              ) : (
                <div
                  className="stage-rail-item"
                  aria-current={item.current ? "step" : undefined}
                  title={item.title}
                >
                  {content}
                </div>
              )}
              {next ? <span className="stage-rail-line" aria-hidden="true" /> : null}
            </div>
          );
        })}
      </div>
    </nav>
  );
}
