import { useState, type FormEvent } from 'react'
import { Link, useNavigate } from '@tanstack/react-router'
import { AuthCard } from '@/components/auth/AuthCard'
import { Alert } from '@/components/ui/Alert'
import { Button } from '@/components/ui/Button'
import { TextField } from '@/components/ui/TextField'
import { apiErrorCode, errorMessage } from '@/lib/api'
import { useProviders, useRegister } from '@/lib/auth'

const MIN_PASSWORD = 8

export function RegisterPage() {
  const navigate = useNavigate()
  const providers = useProviders()
  const register = useRegister()
  const [email, setEmail] = useState('')
  const [displayName, setDisplayName] = useState('')
  const [password, setPassword] = useState('')

  async function onSubmit(e: FormEvent) {
    e.preventDefault()
    try {
      await register.mutateAsync({ email, displayName, password })
      await navigate({ to: '/gardens' }) // registration auto-logs-in
    } catch {
      // Shown below via register.error.
    }
  }

  // Don't render the form until we know local registration is offered — otherwise
  // it briefly appears (and is submittable) on an SSO-only server.
  if (providers.isPending) {
    return (
      <AuthCard title="Create account">
        <p className="text-sm text-muted">Loading…</p>
      </AuthCard>
    )
  }
  if (providers.isError) {
    return (
      <AuthCard title="Create account">
        <Alert>Could not load sign-in options. Please refresh.</Alert>
      </AuthCard>
    )
  }
  // Local registration is only meaningful when local auth is enabled.
  if (!providers.data.local) {
    return (
      <AuthCard title="Create account">
        <div className="flex flex-col gap-4">
          <Alert tone="info">This server uses single sign-on. Local registration is disabled.</Alert>
          <Link to="/login" className="text-center text-sm font-medium text-accent-strong hover:underline">
            Back to sign in
          </Link>
        </div>
      </AuthCard>
    )
  }

  const registrationClosed = apiErrorCode(register.error) === 'REGISTRATION_CLOSED'

  return (
    <AuthCard title="Create your pansy account" subtitle="The first account becomes the admin.">
      {registrationClosed ? (
        <div className="flex flex-col gap-4">
          <Alert>Registration is closed on this server. Ask an administrator for an account.</Alert>
          <Link to="/login" className="text-center text-sm font-medium text-accent-strong hover:underline">
            Back to sign in
          </Link>
        </div>
      ) : (
        <form onSubmit={onSubmit} className="flex flex-col gap-3">
          <TextField
            label="Email"
            name="email"
            type="email"
            autoComplete="email"
            autoCapitalize="none"
            spellCheck={false}
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <TextField
            label="Display name"
            name="displayName"
            type="text"
            autoComplete="name"
            required
            value={displayName}
            onChange={(e) => setDisplayName(e.target.value)}
          />
          <TextField
            label="Password"
            name="password"
            type="password"
            autoComplete="new-password"
            required
            minLength={MIN_PASSWORD}
            hint={`At least ${MIN_PASSWORD} characters.`}
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          {register.isError && <Alert>{errorMessage(register.error, 'Could not create your account.')}</Alert>}
          <Button type="submit" disabled={register.isPending} className="mt-1">
            {register.isPending ? 'Creating account…' : 'Create account'}
          </Button>
          <p className="text-center text-sm text-muted">
            Already have an account?{' '}
            <Link to="/login" className="font-medium text-accent-strong hover:underline">
              Sign in
            </Link>
          </p>
        </form>
      )}
    </AuthCard>
  )
}