'use client';

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

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

export default function NewPasswordPage() {
  const [password, setPassword] = useState('');
  const [passwordConfirmation, setPasswordConfirmation] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [showPasswordConfirmation, setShowPasswordConfirmation] = useState(false);
  const router = useRouter();
  const showToast = useToastStore((s) => s.showToast);
  const { loading, request, lastError } = useApi<ResetPasswordResponse>();
  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 = password.trim().length > 0 && passwordConfirmation.trim().length > 0;

  async function handleResetPassword() {
    if (!resetPhone || !resetCountryCode || !valid) return;

    const result = await request('/auth/forget-password/reset-password', {
      method: 'POST',
      body: {
        phone: resetPhone,
        country_code: resetCountryCode,
        password,
        password_confirmation: passwordConfirmation,
      } 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) return;

    router.replace('/');
  }

  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">أدخل كلمة المرور الجديدة وأكدها</p>
            </div>

            <div className="bg-white rounded-3xl p-7 shadow-sm" style={{ border: '1px solid #E0E7FF' }}>
              <div className="space-y-5">
                <div>
                  <label className="block text-sm font-semibold text-slate-600 mb-2">كلمة المرور الجديدة</label>
                  <div className="relative">
                    <input
                      type={showPassword ? 'text' : 'password'}
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      placeholder="••••••••"
                      className="w-full h-12 bg-slate-50 border border-slate-200 rounded-xl px-4 text-slate-900 text-sm outline-none transition-all"
                      onFocus={(e) => (e.target.style.boxShadow = '0 0 0 3px #C7D2FE')}
                      onBlur={(e) => (e.target.style.boxShadow = 'none')}
                    />
                    <button
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center cursor-pointer"
                    >
                      <i className={`${showPassword ? 'ri-eye-line' : 'ri-eye-off-line'} text-slate-400 text-base`}></i>
                    </button>
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-semibold text-slate-600 mb-2">تأكيد كلمة المرور</label>
                  <div className="relative">
                    <input
                      type={showPasswordConfirmation ? 'text' : 'password'}
                      value={passwordConfirmation}
                      onChange={(e) => setPasswordConfirmation(e.target.value)}
                      placeholder="••••••••"
                      className="w-full h-12 bg-slate-50 border border-slate-200 rounded-xl px-4 text-slate-900 text-sm outline-none transition-all"
                      onFocus={(e) => (e.target.style.boxShadow = '0 0 0 3px #C7D2FE')}
                      onBlur={(e) => (e.target.style.boxShadow = 'none')}
                    />
                    <button
                      onClick={() => setShowPasswordConfirmation(!showPasswordConfirmation)}
                      className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center cursor-pointer"
                    >
                      <i className={`${showPasswordConfirmation ? 'ri-eye-line' : 'ri-eye-off-line'} text-slate-400 text-base`}></i>
                    </button>
                  </div>
                </div>
              </div>

              <button
                onClick={handleResetPassword}
                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>
    </div>
  );
}