// /media/hf/data/projects/Dawinder/transport/components/ui/TripPipeline.tsx
import React from 'react';
import { TripStatus } from '@/types';
import { cn } from '@/lib/utils';
import { Check } from 'lucide-react';

const STAGES: { value: TripStatus; label: string }[] = [
  { value: 'created', label: 'Created' },
  { value: 'assigned', label: 'Assigned' },
  { value: 'started', label: 'Started' },
  { value: 'reached_pickup', label: 'At Pickup' },
  { value: 'loaded', label: 'Loaded' },
  { value: 'in_transit', label: 'In Transit' },
  { value: 'reached_destination', label: 'At Dest' },
  { value: 'pod_uploaded', label: 'POD Upld' },
  { value: 'completed', label: 'Completed' }
];

interface TripPipelineProps {
  currentStatus: TripStatus;
}

export default function TripPipeline({ currentStatus }: TripPipelineProps) {
  const currentIndex = STAGES.findIndex(s => s.value === currentStatus);
  const actualIndex = currentIndex === -1 ? 0 : currentIndex;

  return (
    <div className="w-full py-4 overflow-x-auto pb-6">
      <div className="flex items-center min-w-max px-4">
        {STAGES.map((stage, index) => {
          const isCompleted = index < actualIndex || currentStatus === 'completed';
          const isCurrent = index === actualIndex && currentStatus !== 'completed' && currentStatus !== 'cancelled';
          const isCancelled = currentStatus === 'cancelled';
          
          return (
            <React.Fragment key={stage.value}>
              <div className="flex flex-col items-center relative">
                <div 
                  className={cn(
                    "w-8 h-8 rounded-full flex items-center justify-center z-10 text-xs font-bold transition-colors",
                    isCompleted ? "bg-status-green text-[#0D1117]" : 
                    isCurrent ? "bg-status-amber text-[#0D1117] ring-4 ring-status-amber/20 animate-pulse" : 
                    isCancelled ? "bg-surface border-2 border-status-red text-text-hint" :
                    "bg-surface border-2 border-border text-text-hint"
                  )}
                >
                  {isCompleted ? <Check size={16} /> : index + 1}
                </div>
                <span className={cn(
                  "absolute top-10 text-xs whitespace-nowrap font-medium",
                  isCompleted ? "text-text-primary" : 
                  isCurrent ? "text-status-amber" : 
                  "text-text-hint"
                )}>
                  {stage.label}
                </span>
              </div>
              
              {index < STAGES.length - 1 && (
                <div className={cn(
                  "h-1 w-16 mx-1 z-0 transition-colors",
                  isCompleted ? "bg-status-green" : "bg-border"
                )} />
              )}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}