import { useNavigate } from 'react-router-dom'
import AuthGate from '../components/AuthGate'
import { useAuth } from '../context/AuthContext'

export default function Login() {
  const { user } = useAuth()
  const navigate = useNavigate()

  if (user) {
    return (
      <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center bg-black px-4 py-16">
        <div className="w-full max-w-[400px] rounded-2xl bg-[#1a1a1a] px-8 py-10 text-center">
          <h1 className="brand-heading text-[28px] font-bold text-white">You&apos;re verified</h1>
          <p className="mt-3 text-[15px] text-[#a3a3a3]">
            Signed in with <span className="capitalize">{user.provider}</span>. Ready to cast your ballot.
          </p>
          <button
            type="button"
            onClick={() => navigate('/dashboard')}
            className="mt-8 inline-flex rounded-lg bg-[#2f2f2f] px-5 py-3 text-sm font-semibold text-white transition hover:bg-[#383838]"
          >
            Go to Live Board
          </button>
        </div>
      </div>
    )
  }

  return <AuthGate onSuccess={() => navigate('/dashboard')} />
}
