'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';

interface BusDetailsProps {
  busId: string;
}

const busData: Record<string, any> = {
  '14': {
    number: 'باص 14', type: 'ميني باص', availableSeats: 14, totalSeats: 20,
    departureTime: '7:30 صباحاً', returnTime: '2:00 مساءً', price: 250,
    captain: { name: 'أبو محمد', since: '2022', rating: 4.8, reviews: 38, trips: 420 },
    route: ['حي النزهة', 'حي الروضة', 'حي العليا', 'جامعة الملك سعود'],
    fill: 72,
    amenities: ['تكييف', 'واي فاي', 'شحن USB', 'مقاعد مريحة'],
    days: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس'],
    reviews: [
      { name: 'سارة أحمد', rating: 5, comment: 'الكابتن محترم جداً والباص نظيف ومريح، أنصح به بشدة!', time: 'منذ أسبوع' },
      { name: 'نورة محمد', rating: 5, comment: 'دائماً في الموعد، لم يتأخر ولو مرة واحدة طوال الشهر.', time: 'منذ أسبوعين' },
      { name: 'ريم عبدالله', rating: 4, comment: 'خدمة ممتازة والسعر مناسب جداً مقارنة بالبدائل.', time: 'منذ شهر' },
    ],
  },
  '22': {
    number: 'باص 22', type: 'باص كبير', availableSeats: 8, totalSeats: 30,
    departureTime: '7:00 صباحاً', returnTime: '1:30 مساءً', price: 280,
    captain: { name: 'أبو عبدالله', since: '2020', rating: 4.9, reviews: 52, trips: 680 },
    route: ['حي الروضة', 'حي الياسمين', 'حي النخيل', 'جامعة الأميرة نورة'],
    fill: 55,
    amenities: ['تكييف', 'واي فاي', 'شحن USB', 'مقاعد مريحة'],
    days: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس'],
    reviews: [
      { name: 'لمى سعد', rating: 5, comment: 'أفضل باص جربته، الكابتن هادئ ومحترف.', time: 'منذ 3 أيام' },
      { name: 'هند علي', rating: 5, comment: 'الباص واسع ومريح جداً، أنصح به.', time: 'منذ أسبوع' },
      { name: 'منى خالد', rating: 4, comment: 'خدمة جيدة وسعر معقول.', time: 'منذ أسبوعين' },
    ],
  },
  '35': {
    number: 'باص 35', type: 'ميني باص', availableSeats: 6, totalSeats: 18,
    departureTime: '6:45 صباحاً', returnTime: '3:00 مساءً', price: 320,
    captain: { name: 'أبو سعود', since: '2021', rating: 4.7, reviews: 29, trips: 310 },
    route: ['حي العليا', 'حي الملز', 'حي السليمانية', 'مستشفى الملك فيصل'],
    fill: 88,
    amenities: ['تكييف', 'مقاعد مريحة'],
    days: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس'],
    reviews: [
      { name: 'أمل فهد', rating: 5, comment: 'دقيق جداً في المواعيد، ممتاز.', time: 'منذ 5 أيام' },
      { name: 'غادة ناصر', rating: 4, comment: 'باص جيد ومريح.', time: 'منذ أسبوع' },
    ],
  },
  '41': {
    number: 'باص 41', type: 'باص كبير', availableSeats: 10, totalSeats: 28,
    departureTime: '7:15 صباحاً', returnTime: '2:30 مساءً', price: 290,
    captain: { name: 'أبو فهد', since: '2019', rating: 4.8, reviews: 41, trips: 750 },
    route: ['حي الملقا', 'حي الصحافة', 'حي الغدير', 'وزارة التعليم'],
    fill: 60,
    amenities: ['تكييف', 'واي فاي', 'شحن USB', 'مقاعد مريحة'],
    days: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس'],
    reviews: [
      { name: 'دانة محمد', rating: 5, comment: 'خدمة رائعة وكابتن محترم جداً.', time: 'منذ يومين' },
      { name: 'شيماء أحمد', rating: 4, comment: 'باص مريح والسعر مناسب.', time: 'منذ أسبوع' },
    ],
  },
  '18': {
    number: 'باص 18', type: 'ميني باص', availableSeats: 12, totalSeats: 18,
    departureTime: '8:00 صباحاً', returnTime: '3:00 مساءً', price: 250,
    captain: { name: 'أبو خالد', since: '2023', rating: 4.6, reviews: 33, trips: 180 },
    route: ['حي النزهة', 'حي الورود', 'حي المروج', 'جامعة الملك سعود'],
    fill: 45,
    amenities: ['تكييف', 'شحن USB'],
    days: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس'],
    reviews: [
      { name: 'رنا سالم', rating: 5, comment: 'جديد لكن ممتاز، الكابتن شاطر.', time: 'منذ أسبوع' },
      { name: 'بسمة عمر', rating: 4, comment: 'تجربة جيدة، أنصح به.', time: 'منذ أسبوعين' },
    ],
  },
};

const amenityIcons: Record<string, string> = {
  'تكييف': 'ri-temp-cold-line',
  'واي فاي': 'ri-wifi-line',
  'شحن USB': 'ri-plug-line',
  'مقاعد مريحة': 'ri-sofa-line',
};

export default function BusDetails({ busId }: BusDetailsProps) {
  const router = useRouter();
  const [activeTab, setActiveTab] = useState<'info' | 'reviews'>('info');
  const bus = busData[busId] || busData['14'];

  const getFillColor = (fill: number) => {
    if (fill >= 80) return '#ef4444';
    if (fill >= 60) return '#f59e0b';
    return '#10b981';
  };

  return (
    <div className="min-h-screen" dir="rtl" style={{ maxWidth: '390px', margin: '0 auto', background: '#F7F8FA' }}>
      <div className="h-11" style={{ background: 'linear-gradient(135deg, #059669 0%, #047857 100%)' }}></div>

      {/* Header */}
      <header className="h-14 flex items-center justify-center relative" style={{ background: 'linear-gradient(135deg, #059669 0%, #047857 100%)' }}>
        <button onClick={() => router.back()} className="absolute right-4 w-9 h-9 bg-white/20 rounded-xl flex items-center justify-center cursor-pointer border border-white/30">
          <i className="ri-arrow-right-s-line text-white text-xl"></i>
        </button>
        <h1 className="text-white text-lg font-bold">تفاصيل الباص</h1>
        <button className="absolute left-4 w-9 h-9 bg-white/20 rounded-xl flex items-center justify-center cursor-pointer border border-white/30">
          <i className="ri-share-line text-white text-base"></i>
        </button>
      </header>

      {/* Hero */}
      <div className="relative">
        <div className="h-[200px] flex flex-col items-center justify-center relative overflow-hidden" style={{ background: 'linear-gradient(135deg, #059669 0%, #047857 100%)' }}>
          <div className="absolute top-0 right-0 w-40 h-40 rounded-full opacity-10" style={{ background: 'white', transform: 'translate(30%, -30%)' }}></div>
          <div className="absolute bottom-0 left-0 w-28 h-28 rounded-full opacity-10" style={{ background: 'white', transform: 'translate(-30%, 30%)' }}></div>
          <div className="w-24 h-24 bg-white/20 rounded-3xl flex items-center justify-center border border-white/30 backdrop-blur-sm shadow-xl">
            <i className="ri-bus-2-line text-white" style={{ fontSize: '48px' }}></i>
          </div>
          <p className="text-white font-bold text-xl mt-3">{bus.number}</p>
          <p className="text-emerald-100 text-sm mt-0.5">{bus.type}</p>
        </div>
        <div className="absolute bottom-0 left-0 right-0 h-7 bg-[#F7F8FA] rounded-t-[28px]"></div>
      </div>

      {/* Price + Seats Row */}
      <div className="px-4 -mt-1 mb-3">
        <div className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 bg-emerald-50 rounded-2xl flex items-center justify-center">
              <i className="ri-money-dollar-circle-line text-emerald-600 text-2xl"></i>
            </div>
            <div>
              <p className="text-[11px] text-slate-400">الاشتراك الشهري</p>
              <p className="text-2xl font-bold text-emerald-600">{bus.price} <span className="text-sm font-normal text-slate-400">ر.س</span></p>
            </div>
          </div>
          <div className="h-12 w-px bg-slate-100"></div>
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 bg-violet-50 rounded-2xl flex items-center justify-center">
              <i className="ri-group-line text-violet-600 text-2xl"></i>
            </div>
            <div>
              <p className="text-[11px] text-slate-400">المقاعد المتاحة</p>
              <p className="text-2xl font-bold text-violet-600">{bus.availableSeats} <span className="text-sm font-normal text-slate-400">مقعد</span></p>
            </div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className="px-4 mb-3">
        <div className="bg-slate-100 rounded-2xl p-1 flex gap-1">
          {[{ id: 'info', label: 'معلومات الباص', icon: 'ri-information-line' }, { id: 'reviews', label: 'التقييمات', icon: 'ri-star-line' }].map(tab => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id as 'info' | 'reviews')}
              className={`flex-1 h-10 rounded-xl flex items-center justify-center gap-1.5 text-sm font-bold cursor-pointer transition-all whitespace-nowrap ${activeTab === tab.id ? 'bg-white text-emerald-700 shadow-sm' : 'text-slate-400'}`}
            >
              <i className={`${tab.icon} text-base`}></i>
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      <div className="px-4 pb-32 space-y-3">
        {activeTab === 'info' ? (
          <>
            {/* Schedule */}
            <div className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100">
              <div className="flex items-center gap-2 mb-3">
                <div className="w-7 h-7 bg-amber-50 rounded-lg flex items-center justify-center">
                  <i className="ri-time-line text-amber-600 text-sm"></i>
                </div>
                <h3 className="text-sm font-bold text-slate-900">الجدول الزمني</h3>
              </div>
              <div className="grid grid-cols-2 gap-2 mb-3">
                <div className="bg-emerald-50 rounded-xl p-3 flex items-center gap-2">
                  <div className="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center">
                    <i className="ri-sun-line text-emerald-600 text-base"></i>
                  </div>
                  <div>
                    <p className="text-[10px] text-slate-400">الذهاب</p>
                    <p className="text-xs font-bold text-slate-800">{bus.departureTime}</p>
                  </div>
                </div>
                <div className="bg-sky-50 rounded-xl p-3 flex items-center gap-2">
                  <div className="w-8 h-8 bg-sky-100 rounded-lg flex items-center justify-center">
                    <i className="ri-moon-line text-sky-600 text-base"></i>
                  </div>
                  <div>
                    <p className="text-[10px] text-slate-400">العودة</p>
                    <p className="text-xs font-bold text-slate-800">{bus.returnTime}</p>
                  </div>
                </div>
              </div>
              <div>
                <p className="text-[11px] text-slate-400 mb-2">أيام التشغيل</p>
                <div className="flex items-center gap-1.5 flex-wrap">
                  {bus.days.map((day: string) => (
                    <span key={day} className="px-2.5 py-1 bg-emerald-50 text-emerald-700 text-[11px] font-bold rounded-lg border border-emerald-100">{day}</span>
                  ))}
                </div>
              </div>
            </div>

            {/* Fill Bar */}
            <div className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <div className="w-7 h-7 bg-slate-50 rounded-lg flex items-center justify-center">
                    <i className="ri-bar-chart-2-line text-slate-600 text-sm"></i>
                  </div>
                  <h3 className="text-sm font-bold text-slate-900">نسبة الامتلاء</h3>
                </div>
                <span className="text-sm font-bold" style={{ color: getFillColor(bus.fill) }}>{bus.fill}%</span>
              </div>
              <div className="h-3 bg-slate-100 rounded-full overflow-hidden mb-2">
                <div className="h-full rounded-full transition-all" style={{ width: `${bus.fill}%`, background: getFillColor(bus.fill) }}></div>
              </div>
              <p className="text-[11px] text-slate-400">{bus.availableSeats} مقعد متاح من أصل {bus.totalSeats} مقعد</p>
            </div>

            {/* Captain */}
            <div className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100">
              <div className="flex items-center gap-2 mb-3">
                <div className="w-7 h-7 bg-sky-50 rounded-lg flex items-center justify-center">
                  <i className="ri-steering-2-line text-sky-600 text-sm"></i>
                </div>
                <h3 className="text-sm font-bold text-slate-900">الكابتن</h3>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-16 h-16 rounded-2xl overflow-hidden border-2 border-emerald-100 shadow-sm flex-shrink-0">
                  <img
                    src={`https://readdy.ai/api/search-image?query=professional%20friendly%20saudi%20arabian%20male%20bus%20driver%20wearing%20traditional%20white%20thobe%20smiling%20warmly%20portrait%20clean%20simple%20light%20background&width=64&height=64&seq=captaindetail${busId}&orientation=squarish`}
                    alt={bus.captain.name}
                    className="w-full h-full object-cover object-top"
                  />
                </div>
                <div className="flex-1">
                  <p className="text-base font-bold text-slate-900">{bus.captain.name}</p>
                  <p className="text-xs text-slate-400 mt-0.5">كابتن منذ {bus.captain.since}</p>
                  <div className="flex items-center gap-1 mt-1.5">
                    {[1,2,3,4,5].map(s => (
                      <i key={s} className={`ri-star-fill text-xs ${s <= Math.floor(bus.captain.rating) ? 'text-amber-400' : 'text-slate-200'}`}></i>
                    ))}
                    <span className="text-xs font-bold text-amber-600 mr-1">{bus.captain.rating}</span>
                  </div>
                </div>
                <div className="flex flex-col items-center gap-1">
                  <div className="bg-violet-50 px-3 py-2 rounded-xl text-center">
                    <p className="text-base font-bold text-violet-600">{bus.captain.trips}</p>
                    <p className="text-[10px] text-slate-400">رحلة</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Route */}
            <div className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100">
              <div className="flex items-center gap-2 mb-4">
                <div className="w-7 h-7 bg-emerald-50 rounded-lg flex items-center justify-center">
                  <i className="ri-route-line text-emerald-600 text-sm"></i>
                </div>
                <h3 className="text-sm font-bold text-slate-900">نقاط التوقف</h3>
              </div>
              <div className="space-y-0">
                {bus.route.map((stop: string, index: number) => (
                  <div key={index} className="flex items-start gap-3">
                    <div className="flex flex-col items-center">
                      {index === 0 ? (
                        <div className="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center flex-shrink-0">
                          <i className="ri-map-pin-2-fill text-emerald-600 text-sm"></i>
                        </div>
                      ) : index === bus.route.length - 1 ? (
                        <div className="w-8 h-8 bg-emerald-600 rounded-full flex items-center justify-center flex-shrink-0 shadow-md">
                          <i className="ri-flag-2-fill text-white text-sm"></i>
                        </div>
                      ) : (
                        <div className="w-3 h-3 bg-emerald-400 rounded-full flex-shrink-0 mt-2.5 border-2 border-emerald-100"></div>
                      )}
                      {index < bus.route.length - 1 && (
                        <div className="w-0.5 h-7 bg-emerald-200 my-1"></div>
                      )}
                    </div>
                    <div className="pt-1.5">
                      <p className={`text-sm ${index === 0 ? 'font-bold text-emerald-700' : index === bus.route.length - 1 ? 'font-bold text-emerald-700' : 'text-slate-600'}`}>{stop}</p>
                      {index === 0 && <p className="text-[10px] text-slate-400 mt-0.5">نقطة الانطلاق</p>}
                      {index === bus.route.length - 1 && <p className="text-[10px] text-slate-400 mt-0.5">الوجهة النهائية</p>}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Amenities */}
            <div className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100">
              <div className="flex items-center gap-2 mb-3">
                <div className="w-7 h-7 bg-violet-50 rounded-lg flex items-center justify-center">
                  <i className="ri-star-smile-line text-violet-600 text-sm"></i>
                </div>
                <h3 className="text-sm font-bold text-slate-900">مميزات الباص</h3>
              </div>
              <div className="grid grid-cols-2 gap-2">
                {bus.amenities.map((a: string) => (
                  <div key={a} className="flex items-center gap-2 bg-slate-50 rounded-xl p-2.5">
                    <div className="w-7 h-7 bg-emerald-50 rounded-lg flex items-center justify-center flex-shrink-0">
                      <i className={`${amenityIcons[a] || 'ri-check-line'} text-emerald-600 text-sm`}></i>
                    </div>
                    <span className="text-xs font-semibold text-slate-700">{a}</span>
                  </div>
                ))}
              </div>
            </div>
          </>
        ) : (
          <>
            {/* Rating Summary */}
            <div className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100">
              <div className="flex items-center gap-4">
                <div className="flex flex-col items-center justify-center w-20 h-20 rounded-2xl flex-shrink-0" style={{ background: 'linear-gradient(135deg, #f0fdf4, #dcfce7)' }}>
                  <p className="text-3xl font-bold text-emerald-600">{bus.captain.rating}</p>
                  <div className="flex items-center gap-0.5 mt-1">
                    {[1,2,3,4,5].map(s => (
                      <i key={s} className={`ri-star-fill text-[10px] ${s <= Math.floor(bus.captain.rating) ? 'text-amber-400' : 'text-slate-200'}`}></i>
                    ))}
                  </div>
                </div>
                <div className="flex-1 space-y-1.5">
                  {[5,4,3,2,1].map(star => {
                    const pct = star === 5 ? 70 : star === 4 ? 20 : star === 3 ? 7 : star === 2 ? 2 : 1;
                    return (
                      <div key={star} className="flex items-center gap-2">
                        <span className="text-[10px] text-slate-400 w-3">{star}</span>
                        <i className="ri-star-fill text-amber-400 text-[10px]"></i>
                        <div className="flex-1 h-1.5 bg-slate-100 rounded-full overflow-hidden">
                          <div className="h-full bg-amber-400 rounded-full" style={{ width: `${pct}%` }}></div>
                        </div>
                        <span className="text-[10px] text-slate-400 w-6">{pct}%</span>
                      </div>
                    );
                  })}
                </div>
              </div>
              <p className="text-center text-xs text-slate-400 mt-3">بناءً على {bus.captain.reviews} تقييم</p>
            </div>

            {/* Reviews List */}
            {bus.reviews.map((review: any, i: number) => (
              <div key={i} className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100">
                <div className="flex items-start justify-between mb-2">
                  <div className="flex items-center gap-2">
                    <div className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0" style={{ background: 'linear-gradient(135deg, #059669, #047857)' }}>
                      {review.name.charAt(0)}
                    </div>
                    <div>
                      <p className="text-sm font-bold text-slate-900">{review.name}</p>
                      <p className="text-[10px] text-slate-400">{review.time}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-0.5 bg-amber-50 px-2 py-1 rounded-lg">
                    {Array.from({ length: review.rating }).map((_, s) => (
                      <i key={s} className="ri-star-fill text-amber-400 text-xs"></i>
                    ))}
                  </div>
                </div>
                <p className="text-sm text-slate-600 leading-relaxed">{review.comment}</p>
              </div>
            ))}
          </>
        )}
      </div>

      {/* Bottom CTA */}
      <div className="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-t border-slate-100 p-4 z-40" style={{ maxWidth: '390px', margin: '0 auto', paddingBottom: 'calc(16px + 34px)' }}>
        <div className="flex items-center justify-between mb-3">
          <div>
            <p className="text-xs text-slate-400">الاشتراك الشهري</p>
            <p className="text-xl font-bold text-emerald-600">{bus.price} <span className="text-sm font-normal text-slate-400">ر.س</span></p>
          </div>
          <div className="flex items-center gap-1 bg-amber-50 px-3 py-1.5 rounded-xl">
            <i className="ri-star-fill text-amber-400 text-sm"></i>
            <span className="text-sm font-bold text-amber-700">{bus.captain.rating}</span>
            <span className="text-xs text-slate-400">({bus.captain.reviews})</span>
          </div>
        </div>
        <Link href={`/mobile/subscribe/${busId}`}>
          <button className="w-full h-[52px] text-white rounded-2xl text-base font-bold whitespace-nowrap cursor-pointer transition-all active:scale-95 shadow-lg flex items-center justify-center gap-2" style={{ background: 'linear-gradient(135deg, #059669, #047857)' }}>
            <i className="ri-shield-check-line text-lg"></i>
            اشتركي الآن — {bus.price} ر.س/شهر
          </button>
        </Link>
      </div>
    </div>
  );
}