import { useMemo } from 'react';
import { Users, UserCog, ShieldCheck } from 'lucide-react';
import type { LayoutNode, PanelComponents } from 'officerdev';
import { WorkspaceLayout } from 'officerdev';
import { SettingsRoute, createSettingsPanelComponents, type SettingsSection } from '../SettingsPanel';
import { UsersSection } from './UsersSection';
import { PermissionsSection } from './PermissionsSection';

// Owner-only. Every endpoint behind this screen is gated by ownerGate in users-router.ts, and the
// global backstop already confines a non-owner token to /api/auth + /api/music — so a Member reaching
// this route sees the list fail to load rather than someone else's accounts. The route is not hidden
// from them, because hiding a screen is not access control and pretending otherwise invites someone to
// rely on it.
const sections: SettingsSection[] = [
  {
    key: 'users',
    icon: Users,
    titleKey: 'settings.sections.accounts.label',
    descriptionKey: 'settings.sections.accounts.description',
    content: <UsersSection />,
  },
  {
    key: 'permissions',
    icon: ShieldCheck,
    titleKey: 'settings.sections.permissions.label',
    descriptionKey: 'settings.sections.permissions.description',
    content: <PermissionsSection />,
  },
];

const BASE_PATH = '/settings/user-management';

const { Sidebar, Content } = createSettingsPanelComponents({
  basePath: BASE_PATH,
  sidebarIcon: UserCog,
  sidebarLabelKey: 'settings.nav.users',
  sections,
});

const layout: LayoutNode = {
  type: 'group',
  id: 'user-management-root',
  direction: 'horizontal',
  children: [
    { node: { type: 'panel', id: 'user-management-left', appType: null }, size: 20 },
    { node: { type: 'panel', id: 'user-management-right', appType: null }, size: 80 },
  ],
};

export const UserManagementSettings = () => {
  const panelComponents: PanelComponents = useMemo(
    () => ({ 'user-management-left': Sidebar, 'user-management-right': Content }),
    [],
  );

  return (
    <SettingsRoute basePath={BASE_PATH} sections={sections}>
      <div className="h-full w-full pt-2">
        <WorkspaceLayout layout={layout} onLayoutChange={() => {}} components={panelComponents} />
      </div>
    </SettingsRoute>
  );
};