import { Link, NavLink, Outlet } from 'react-router-dom';
import { useAuth } from '@ump/shared';

import { ADMIN_NAV, ADMIN_NAV_GROUPS } from '../lib/adminNav';

/**
 * Admin/council shell — grouped left sidebar (DYD-reference IA) + main column.
 * Sidebar sections (CHÍNH / QUẢN LÝ / HỆ THỐNG) come from `ADMIN_NAV`; admin-only
 * surfaces are hidden for non-admin (council/editor) users.
 */
export function AdminLayout() {
  const { user, hasRole, logout } = useAuth();
  const isAdmin = hasRole('admin');
  const visible = ADMIN_NAV.filter((n) => !n.adminOnly || isAdmin);

  return (
    <div className="flex min-h-screen bg-background text-foreground">
      {/* ── Sidebar ───────────────────────────────────────────── */}
      <aside className="sticky top-0 flex h-screen w-64 shrink-0 flex-col border-r border-sidebar-border bg-sidebar">
        <Link
          to="/"
          className="flex h-16 shrink-0 items-center gap-3 border-b border-sidebar-border px-4"
        >
          <img
            src="/logo.png"
            alt="Đại học Y Dược Thành phố Hồ Chí Minh"
            className="h-9 w-9 shrink-0 object-contain"
          />
          <div className="leading-tight">
            <div className="font-serif text-sm font-semibold text-sidebar-foreground">
              Đại học Y Dược
            </div>
            <div className="text-[11px] text-muted-foreground">Thành phố Hồ Chí Minh</div>
          </div>
        </Link>

        <nav className="flex-1 space-y-6 overflow-y-auto px-3 py-5">
          {ADMIN_NAV_GROUPS.map((group) => {
            const items = visible.filter((n) => n.group === group);
            if (!items.length) return null;
            return (
              <div key={group} className="space-y-1">
                <div className="px-3 pb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
                  {group}
                </div>
                {items.map((item) => {
                  const Icon = item.icon;
                  return (
                    <NavLink
                      key={item.to}
                      to={item.to}
                      end={item.to === '/'}
                      className={({ isActive }) =>
                        `flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${
                          isActive
                            ? 'bg-sidebar-primary font-medium text-sidebar-primary-foreground'
                            : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
                        }`
                      }
                    >
                      <Icon className="h-4 w-4 shrink-0" />
                      <span className="flex-1 truncate">{item.label}</span>
                      {!item.ready && (
                        <span className="rounded-full bg-muted px-1.5 py-0.5 text-[9px] font-normal text-muted-foreground">
                          sắp có
                        </span>
                      )}
                    </NavLink>
                  );
                })}
              </div>
            );
          })}
        </nav>
      </aside>

      {/* ── Main column ───────────────────────────────────────── */}
      <div className="flex min-w-0 flex-1 flex-col">
        <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center justify-between gap-4 border-b border-border bg-card px-6">
          <span className="text-sm font-medium text-muted-foreground">Trang Quản trị / Hội đồng</span>
          <div className="flex items-center gap-3 text-sm">
            <span className="hidden text-muted-foreground sm:inline">{user?.email}</span>
            <button
              onClick={logout}
              className="rounded-md border px-3 py-1.5 transition-colors hover:bg-muted"
            >
              Đăng xuất
            </button>
          </div>
        </header>
        <main className="flex-1 px-6 py-6">
          <Outlet />
        </main>
      </div>
    </div>
  );
}
