'use client';
import { FunctionComponent, ReactNode } from 'react';
import { Stack } from '@mui/material';
import { useTranslations } from 'next-intl';
import { EmptyState, NavHubList, PageHeader } from '@/components';
import type { NavHubItem } from '@/components';

export interface AdminGroupConsole extends NavHubItem {
  /** Capability gate for this console — a hidden row is one the current admin role can't act on. */
  enabled: boolean;
}

interface Props {
  title: string;
  subtitle?: string;
  consoles: Array<AdminGroupConsole>;
  /** Rendered below the console list (the system group's settings + sign-out). */
  children?: ReactNode;
}

/**
 * The body every admin group-root page shares: a header, the capability-filtered consoles in that
 * group, and an optional tail. Gating stays per-console and is still only a UI hint — the server
 * authorizes every command regardless of what the nav shows.
 * A private (`_`-prefixed) folder, so this is not itself a route.
 * @component AdminGroupHub
 */
const AdminGroupHub: FunctionComponent<Props> = ({ title, subtitle, consoles, children }) => {
  const t = useTranslations('hub');
  const permitted = consoles.filter((console_) => console_.enabled);

  return (
    <Stack sx={{ gap: 2 }}>
      <PageHeader title={title} subtitle={subtitle} />
      {permitted.length > 0 ? (
        <NavHubList items={permitted} />
      ) : (
        <EmptyState icon="lock" title={t('admin_group_empty_title')} body={t('admin_group_empty_body')} />
      )}
      {children}
    </Stack>
  );
};

export default AdminGroupHub;
