'use client'; import React, { useState, useEffect, Suspense } from 'react'; import Link from 'next/link'; import { useRouter, useSearchParams } from 'next/navigation'; import { useAuth } from '@/context/AuthContext'; import { Header } from '@/components/Header'; import { Footer } from '@/components/Footer'; import { Loader2, Lock, Mail, Smartphone, KeyRound, CheckCircle2, AlertCircle, Eye, EyeOff, User } from 'lucide-react'; function LoginPageContent() { const router = useRouter(); const searchParams = useSearchParams(); const redirect = searchParams.get('redirect') || '/dashboard'; const { user, login, sendOtp, verifyOtp, loading: authLoading } = useAuth(); // Credentials Login States const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const [rememberMe, setRememberMe] = useState(false); const [error, setError] = useState(''); const [submitting, setSubmitting] = useState(false); // OTP Login States const [phone, setPhone] = useState(''); const [otpCode, setOtpCode] = useState(''); const [otpSent, setOtpSent] = useState(false); const [otpTimer, setOtpTimer] = useState(0); const [otpMessage, setOtpMessage] = useState(''); const [otpError, setOtpError] = useState(''); const [otpSubmitting, setOtpSubmitting] = useState(false); // Redirect if already logged in useEffect(() => { if (user) { if (user.role === 'reseller') { router.push('/reseller/dashboard'); } else { router.push(redirect); } } }, [user, router, redirect]); // OTP Resend Timer useEffect(() => { if (otpSent && otpTimer > 0) { const timer = setTimeout(() => setOtpTimer(prev => prev - 1), 1000); return () => clearTimeout(timer); } }, [otpSent, otpTimer]); const handleCredentialsSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(''); setSubmitting(true); try { await login({ email, password }); router.push(redirect); } catch (err: any) { setError(err.errors?.email?.[0] || err.message || 'Login failed. Please check your credentials.'); } finally { setSubmitting(false); } }; const handleSendOtp = async (e: React.MouseEvent) => { e.preventDefault(); setOtpError(''); setOtpMessage(''); // Validate Bangladeshi Phone Number Format const phoneRegex = /^(?:\+8801|8801|01)[3-9]\d{8}$/; if (!phoneRegex.test(phone)) { setOtpError('দয়া করে সঠিক মোবাইল নম্বর দিন (যেমন: 017XXXXXXXX)'); return; } setOtpSubmitting(true); try { const res = await sendOtp(phone); setOtpSent(true); setOtpTimer(60); setOtpMessage(res.message || 'OTP successfully sent.'); } catch (err: any) { setOtpError(err.message || 'OTP পাঠাতে ব্যর্থ হয়েছে। আবার চেষ্টা করুন।'); } finally { setOtpSubmitting(false); } }; const handleVerifyOtp = async (e: React.FormEvent) => { e.preventDefault(); setOtpError(''); if (!otpCode || otpCode.length < 4) { setOtpError('দয়া করে সঠিক ওটিপি (OTP) কোড দিন।'); return; } setOtpSubmitting(true); try { await verifyOtp(phone, otpCode); router.push(redirect); } catch (err: any) { setOtpError(err.errors?.code?.[0] || err.message || 'ওটিপি মিলছে না। আবার চেষ্টা করুন।'); } finally { setOtpSubmitting(false); } }; const handleGoogleLogin = () => { alert('Google Login is currently in sandbox mode. Please use Phone OTP or Credentials to login.'); }; if (authLoading && !submitting && !otpSubmitting) { return ( <>
{/* Top Signin Header Skeleton */}
{/* Dual Panel Login Layout Skeleton */}
{/* Left Panel: Mobile OTP Login */}
{/* Center OR Column */}
OR
{/* Right Panel: Credentials Login */}
{/* Bottom Social Skeleton */}