'use client';

interface Stop {
  name: string;
  time: string;
  status: 'passed' | 'current' | 'upcoming';
  passengers: number;
}

interface StopsTimelineProps {
  stops: Stop[];
  currentStopIndex: number;
  confirmedStops: Set<number>;
  onMarkPassed: (index: number) => void;
  onViewPassengers: (index: number) => void;
}

export default function StopsTimeline({ stops, currentStopIndex, confirmedStops, onMarkPassed, onViewPassengers }: StopsTimelineProps) {
  return (
    <div className="bg-white rounded-2xl p-4 shadow-sm" style={{ border: '1px solid #E0E7FF' }}>
      <div className="flex items-center gap-2 mb-4">
        <div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{ background: '#EEF2FF' }}>
          <i className="ri-route-fill text-sm" style={{ color: '#1E3A8A' }}></i>
        </div>
        <h3 className="text-sm font-bold text-slate-900" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>محطات الرحلة</h3>
        <span className="mr-auto text-xs font-semibold px-2 py-0.5 rounded-full" style={{ color: '#1E3A8A', background: '#EEF2FF', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
          {stops.filter(s => s.status === 'passed').length} / {stops.length}
        </span>
      </div>

      <div className="space-y-0">
        {stops.map((stop, index) => (
          <div key={index} className="flex items-start gap-3">
            <div className="flex flex-col items-center flex-shrink-0">
              {stop.status === 'passed' && (
                <div className="w-8 h-8 rounded-full flex items-center justify-center" style={{ background: '#EEF2FF' }}>
                  <i className="ri-check-line text-sm" style={{ color: '#1E3A8A' }}></i>
                </div>
              )}
              {stop.status === 'current' && (
                <div className="relative w-8 h-8 flex items-center justify-center">
                  <div className="absolute w-8 h-8 rounded-full animate-ping opacity-60" style={{ background: '#C7D2FE' }}></div>
                  <div className="w-8 h-8 rounded-full flex items-center justify-center z-10" style={{ background: '#1E3A8A' }}>
                    <i className="ri-bus-2-fill text-white text-sm"></i>
                  </div>
                </div>
              )}
              {stop.status === 'upcoming' && (
                <div className="w-8 h-8 rounded-full flex items-center justify-center" style={{ background: '#EEF2FF' }}>
                  <div className="w-3 h-3 rounded-full" style={{ background: '#C7D2FE' }}></div>
                </div>
              )}
              {index < stops.length - 1 && (
                <div
                  className="w-0.5 my-1"
                  style={{
                    height: '28px',
                    background: stop.status === 'passed' ? '#1E3A8A' : '#E0E7FF',
                  }}
                ></div>
              )}
            </div>

            <div className="flex-1 pt-1 pb-3">
              <div className="flex items-center justify-between gap-2 flex-wrap">
                <p
                  className="text-sm font-bold"
                  style={{
                    fontFamily: '"IBM Plex Sans Arabic", sans-serif',
                    color: stop.status === 'passed' ? '#A5B4FC' : stop.status === 'current' ? '#1E3A8A' : '#1e293b',
                    textDecoration: stop.status === 'passed' ? 'line-through' : 'none',
                  }}
                >
                  {stop.name}
                </p>
                <div className="flex items-center gap-1.5 flex-shrink-0 flex-wrap">
                  <span
                    className="text-xs font-bold px-2 py-0.5 rounded-full"
                    style={{
                      fontFamily: '"IBM Plex Sans Arabic", sans-serif',
                      background: stop.status === 'passed' ? '#EEF2FF' : stop.status === 'current' ? '#E0E7FF' : '#f8fafc',
                      color: stop.status === 'passed' ? '#818CF8' : stop.status === 'current' ? '#1E3A8A' : '#94a3b8',
                    }}
                  >
                    {stop.time}
                  </span>

                  {stop.status === 'current' && (
                    <>
                      <button
                        onClick={() => onViewPassengers(index)}
                        className="text-xs font-bold px-2 py-0.5 rounded-full cursor-pointer whitespace-nowrap flex items-center gap-1"
                        style={{ background: '#E0E7FF', color: '#1E3A8A', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
                      >
                        <i className="ri-group-line" style={{ fontSize: '11px' }}></i>
                        الطالبات
                      </button>
                      <button
                        onClick={() => onMarkPassed(index)}
                        className="text-xs font-bold px-2 py-0.5 rounded-full text-white cursor-pointer whitespace-nowrap"
                        style={{
                          background: confirmedStops.has(index) ? '#1E3A8A' : '#818CF8',
                          fontFamily: '"IBM Plex Sans Arabic", sans-serif',
                        }}
                      >
                        {confirmedStops.has(index) ? 'تم المرور ✓' : 'تم المرور'}
                      </button>
                    </>
                  )}

                  {stop.status === 'passed' && confirmedStops.has(index) && (
                    <button
                      onClick={() => onViewPassengers(index)}
                      className="text-xs px-2 py-0.5 rounded-full cursor-pointer whitespace-nowrap flex items-center gap-1"
                      style={{ background: '#EEF2FF', color: '#818CF8', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
                    >
                      <i className="ri-group-line" style={{ fontSize: '11px' }}></i>
                      عرض
                    </button>
                  )}
                </div>
              </div>

              <div className="flex items-center gap-1 mt-0.5">
                <i className="ri-group-line" style={{ fontSize: '11px', color: '#A5B4FC' }}></i>
                <p className="text-xs" style={{ color: '#A5B4FC', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                  {stop.passengers} راكبة
                  {stop.status === 'passed' && ' — تم الالتقاط'}
                  {stop.status === 'current' && ' — الباص هنا الآن'}
                  {stop.status === 'upcoming' && ' — قادم'}
                </p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}