'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import Topnav from '@/components/topnav'
import Footer from '@/components/footer'
import { safeNext } from '@/lib/next'
import '../styles/login.css'

export default function LoginPage() {
  const router = useRouter()
  const [showPassword, setShowPassword] = useState(false)
  const [status, setStatus] = useState('')
  const [busy, setBusy] = useState(false)
  const [nextPath, setNextPath] = useState<string | null>(null)

  useEffect(() => {
    setNextPath(safeNext(new URLSearchParams(window.location.search).get('next')))
  }, [])

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const form = e.currentTarget
    if (!form.checkValidity()) {
      setStatus('تحقق من البريد الإلكتروني وكلمة المرور.')
      form.reportValidity()
      return
    }
    setBusy(true)
    setStatus('')
    const data = new FormData(form)
    try {
      const res = await fetch('/api/users/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: data.get('email'), password: data.get('password') }),
      })
      if (res.ok) {
      router.refresh()
      router.push(safeNext(new URLSearchParams(window.location.search).get('next')) ?? '/account-settings')
        return
      }
      const err = await res.json().catch(() => null) as { error?: string; errors?: { message?: string }[] } | null
      // Rate-limit / middleware shape first: { error: string } + optional Retry-After.
      if (typeof err?.error === 'string') {
        const retryAfterSec = Number(res.headers.get('Retry-After'))
        setStatus(
          res.headers.get('Retry-After') && Number.isFinite(retryAfterSec)
            ? `${err.error} حاول بعد ${Math.max(1, Math.ceil(retryAfterSec / 60))} دقيقة.`
            : err.error,
        )
        return
      }
      const message = err?.errors?.[0]?.message
      if (message && /locked/i.test(message)) {
        // Payload lockout: maxLoginAttempts 5 / lockTime 15min (Users.ts).
        setStatus('تم تجاوز عدد المحاولات المسموح. حاول بعد ١٥ دقيقة.')
        return
      }
      setStatus('تعذّر تسجيل الدخول — تحقّق من البريد وكلمة المرور.')
    } catch {
      setStatus('تعذّر الاتصال. حاول تسجيل الدخول مرة أخرى.')
    } finally {
      setBusy(false)
    }
  }

  return (
    <div id="site" className="site-page page-login">
      <Topnav />
      <main id="content" className="auth">
        <section className="auth-story">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img className="auth-mark" src="/brand/mark-light.svg" alt="" width={436} height={382} />
          <h1>أكمل من حيث توقفت.</h1>
          <p>سجّل الدخول لمتابعة قراءة الأدلة والمشاركة في النقاشات.</p>
        </section>
        <section className="auth-form-wrap" data-od-id="login-form-section">
          <form className="auth-form" id="loginForm" method="post" action="/api/users/login" noValidate onSubmit={onSubmit} data-od-id="login-form">
            <p className="eyebrow">أهلاً بعودتك</p>
            <h2 data-od-id="login-title">تسجيل الدخول</h2>
            <p className="lead">استخدم بريدك وكلمة المرور للوصول إلى حسابك.</p>
            <div className="field">
              <label htmlFor="email">البريد الإلكتروني</label>
              <input className="input" id="email" name="email" type="email" inputMode="email" autoComplete="email" placeholder="name@example.com" dir="ltr" required onInvalid={e => e.currentTarget.setCustomValidity('أدخل بريداً إلكترونياً صحيحاً.')} onInput={e => e.currentTarget.setCustomValidity('')} />
            </div>
            <div className="field">
              <label htmlFor="password">كلمة المرور</label>
              <div className="input-wrap">
                <input className="input" id="password" name="password" type={showPassword ? 'text' : 'password'} autoComplete="current-password" minLength={8} required onInvalid={e => e.currentTarget.setCustomValidity('أدخل كلمة المرور.')} onInput={e => e.currentTarget.setCustomValidity('')} />
                <button className="password-toggle" id="passwordToggle" type="button" aria-controls="password" aria-label={showPassword ? 'إخفاء كلمة المرور' : 'إظهار كلمة المرور'} aria-pressed={showPassword} onClick={() => setShowPassword(v => !v)}>{showPassword ? 'إخفاء' : 'إظهار'}</button>
              </div>
            </div>
            <div className="form-row">
              <label className="check"><input type="checkbox" name="remember" /> تذكّرني</label>
              <Link href="/forgot-password">نسيت كلمة المرور؟</Link>
            </div>
            <button className="btn btn-primary" type="submit" disabled={busy}>{busy ? 'جارٍ تسجيل الدخول…' : 'ادخل إلى حسابك'}</button>
            <div className="status" id="loginStatus" role="status">{status}</div>
            <div className="divider">أو</div>
            <Link className="magic" href="/forgot-password">استعد الوصول إلى حسابك</Link>
            <p className="signup">ليس لديك حساب؟ <Link href={nextPath ? `/signup?next=${encodeURIComponent(nextPath)}` : '/signup'}>أنشئ حساباً جديداً</Link></p>
            <p className="fine">بالمتابعة، أنت توافق على <Link href="/terms">شروط الاستخدام</Link> و<Link href="/privacy">سياسة الخصوصية</Link>.</p>
          </form>
        </section>
      </main>
      <Footer />
    </div>
  )
}