'use client';

import { useState } from 'react';
import BottomNav from '@/components/mobile/BottomNav';
import Link from 'next/link';

export default function TripsPage() {
  const [activeTab, setActiveTab] = useState<'active' | 'ended'>('active');

  const activeTrips = [
    { id: '14', number: 'باص 14', from: 'حي النزهة', to: 'جامعة الملك سعود', captain: 'أبو محمد', morningTime: '7:30 ص', eveningTime: '2:00 م', endDate: '11 أبريل', daysLeft: 22, progress: 73, price: 250 },
    { id: '22', number: 'باص 22', from: 'حي الروضة', to: 'جامعة الأميرة نورة', captain: 'أبو عبدالله', morningTime: '7:00 ص', eveningTime: '1:30 م', endDate: '15 أبريل', daysLeft: 26, progress: 80, price: 280 },
  ];

  const endedTrips = [
    { id: '8', number: 'باص 8', from: 'حي الملقا', to: 'جامعة الملك سعود', month: 'مارس 2026', price: 290 },
    { id: '12', number: 'باص 12', from: 'حي العليا', to: 'جامعة الأميرة نورة', month: 'فبراير 2026', price: 270 },
    { id: '5', number: 'باص 5', from: 'حي النزهة', to: 'جامعة الملك سعود', month: 'يناير 2026', price: 250 },
  ];

  return (
    <div className="min-h-screen pb-[98px]" dir="rtl" style={{ maxWidth: '390px', margin: '0 auto', background: '#F7F8FA' }}>
      <div className="h-11 bg-white"></div>

      <header className="bg-white h-14 flex items-center justify-center border-b border-slate-100 sticky top-0 z-20">
        <h1 className="text-slate-900 text-lg font-bold">رحلاتي</h1>
      </header>

      <div className="bg-white sticky top-14 z-10 px-4 pt-3 pb-0">
        <div className="flex bg-slate-100 rounded-2xl p-1">
          {[
            { id: 'active', label: 'الجارية' },
            { id: 'ended', label: 'المنتهية' },
          ].map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id as 'active' | 'ended')}
              className={`flex-1 h-10 rounded-xl text-sm font-bold transition-all cursor-pointer whitespace-nowrap ${
                activeTab === tab.id ? 'bg-white text-emerald-600 shadow-sm' : 'text-slate-500'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>
        <div className="h-3"></div>
      </div>

      <div className="px-4 pt-1 space-y-3">
        {activeTab === 'active' && (
          <>
            {activeTrips.map((trip) => (
              <div key={trip.id} className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100 overflow-hidden relative">
                <div className="absolute top-0 right-0 w-1.5 h-full rounded-r-2xl" style={{ background: 'linear-gradient(180deg, #059669, #047857)' }}></div>

                <div className="flex items-start justify-between mb-3 pr-2">
                  <div className="flex items-center gap-2">
                    <div className="w-9 h-9 bg-emerald-50 rounded-xl flex items-center justify-center">
                      <i className="ri-bus-2-line text-emerald-600 text-lg"></i>
                    </div>
                    <h3 className="text-base font-bold text-slate-900">{trip.number}</h3>
                  </div>
                  <span className="px-3 py-1 bg-emerald-50 text-emerald-700 rounded-full text-xs font-bold border border-emerald-100 whitespace-nowrap">
                    ● جارية
                  </span>
                </div>

                <div className="flex items-center gap-2 mb-3 pr-2">
                  <span className="text-xs font-semibold text-slate-700">{trip.from}</span>
                  <div className="w-5 h-5 flex items-center justify-center">
                    <i className="ri-arrow-left-line text-slate-300 text-sm"></i>
                  </div>
                  <span className="text-xs font-semibold text-slate-700">{trip.to}</span>
                </div>

                <div className="grid grid-cols-2 gap-2 mb-3 pr-2">
                  {[
                    { icon: 'ri-sun-line', label: 'موعد الذهاب', value: trip.morningTime, color: 'text-amber-500' },
                    { icon: 'ri-moon-line', label: 'موعد العودة', value: trip.eveningTime, color: 'text-violet-500' },
                    { icon: 'ri-user-smile-line', label: 'الكابتن', value: trip.captain, color: 'text-sky-500' },
                    { icon: 'ri-calendar-event-line', label: 'ينتهي في', value: trip.endDate, color: 'text-emerald-500' },
                  ].map((item, i) => (
                    <div key={i} className="flex items-center gap-2 bg-slate-50 rounded-xl p-2.5">
                      <div className="w-5 h-5 flex items-center justify-center">
                        <i className={`${item.icon} ${item.color} text-sm`}></i>
                      </div>
                      <div>
                        <p className="text-[10px] text-slate-400">{item.label}</p>
                        <p className="text-xs font-bold text-slate-800">{item.value}</p>
                      </div>
                    </div>
                  ))}
                </div>

                <div className="mb-3 pr-2">
                  <div className="flex items-center justify-between mb-1.5">
                    <p className="text-xs text-slate-500">متبقي <span className="font-bold text-slate-700">{trip.daysLeft} يوماً</span></p>
                    <p className="text-xs font-bold text-emerald-600">{trip.progress}%</p>
                  </div>
                  <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden">
                    <div
                      className="h-full rounded-full transition-all"
                      style={{ width: `${trip.progress}%`, background: 'linear-gradient(90deg, #059669, #34d399)' }}
                    ></div>
                  </div>
                </div>

                <button className="w-full h-10 border-2 border-emerald-500 text-emerald-600 rounded-xl text-sm font-bold whitespace-nowrap cursor-pointer hover:bg-emerald-50 transition-colors active:scale-95 pr-2">
                  تجديد الاشتراك
                </button>
              </div>
            ))}
          </>
        )}

        {activeTab === 'ended' && (
          <>
            {endedTrips.map((trip) => (
              <div key={trip.id} className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100 opacity-90">
                <div className="flex items-start justify-between mb-2">
                  <div className="flex items-center gap-2">
                    <div className="w-9 h-9 bg-slate-100 rounded-xl flex items-center justify-center">
                      <i className="ri-bus-2-line text-slate-400 text-lg"></i>
                    </div>
                    <div>
                      <h3 className="text-sm font-bold text-slate-700">{trip.number}</h3>
                      <p className="text-xs text-slate-400 mt-0.5">{trip.from} ← {trip.to}</p>
                    </div>
                  </div>
                  <span className="px-3 py-1 bg-slate-100 text-slate-500 rounded-full text-xs font-bold whitespace-nowrap">
                    منتهية
                  </span>
                </div>

                <div className="flex items-center justify-between pt-3 border-t border-slate-100">
                  <div className="flex items-center gap-1.5">
                    <div className="w-4 h-4 flex items-center justify-center">
                      <i className="ri-calendar-line text-slate-400 text-xs"></i>
                    </div>
                    <p className="text-xs text-slate-400">{trip.month}</p>
                  </div>
                  <button className="text-xs text-emerald-600 font-bold cursor-pointer hover:text-emerald-700 whitespace-nowrap flex items-center gap-1">
                    <i className="ri-refresh-line text-xs"></i>
                    اشترك مجدداً
                  </button>
                </div>
              </div>
            ))}
          </>
        )}
      </div>

      <BottomNav activeTab="trips" />
    </div>
  );
}