'use client';

import * as React from 'react';

import { AppShell } from '@/components/layout/app-shell';
import { UserFooter } from '@/components/layout/user-footer';
import { useAuth } from '@/lib/auth/auth-context';
import { MASTER_NAV_ITEMS, MASTER_BOTTOM_HREFS } from '@/lib/layout/nav-items';

function MasterBrandSymbol() {
  return (
    <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-brand-master text-sm font-bold text-white">
      SV
    </span>
  );
}

/** Identidade fixa do painel master — nunca whitelabel (ver `TenantShell`). */
function MasterBrand() {
  return (
    <>
      <MasterBrandSymbol />
      <span className="truncate text-sm font-semibold text-neutral-950">SeConectai Vendas</span>
    </>
  );
}

export function MasterShell({
  initialCollapsed,
  children,
}: {
  initialCollapsed: boolean;
  children: React.ReactNode;
}) {
  const { logout } = useAuth();
  const handleLogout = React.useCallback(() => {
    void logout();
  }, [logout]);

  return (
    // `Sidebar`/`BottomTabBar`/`NavList` destacam o item ativo com os tokens
    // `--color-primary(-on-light)` — dinâmicos por tenant (Etapa 13). O
    // master tem identidade fixa (seção 6 da arquitetura), então essa
    // sobrescrita local troca esses tokens por `--brand-master` só dentro
    // desta árvore, sem tocar no `:root` (evitaria vazar pro `/app` do
    // tenant na mesma aba).
    <div
      style={{ '--color-primary': 'var(--brand-master)', '--color-primary-on-light': 'var(--brand-master)' } as React.CSSProperties}
    >
      <AppShell
        brand={<MasterBrand />}
        brandCollapsed={<MasterBrandSymbol />}
        items={MASTER_NAV_ITEMS}
        bottomHrefs={MASTER_BOTTOM_HREFS}
        footer={<UserFooter label="Administrador master" onLogout={handleLogout} />}
        footerCollapsed={<UserFooter label="Administrador master" compact onLogout={handleLogout} />}
        initialCollapsed={initialCollapsed}
      >
        {children}
      </AppShell>
    </div>
  );
}