'use client';

import { Check } from 'lucide-react';

interface Step {
  id: string;
  name: string;
  href: string;
}

const steps: Step[] = [
  { id: 'search', name: 'Search', href: '/booking/search' },
  { id: 'results', name: 'Results', href: '/booking/results' },
  { id: 'passengers', name: 'Passengers', href: '/booking/passengers' },
  { id: 'seats', name: 'Seats', href: '/booking/seats' },
  { id: 'review', name: 'Review', href: '/booking/review' },
  { id: 'payment', name: 'Payment', href: '/booking/payment' },
  { id: 'confirmation', name: 'Done', href: '/booking/confirmation' },
];

interface ProgressIndicatorProps {
  currentStep: string;
}

export function ProgressIndicator({ currentStep }: ProgressIndicatorProps) {
  const currentIndex = steps.findIndex((s) => s.id === currentStep);

  return (
    <nav aria-label="Progress" className="py-6">
      <ol className="flex items-center max-w-4xl mx-auto">
        {steps.map((step, index) => {
          const isComplete = index < currentIndex;
          const isCurrent = index === currentIndex;

          return (
            <li key={step.id} className="flex flex-col items-center" style={{ width: `${100 / steps.length}%` }}>
              <div className="flex items-center w-full">
                <div
                  className={`flex-1 h-1 transition-all duration-300 ${
                    index === 0 ? 'opacity-0' : isComplete ? 'bg-primary' : 'bg-gray-200 dark:bg-gray-700'
                  }`}
                />
                <div
                  className={`relative flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full transition-all duration-300 ${
                    isComplete
                      ? 'bg-primary shadow-lg scale-110'
                      : isCurrent
                      ? 'border-4 border-primary bg-white dark:bg-gray-800 shadow-lg scale-110'
                      : 'border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800'
                  }`}
                >
                  {isComplete ? (
                    <Check className="h-5 w-5 text-white" />
                  ) : (
                    <span
                      className={`text-sm font-bold ${
                        isCurrent ? 'text-primary' : 'text-gray-400 dark:text-gray-500'
                      }`}
                    >
                      {index + 1}
                    </span>
                  )}
                </div>
                <div
                  className={`flex-1 h-1 transition-all duration-300 ${
                    index === steps.length - 1 ? 'opacity-0' : isComplete ? 'bg-primary' : 'bg-gray-200 dark:bg-gray-700'
                  }`}
                />
              </div>
              <div className="flex items-center w-full">
                <div className={`flex-1 ${index === 0 ? 'opacity-0' : ''}`} />
                <p
                  className={`mt-3 text-xs md:text-sm font-medium transition-colors flex-shrink-0 ${
                    isCurrent ? 'text-primary font-bold' : isComplete ? 'text-gray-700 dark:text-gray-300' : 'text-gray-400 dark:text-gray-500'
                  }`}
                >
                  {step.name}
                </p>
                <div className={`flex-1 ${index === steps.length - 1 ? 'opacity-0' : ''}`} />
              </div>
            </li>
          );
        })}
      </ol>
    </nav>
  );
}
