duocthu/apps/web/app/_components/LoginForm.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { login, AuthError } from "@duoc-thu/api-client";

interface LoginFormProps {
  heading: string;
  /** `/admin/login` sets this. It changes only where a successful login
   * lands and what a non-admin is told afterwards -- never whether the
   * login itself is allowed to happen, which is auth-service's call. */
  requireAdmin?: boolean;
}

/**
 * Shared by `/login` (any doctor) and `/admin/login` (administrators).
 *
 * The two pages used to be one page, and it only served admins: `AccountMenu`
 * pointed its "Đăng nhập" button at `/admin/login`, so a doctor signing in
 * from the chat UI with a `user` account got a red "Tài khoản này không có
 * quyền quản trị" while the header beside it switched to their name. Both were
 * accurate and together they were nonsense -- the login had succeeded and the
 * session cookie was already set; only the admin redirect had not happened.
 *
 * So a non-admin result is reported here as what it is: signed in, without
 * administrative rights. Not an error, and not silently swallowed either.
 */
export function LoginForm({ heading, requireAdmin = false }: LoginFormProps) {
  const router = useRouter();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [signedInAs, setSignedInAs] = useState<string | null>(null);
  const [pending, setPending] = useState(false);

  async function onSubmit(event: React.FormEvent) {
    event.preventDefault();
    setError(null);
    setSignedInAs(null);
    setPending(true);
    try {
      const user = await login({ username, password });
      if (requireAdmin && user.role !== "admin") {
        // Signed in, just not an administrator. Say so plainly and offer the
        // way onward rather than leaving them on a dead form.
        setSignedInAs(user.username);
        return;
      }
      router.push(user.role === "admin" && requireAdmin ? "/admin" : "/");
      router.refresh();
    } catch (err) {
      setError(
        err instanceof AuthError && err.status === 401
          ? "Sai tên đăng nhập hoặc mật khẩu."
          : "Không thể đăng nhập lúc này. Vui lòng thử lại."
      );
    } finally {
      setPending(false);
    }
  }

  if (signedInAs) {
    return (
      <div className="flex flex-1 items-center justify-center p-6">
        <div className="w-full max-w-sm space-y-3 rounded-2xl border border-border-subtle bg-surface p-6 shadow-sm">
          <h1 className="text-lg font-bold text-txt-primary">
            Đã đăng nhập với tài khoản {signedInAs}
          </h1>
          <p className="text-xs text-txt-secondary">
            Tài khoản này không có quyền quản trị, nhưng bạn đã đăng nhập và có
            thể tra cứu bình thường.
          </p>
          <Link
            href="/"
            className="block w-full rounded-lg bg-accent-primary py-2 text-center text-sm font-semibold text-txt-inverse"
          >
            Vào trang tra cứu
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-1 items-center justify-center p-6">
      <form
        onSubmit={onSubmit}
        className="w-full max-w-sm space-y-4 rounded-2xl border border-border-subtle bg-surface p-6 shadow-sm"
      >
        <h1 className="text-lg font-bold text-txt-primary">{heading}</h1>
        <div className="space-y-1">
          <label className="text-xs font-semibold text-txt-secondary" htmlFor="username">
            Tên đăng nhập
          </label>
          <input
            id="username"
            className="w-full rounded-lg border border-border-subtle bg-app px-3 py-2 text-sm text-txt-primary"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            autoComplete="username"
            required
          />
        </div>
        <div className="space-y-1">
          <label className="text-xs font-semibold text-txt-secondary" htmlFor="password">
            Mật khẩu
          </label>
          <input
            id="password"
            type="password"
            className="w-full rounded-lg border border-border-subtle bg-app px-3 py-2 text-sm text-txt-primary"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            autoComplete="current-password"
            required
          />
        </div>
        {error && <p className="text-xs font-medium text-status-danger">{error}</p>}
        <button
          type="submit"
          disabled={pending}
          className="w-full rounded-lg bg-accent-primary py-2 text-sm font-semibold text-txt-inverse disabled:opacity-60"
        >
          {pending ? "Đang đăng nhập..." : "Đăng nhập"}
        </button>
        {!requireAdmin && (
          <p className="text-center text-[0.7rem] text-txt-muted">
            Không bắt buộc — bạn vẫn tra cứu được mà không cần đăng nhập.
          </p>
        )}
      </form>
    </div>
  );
}