"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import type { AuthUser } from "@duoc-thu/shared-types";
import { logout, me } from "@duoc-thu/api-client";

export default function AdminPage() {
  const router = useRouter();
  const [user, setUser] = useState<AuthUser | null>(null);

  useEffect(() => {
    // The middleware guard already redirected anyone without a valid
    // admin session before this component ever rendered — this fetch is
    // for display, not the access-control decision itself.
    me().then(setUser);
  }, []);

  return (
    <div className="flex flex-1 flex-col gap-4 p-6">
      <h1 className="text-lg font-bold text-txt-primary">Khu vực quản trị</h1>
      <p className="text-sm text-txt-secondary">
        Đăng nhập với: <strong>{user?.username ?? "..."}</strong> (
        {user?.role ?? "..."})
      </p>
      <p className="max-w-xl text-xs text-txt-muted">
        Đây là bằng chứng cơ chế phân quyền hoạt động đúng — chưa có tính
        năng quản trị cụ thể nào ở đây, vì chưa có yêu cầu nào được nêu ra.
      </p>
      <button
        onClick={async () => {
          await logout();
          router.push("/admin/login");
          router.refresh();
        }}
        className="w-fit rounded-lg border border-border-subtle px-4 py-2 text-sm font-semibold text-txt-primary hover:bg-surface-hover"
      >
        Đăng xuất
      </button>
    </div>
  );
}