'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { InputOtp } from 'primereact/inputotp';
import { useApi } from '@/hooks/useApi';
import { useAuthStore } from '@/store/authStore';
import { useToastStore } from '@/store/toastStore';

interface VerifyPhoneResponse {
  key?: string;
  status?: string;
  msg?: string;
  message?: string;
}

export default function ForgetPasswordActivationPage() {
  const [code, setCode] = useState('');
  const router = useRouter();
  const showToast = useToastStore((s) => s.showToast);
  const { loading, request, lastError } = useApi<VerifyPhoneResponse>();
  const resetPhone = useAuthStore((s) => s.reset_phone);
  const resetCountryCode = useAuthStore((s) => s.reset_country_code);

  useEffect(() => {
    if (!resetPhone) {
      router.replace('/dashboard/forget-password');
    }
  }, [resetPhone, router]);

  const valid = code.trim().length >= 4;

  async function handleVerifyCode() {
    if (!resetPhone || !resetCountryCode || !valid) return;
    const phoneAsNumber = Number(resetPhone);

    if (Number.isNaN(phoneAsNumber)) {
      showToast({
        severity: 'error',
        summary: 'خطأ',
        detail: 'رقم الجوال غير صالح',
        life: 4000,
      });
      return;
    }

    const result = await request('/auth/forget-password/verify-phone', {
      method: 'POST',
      body: {
        code: code.trim(),
        phone: phoneAsNumber,
        country_code: resetCountryCode,
      } as unknown,
      skipAuth: true,
    });

    if (!result) {
      showToast({
        severity: 'error',
        summary: 'خطأ',
        detail: lastError.current || 'حدث خطأ، يرجى المحاولة مجددًا',
        life: 4000,
      });
      return;
    }

    const success = result.key === 'success' || String(result.status).toLowerCase() === 'success';
    const detail = result.msg || result.message || 'تم تنفيذ الطلب';

    showToast({
      severity: success ? 'success' : 'error',
      summary: success ? 'نجاح' : 'خطأ',
      detail,
      life: 4000,
    });

    if (success) {
      router.push('/dashboard/forget-password/new-password');
    }
  }

  return (
    <div className='container'>
      <div className="min-h-screen flex" dir="rtl" style={{ background: '#F0F4FF', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
        <div className="hidden lg:flex flex-1 relative overflow-hidden" style={{ background: 'linear-gradient(135deg, #172554 0%, #1E3A8A 50%, #3730A3 100%)' }}>
          <div className="relative z-10 flex flex-col justify-center px-16 py-12">
            <h2 className="text-white text-4xl font-black leading-tight mb-4">تفعيل رقم الجوال</h2>
            <p className="text-blue-200 text-base leading-relaxed">أدخل رمز التحقق المرسل على جوالك لإكمال العملية.</p>
          </div>
        </div>

        <div className="flex-1 flex items-center justify-center px-6 py-12 lg:max-w-lg">
          <div className="w-full max-w-md">
            <div className="mb-8">
              <h1 className="text-3xl font-black text-slate-900 mb-2">رمز التفعيل</h1>
              <p className="text-slate-500 text-sm">تم إرسال كود إلى +{resetCountryCode} {resetPhone}</p>
            </div>

            <div className="bg-white rounded-3xl p-7 shadow-sm" style={{ border: '1px solid #E0E7FF' }}>
              <label className="block text-sm font-semibold text-slate-600 mb-3">ادخل كود التحقق المرسل على رقم هاتفك</label>
              <div className="flex justify-center otp-input-wrapper" dir="ltr">
                <InputOtp
                  value={code}
                  onChange={(e) => setCode(String(e.value || ''))}
                  length={4}
                  integerOnly
                />
              </div>

              <button
                onClick={handleVerifyCode}
                disabled={!valid || loading}
                className="w-full h-12 rounded-xl font-bold text-sm transition-all mt-6 flex items-center justify-center gap-2 whitespace-nowrap"
                style={{
                  background: valid ? '#1E3A8A' : '#E0E7FF',
                  color: valid ? 'white' : '#A5B4FC',
                  cursor: valid ? 'pointer' : 'not-allowed',
                }}
              >
                {loading ? 'جاري التحقق...' : 'تأكيد'}
              </button>
            </div>
          </div>
        </div>
      </div>
      <style jsx global>{`
        .otp-input-wrapper .p-inputotp-input {
          width: 3.5rem;
          height: 3.5rem;
          font-size: 1.25rem;
          font-weight: 700;
          border: 2px solid #E0E0E0;
          border-radius: 0.75rem;
        }
      `}</style>
    </div>
  );
}