import type { FormEvent } from 'react'
import { motion } from 'framer-motion'
import { fadeUp, stagger } from './motion'
import { TextField } from './ui/TextField'
import { Button } from './ui/Button'

// 右侧登录表单：纯 UI，暂无后端逻辑。
export function LoginForm() {
  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
    // TODO: 接入 Rust 后端鉴权
  }

  return (
    <motion.div
      variants={stagger(0.5, 0.1)}
      initial="hidden"
      animate="show"
      className="flex w-full max-w-md flex-col justify-center px-8 py-14 sm:px-12 lg:px-16"
    >
      <motion.div variants={fadeUp} className="mb-10">
        <h2 className="font-display text-3xl font-medium text-text">Sign in</h2>
        <p className="mt-2 text-sm text-muted">Enter your details to continue.</p>
      </motion.div>

      <form onSubmit={handleSubmit} className="flex flex-col gap-7">
        <motion.div variants={fadeUp}>
          <TextField label="Email" type="email" name="email" autoComplete="email" />
        </motion.div>

        <motion.div variants={fadeUp}>
          <TextField
            label="Password"
            type="password"
            name="password"
            autoComplete="current-password"
          />
        </motion.div>

        <motion.div
          variants={fadeUp}
          className="flex items-center justify-between text-sm"
        >
          <label className="flex cursor-pointer items-center gap-2 text-muted">
            <input
              type="checkbox"
              className="h-4 w-4 accent-[var(--color-accent)]"
            />
            Remember me
          </label>
          <a
            href="#"
            className="text-muted underline-offset-4 transition-colors hover:text-accent hover:underline"
          >
            Forgot password?
          </a>
        </motion.div>

        <motion.div variants={fadeUp} className="mt-2">
          <Button type="submit">Sign in</Button>
        </motion.div>
      </form>

      <motion.p variants={fadeUp} className="mt-8 text-center text-sm text-muted">
        New here?{' '}
        <a href="#" className="text-accent underline-offset-4 hover:underline">
          Create an account
        </a>
      </motion.p>
    </motion.div>
  )
}