"use client";

import { startTransition, useMemo, useState, type FormEvent } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import type { UserRole } from "@/lib/types";

interface LoginResponse {
  ok?: boolean;
  error?: string;
  user?: {
    role: UserRole;
  };
}

function getErrorMessage(error: unknown, fallbackMessage: string): string {
  return error instanceof Error ? error.message : fallbackMessage;
}

export default function LoginForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [errorMessage, setErrorMessage] = useState("");
  const [isPending, setIsPending] = useState(false);

  const notice = useMemo(() => {
    const reason = searchParams.get("reason");

    if (reason === "inactive") {
      return "当前账号不可用，请联系管理员。";
    }

    return "使用管理员或已创建的普通用户登录。";
  }, [searchParams]);

  async function handleSubmit(
    event: FormEvent<HTMLFormElement>,
  ): Promise<void> {
    event.preventDefault();
    setErrorMessage("");
    setIsPending(true);

    try {
      const response = await fetch("/api/auth/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          username,
          password,
        }),
      });
      const payload = (await response.json()) as LoginResponse;

      if (!response.ok || payload.ok !== true || !payload.user) {
        throw new Error(payload.error || "登录失败，请稍后重试。");
      }

      const currentUser = payload.user;

      startTransition(() => {
        router.push(currentUser.role === "admin" ? "/admin" : "/studio");
        router.refresh();
      });
    } catch (error) {
      setErrorMessage(getErrorMessage(error, "登录失败，请稍后重试。"));
    } finally {
      setIsPending(false);
    }
  }

  return (
    <form className="login-form" onSubmit={handleSubmit}>
      <div className="login-copy">
        <p className="eyebrow">Secure Access</p>
        <h1>登录后才能使用图片生成与后台管理。</h1>
        <p>{notice}</p>
      </div>

      <label className="field">
        <span>用户名</span>
        <input
          type="text"
          autoComplete="username"
          placeholder="admin"
          value={username}
          onChange={(event) => setUsername(event.target.value)}
          required
        />
      </label>

      <label className="field">
        <span>密码</span>
        <input
          type="password"
          autoComplete="current-password"
          placeholder="输入密码"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
          required
        />
      </label>

      {errorMessage ? <div className="error-banner">{errorMessage}</div> : null}

      <button type="submit" className="primary-button" disabled={isPending}>
        {isPending ? "登录中..." : "登录"}
      </button>
    </form>
  );
}