import { useState } from 'react'
import { useNavigate, Link as RouterLink } from 'react-router-dom'
import {
  Card,
  Input,
  Button,
  Form,
  toast,
  TextField,
  Label,
  FieldError,
} from '@heroui/react'
import { buttonVariants } from '@heroui/styles'
import { signIn } from '../../lib/auth-client'

export default function LoginPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)
  const navigate = useNavigate()

  const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setLoading(true)
    try {
      await signIn.email(
        {
          email,
          password,
        },
        {
          onSuccess: () => {
            navigate('/')
          },
          onError: (ctx) => {
            toast.danger(ctx.error.message)
          },
        },
      )
    } catch (err) {
      console.error(err)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="flex min-h-[calc(100vh-64px)] flex-col items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <Card.Header>
          <Card.Title className="w-full text-center text-2xl font-bold">
            登录 HLAE 中文站
          </Card.Title>
        </Card.Header>
        <Form validationBehavior="native" onSubmit={handleLogin}>
          <Card.Content className="flex flex-col gap-6">
            <TextField
              isRequired
              name="email"
              type="email"
              value={email}
              onChange={setEmail}
            >
              <Label>邮箱</Label>
              <Input placeholder="请输入您的邮箱" variant="secondary" />
              <FieldError />
            </TextField>

            <TextField
              isRequired
              name="password"
              type="password"
              value={password}
              onChange={setPassword}
            >
              <Label>密码</Label>
              <Input placeholder="请输入您的密码" variant="secondary" />
              <FieldError />
            </TextField>
          </Card.Content>
          <Card.Footer className="mt-2 flex flex-col gap-3">
            <Button
              type="submit"
              isPending={loading}
              fullWidth
              className="font-bold"
            >
              登录
            </Button>
            <RouterLink
              to="/register"
              className={buttonVariants({
                variant: 'tertiary',
                fullWidth: true,
                className: 'font-bold',
              })}
            >
              注册账号
            </RouterLink>
            <div className="mt-2 flex justify-center">
              <RouterLink
                to="/"
                className="text-default-500 hover:text-foreground text-sm"
              >
                返回首页
              </RouterLink>
            </div>
          </Card.Footer>
        </Form>
      </Card>
      <p className="mt-4 text-sm text-gray-500">
        没有账号？{' '}
        <RouterLink to="/register" className="text-primary hover:underline">
          去注册
        </RouterLink>
      </p>
    </div>
  )
}
