import { useState } from 'react'
import { useSession, signIn } from '../lib/auth-client'
import Input from './input'
import Button from './button'

export default function Auth({ children }) {
  const { data: session, isPending } = useSession()
  const isUser = !!session?.user
  const [email, setEmail] = useState('')
  const [loading, setLoading] = useState(false)
  const [sent, setSent] = useState(false)
  const [error, setError] = useState('')

  if (isPending) return <div>Loading...</div>

  if (isUser) return children

  if (process.env.NEXT_PUBLIC_GITHUB_ENABLED) {
    signIn.social({ provider: "github", callbackURL: window.location.href })
    return <div>Loading...</div>
  }

  if (sent) return <div>E-Mail verschickt — bitte prüfe dein Postfach.</div>

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    setError('')
    const result = await signIn.magicLink({ email, callbackURL: window.location.href })
    if (result.error) setError(result.error.message)
    else setSent(true)
    setLoading(false)
  }

  return (
    <form onSubmit={handleSubmit} className="max-w-sm mx-auto mt-16">
      <Input label="E-Mail" name="email" type="email" value={email} onChange={e => setEmail(e.target.value)} required />
      {error && <p className="text-red-500 text-sm mb-3">{error}</p>}
      <Button type="submit" loading={loading}>Magic Link senden</Button>
    </form>
  )
}