'use client';

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

export default function DeleteAccountModal({ onClose }: { onClose: () => void }) {
  const [step, setStep] = useState<'confirm' | 'type'>('confirm');
  const [typed, setTyped] = useState('');
  const [deleting, setDeleting] = useState(false);
  const router = useRouter();

  const handleDelete = () => {
    if (typed !== 'حذف حسابي') return;
    setDeleting(true);
    setTimeout(() => {
      router.push('/captain/login');
    }, 1500);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center" style={{ background: 'rgba(0,0,0,0.6)' }} onClick={onClose}>
      <div
        className="w-full rounded-t-3xl p-6 pb-10"
        style={{ maxWidth: '390px', background: 'white' }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="w-10 h-1 rounded-full mx-auto mb-5" style={{ background: '#E2E8F0' }}></div>

        {step === 'confirm' ? (
          <>
            <div className="flex flex-col items-center mb-6">
              <div className="w-16 h-16 rounded-full flex items-center justify-center mb-4" style={{ background: '#FEE2E2' }}>
                <i className="ri-delete-bin-6-fill text-3xl" style={{ color: '#DC2626' }}></i>
              </div>
              <h2 className="text-lg font-bold text-slate-800 mb-2" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>حذف الحساب</h2>
              <p className="text-sm text-slate-500 text-center" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                هل أنت متأكد من حذف حسابك؟ هذا الإجراء لا يمكن التراجع عنه
              </p>
            </div>

            <div className="space-y-3 mb-6">
              {[
                { icon: 'ri-route-fill', color: '#1E3A8A', text: 'سيتم حذف جميع سجلات رحلاتك' },
                { icon: 'ri-star-fill', color: '#f59e0b', text: 'سيتم حذف جميع تقييماتك' },
                { icon: 'ri-money-dollar-circle-fill', color: '#DC2626', text: 'لن تتمكن من استرداد أرباحك المعلقة' },
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-3 p-3 rounded-xl" style={{ background: '#FEF2F2' }}>
                  <i className={`${item.icon} text-lg`} style={{ color: item.color }}></i>
                  <p className="text-xs text-slate-600 text-right" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{item.text}</p>
                </div>
              ))}
            </div>

            <div className="flex gap-3">
              <button
                onClick={onClose}
                className="flex-1 h-12 rounded-xl font-bold text-sm cursor-pointer whitespace-nowrap"
                style={{ background: '#F1F5F9', color: '#475569', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
              >
                إلغاء
              </button>
              <button
                onClick={() => setStep('type')}
                className="flex-1 h-12 rounded-xl font-bold text-sm cursor-pointer whitespace-nowrap"
                style={{ background: '#DC2626', color: 'white', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
              >
                متابعة الحذف
              </button>
            </div>
          </>
        ) : (
          <>
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-lg font-bold text-slate-800" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>تأكيد الحذف النهائي</h2>
              <button onClick={onClose} className="w-8 h-8 rounded-full flex items-center justify-center cursor-pointer" style={{ background: '#F1F5F9' }}>
                <i className="ri-close-line text-slate-500 text-lg"></i>
              </button>
            </div>

            <div className="p-4 rounded-xl mb-5" style={{ background: '#FEF2F2', border: '1.5px solid #FECACA' }}>
              <p className="text-sm text-slate-700 text-right mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                اكتب <span className="font-bold" style={{ color: '#DC2626' }}>حذف حسابي</span> للتأكيد
              </p>
              <p className="text-xs text-slate-400 text-right" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>هذا الإجراء نهائي ولا يمكن التراجع عنه</p>
            </div>

            <div className="mb-5">
              <input
                type="text"
                value={typed}
                onChange={(e) => setTyped(e.target.value)}
                placeholder="اكتب هنا..."
                className="w-full h-12 px-4 rounded-xl border text-sm text-right outline-none"
                style={{
                  fontFamily: '"IBM Plex Sans Arabic", sans-serif',
                  background: '#F8FAFF',
                  borderColor: typed === 'حذف حسابي' ? '#DC2626' : '#E0E7FF',
                  color: '#1e293b',
                }}
                dir="rtl"
              />
            </div>

            <button
              onClick={handleDelete}
              disabled={typed !== 'حذف حسابي' || deleting}
              className="w-full h-12 rounded-xl font-bold text-base cursor-pointer whitespace-nowrap flex items-center justify-center gap-2 transition-all"
              style={{
                background: typed === 'حذف حسابي' ? '#DC2626' : '#CBD5E1',
                color: 'white',
                fontFamily: '"IBM Plex Sans Arabic", sans-serif',
              }}
            >
              {deleting ? (
                <><i className="ri-loader-4-line text-lg animate-spin"></i><span>جاري الحذف...</span></>
              ) : (
                <><i className="ri-delete-bin-6-fill text-lg"></i><span>حذف الحساب نهائياً</span></>
              )}
            </button>
          </>
        )}
      </div>
    </div>
  );
}