import { useEffect, useState } from 'react'

/** Принимает токены из URL fragment (#access=...&refresh=...&welcome=1)
 * — приходит сюда после успешного signup на публичном сайте — кладёт
 * в localStorage в формате который ожидает auth.ts, и редиректит в /.
 *
 * Через fragment чтобы access_token не попадал в server-логи / Referer
 * заголовки (URL fragment не отправляется на бэк). */
export function AuthBridgePage() {
  const [error, setError] = useState<string | null>(null)
  useEffect(() => {
    try {
      const hash = (window.location.hash || '').replace(/^#/, '')
      const params = new URLSearchParams(hash)
      const access = params.get('access')
      const refresh = params.get('refresh')
      const welcome = params.get('welcome') === '1'
      if (!access) { setError('Токен не получен. Войдите вручную.'); return }
      localStorage.setItem('fm.access_token', access)
      if (refresh) localStorage.setItem('fm.refresh_token', refresh)
      // Чистим fragment чтобы при F5 страница не пыталась повторно «принять»
      // токены из URL.
      const target = welcome ? '/?welcome=signup' : '/'
      window.location.replace(target)
    } catch (e) {
      setError((e as Error).message)
    }
  }, [])
  return (
    <div className="min-h-screen flex items-center justify-center bg-slate-50">
      <div className="rounded-xl border border-slate-200 bg-white p-8 max-w-md text-center">
        {error ? (
          <>
            <p className="text-red-600 font-semibold">{error}</p>
            <a href="/login" className="mt-4 inline-block px-4 py-2 bg-[var(--color-brand)] text-white rounded-md">К странице входа</a>
          </>
        ) : (
          <>
            <div className="w-12 h-12 mx-auto rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center text-xl">✓</div>
            <p className="mt-3 font-semibold">Регистрация прошла</p>
            <p className="text-sm text-slate-500 mt-1">Перенаправляем в админку…</p>
          </>
        )}
      </div>
    </div>
  )
}
