'use client' import { useEffect, useId, useState } from 'react' import { createPortal } from 'react-dom' import { useRouter } from 'next/navigation' import { signIn } from 'next-auth/react' import { AnimatePresence, motion } from 'framer-motion' import LoginForm from '@/components/auth/LoginForm' import RegisterForm from '@/components/auth/RegisterForm' type AuthEntryModalProps = { open: boolean onClose: () => void } type ProviderMap = Record type Step = 'entry' | 'login' | 'register' function FacebookGlyph({ className }: { className?: string }) { return ( ) } function AppleGlyph({ className }: { className?: string }) { return ( ) } function GoogleGlyph({ className }: { className?: string }) { return ( ) } function providerLabel(id: string, nameFallback: string): string { const idLower = id.toLowerCase() if (idLower.includes('facebook')) return 'Kontynuuj przez Facebook' if (idLower.includes('apple')) return 'Kontynuuj z Apple' if (idLower.includes('google')) return 'Kontynuuj przy użyciu konta Google' return `Kontynuuj przez ${nameFallback}` } function oauthIcon(id: string) { const k = id.toLowerCase() if (k.includes('facebook')) return if (k.includes('apple')) return if (k.includes('google')) return return null } const oauthOrder = ['facebook', 'apple', 'google'] as const function sortOAuthIds(ids: string[]) { return [...ids].sort((a, b) => { const ia = oauthOrder.indexOf(a as (typeof oauthOrder)[number]) const ib = oauthOrder.indexOf(b as (typeof oauthOrder)[number]) const sa = ia === -1 ? oauthOrder.length : ia const sb = ib === -1 ? oauthOrder.length : ib return sa - sb }) } function stepTitle(step: Step): string { if (step === 'login') return 'Logowanie' if (step === 'register') return 'Załóż konto' return 'Zacznij korzystać' } function stepSubtitle(step: Step): string | null { if (step === 'entry') return 'Utwórz konto lub zaloguj się, aby dodawać ogłoszenia na giełdzie i wygodnie korzystać z konta.' if (step === 'login') return 'Podaj hasło do konta lub wróć, by zmienić adres e‑mail lub skorzystać z innej metody logowania.' return 'Wypełnij formularz, aby założyć konto.' } export default function AuthEntryModal({ open, onClose }: AuthEntryModalProps) { const titleId = useId() const emailId = useId() const router = useRouter() const [mounted, setMounted] = useState(false) const [step, setStep] = useState('entry') const [email, setEmail] = useState('') /** Aktualny e-mail przy przełączaniu logowanie ↔ rejestracja */ const [flowEmail, setFlowEmail] = useState('') const [busy, setBusy] = useState(false) const [oauthBusy, setOauthBusy] = useState(null) const [formError, setFormError] = useState(null) const [providers, setProviders] = useState(null) const [registeredNotice, setRegisteredNotice] = useState(false) /** Szary przycisk pusty; kolor jak po „Dalej” dopiero przy niepustym adresie po trim. */ const emailTouched = email.trim().length >= 1 const dalejEnabled = emailTouched && !busy useEffect(() => { setMounted(true) }, []) useEffect(() => { if (!open) return setFormError(null) let cancelled = false ;(async () => { try { const r = await fetch('/api/auth/providers') const data = (await r.json()) as ProviderMap if (!cancelled && typeof data === 'object' && data !== null) { setProviders(data) return } if (!cancelled) setProviders({}) } catch { if (!cancelled) setProviders({}) } })() return () => { cancelled = true } }, [open]) useEffect(() => { if (!open) { setStep('entry') setEmail('') setFlowEmail('') setFormError(null) setRegisteredNotice(false) } }, [open]) useEffect(() => { if (!open) return const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() } window.addEventListener('keydown', onKey) const prev = document.body.style.overflow document.body.style.overflow = 'hidden' return () => { window.removeEventListener('keydown', onKey) document.body.style.overflow = prev } }, [open, onClose]) function goBackToEntry() { setStep('entry') setFormError(null) setRegisteredNotice(false) } async function onEmailNext(e: React.FormEvent) { e.preventDefault() setFormError(null) const trimmed = email.trim() if (!trimmed) { setFormError('Podaj adres e-mail.') return } setBusy(true) try { const res = await fetch('/api/auth/email-status', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: trimmed }), }) const data = (await res.json()) as { registered?: boolean; error?: string } if (!res.ok) { setFormError(data.error ?? 'Nie udało się sprawdzić adresu.') return } setFlowEmail(trimmed) setRegisteredNotice(false) if (data.registered) setStep('login') else setStep('register') } catch { setFormError('Błąd połączenia. Spróbuj ponownie.') } finally { setBusy(false) } } async function onOAuthClick(providerId: string) { setFormError(null) setOauthBusy(providerId) try { await signIn(providerId, { callbackUrl: '/' }) } catch { setFormError('Logowanie nie powiodło się. Sprawdź konfigurację dostawcy (np. AUTH_GOOGLE_ID).') } finally { setOauthBusy(null) } } const oauthIds = providers ? sortOAuthIds( Object.keys(providers).filter((id) => id !== 'credentials'), ) : [] if (!mounted || typeof document === 'undefined') return null return createPortal( {open ? (