/**
 * @deprecated Use AppShell instead. Legacy shell — not used by any page.
 */
"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { ReactNode, useEffect, useState } from "react";
import {
  AdminUser,
  clearToken,
  getStoredUser,
} from "@/lib/api";

const NAV = [
  { href: "/admissions", label: "میز پذیرش" },
  { href: "/rule-sets", label: "قوانین پیش‌ثبت‌نام" },
];

export function AdminShell({ children }: { children: ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const [user, setUser] = useState<AdminUser | null>(null);

  useEffect(() => {
    setUser(getStoredUser<AdminUser>());
  }, []);

  const logout = () => {
    clearToken();
    router.replace("/login");
  };

  const roleLabel = user?.roles.includes("developer")
    ? "برنامه‌نویس"
    : user?.roles.includes("super_admin")
    ? "مدیر کل"
    : user?.roles.includes("branch_manager")
      ? "مدیر شعبه"
      : "کاربر";

  return (
    <div className="min-h-screen lg:flex">
      <aside className="bg-[var(--sidebar)] text-white lg:w-64 lg:shrink-0">
        <div className="border-b border-white/10 px-5 py-6">
          <p className="text-xs text-white/70">سامانه مدیریت مدارس</p>
          <h1 className="mt-1 text-lg font-bold">پنل مدیریت</h1>
        </div>
        <nav className="space-y-1 p-3">
          {NAV.map((item) => {
            const active = pathname.startsWith(item.href);
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`block rounded-xl px-4 py-3 text-sm transition ${
                  active
                    ? "bg-white/15 font-semibold text-white"
                    : "text-white/75 hover:bg-white/10 hover:text-white"
                }`}
              >
                {item.label}
              </Link>
            );
          })}
        </nav>
      </aside>

      <div className="flex min-h-screen flex-1 flex-col">
        <header className="border-b border-[var(--border)] bg-white px-4 py-4 sm:px-6">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <p className="text-sm font-semibold">{user?.name ?? "…"}</p>
              <p className="text-xs text-[var(--muted)]">
                {roleLabel}
                {user?.branches?.[0]?.name ? ` · ${user.branches[0].name}` : ""}
              </p>
            </div>
            <button
              type="button"
              onClick={logout}
              className="rounded-xl border border-[var(--border)] px-4 py-2 text-sm hover:bg-slate-50"
            >
              خروج
            </button>
          </div>
        </header>
        <main className="flex-1 p-4 sm:p-6">{children}</main>
      </div>
    </div>
  );
}

export function AuthGuard({ children }: { children: ReactNode }) {
  const router = useRouter();
  const [ready, setReady] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem("admin_token");
    if (!token) {
      router.replace("/login");
      return;
    }
    setReady(true);
  }, [router]);

  if (!ready) {
    return (
      <div className="flex min-h-screen items-center justify-center text-sm text-[var(--muted)]">
        در حال بررسی دسترسی…
      </div>
    );
  }

  return <AdminShell>{children}</AdminShell>;
}