'use client';

import { useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { useRouter } from 'next/navigation';
import PackagesSheet from './PackagesSheet';

const allBuses = [
  { id: '14', number: 'باص 14', from: 'حي النزهة', to: 'جامعة الملك سعود', availableSeats: 14, price: 250, captain: 'أبو محمد', rating: 4.8, reviews: 38, times: '7:30 ص | 2:00 م', fill: 72 },
  { id: '22', number: 'باص 22', from: 'حي الروضة', to: 'جامعة الأميرة نورة', availableSeats: 8, price: 280, captain: 'أبو عبدالله', rating: 4.9, reviews: 52, times: '7:00 ص | 1:30 م', fill: 55 },
  { id: '35', number: 'باص 35', from: 'حي العليا', to: 'مستشفى الملك فيصل', availableSeats: 6, price: 320, captain: 'أبو سعود', rating: 4.7, reviews: 29, times: '6:45 ص | 3:00 م', fill: 88 },
  { id: '41', number: 'باص 41', from: 'حي الملقا', to: 'وزارة التعليم', availableSeats: 10, price: 290, captain: 'أبو فهد', rating: 4.8, reviews: 41, times: '7:15 ص | 2:30 م', fill: 60 },
  { id: '18', number: 'باص 18', from: 'حي النزهة', to: 'جامعة الملك سعود', availableSeats: 12, price: 250, captain: 'أبو خالد', rating: 4.6, reviews: 33, times: '8:00 ص | 3:00 م', fill: 45 },
  { id: '27', number: 'باص 27', from: 'حي الياسمين', to: 'جامعة الإمام', availableSeats: 5, price: 300, captain: 'أبو راشد', rating: 4.9, reviews: 60, times: '7:00 ص | 2:00 م', fill: 90 },
];

const dayLabels: Record<string, string> = {
  sun: 'الأحد', mon: 'الإثنين', tue: 'الثلاثاء', wed: 'الأربعاء', thu: 'الخميس',
};

export default function BusResults() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const [selectedBusId, setSelectedBusId] = useState<string | null>(null);

  const from = searchParams.get('from') || '';
  const to = searchParams.get('to') || '';
  const time = searchParams.get('time') || '';
  const days = searchParams.get('days')?.split(',') || [];

  const results = allBuses.filter(b => {
    const matchFrom = !from || b.from.includes(from.replace('حي ', '')) || from.includes(b.from.replace('حي ', ''));
    const matchTo = !to || b.to === to;
    return matchFrom || matchTo;
  });

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

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

      {/* Header */}
      <header className="relative px-5 pt-4 pb-5 overflow-hidden" style={{ background: 'linear-gradient(135deg, #059669 0%, #0d9488 100%)' }}>
        <div className="absolute top-0 left-0 w-32 h-32 rounded-full opacity-10" style={{ background: 'white', transform: 'translate(-30%, -30%)' }}></div>
        <div className="flex items-center gap-3 mb-4">
          <button onClick={() => router.back()} className="w-9 h-9 rounded-xl flex items-center justify-center cursor-pointer border border-white/30" style={{ background: 'rgba(255,255,255,0.15)' }}>
            <i className="ri-arrow-right-line text-white text-lg"></i>
          </button>
          <div>
            <h1 className="text-white text-lg font-bold">نتائج البحث</h1>
            <p className="text-emerald-100 text-xs">{results.length} باص متاح</p>
          </div>
        </div>

        {/* Search Summary */}
        <div className="bg-white/15 rounded-2xl p-3 space-y-2 backdrop-blur-sm border border-white/20">
          <div className="flex items-center gap-2">
            <div className="w-6 h-6 bg-white/20 rounded-lg flex items-center justify-center flex-shrink-0">
              <i className="ri-map-pin-2-fill text-white text-xs"></i>
            </div>
            <span className="text-white text-xs font-semibold">{from}</span>
            <i className="ri-arrow-left-line text-emerald-200 text-xs mx-1"></i>
            <div className="w-6 h-6 bg-white/20 rounded-lg flex items-center justify-center flex-shrink-0">
              <i className="ri-flag-2-fill text-amber-300 text-xs"></i>
            </div>
            <span className="text-white text-xs font-semibold">{to}</span>
          </div>
          <div className="flex items-center gap-3">
            <div className="flex items-center gap-1.5">
              <i className="ri-time-fill text-violet-300 text-xs"></i>
              <span className="text-emerald-100 text-xs">{time}</span>
            </div>
            <span className="text-white/30">|</span>
            <div className="flex items-center gap-1">
              <i className="ri-calendar-fill text-sky-300 text-xs"></i>
              <span className="text-emerald-100 text-xs">{days.map(d => dayLabels[d]).join('، ')}</span>
            </div>
          </div>
        </div>
      </header>

      {/* Results */}
      <div className="px-4 pt-4 space-y-3">
        {results.length === 0 ? (
          <div className="bg-white rounded-3xl p-8 text-center shadow-sm">
            <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-3">
              <i className="ri-bus-2-line text-slate-400 text-3xl"></i>
            </div>
            <p className="text-slate-700 font-bold mb-1">لا توجد نتائج</p>
            <p className="text-slate-400 text-sm">جربي تغيير نقطة الانطلاق أو الوصول</p>
            <button onClick={() => router.back()} className="mt-4 px-6 py-2.5 rounded-xl text-white text-sm font-bold cursor-pointer whitespace-nowrap" style={{ background: 'linear-gradient(135deg, #059669, #0d9488)' }}>
              تعديل البحث
            </button>
          </div>
        ) : (
          results.map((bus) => (
            <div key={bus.id} className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100">
              <div className="flex items-start justify-between mb-3">
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-2.5">
                    <div className="w-9 h-9 bg-emerald-50 rounded-xl flex items-center justify-center">
                      <i className="ri-bus-2-fill text-emerald-600 text-lg"></i>
                    </div>
                    <h3 className="font-bold text-slate-900 text-base">{bus.number}</h3>
                    <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold border ${bus.availableSeats <= 6 ? 'bg-red-50 text-red-600 border-red-200' : 'bg-emerald-50 text-emerald-700 border-emerald-200'}`}>
                      {bus.availableSeats} مقعد
                    </span>
                  </div>
                  <div className="space-y-1.5 pr-1">
                    <div className="flex items-center gap-2">
                      <div className="w-4 h-4 flex items-center justify-center">
                        <i className="ri-map-pin-2-fill text-emerald-500 text-xs"></i>
                      </div>
                      <span className="text-xs text-slate-600">{bus.from}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <div className="w-4 h-4 flex items-center justify-center">
                        <i className="ri-flag-2-fill text-amber-500 text-xs"></i>
                      </div>
                      <span className="text-xs text-slate-600">{bus.to}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <div className="w-4 h-4 flex items-center justify-center">
                        <i className="ri-time-fill text-violet-400 text-xs"></i>
                      </div>
                      <span className="text-[11px] text-slate-400">{bus.times}</span>
                    </div>
                  </div>
                </div>
                <div className="flex flex-col items-end gap-2 mr-2 justify-center mt-2">
                  <button
                    onClick={() => setSelectedBusId(bus.id)}
                    className="px-4 h-9 text-white rounded-xl text-xs font-bold whitespace-nowrap cursor-pointer shadow-md"
                    style={{ background: 'linear-gradient(135deg, #059669, #0d9488)' }}
                  >
                    اشتركي
                  </button>
                </div>
              </div>

              {/* Fill Bar */}
              <div className="mb-3">
                <div className="flex items-center justify-between mb-1">
                  <span className="text-[10px] text-slate-400">نسبة الامتلاء</span>
                  <span className="text-[10px] font-bold" style={{ color: getFillColor(bus.fill) }}>{bus.fill}%</span>
                </div>
                <div className="h-1.5 bg-slate-100 rounded-full overflow-hidden">
                  <div className="h-full rounded-full transition-all" style={{ width: `${bus.fill}%`, background: getFillColor(bus.fill) }}></div>
                </div>
              </div>

              <div className="flex items-center justify-between pt-3 border-t border-slate-100">
                <div className="flex items-center gap-2">
                  <div className="w-7 h-7 bg-slate-100 rounded-full overflow-hidden border-2 border-white shadow-sm">
                    <img
                      src={`https://readdy.ai/api/search-image?query=professional%20saudi%20arabian%20male%20bus%20driver%20wearing%20traditional%20dress%20smiling%20friendly%20portrait%20clean%20simple%20background&width=28&height=28&seq=captain${bus.id}&orientation=squarish`}
                      alt={bus.captain}
                      className="w-full h-full object-cover object-top"
                    />
                  </div>
                  <span className="text-xs text-slate-500">الكابتن: <span className="font-semibold text-slate-700">{bus.captain}</span></span>
                </div>
                <div className="flex items-center gap-1 bg-amber-50 px-2.5 py-1 rounded-full">
                  <i className="ri-star-fill text-amber-400 text-xs"></i>
                  <span className="text-xs font-bold text-amber-700">{bus.rating}</span>
                </div>
              </div>
            </div>
          ))
        )}
      </div>

      {/* Modify Search */}
      <div className="px-4 mt-4">
        <button onClick={() => router.back()} className="w-full h-12 rounded-2xl border-2 border-emerald-400 text-emerald-600 text-sm font-bold cursor-pointer flex items-center justify-center gap-2 whitespace-nowrap bg-white">
          <i className="ri-search-2-line text-base"></i>
          تعديل البحث
        </button>
      </div>

      {selectedBusId && (
        <PackagesSheet busId={selectedBusId} onClose={() => setSelectedBusId(null)} />
      )}
    </div>
  );
}