import Link from "next/link";
import Image from "next/image";
import { AdminNav, type AdminNavGroup } from "@/admin/components/AdminNav";
import { AdminSidebarScroll } from "@/admin/components/AdminSidebarScroll";
import { adminNavGroups, type AdminNavItemWithPermission } from "@/admin/config/navigation";
import { getSession, hasPermission, isSuperAdmin } from "@/lib/auth";
import { prisma } from "@/lib/prisma";

export async function AdminShell({
  children,
  name
}: {
  children: React.ReactNode;
  name: string;
}) {
  const [session, setting] = await Promise.all([
    getSession(),
    prisma.siteSetting.findUnique({ where: { key: "site" } })
  ]);

  const canView = (item: AdminNavItemWithPermission) => {
    if (!session || !item.permission) {
      return true;
    }
    if (item.permission === "super") {
      return isSuperAdmin(session);
    }
    return hasPermission(session, item.permission);
  };

  const visibleGroups: AdminNavGroup[] = adminNavGroups
    .map((group) => ({
      label: group.label,
      items: group.items.filter(canView).map(({ href, icon, label }) => ({ href, icon, label }))
    }))
    .filter((group) => group.items.length > 0);

  return (
    <div className="admin-layout apex-admin-layout admin-neon-theme">
      <AdminSidebarScroll className="admin-sidebar">
        <div className="admin-logo-area">
          <Link className="admin-brand" href="/admin">
            {setting?.logoUrl ? (
              <Image
                alt="Dipak Basnet logo"
                className="admin-brand-logo"
                height={42}
                src={setting.logoUrl}
                unoptimized
                width={42}
              />
            ) : (
              <span className="admin-brand-icon">D</span>
            )}
            <span>
              <span className="admin-brand-title">Dipak Basnet</span>
              <span className="admin-brand-subtitle">Just Chill Nepal</span>
            </span>
          </Link>
        </div>
        <AdminNav groups={visibleGroups} />
        <div className="admin-sidebar-footer">
          <Link className="admin-user-card" href="/admin/profile">
            <span className="admin-profile-avatar">{name.slice(0, 1).toUpperCase()}</span>
            <span>
              <h3>{name}</h3>
              <p className="muted">{session && isSuperAdmin(session) ? "Super Admin" : "Staff access"}</p>
            </span>
          </Link>
          <form action="/api/admin/logout" method="post">
            <button className="btn btn-secondary" style={{ width: "100%" }} type="submit">
              Logout
            </button>
          </form>
        </div>
      </AdminSidebarScroll>
      <main className="admin-main">
        <header className="admin-topbar admin-glass-header">
          <div className="admin-search-wrap">
            <span aria-hidden="true">⌕</span>
            <input aria-label="Search admin" placeholder="Search anything..." readOnly />
            <kbd>⌘K</kbd>
          </div>
          <div className="admin-top-actions">
            <Link className="btn admin-new-button" href="/admin/posts/new">
              + New Blog
            </Link>
            <Link className="admin-icon-button" href="/" title="Open website">
              ↗
            </Link>
            <Link className="admin-icon-button admin-notify-button" href="/admin/messages" title="Notifications">
              <span aria-hidden="true">🔔</span>
              <span className="admin-notify-dot" />
            </Link>
            <Link className="admin-profile-link" href="/admin/profile">
              <span className="admin-profile-avatar">{name.slice(0, 1).toUpperCase()}</span>
              <span>
                <strong>{name.slice(0, 2).toUpperCase()}</strong>
                <small>Profile</small>
              </span>
            </Link>
          </div>
        </header>
        <div className="admin-page-content">{children}</div>
      </main>
    </div>
  );
}