/**
 * Admin 后台 - 登录页(报刊风)
 *
 * 密码验证通过后由服务端写入 HttpOnly 会话 Cookie。
 */

import { useState } from 'react'
import { ApiError, login } from '../api/api'
import { Button, Input } from '../components/ui'

export default function Login({ onSuccess }: { onSuccess: () => void }) {
  const [password, setPassword] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState('')

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!password || submitting) return
    setSubmitting(true)
    setError('')
    try {
      await login(password)
      onSuccess()
    } catch (err) {
      setError(
        err instanceof ApiError
          ? err.message.split('\n')[0]
          : '登录失败,请检查网络连接',
      )
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div className="flex min-h-screen flex-col bg-paper-50 text-ink-800">
      <header className="masthead-rule">
        <div className="mx-auto w-full max-w-md px-5 pt-12 sm:pt-16">
          <div className="border-b border-ink-900 py-5 text-center">
            <h1 className="font-serif text-3xl font-bold tracking-widest text-ink-900">
              先知
              <span className="ml-3 align-baseline font-serif text-sm font-normal italic tracking-normal text-ink-500">
                Profeto
              </span>
            </h1>
            <p className="mt-2 text-2xs tracking-[0.4em] text-ink-500">管理后台 · 管理员登录</p>
          </div>
        </div>
      </header>

      <main className="flex flex-1 items-start justify-center px-5 py-10">
        <form
          onSubmit={handleSubmit}
          className="w-full max-w-sm border border-ink-300 bg-paper-50 p-6 shadow-print"
        >
          <label htmlFor="admin-password" className="block text-xs font-medium tracking-wide text-ink-700">
            管理密码
          </label>
          <Input
            id="admin-password"
            type="password"
            value={password}
            onChange={e => setPassword(e.target.value)}
            placeholder="输入服务器 .env 中的 ADMIN_PASSWORD"
            autoFocus
            autoComplete="current-password"
            /* 错误时把输入框标记为无效并关联错误文本,
               屏幕阅读器才能知道「密码错了」以及错在哪 */
            aria-invalid={error ? true : undefined}
            aria-describedby={error ? 'admin-password-error' : undefined}
            className="mt-2 w-full"
          />

          {error && (
            <p
              id="admin-password-error"
              /* role=alert 让错误出现时立即被朗读(aria-live 的 assertive 语义) */
              role="alert"
              className="mt-3 border-l-2 border-press bg-press-wash/40 px-3 py-2 text-2xs leading-relaxed text-press-dark"
            >
              {error}
            </p>
          )}

          <Button variant="solid" className="mt-5 w-full justify-center" type="submit" disabled={!password || submitting}>
            {submitting ? '验证中…' : '登 录'}
          </Button>

          <p className="mt-4 border-t border-ink-200 pt-3 text-center text-2xs leading-relaxed text-ink-400">
            密码初始来自服务器 .env,可登录后在「系统配置」页修改;连续输错 5 次将锁定 10 分钟。
          </p>
        </form>
      </main>

      <footer className="pb-8 text-center text-2xs text-ink-400">
        <a href="/" className="transition-colors hover:text-press">
          ← 返回前台版面
        </a>
      </footer>
    </div>
  )
}