'use client';

import { useState } from 'react';
import { CheckIcon } from '@/components/ui/Icons';

interface Step {
  id: string;
  name: string;
  duration_minutes?: number;
}

interface VisualTimelineProps {
  steps: Step[];
  currentStepIndex: number;
  completedSteps: Set<number>;
}

export default function VisualTimeline({ steps, currentStepIndex, completedSteps }: VisualTimelineProps) {
  const [expanded, setExpanded] = useState(false);

  if (steps.length === 0) return null;

  return (
    <div
      className="px-4 py-2 cursor-pointer"
      onClick={() => setExpanded(!expanded)}
    >
      {expanded ? (
        // Expanded: show step names
        <div className="flex flex-col gap-1">
          {steps.map((step, i) => {
            const isCompleted = completedSteps.has(i);
            const isCurrent = i === currentStepIndex;
            const isUpcoming = !isCompleted && !isCurrent;

            return (
              <div key={step.id} className="flex items-center gap-2">
                <div className={`w-7 h-7 rounded-full flex items-center justify-center shrink-0 transition-all ${
                  isCompleted
                    ? 'bg-indigo-500'
                    : isCurrent
                    ? 'bg-indigo-400 ring-2 ring-indigo-400/50 ring-offset-2 ring-offset-gray-950'
                    : 'bg-gray-700'
                }`}>
                  {isCompleted ? (
                    <CheckIcon size={14} className="text-white" />
                  ) : (
                    <span className={`text-xs font-medium ${isCurrent ? 'text-white' : 'text-gray-400'}`}>
                      {i + 1}
                    </span>
                  )}
                </div>
                <span className={`text-sm truncate ${
                  isCompleted ? 'text-white/40 line-through' :
                  isCurrent ? 'text-white font-medium' :
                  'text-white/50'
                }`}>
                  {step.name}
                </span>
                {step.duration_minutes && (
                  <span className="text-xs text-white/30 ml-auto shrink-0">
                    {step.duration_minutes}m
                  </span>
                )}
              </div>
            );
          })}
          <p className="text-white/30 text-xs text-center mt-1">Tap to collapse</p>
        </div>
      ) : (
        // Collapsed: just circles
        <div className="flex items-center justify-center gap-1.5">
          {steps.map((step, i) => {
            const isCompleted = completedSteps.has(i);
            const isCurrent = i === currentStepIndex;

            return (
              <div
                key={step.id}
                className={`rounded-full transition-all ${
                  isCompleted
                    ? 'w-3 h-3 bg-indigo-500'
                    : isCurrent
                    ? 'w-4 h-4 bg-indigo-400 animate-gentle-pulse'
                    : 'w-3 h-3 bg-gray-700'
                }`}
              />
            );
          })}
        </div>
      )}
    </div>
  );
}
