lcbp3.np-dms.work/frontend/app/(auth)/login/page.jsx

// File: frontend/app/(auth)/login/page.jsx

"use client";

// ✅ ปรับให้ตรง backend: ใช้ Bearer token (ไม่ใช้ cookie)
// - เรียก POST /api/auth/login → รับ { token, refresh_token, user }
// - เก็บ token/refresh_token ใน localStorage (หรือ sessionStorage ถ้าไม่ติ๊กจำไว้)
// - ไม่ใช้ credentials: "include" อีกต่อไป
// - เอา RootLayout/metadata ออก เพราะไฟล์เพจเป็น client component
// - เพิ่มการอ่าน NEXT_PUBLIC_API_BASE และ error handling ให้ตรงกับ backend

import { useState, useMemo, Suspense } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription } from "@/components/ui/alert";

const API_BASE = process.env.NEXT_PUBLIC_API_BASE?.replace(/\/$/, "") || "";

function LoginForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const nextPath = useMemo(
    () => searchParams.get("next") || "/dashboard",
    [searchParams]
  );

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [showPw, setShowPw] = useState(false);
  const [remember, setRemember] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [err, setErr] = useState("");

  async function onSubmit(e) {
    e.preventDefault();
    setErr("");

    if (!username.trim() || !password) {
      setErr("กรอกชื่อผู้ใช้และรหัสผ่านให้ครบ");
      return;
    }

    try {
      setSubmitting(true);

      const res = await fetch(`${API_BASE}/api/auth/login`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username, password }),
        cache: "no-store",
      });

      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        // รองรับข้อความ error จาก backend เช่น INVALID_CREDENTIALS
        setErr(
          data?.error === "INVALID_CREDENTIALS"
            ? "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง"
            : data?.error || "เข้าสู่ระบบไม่สำเร็จ"
        );
        return;
      }

      // ✅ เก็บ token ตามโหมดจำไว้/ไม่จำ
      const storage = remember ? window.localStorage : window.sessionStorage;
      storage.setItem("dms.token", data.token);
      storage.setItem("dms.refresh_token", data.refresh_token);
      storage.setItem("dms.user", JSON.stringify(data.user || {}));

      // (ออปชัน) เผยแพร่ event ให้แท็บอื่นทราบ
      try {
        window.dispatchEvent(
          new StorageEvent("storage", { key: "dms.auth", newValue: "login" })
        );
      } catch {}

      router.replace(nextPath);
    } catch (e) {
      setErr("เชื่อมต่อเซิร์ฟเวอร์ไม่ได้ กรุณาลองใหม่");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div className="grid min-h-[calc(100vh-4rem)] place-items-center p-4">
      <Card className="w-full max-w-md border-0 shadow-xl ring-1 ring-black/5 bg-white/90 backdrop-blur">
        <CardHeader className="space-y-1">
          <CardTitle className="text-2xl font-bold text-sky-800">
            เข้าสู่ระบบ
          </CardTitle>
          <CardDescription className="text-sky-700">
            Document Management System • LCBP3
          </CardDescription>
        </CardHeader>

        <CardContent>
          {err ? (
            <Alert className="mb-4">
              <AlertDescription>{err}</AlertDescription>
            </Alert>
          ) : null}

          <form onSubmit={onSubmit} className="grid gap-4">
            <div className="grid gap-2">
              <Label htmlFor="username">ชื่อผู้ใช้</Label>
              <Input
                id="username"
                autoFocus
                autoComplete="username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                placeholder="เช่น superadmin"
                disabled={submitting}
              />
            </div>

            <div className="grid gap-2">
              <Label htmlFor="password">รหัสผ่าน</Label>
              <div className="relative">
                <Input
                  id="password"
                  type={showPw ? "text" : "password"}
                  autoComplete="current-password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="••••••••"
                  disabled={submitting}
                  className="pr-10"
                />
                <button
                  type="button"
                  onClick={() => setShowPw((v) => !v)}
                  className="absolute inset-y-0 px-2 my-auto text-xs bg-white border rounded-md right-2 hover:bg-slate-50"
                  aria-label={showPw ? "ซ่อนรหัสผ่าน" : "แสดงรหัสผ่าน"}
                  disabled={submitting}
                >
                  {showPw ? "Hide" : "Show"}
                </button>
              </div>
            </div>

            <div className="flex items-center justify-between pt-1">
              <label className="inline-flex items-center gap-2 text-sm text-slate-600">
                <input
                  type="checkbox"
                  className="size-4 accent-sky-700"
                  checked={remember}
                  onChange={(e) => setRemember(e.target.checked)}
                  disabled={submitting}
                />
                จดจำฉันไว้ในเครื่องนี้
              </label>

              <a
                href="/forgot-password"
                className="text-sm text-sky-700 hover:text-sky-900 hover:underline"
              >
                ลืมรหัสผ่าน?
              </a>
            </div>

            <Button
              type="submit"
              disabled={submitting}
              className="mt-2 bg-sky-700 hover:bg-sky-800"
            >
              {submitting ? (
                <span className="inline-flex items-center gap-2">
                  <Spinner /> กำลังเข้าสู่ระบบ…
                </span>
              ) : (
                "เข้าสู่ระบบ"
              )}
            </Button>
          </form>
        </CardContent>

        <CardFooter className="text-xs text-center text-slate-500">
          &copy; {new Date().getFullYear()} np-dms.work
        </CardFooter>
      </Card>
    </div>
  );
}

export default function LoginPage() {
  return (
    <Suspense fallback={<LoginPageSkeleton />}>
      <LoginForm />
    </Suspense>
  );
}

/** Loading skeleton */
function LoginPageSkeleton() {
  return (
    <div className="grid min-h-[calc(100vh-4rem)] place-items-center p-4">
      <Card className="w-full max-w-md border-0 shadow-xl ring-1 ring-black/5 bg-white/90 backdrop-blur">
        <CardHeader className="space-y-1">
          <CardTitle className="text-2xl font-bold text-sky-800">
            เข้าสู่ระบบ
          </CardTitle>
          <CardDescription className="text-sky-700">
            Document Management System • LCBP3
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 animate-pulse">
            <div className="h-10 rounded bg-slate-200"></div>
            <div className="h-10 rounded bg-slate-200"></div>
            <div className="h-10 rounded bg-slate-200"></div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

/** Spinner แบบไม่พึ่งไลบรารีเสริม */
function Spinner() {
  return (
    <svg
      className="animate-spin size-4"
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
    >
      <circle
        className="opacity-25"
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        strokeWidth="4"
      />
      <path
        className="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
      />
    </svg>
  );
}