import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { AlertCircle } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Spinner } from '@/components/ui/spinner'
import { palette } from '@/lib/palette'
import type { AuthContext } from '@/hooks/useAuth'

interface Props {
  auth: AuthContext
  onToggle: () => void
}

export function RegisterPage({ auth: { register }, onToggle }: Props) {
  const { t } = useTranslation()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [displayName, setDisplayName] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
    setLoading(true)
    try {
      await register(email, password, displayName)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Registration failed')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div
      className="flex min-h-screen items-center justify-center"
      style={{
        background: `linear-gradient(135deg, ${palette.saving.light}, ${palette.bill.light}, ${palette.investment.light})`,
      }}
    >
      <Card className="w-full max-w-md shadow-lg">
        <CardHeader>
          <CardTitle>{t('auth.register')}</CardTitle>
          <span
            data-testid="wordmark"
            className="text-2xl font-bold tracking-tight"
            style={{
              background: `linear-gradient(to right, oklch(0.50 0.12 260), oklch(0.50 0.12 320))`,
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}
          >
            {t('app.title')}
          </span>
        </CardHeader>
        <form onSubmit={handleSubmit}>
          <CardContent className="flex flex-col gap-4">
            {error && (
              <Alert variant="destructive">
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}
            <Input
              placeholder={t('auth.displayName')}
              value={displayName}
              onChange={(e) => setDisplayName(e.target.value)}
              required
            />
            <Input
              type="email"
              placeholder={t('auth.email')}
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
            <Input
              type="password"
              placeholder={t('auth.password')}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              minLength={8}
            />
            <Button type="submit" disabled={loading} className="w-full min-w-[120px]">
              {loading ? <Spinner /> : t('auth.register')}
            </Button>
          </CardContent>
        </form>
        <CardFooter>
          <Button variant="link" onClick={onToggle}>
            {t('auth.hasAccount')} {t('auth.login')}
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}