'use client';

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

interface SubscribePaymentProps {
  busId: string;
}

export default function SubscribePayment({ busId }: SubscribePaymentProps) {
  const router = useRouter();
  const [selectedDays, setSelectedDays] = useState<string[]>(['ح', 'إ', 'ث', 'ر', 'خ']);
  const [selectedPayment, setSelectedPayment] = useState<'card' | 'bank'>('card');
  const [locationSelected, setLocationSelected] = useState(false);

  const busData: Record<string, any> = {
    '14': { number: 'باص 14', route: 'حي النزهة', captain: 'أبو محمد', price: 250 },
    '22': { number: 'باص 22', route: 'حي الروضة', captain: 'أبو عبدالله', price: 280 },
    '35': { number: 'باص 35', route: 'حي العليا', captain: 'أبو سعود', price: 320 },
    '41': { number: 'باص 41', route: 'حي الملقا', captain: 'أبو فهد', price: 290 },
    '18': { number: 'باص 18', route: 'حي النزهة', captain: 'أبو خالد', price: 250 },
  };

  const bus = busData[busId] || busData['14'];
  const serviceFee = 10;
  const total = bus.price + serviceFee;
  const days = ['ح', 'إ', 'ث', 'ر', 'خ', 'ج', 'س'];

  const toggleDay = (day: string) => {
    setSelectedDays(prev =>
      prev.includes(day) ? prev.filter(d => d !== day) : [...prev, day]
    );
  };

  return (
    <div className="min-h-screen pb-32" 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 relative sticky top-0 z-20">
        <button onClick={() => router.back()} className="absolute right-4 w-9 h-9 bg-slate-100 rounded-xl flex items-center justify-center cursor-pointer">
          <i className="ri-arrow-right-s-line text-slate-700 text-xl"></i>
        </button>
        <h1 className="text-slate-900 text-lg font-bold">الاشتراك والدفع</h1>
      </header>

      <div className="px-4 pt-4 space-y-3">

        <div className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-11 h-11 bg-emerald-50 rounded-xl flex items-center justify-center">
              <i className="ri-bus-2-line text-emerald-600 text-xl"></i>
            </div>
            <div>
              <h3 className="text-base font-bold text-slate-900">{bus.number} — {bus.route}</h3>
              <p className="text-xs text-slate-400 mt-0.5">الكابتن: {bus.captain}</p>
            </div>
          </div>
          <div className="h-px bg-slate-100 my-3"></div>
          <div className="flex items-center justify-between">
            <p className="text-sm text-slate-500">الاشتراك الشهري</p>
            <p className="text-lg font-bold text-emerald-600">{bus.price} ر.س</p>
          </div>
        </div>

        <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-emerald-50 rounded-lg flex items-center justify-center">
              <i className="ri-map-pin-2-line text-emerald-600 text-sm"></i>
            </div>
            <h3 className="text-sm font-bold text-slate-900">نقطة انطلاقك</h3>
          </div>
          <button
            onClick={() => setLocationSelected(true)}
            className={`w-full h-[52px] rounded-xl border-2 border-dashed flex items-center justify-center gap-2 cursor-pointer transition-all ${
              locationSelected ? 'border-emerald-500 bg-emerald-50' : 'border-emerald-300 bg-emerald-50/40'
            }`}
          >
            <i className={`ri-map-pin-2-line text-xl ${locationSelected ? 'text-emerald-600' : 'text-emerald-500'}`}></i>
            <span className={`text-sm font-semibold ${locationSelected ? 'text-emerald-700' : 'text-emerald-500'}`}>
              {locationSelected ? '✓ تم تحديد الموقع' : 'اضغطي لتحديد موقعك'}
            </span>
          </button>
        </div>

        <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-violet-50 rounded-lg flex items-center justify-center">
              <i className="ri-calendar-check-line text-violet-600 text-sm"></i>
            </div>
            <h3 className="text-sm font-bold text-slate-900">أيام الدراسة / العمل</h3>
          </div>
          <div className="flex items-center justify-between gap-1">
            {days.map((day) => (
              <button
                key={day}
                onClick={() => toggleDay(day)}
                className={`w-10 h-10 rounded-full flex items-center justify-center text-xs font-bold cursor-pointer transition-all active:scale-90 ${
                  selectedDays.includes(day)
                    ? 'text-white shadow-md'
                    : 'bg-slate-100 text-slate-500'
                }`}
                style={selectedDays.includes(day) ? { background: 'linear-gradient(135deg, #059669, #047857)' } : {}}
              >
                {day}
              </button>
            ))}
          </div>
        </div>

        <div className="rounded-2xl p-4 border border-emerald-100" style={{ background: 'linear-gradient(135deg, #f0fdf4, #dcfce7)' }}>
          <div className="flex items-center gap-2 mb-3">
            <div className="w-7 h-7 bg-white rounded-lg flex items-center justify-center shadow-sm">
              <i className="ri-receipt-line text-emerald-600 text-sm"></i>
            </div>
            <h3 className="text-sm font-bold text-slate-900">ملخص التكلفة</h3>
          </div>
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <p className="text-sm text-slate-600">الاشتراك الشهري</p>
              <p className="text-sm font-semibold text-slate-800">{bus.price} ر.س</p>
            </div>
            <div className="flex items-center justify-between">
              <p className="text-sm text-slate-600">رسوم الخدمة</p>
              <p className="text-sm font-semibold text-slate-800">{serviceFee} ر.س</p>
            </div>
            <div className="h-px bg-emerald-200 my-1"></div>
            <div className="flex items-center justify-between">
              <p className="text-base font-bold text-slate-900">الإجمالي</p>
              <p className="text-xl font-bold text-emerald-600">{total} ر.س</p>
            </div>
          </div>
        </div>

        <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-sky-50 rounded-lg flex items-center justify-center">
              <i className="ri-secure-payment-line text-sky-600 text-sm"></i>
            </div>
            <h3 className="text-sm font-bold text-slate-900">طريقة الدفع</h3>
          </div>
          <div className="space-y-2.5">
            {[
              { id: 'card', icon: 'ri-bank-card-2-line', label: 'بطاقة ائتمانية', sub: 'Visa / Mastercard' },
              { id: 'bank', icon: 'ri-building-4-line', label: 'تحويل بنكي', sub: 'IBAN / SWIFT' },
            ].map((method) => (
              <button
                key={method.id}
                onClick={() => setSelectedPayment(method.id as 'card' | 'bank')}
                className={`w-full h-16 rounded-xl border-2 flex items-center justify-between px-4 cursor-pointer transition-all ${
                  selectedPayment === method.id ? 'border-emerald-500 bg-emerald-50' : 'border-slate-200 bg-white'
                }`}
              >
                <div className="flex items-center gap-3">
                  <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${selectedPayment === method.id ? 'bg-emerald-100' : 'bg-slate-100'}`}>
                    <i className={`${method.icon} text-xl ${selectedPayment === method.id ? 'text-emerald-600' : 'text-slate-500'}`}></i>
                  </div>
                  <div className="text-right">
                    <p className={`text-sm font-bold ${selectedPayment === method.id ? 'text-slate-900' : 'text-slate-600'}`}>{method.label}</p>
                    <p className="text-[10px] text-slate-400">{method.sub}</p>
                  </div>
                </div>
                <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all ${selectedPayment === method.id ? 'border-emerald-600 bg-emerald-600' : 'border-slate-300'}`}>
                  {selectedPayment === method.id && <div className="w-2 h-2 bg-white rounded-full"></div>}
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>

      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-slate-100 p-4 z-40" style={{ maxWidth: '390px', margin: '0 auto', paddingBottom: 'calc(16px + 34px)' }}>
        <button
          onClick={() => router.push('/mobile/payment-success')}
          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-lock-2-line text-lg"></i>
          تأكيد الدفع
        </button>
      </div>
    </div>
  );
}