"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { getMe } from "@/lib/admin";
import { PreviewNotice, StatusCard } from "@/components/ui";

type Me = { email: string; role: string; plan: string; status: string };

const nav = [
  { href: "/admin", label: "概览" },
  { href: "/admin/users", label: "用户" },
  { href: "/admin/tts", label: "TTS 与审计" },
];

export function AdminGate({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const [me, setMe] = useState<Me | null>(null);
  const [state, setState] = useState<"loading" | "denied" | "ready">("loading");

  useEffect(() => {
    getMe()
      .then((m) => {
        setMe(m);
        setState(m.role === "admin" ? "ready" : "denied");
      })
      .catch(() => setState("denied"));
  }, []);

  if (state === "loading") {
    return (
      <div className="container-shell py-16 sm:py-24">
        <StatusCard title="正在校验管理权限" description="正从业务 API 读取当前管理员会话。" tone="info" />
      </div>
    );
  }
  if (state === "denied") {
    return (
      <div className="container-shell py-16 sm:py-24">
        <PreviewNotice>访问被拒绝：需要管理员身份。普通用户无法查看或操作管理后台。</PreviewNotice>
        <div className="mt-8">
          <StatusCard title="无权访问" description="当前会话不是管理员，或未登录。前往账户页登录后，只有 role=admin 的账户才能看到管理功能。" tone="warning" />
          <Link className="button-ghost mt-6 inline-flex" href="/account">
            前往账户
          </Link>
        </div>
      </div>
    );
  }

  return (
    <>
      <div className="container-shell grid gap-6 py-10 lg:grid-cols-[220px_1fr]">
        <aside>
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-subtle">Operations</p>
          <nav className="mt-4 flex gap-1 lg:flex-col" aria-label="管理后台导航">
            {nav.map((item) => {
              const active = item.href === "/admin" ? pathname === "/admin" : pathname.startsWith(item.href);
              return (
                <Link
                  className={`rounded-lg px-3 py-2 text-sm font-semibold transition-colors ${active ? "bg-blue/10 text-cyan" : "text-muted hover:text-copy"}`}
                  href={item.href}
                  key={item.href}
                >
                  {item.label}
                </Link>
              );
            })}
          </nav>
          <p className="mt-6 rounded-xl border border-line bg-panel/50 p-4 text-xs leading-6 text-subtle">
            当前管理员：{me?.email}
          </p>
        </aside>
        <div>{children}</div>
      </div>
    </>
  );
}

export function AdminPageShell({ eyebrow, title, description, children }: { eyebrow: string; title: string; description?: string; children: React.ReactNode }) {
  return (
    <div>
      <p className="eyebrow">{eyebrow}</p>
      <h1 className="mt-4 text-3xl font-semibold tracking-[-0.04em] sm:text-4xl">{title}</h1>
      {description ? <p className="mt-3 max-w-2xl leading-6 text-muted">{description}</p> : null}
      <div className="mt-8">{children}</div>
    </div>
  );
}