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

import { useState } from 'react'
import { ApiError, login } from './api'

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-white p-6 shadow-[4px_4px_0_0_rgba(0,0,0,0.06)]"
        >
          <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"
            className="field mt-2 w-full"
          />

          {error && (
            <p 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
            type="submit"
            disabled={!password || submitting}
            className="btn btn-solid mt-5 w-full justify-center"
          >
            {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>
  )
}