'use client';

import { useState, useEffect, useRef } from 'react';
import Link from 'next/link';

const passengerData = {
  id: '3',
  name: 'فاطمة عبدالله الدوسري',
  pickup: 'حي الروضة، شارع الملك سلمان',
  phone: '0512345678',
  expectedTime: '7:25 ص',
  seat: 'المقعد 3',
  qrCode: 'STUDENT-2024-003-FATIMA',
};

type ScanState = 'idle' | 'scanning' | 'success' | 'error';

export default function ConfirmPickupClient({ tripId }: { tripId: string }) {
  const [scanState, setScanState] = useState<ScanState>('idle');
  const [showSuccess, setShowSuccess] = useState(false);
  const [scanProgress, setScanProgress] = useState(0);
  const [errorMsg, setErrorMsg] = useState('');
  const scanIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const pickedCount = 3;
  const totalCount = 14;
  const progress = (pickedCount / totalCount) * 100;

  const startScan = () => {
    setScanState('scanning');
    setScanProgress(0);
    setErrorMsg('');

    let p = 0;
    scanIntervalRef.current = setInterval(() => {
      p += 2;
      setScanProgress(p);
      if (p >= 100) {
        if (scanIntervalRef.current) clearInterval(scanIntervalRef.current);
        const success = Math.random() > 0.2;
        if (success) {
          setScanState('success');
          setTimeout(() => setShowSuccess(true), 600);
        } else {
          setScanState('error');
          setErrorMsg('QR Code غير صالح أو لا يطابق هذه الرحلة');
        }
      }
    }, 40);
  };

  const resetScan = () => {
    if (scanIntervalRef.current) clearInterval(scanIntervalRef.current);
    setScanState('idle');
    setScanProgress(0);
    setErrorMsg('');
  };

  useEffect(() => {
    return () => {
      if (scanIntervalRef.current) clearInterval(scanIntervalRef.current);
    };
  }, []);

  return (
    <div className="min-h-screen bg-slate-50" dir="rtl" style={{ maxWidth: '390px', margin: '0 auto' }}>
      <div className="h-11"></div>

      <div className="h-14 bg-white flex items-center justify-between px-4" style={{ boxShadow: '0 2px 8px rgba(0,0,0,0.04)' }}>
        <Link href={`/captain/trip/${tripId}`}>
          <div className="w-9 h-9 flex items-center justify-center cursor-pointer">
            <i className="ri-arrow-right-line text-slate-700 text-xl"></i>
          </div>
        </Link>
        <h1 className="text-base font-bold text-slate-800" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>تأكيد الركوب</h1>
        <div className="w-9"></div>
      </div>

      <div className="px-4 pt-4 pb-6">
        <div className="mb-4">
          <p className="text-xs text-slate-500 mb-2" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
            {pickedCount} من {totalCount} راكبة تم التقاطهن
          </p>
          <div className="h-1.5 bg-slate-200 rounded-full overflow-hidden">
            <div className="h-full bg-emerald-600 transition-all" style={{ width: `${progress}%` }}></div>
          </div>
        </div>

        <div className="bg-white rounded-3xl p-5 mb-4 flex items-center gap-4" style={{ boxShadow: '0 2px 12px rgba(0,0,0,0.06)' }}>
          <div
            className="w-14 h-14 rounded-2xl flex items-center justify-center text-lg font-bold flex-shrink-0"
            style={{ background: '#d1fae5', color: '#059669', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
          >
            {passengerData.name.split(' ')[0][0]}{passengerData.name.split(' ')[1][0]}
          </div>
          <div className="flex-1 min-w-0">
            <h2 className="text-base font-bold text-slate-800 truncate" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
              {passengerData.name}
            </h2>
            <div className="flex items-center gap-1 mt-0.5">
              <div className="w-3.5 h-3.5 flex items-center justify-center">
                <i className="ri-map-pin-line text-xs" style={{ color: '#059669' }}></i>
              </div>
              <span className="text-xs text-slate-500 truncate" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{passengerData.pickup}</span>
            </div>
            <div className="flex items-center gap-3 mt-1.5">
              <span className="text-xs text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                <i className="ri-time-line ml-1"></i>{passengerData.expectedTime}
              </span>
              <span className="text-xs text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                <i className="ri-armchair-line ml-1"></i>{passengerData.seat}
              </span>
            </div>
          </div>
          <a href={`tel:${passengerData.phone}`} className="w-10 h-10 rounded-xl bg-emerald-50 flex items-center justify-center cursor-pointer flex-shrink-0">
            <i className="ri-phone-fill text-lg" style={{ color: '#059669' }}></i>
          </a>
        </div>

        <div
          className="rounded-3xl overflow-hidden mb-4"
          style={{
            background: scanState === 'success' ? '#d1fae5' : scanState === 'error' ? '#fee2e2' : '#0f172a',
            boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
            transition: 'background 0.4s ease',
          }}
        >
          <div className="p-5">
            <div className="flex items-center justify-between mb-4">
              <span className="text-sm font-bold text-white" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif', color: scanState === 'success' ? '#065f46' : scanState === 'error' ? '#991b1b' : 'white' }}>
                {scanState === 'idle' && 'اسكان QR Code الطالبة'}
                {scanState === 'scanning' && 'جاري المسح...'}
                {scanState === 'success' && 'تم التحقق بنجاح!'}
                {scanState === 'error' && 'فشل التحقق'}
              </span>
              {scanState !== 'idle' && (
                <button onClick={resetScan} className="w-7 h-7 rounded-full flex items-center justify-center cursor-pointer" style={{ background: 'rgba(255,255,255,0.15)' }}>
                  <i className="ri-refresh-line text-sm text-white" style={{ color: scanState === 'success' ? '#065f46' : scanState === 'error' ? '#991b1b' : 'white' }}></i>
                </button>
              )}
            </div>

            <div
              className="relative mx-auto rounded-2xl overflow-hidden flex items-center justify-center"
              style={{ width: '220px', height: '220px', background: scanState === 'idle' || scanState === 'scanning' ? '#1e293b' : 'transparent' }}
            >
              {(scanState === 'idle' || scanState === 'scanning') && (
                <>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="grid grid-cols-7 gap-0.5 opacity-20">
                      {Array.from({ length: 49 }).map((_, i) => (
                        <div key={i} className="w-6 h-6 rounded-sm" style={{ background: Math.random() > 0.5 ? '#fff' : 'transparent' }}></div>
                      ))}
                    </div>
                  </div>

                  <div className="absolute top-3 right-3 w-8 h-8 border-t-2 border-r-2 border-emerald-400 rounded-tr-lg"></div>
                  <div className="absolute top-3 left-3 w-8 h-8 border-t-2 border-l-2 border-emerald-400 rounded-tl-lg"></div>
                  <div className="absolute bottom-3 right-3 w-8 h-8 border-b-2 border-r-2 border-emerald-400 rounded-br-lg"></div>
                  <div className="absolute bottom-3 left-3 w-8 h-8 border-b-2 border-l-2 border-emerald-400 rounded-bl-lg"></div>

                  {scanState === 'scanning' && (
                    <div
                      className="absolute left-3 right-3 h-0.5 rounded-full"
                      style={{
                        background: 'linear-gradient(90deg, transparent, #10b981, transparent)',
                        top: `${scanProgress * 2}px`,
                        boxShadow: '0 0 8px #10b981',
                        transition: 'top 0.04s linear',
                      }}
                    ></div>
                  )}

                  {scanState === 'idle' && (
                    <div className="relative z-10 flex flex-col items-center gap-2">
                      <div className="w-14 h-14 rounded-2xl bg-emerald-500/20 flex items-center justify-center">
                        <i className="ri-qr-scan-2-line text-3xl text-emerald-400"></i>
                      </div>
                      <span className="text-xs text-slate-400 text-center" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                        اضغط للمسح
                      </span>
                    </div>
                  )}

                  {scanState === 'scanning' && (
                    <div className="relative z-10 flex flex-col items-center gap-2">
                      <div className="w-14 h-14 rounded-2xl bg-emerald-500/20 flex items-center justify-center">
                        <i className="ri-qr-scan-2-line text-3xl text-emerald-400 animate-pulse"></i>
                      </div>
                    </div>
                  )}
                </>
              )}

              {scanState === 'success' && (
                <div className="flex flex-col items-center justify-center gap-3 p-6">
                  <div className="w-20 h-20 rounded-full flex items-center justify-center" style={{ background: '#d1fae5' }}>
                    <i className="ri-checkbox-circle-line text-5xl" style={{ color: '#059669' }}></i>
                  </div>
                  <p className="text-sm font-bold text-center" style={{ color: '#065f46', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                    تم التحقق من هوية الطالبة
                  </p>
                </div>
              )}

              {scanState === 'error' && (
                <div className="flex flex-col items-center justify-center gap-3 p-6">
                  <div className="w-20 h-20 rounded-full flex items-center justify-center" style={{ background: '#fee2e2' }}>
                    <i className="ri-close-circle-line text-5xl" style={{ color: '#dc2626' }}></i>
                  </div>
                  <p className="text-xs font-bold text-center" style={{ color: '#991b1b', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                    {errorMsg}
                  </p>
                </div>
              )}
            </div>

            {scanState === 'scanning' && (
              <div className="mt-4">
                <div className="h-1.5 bg-white/10 rounded-full overflow-hidden">
                  <div
                    className="h-full rounded-full transition-all"
                    style={{ width: `${scanProgress}%`, background: 'linear-gradient(90deg, #10b981, #34d399)' }}
                  ></div>
                </div>
                <p className="text-xs text-slate-400 text-center mt-2" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                  {scanProgress}%
                </p>
              </div>
            )}
          </div>

          {scanState === 'idle' && (
            <div className="px-5 pb-5">
              <button
                onClick={startScan}
                className="w-full h-12 rounded-2xl font-bold text-sm cursor-pointer transition-all active:scale-95 whitespace-nowrap flex items-center justify-center gap-2"
                style={{ background: 'linear-gradient(135deg, #059669, #10b981)', color: 'white', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
              >
                <i className="ri-qr-scan-2-line text-lg"></i>
                ابدأ مسح QR Code
              </button>
            </div>
          )}

          {scanState === 'error' && (
            <div className="px-5 pb-5 flex gap-3">
              <button
                onClick={resetScan}
                className="flex-1 h-11 rounded-2xl font-bold text-sm cursor-pointer transition-all whitespace-nowrap"
                style={{ background: '#fee2e2', color: '#dc2626', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
              >
                إعادة المحاولة
              </button>
              <button
                className="flex-1 h-11 rounded-2xl font-bold text-sm cursor-pointer transition-all whitespace-nowrap"
                style={{ background: '#fef3c7', color: '#d97706', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
              >
                تسجيل غياب
              </button>
            </div>
          )}
        </div>

        <div className="bg-white rounded-2xl p-4" style={{ boxShadow: '0 2px 8px rgba(0,0,0,0.06)' }}>
          <p className="text-xs font-bold text-slate-600 mb-3" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
            <i className="ri-information-line ml-1 text-slate-400"></i>
            تعليمات المسح
          </p>
          <div className="space-y-2">
            {[
              { icon: 'ri-smartphone-line', text: 'اطلبي من الطالبة فتح تطبيقها وعرض QR Code' },
              { icon: 'ri-focus-3-line', text: 'وجّه الكاميرا نحو الكود مع التأكد من الإضاءة الجيدة' },
              { icon: 'ri-shield-check-line', text: 'سيتم التحقق تلقائياً عند قراءة الكود بنجاح' },
            ].map((item, i) => (
              <div key={i} className="flex items-start gap-2.5">
                <div className="w-6 h-6 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5" style={{ background: '#EEF2FF' }}>
                  <i className={`${item.icon} text-xs`} style={{ color: '#1E3A8A' }}></i>
                </div>
                <span className="text-xs text-slate-500 leading-relaxed" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{item.text}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {showSuccess && (
        <div className="fixed inset-0 bg-black/60 flex items-end justify-center z-50" style={{ maxWidth: '390px', margin: '0 auto' }}>
          <div className="bg-white rounded-t-3xl p-6 w-full">
            <div className="flex flex-col items-center text-center">
              <div className="w-20 h-20 rounded-full flex items-center justify-center mb-4" style={{ background: '#d1fae5' }}>
                <i className="ri-checkbox-circle-line text-5xl" style={{ color: '#059669' }}></i>
              </div>
              <h2 className="text-xl font-bold text-slate-800 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                تم تأكيد الركوب
              </h2>
              <p className="text-sm text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{passengerData.name}</p>
              <p className="text-xs text-emerald-600 font-semibold mb-6" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                تم التحقق عبر QR Code بنجاح
              </p>
              <button
                onClick={() => { setShowSuccess(false); window.history.back(); }}
                className="w-full h-12 bg-emerald-600 text-white rounded-2xl font-bold text-sm cursor-pointer hover:bg-emerald-700 transition-all whitespace-nowrap mb-3"
                style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
              >
                انتقل للتالية ←
              </button>
              <button
                onClick={() => setShowSuccess(false)}
                className="text-sm text-slate-400 cursor-pointer hover:text-slate-600 transition-all whitespace-nowrap"
                style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
              >
                عودة للقائمة
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}