import { useState } from 'react'
import { Link } from 'react-router-dom'
import { Logo } from '@/components/Logo'
import { Button } from '@/components/Button'
import { Field, TextInput } from '@/components/Field'
import { validateEmail } from '@/lib/validation'
import axios from 'axios'

/** Anonymous-страница «Забыли пароль?». Не требует логина — открыта по
 * прямой ссылке /forgot-password. Сервер всегда отвечает 200 (анти-юзер-
 * энумерация), поэтому UI показывает одинаковое сообщение независимо от
 * того, есть юзер с таким email или нет. */
export function ForgotPasswordPage() {
  const [email, setEmail] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [submitted, setSubmitted] = useState(false)
  const [busy, setBusy] = useState(false)

  const submit = async (e: React.FormEvent) => {
    e.preventDefault()
    const err = validateEmail(email)
    if (err) { setError(err); return }
    setError(null); setBusy(true)
    try {
      // Делаем чистым axios-call без api-interceptor'а — у юзера нет токена.
      await axios.post('/api/auth/forgot-password', { email })
      setSubmitted(true)
    } catch (e2) {
      const err2 = e2 as { response?: { status?: number, data?: { error?: string } } }
      if (err2.response?.status === 429) {
        setError(err2.response.data?.error ?? 'Слишком много попыток. Попробуйте через час.')
      } else {
        // Любая другая ошибка — обобщаем, чтобы не палить детали.
        setSubmitted(true)
      }
    } finally {
      setBusy(false)
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-900 p-4">
      <div className="w-full max-w-md bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 space-y-5">
        <Logo />
        {!submitted ? (
          <form onSubmit={submit} noValidate className="space-y-4">
            <div>
              <h1 className="text-xl font-bold text-slate-900 dark:text-slate-50">Забыли пароль?</h1>
              <p className="text-sm text-slate-500 mt-1">
                Укажите email — пришлём ссылку для восстановления.
              </p>
            </div>
            <Field label="Email" error={error ?? undefined}>
              <TextInput type="email" value={email} onChange={(e) => setEmail(e.target.value)}
                autoComplete="email" placeholder="name@example.kz" required />
            </Field>
            <Button onClick={() => {}} disabled={busy} className="w-full justify-center">
              {busy ? 'Отправляю…' : 'Отправить ссылку'}
            </Button>
            <p className="text-xs text-center text-slate-500">
              <Link to="/login" className="text-[var(--color-brand)] hover:underline">← Войти под другим аккаунтом</Link>
            </p>
          </form>
        ) : (
          <div className="space-y-3">
            <h1 className="text-xl font-bold text-slate-900 dark:text-slate-50">Проверьте почту</h1>
            <p className="text-sm text-slate-600 dark:text-slate-400">
              Если аккаунт с указанным email существует, мы отправили на него ссылку для восстановления пароля.
              Письмо приходит в течение минуты; не забудьте проверить «Спам».
            </p>
            <p className="text-xs text-slate-500">
              Ссылка действительна 1 час. Если не дошло — попробуйте ещё раз через час.
            </p>
            <Link to="/login" className="block text-center text-sm text-[var(--color-brand)] hover:underline">
              ← К входу
            </Link>
          </div>
        )}
      </div>
    </div>
  )
}
