"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { login, isAuthenticated } from "@/lib/auth";

export default function LoginPage() {
  const router = useRouter();
  const [email, setEmail] = useState("teacher2@edu.test");
  const [password, setPassword] = useState("Teacher@123");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (isAuthenticated()) {
      router.replace("/dashboard");
    }
  }, [router]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    try {
      await login(email, password);
      router.replace("/dashboard");
    } catch (err) {
      setError(err instanceof Error ? err.message : "登录失败");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div
      className="min-h-screen flex items-center justify-center"
      style={{ background: "var(--bg-paper)" }}
    >
      <div className="w-full max-w-sm px-8">
        <div className="text-center mb-8">
          <h1
            className="text-3xl"
            style={{
              fontFamily: "var(--font-serif)",
              color: "var(--color-ink)",
            }}
          >
            Edu 教师端
          </h1>
          <p
            className="mt-2 text-sm"
            style={{ color: "var(--color-ink-muted)" }}
          >
            登录到智慧教务平台
          </p>
        </div>

        <div className="rule-thin mb-6" />

        <form onSubmit={handleSubmit} className="space-y-5">
          <div>
            <label
              className="block text-xs uppercase tracking-wide mb-1"
              style={{ color: "var(--color-ink-muted)" }}
            >
              邮箱
            </label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full px-3 py-2 bg-transparent border-b focus:outline-none focus:border-b-2"
              style={{
                borderColor: "var(--color-rule)",
                borderRadius: "6px 6px 0 0",
              }}
              required
            />
          </div>
          <div>
            <label
              className="block text-xs uppercase tracking-wide mb-1"
              style={{ color: "var(--color-ink-muted)" }}
            >
              密码
            </label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full px-3 py-2 bg-transparent border-b focus:outline-none focus:border-b-2"
              style={{
                borderColor: "var(--color-rule)",
                borderRadius: "6px 6px 0 0",
              }}
              required
            />
          </div>

          {error && (
            <div
              className="mark-left py-2"
              style={{ borderColor: "var(--color-accent)" }}
            >
              <p
                className="text-sm px-3"
                style={{ color: "var(--color-accent)" }}
              >
                {error}
              </p>
            </div>
          )}

          <button
            type="submit"
            disabled={loading}
            className="w-full px-4 py-2 text-white text-sm tracking-wide transition-opacity hover:opacity-90 disabled:opacity-50"
            style={{ background: "var(--color-accent)", borderRadius: "6px" }}
          >
            {loading ? "登录中..." : "登录"}
          </button>
        </form>

        <p
          className="mt-6 text-center text-xs"
          style={{ color: "var(--color-ink-muted)" }}
        >
          P2 身份阶段验证 · JWT + RBAC + 视口
        </p>
      </div>
    </div>
  );
}
