"use client";

import { Check } from "lucide-react";
import { productSteps } from "./product.schema";

/**
 * `onSelect` turns the stepper into navigation rather than a progress read-out.
 * It is only passed when the product already exists — on a fresh draft there is
 * nothing saved to jump back to, so the steps stay a display.
 */
export default function ProductStepper({
  currentStep,
  onSelect,
  reachableUpTo,
}: {
  currentStep: number;
  onSelect?: (step: number) => void;
  /** Highest step the seller may jump to; defaults to every step. */
  reachableUpTo?: number;
}) {
  const totalSteps = productSteps.length;
  const activeIndex = Math.min(Math.max(currentStep, 1), totalSteps) - 1;
  const activeLabel = productSteps[activeIndex];
  const maxStep = reachableUpTo ?? totalSteps;

  return (
    <>
      <div className="lg:hidden">
        <div className="flex items-baseline justify-between gap-3">
          <p className="text-[13px] font-semibold leading-5 text-slate-800">
            Step {activeIndex + 1} of {totalSteps}
          </p>
          <p className="min-w-0 truncate text-xs font-medium leading-4 text-[#dc2626]">{activeLabel}</p>
        </div>
        <div className="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-slate-200">
          <div
            className="h-full rounded-full bg-[#CC1414] transition-all"
            style={{ width: `${((activeIndex + 1) / totalSteps) * 100}%` }}
          />
        </div>

        {/* Compact jump list — the desktop stepper is far too wide for a phone. */}
        {onSelect && (
          <div className="-mx-1 mt-3 flex gap-1.5 overflow-x-auto px-1 pb-1">
            {productSteps.map((label, index) => {
              const stepNumber = index + 1;
              const disabled = stepNumber > maxStep;
              return (
                <button
                  key={label}
                  type="button"
                  onClick={() => onSelect(stepNumber)}
                  disabled={disabled}
                  className={`shrink-0 rounded-full px-3 py-1 text-[11px] font-medium transition ${
                    stepNumber === currentStep
                      ? "bg-[#CC1414] text-white"
                      : "bg-slate-100 text-slate-600 hover:bg-slate-200 disabled:opacity-40"
                  }`}
                >
                  {stepNumber}. {label}
                </button>
              );
            })}
          </div>
        )}
      </div>

      <div className="hidden overflow-x-auto pb-1 lg:block">
        <div className="flex min-w-[880px] items-start px-1 lg:min-w-0 lg:px-0">
          {productSteps.map((label, index) => {
            const stepNumber = index + 1;
            const isActive = stepNumber === currentStep;
            const isCompleted = stepNumber < currentStep;
            const statusLabel = isCompleted ? "Completed" : isActive ? "In Progress" : "Pending";
            const circleClassName = isCompleted
              ? "border-[#f2d1d1] bg-[#fdeeee] text-[#dc2626] shadow-[0_10px_24px_-18px_rgba(220,38,38,0.6)]"
              : isActive
                ? "border-[#ef4444] bg-white text-[#dc2626] shadow-[0_10px_24px_-18px_rgba(239,68,68,0.75)]"
                : "border-slate-300 bg-white text-slate-400 shadow-[0_8px_20px_-18px_rgba(15,23,42,0.35)]";
            const statusClassName = isCompleted ? "text-emerald-600" : isActive ? "text-[#dc2626]" : "text-slate-500";
            const selectable = Boolean(onSelect) && stepNumber <= maxStep;

            const body = (
              <div className="flex w-full flex-col items-center px-1 text-center">
                <div
                  className={`relative flex h-12 w-12 items-center justify-center rounded-full border text-[15px] font-semibold transition-colors ${circleClassName} ${
                    selectable ? "group-hover:border-[#ef4444] group-hover:text-[#dc2626]" : ""
                  }`}
                >
                  {isCompleted ? <Check className="h-5 w-5 stroke-[2.75]" /> : stepNumber}
                </div>
                <p className="mt-3 text-[13px] font-semibold leading-5 text-slate-800">{label}</p>
                <p className={`mt-1 text-xs font-medium leading-4 ${statusClassName}`}>{statusLabel}</p>
              </div>
            );

            return (
              <div key={label} className="flex flex-1 items-start">
                {selectable ? (
                  <button
                    type="button"
                    onClick={() => onSelect?.(stepNumber)}
                    className="group w-full cursor-pointer focus:outline-none focus-visible:rounded-lg focus-visible:ring-2 focus-visible:ring-[#CC1414]"
                    aria-current={isActive ? "step" : undefined}
                  >
                    {body}
                  </button>
                ) : (
                  body
                )}

                {index < productSteps.length - 1 && (
                  <div className="mx-3 mt-[23px] flex-1 border-t border-dashed border-slate-300" aria-hidden />
                )}
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}