import { useEffect, useSyncExternalStore } from 'react';
import { getCvWizardStep, setCvWizardStep, subscribeCvWizardStep } from './cv-wizard-state';

type Locale = 'ar' | 'en';

type Props = {
  locale: Locale;
  stepLabels: string[];
  stepDescriptions: string[];
  initialStep?: number;
};

function useStep(initialStep: number) {
  const step = useSyncExternalStore(subscribeCvWizardStep, getCvWizardStep, getCvWizardStep);
  return step ?? initialStep;
}

export default function CvFormWizardHeader({ locale, stepLabels, stepDescriptions, initialStep = 0 }: Props) {
  const step = useStep(initialStep);

  useEffect(() => {
    setCvWizardStep(initialStep);
  }, [initialStep]);

  return (
    <div className="space-y-4">
      <nav aria-label={locale === 'ar' ? 'خطوات النموذج' : 'Form steps'} className="relative w-full">
        <div
          className="absolute top-[18px] right-[8%] left-[8%] hidden h-0.5 bg-base-300 sm:block"
          aria-hidden="true"
        >
          <div
            className="h-full bg-accent transition-all duration-300"
            style={{
              width: step === 0 ? '0%' : `${(step / (stepLabels.length - 1)) * 100}%`,
            }}
          />
        </div>
        <ol className="relative grid grid-cols-3 gap-2 sm:grid-cols-6 sm:gap-0">
          {stepLabels.map((label, i) => {
            const isActive = i === step;
            const isComplete = i < step;
            return (
              <li key={label} className="flex flex-col items-center gap-1.5">
                <div
                  className={`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold transition-all duration-300 sm:h-9 sm:w-9 sm:text-sm ${
                    isActive
                      ? 'scale-110 bg-accent text-accent-content shadow-md'
                      : isComplete
                        ? 'bg-primary text-primary-content'
                        : 'bg-base-200 text-base-content/40'
                  }`}
                  aria-current={isActive ? 'step' : undefined}
                >
                  {isComplete ? (
                    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
                    </svg>
                  ) : (
                    <span>{i + 1}</span>
                  )}
                </div>
                <span
                  className={`hidden w-full px-0.5 text-center text-[10px] font-medium leading-tight sm:block sm:text-xs ${isActive ? 'text-accent' : 'text-base-content/50'}`}
                >
                  {label}
                </span>
              </li>
            );
          })}
        </ol>
        <p className="mt-4 text-center text-sm font-medium text-accent sm:hidden">{stepLabels[step]}</p>
      </nav>

      <div className="animate-fade-up" aria-live="polite">
        <h2 className="mb-1 text-xl font-bold text-primary">{stepLabels[step]}</h2>
        <p className="text-sm text-base-content/60">{stepDescriptions[step]}</p>
      </div>
    </div>
  );
}