"use client";

import { startTransition, useState } from "react";
import { useRouter } from "next/navigation";

import { api, ApiError } from "@/lib/api";

export default function AdminLoginPage() {
  const router = useRouter();
  const [form, setForm] = useState({
    username: "admin",
    password: "Admin@123456",
  });
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setLoading(true);
    setError("");
    try {
      await api.post("/api/v1/admin/auth/login", form);
      startTransition(() => router.replace("/admin/dashboard"));
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "登录失败");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="login-grid">
      <section style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div>
          <div className="brand-kicker">Ops Console</div>
          <h1 style={{ fontSize: 64, lineHeight: 0.95, margin: "12px 0", fontFamily: "var(--font-display)" }}>
            管好模型、价格、奖励、订单和任务链路。
          </h1>
          <p className="muted" style={{ maxWidth: 580 }}>
            后台聚焦两件事：配置业务规则，以及处理异常链路。默认已创建管理员账号，适合直接联调整条 MVP。
          </p>
        </div>
      </section>

      <section className="fullscreen-shell">
        <form className="auth-card" onSubmit={handleSubmit}>
          <div className="brand-kicker">AIVideo Admin</div>
          <h3>管理员登录</h3>
          <div className="form-stack">
            <label className="field-label">
              用户名
              <input
                value={form.username}
                onChange={(event) =>
                  setForm((previous) => ({ ...previous, username: event.target.value }))
                }
              />
            </label>
            <label className="field-label">
              密码
              <input
                type="password"
                value={form.password}
                onChange={(event) =>
                  setForm((previous) => ({ ...previous, password: event.target.value }))
                }
              />
            </label>
            {error ? <div className="muted" style={{ color: "var(--danger)" }}>{error}</div> : null}
            <button className="primary-button" type="submit">
              {loading ? "登录中..." : "进入后台"}
            </button>
          </div>
        </form>
      </section>
    </div>
  );
}