'use client';

import Link from 'next/link';

interface Trip {
  id: string;
  type: 'morning' | 'evening';
  time: string;
  busType: string;
  direction: string;
  from: string;
  to: string;
  status: 'pending' | 'active' | 'completed';
  passengers: number;
  passengerImages: string[];
}

export default function TripCard({ trip }: { trip: Trip }) {
  const statusMap = {
    pending: { label: 'لم تبدأ', bg: '#fef3c7', text: '#d97706' },
    active: { label: 'جارية', bg: '#EEF2FF', text: '#1E3A8A' },
    completed: { label: 'مكتملة', bg: '#f1f5f9', text: '#64748b' },
  };
  const s = statusMap[trip.status];

  const borderColor = trip.type === 'morning' ? '#1E3A8A' : '#818CF8';
  const iconColor = trip.type === 'morning' ? '#f59e0b' : '#818CF8';
  const icon = trip.type === 'morning' ? 'ri-sun-line' : 'ri-moon-line';
  const title = trip.type === 'morning' ? 'رحلة الصباح' : 'رحلة المساء';

  return (
    <div className="mb-5">
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <div className="w-5 h-5 flex items-center justify-center">
            <i className={`${icon} text-xl`} style={{ color: iconColor }}></i>
          </div>
          <h2 className="text-[17px] font-bold text-slate-800" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{title}</h2>
        </div>
        <span className="text-[15px] font-semibold" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif', color: '#1E3A8A' }}>{trip.time}</span>
      </div>

      <div
        className="bg-white rounded-2xl p-4"
        style={{ boxShadow: '0 2px 8px rgba(30,58,138,0.08)', borderRight: `4px solid ${borderColor}` }}
      >
        <div className="flex items-center justify-between mb-3">
          <span className="text-[15px] font-bold text-slate-800" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
            {trip.busType} — {trip.direction}
          </span>
          <span className="text-xs font-semibold px-3 py-1 rounded-full" style={{ background: s.bg, color: s.text, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
            {s.label}
          </span>
        </div>

        <div className="flex items-center gap-2 mb-3 text-xs text-slate-500" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
          <i className="ri-map-pin-line text-xs"></i>
          <span>{trip.from}</span>
          <i className="ri-arrow-left-line text-xs"></i>
          <span>{trip.to}</span>
        </div>

        <div className="flex items-center gap-2 mb-4">
          <div className="flex items-center">
            {trip.passengerImages.slice(0, 3).map((img, i) => (
              <div key={i} className="w-7 h-7 rounded-full overflow-hidden border-2 border-white" style={{ marginRight: i > 0 ? '-8px' : '0' }}>
                <img src={img} alt="" className="w-full h-full object-cover object-top" />
              </div>
            ))}
          </div>
          <span className="text-xs text-slate-500" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>+{trip.passengers - 3} راكبة</span>
        </div>

        <div className="flex gap-2">
          <Link
            href={`/captain/trip/${trip.id}`}
            className="flex-1 h-10 rounded-xl text-xs font-semibold flex items-center justify-center whitespace-nowrap cursor-pointer transition-all"
            style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif', border: '1.5px solid #C7D2FE', color: '#1E3A8A', background: '#EEF2FF' }}
          >
            <i className="ri-file-list-3-line ml-1"></i>
            تفاصيل الرحلة
          </Link>

          {trip.status === 'pending' && (
            <Link
              href={`/captain/trip/${trip.id}`}
              className="flex-1 h-10 rounded-xl text-xs font-bold whitespace-nowrap cursor-pointer transition-all flex items-center justify-center gap-1.5 text-white"
              style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif', background: '#1E3A8A' }}
            >
              <i className="ri-play-circle-fill text-sm"></i>
              ابدأ الرحلة
            </Link>
          )}

          {trip.status === 'active' && (
            <Link
              href={`/captain/trip/${trip.id}/live`}
              className="flex-1 h-10 rounded-xl text-xs font-bold whitespace-nowrap cursor-pointer transition-all flex items-center justify-center gap-1.5 text-white"
              style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif', background: '#6366F1' }}
            >
              <i className="ri-navigation-fill text-sm"></i>
              متابعة المباشر
            </Link>
          )}

          {trip.status === 'completed' && (
            <div
              className="flex-1 h-10 rounded-xl text-xs font-semibold flex items-center justify-center gap-1.5"
              style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif', background: '#f1f5f9', color: '#64748b' }}
            >
              <i className="ri-check-double-line text-sm"></i>
              مكتملة
            </div>
          )}
        </div>
      </div>
    </div>
  );
}