nxtgauge-admin-solid/src/components/AdminShell.tsx

import { A, useLocation, useNavigate, useSearchParams } from '@solidjs/router';
import { createMemo, createSignal, onMount, type JSX } from 'solid-js';
import AdminSidebar from './AdminSidebar';
import { isExternalIdentity } from '~/lib/admin-auth';
import { clearAdminSession, hasAdminSession, setAdminSession } from '~/lib/admin-session';

type Tab = { href: string; label: string; exact?: boolean };

const TAB_SETS: Array<{ prefixes: string[]; tabs: Tab[] }> = [
  {
    prefixes: ['/admin/roles'],
    tabs: [
      { href: '/admin/roles', label: 'Internal Roles', exact: true },
      { href: '/admin/roles/create', label: 'Create Role' },
      { href: '/admin/roles/templates', label: 'Role Templates' },
    ],
  },
  {
    prefixes: ['/admin/runtime-roles'],
    tabs: [
      { href: '/admin/runtime-roles', label: 'External Roles', exact: true },
      { href: '/admin/runtime-roles/new', label: 'Create External Role' },
    ],
  },
  {
    prefixes: ['/admin/onboarding-schemas'],
    tabs: [
      { href: '/admin/onboarding-schemas', label: 'Onboarding Flows', exact: true },
      { href: '/admin/onboarding-schemas/new', label: 'Create Flow' },
    ],
  },
  {
    prefixes: ['/admin/internal-dashboard-management'],
    tabs: [
      { href: '/admin/internal-dashboard-management', label: 'Internal Dashboards' },
    ],
  },
  {
    prefixes: ['/admin/external-dashboard-management'],
    tabs: [
      { href: '/admin/external-dashboard-management', label: 'External Dashboards' },
    ],
  },
  {
    prefixes: ['/admin/role-ui-configs'],
    tabs: [
      { href: '/admin/role-ui-configs', label: 'Config Inspector', exact: true },
      { href: '/admin/role-ui-configs/new', label: 'Create Config' },
    ],
  },
];

const PAGE_TITLES: Array<{ prefix: string; title: string }> = [
  { prefix: '/admin/employees', title: 'Employee Management' },
  { prefix: '/admin/department', title: 'Department Management' },
  { prefix: '/admin/designation', title: 'Designation Management' },
  { prefix: '/admin/roles', title: 'Internal Role Management' },
  { prefix: '/admin/runtime-roles', title: 'External Role Management' },
  { prefix: '/admin/onboarding-schemas', title: 'External Onboarding Management' },
  { prefix: '/admin/internal-dashboard-management', title: 'Internal Dashboard Management' },
  { prefix: '/admin/external-dashboard-management', title: 'External Dashboard Management' },
  { prefix: '/admin/role-ui-configs', title: 'External Dashboard Management' },
  { prefix: '/admin/approval', title: 'Approval Management' },
  { prefix: '/admin/users', title: 'Users Management' },
  { prefix: '/admin/company', title: 'Company Management' },
  { prefix: '/admin/candidate', title: 'Candidate Management' },
  { prefix: '/admin/customer', title: 'Customer Management' },
  { prefix: '/admin/photographer', title: 'Photographer Management' },
  { prefix: '/admin/makeup-artist', title: 'Makeup Artist Management' },
  { prefix: '/admin/tutors', title: 'Tutors Management' },
  { prefix: '/admin/developers', title: 'Developers Management' },
  { prefix: '/admin/video-editors', title: 'Video Editor Management' },
  { prefix: '/admin/fitness-trainers', title: 'Fitness Trainer Management' },
  { prefix: '/admin/catering-services', title: 'Catering Services Management' },
  { prefix: '/admin/graphic-designers', title: 'Graphics Designer Management' },
  { prefix: '/admin/social-media-managers', title: 'Social Media Manager Management' },
  { prefix: '/admin/jobs', title: 'Jobs Management' },
  { prefix: '/admin/leads', title: 'Leads Management' },
  { prefix: '/admin/pricing', title: 'Pricing Management' },
  { prefix: '/admin/credit', title: 'Credit Management' },
  { prefix: '/admin/coupon', title: 'Coupon Management' },
  { prefix: '/admin/discount', title: 'Discount Management' },
  { prefix: '/admin/tax', title: 'Tax Management' },
  { prefix: '/admin/order', title: 'Order Management' },
  { prefix: '/admin/invoice', title: 'Invoice Management' },
  { prefix: '/admin/review', title: 'Review Management' },
  { prefix: '/admin/support', title: 'Support Management' },
  { prefix: '/admin/kb', title: 'Knowledge Base Management' },
  { prefix: '/admin/notifications', title: 'Notifications' },
  { prefix: '/admin/report', title: 'Report Management' },
  { prefix: '/admin/ledger', title: 'Ledger Management' },
  { prefix: '/admin/workspace', title: 'Dashboard Workspace' },
  { prefix: '/admin', title: 'Dashboard' },
];

export default function AdminShell(props: { children: JSX.Element }) {
  const location = useLocation();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const [checkedSession, setCheckedSession] = createSignal(false);
  const [adminName, setAdminName] = createSignal('Admin');
  const [adminRole, setAdminRole] = createSignal('Super Admin');

  const tabs = createMemo<Tab[]>(() => {
    const path = location.pathname;
    for (const set of TAB_SETS) {
      if (set.prefixes.some((p) => path === p || path.startsWith(`${p}/`))) {
        return set.tabs;
      }
    }
    return [];
  });

  const isTabActive = (tab: Tab) => {
    if (tab.exact) return location.pathname === tab.href;
    return location.pathname === tab.href || location.pathname.startsWith(`${tab.href}/`);
  };

  const pageTitle = createMemo(() => {
    const path = location.pathname;
    for (const item of PAGE_TITLES) {
      if (path === item.prefix || path.startsWith(`${item.prefix}/`)) return item.title;
    }
    return 'Dashboard';
  });

  onMount(() => {
    const isLocalDev =
      typeof window !== 'undefined' &&
      (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
    const isPreview =
      searchParams._preview === '1' ||
      (typeof sessionStorage !== 'undefined' && sessionStorage.getItem('nxtgauge_admin_preview') === '1');

    if (isPreview || isLocalDev) {
      if (typeof sessionStorage !== 'undefined') sessionStorage.setItem('nxtgauge_admin_preview', '1');
      setAdminSession();
      setCheckedSession(true);
      return;
    }

    const verify = async () => {
      if (!hasAdminSession()) {
        const from = encodeURIComponent(location.pathname + location.search);
        navigate(`/login?from=${from}`, { replace: true });
        return;
      }
      try {
        const accessToken =
          typeof sessionStorage !== 'undefined'
            ? sessionStorage.getItem('nxtgauge_admin_access_token') || ''
            : '';
        const response = await fetch('/api/gateway/users/auth/me', {
          method: 'GET',
          headers: {
            Accept: 'application/json',
            'x-portal-target': 'admin',
            ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
          },
          credentials: 'include',
        });
        const payload = await response.json().catch(() => ({}));
        if (!response.ok || isExternalIdentity(payload)) throw new Error('Unauthorized');
        if (payload?.full_name) setAdminName(payload.full_name);
        if (payload?.role?.name) setAdminRole(payload.role.name);
        setCheckedSession(true);
      } catch {
        clearAdminSession();
        const from = encodeURIComponent(location.pathname + location.search);
        navigate(`/login?from=${from}`, { replace: true });
      }
    };

    void verify();
  });

  const onLogout = async () => {
    await fetch('/api/gateway/users/auth/logout', {
      method: 'POST',
      headers: { Accept: 'application/json', 'x-portal-target': 'admin' },
      credentials: 'include',
    }).catch(() => {});
    clearAdminSession();
    if (typeof sessionStorage !== 'undefined') {
      sessionStorage.removeItem('nxtgauge_admin_access_token');
      sessionStorage.removeItem('nxtgauge_admin_preview');
    }
    navigate('/login', { replace: true });
  };

  const initials = () => adminName().charAt(0).toUpperCase() || 'A';

  return (
    <div class="min-h-screen bg-[#f9f9fd]">
      {/* ── Fixed Header ── */}
      <header class="fixed top-0 z-50 flex h-16 w-full items-center justify-between bg-white/80 px-6 shadow-[0_4px_24px_rgba(10,29,55,0.04)] backdrop-blur-xl">
        {/* Left: logo */}
        <div class="flex w-64 shrink-0 items-center">
          <img src="/nxtgauge-logo.png" alt="NXTGAUGE" class="h-8 w-auto object-contain" />
        </div>

        {/* Center: search */}
        <div class="relative mx-8 w-full max-w-xl">
          <svg class="absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <circle cx="11" cy="11" r="8"/><path stroke-linecap="round" d="M21 21l-4.35-4.35"/>
          </svg>
          <input
            type="text"
            placeholder="Search roles, users, or reports…"
            class="w-full rounded-full border-0 bg-slate-50 py-2 pl-10 pr-4 text-sm text-[#0a1d37] placeholder-slate-400 outline-none ring-0 transition-all focus:bg-white focus:ring-2 focus:ring-[#fd6216]/20"
          />
        </div>

        {/* Right: actions + avatar */}
        <div class="flex items-center gap-3">
          {/* Notification bell */}
          <button type="button" aria-label="Notifications"
            class="relative flex h-9 w-9 items-center justify-center rounded-full text-[#0a1d37]/60 transition-colors hover:bg-slate-50"
          >
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M13.73 21a2 2 0 0 1-3.46 0" />
            </svg>
            <span class="absolute right-2 top-2 h-2 w-2 rounded-full border-2 border-white bg-[#fd6216]" />
          </button>

          {/* Settings */}
          <button type="button" aria-label="Settings"
            class="flex h-9 w-9 items-center justify-center rounded-full text-[#0a1d37]/60 transition-colors hover:bg-slate-50"
          >
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="3"/>
              <path stroke-linecap="round" d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
            </svg>
          </button>

          <div class="h-8 w-px bg-slate-200" />

          {/* Name + avatar */}
          <div class="flex items-center gap-2.5">
            <span class="text-sm font-bold text-[#0a1d37]">{adminName()}</span>
            <div class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-[#fd6216] bg-[#fd6216] text-xs font-black text-white">
              {initials()}
            </div>
          </div>

          {/* Logout */}
          <button type="button" onClick={onLogout} aria-label="Logout"
            class="flex h-9 w-9 items-center justify-center rounded-full text-[#0a1d37]/60 transition-colors hover:bg-red-50 hover:text-red-500"
          >
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
            </svg>
          </button>
        </div>
      </header>

      {/* ── Body: sidebar + main (fixed, below header) ── */}
      {checkedSession() ? (
        <div class="fixed inset-0 top-16 grid grid-cols-[auto_1fr]">
          {/* Sidebar */}
          <AdminSidebar />

          {/* Main content */}
          <main class="scrollbar min-w-0 overflow-y-auto bg-[#f9f9fd] p-8">
            {/* Sub-tabs (shown for multi-tab sections) */}
            {tabs().length > 0 && (
              <div class="mb-6 flex gap-1 border-b border-slate-200">
                {tabs().map((tab) => (
                  <A
                    href={tab.href}
                    class={`relative px-3 pb-2.5 pt-0.5 text-[13px] font-medium transition-colors ${
                      isTabActive(tab)
                        ? 'text-slate-900 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:rounded-t-full after:bg-orange-500 after:content-[""]'
                        : 'text-slate-500 hover:text-slate-700'
                    }`}
                  >
                    {tab.label}
                  </A>
                ))}
              </div>
            )}
            {props.children}
          </main>
        </div>
      ) : (
        /* Session check loading state */
        <div class="fixed inset-0 top-16 grid grid-cols-[auto_1fr]">
          <div class="w-64 border-r border-slate-100 bg-white" />
          <main class="flex items-center justify-center bg-gray-50">
            <p class="text-sm text-gray-400">Checking session…</p>
          </main>
        </div>
      )}
    </div>
  );
}