'use client';
import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
import { useTranslations } from 'next-intl';
import { ROUTES } from '@/constants';
import { useAdminCapabilities } from '@/hooks';
import { LinkToPage } from '@/utils';
import MobileShell from './MobileShell';

/**
 * Admin / backoffice shell. The sidebar's four sections (اعتماد/مالی/پشتیبانی/سیستم) became four
 * bottom-nav destinations plus the overview, each a real group-root page listing the consoles in
 * it. Gating is unchanged and still per-console (`useAdminCapabilities`) — a group tab simply
 * disappears when the current admin role can act on nothing inside it, and the server still
 * enforces every call regardless. «سیستم» is always present: it carries settings and sign-out.
 * @layout AdminLayout
 */
const AdminLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
  const t = useTranslations('nav');
  const caps = useAdminCapabilities();

  const tabs: Array<LinkToPage> = useMemo(() => {
    const items: Array<LinkToPage & { show: boolean }> = [
      { title: t('overview'), path: ROUTES.ADMIN, icon: 'dashboard', show: true },
      {
        title: t('group_trust'),
        path: ROUTES.ADMIN_TRUST,
        icon: 'verification',
        matchPaths: [ROUTES.ADMIN_VERIFICATION, ROUTES.ADMIN_REVIEWS],
        show: caps.canVerify || caps.canModerate,
      },
      {
        title: t('group_finance'),
        path: ROUTES.ADMIN_FINANCE,
        icon: 'earnings',
        matchPaths: [ROUTES.ADMIN_PAYOUTS],
        show: caps.canPayout,
      },
      {
        title: t('group_support'),
        path: ROUTES.ADMIN_SUPPORT,
        icon: 'support',
        matchPaths: [ROUTES.ADMIN_TICKETS, ROUTES.ADMIN_ALERTS],
        show: caps.canManageTickets || caps.canManageAlerts,
      },
      {
        title: t('group_system'),
        path: ROUTES.ADMIN_SYSTEM,
        icon: 'config',
        matchPaths: [
          ROUTES.ADMIN_CONFIG,
          ROUTES.ADMIN_HOLIDAYS,
          ROUTES.ADMIN_AUDIT,
          ROUTES.ADMIN_PARTNERS,
          ROUTES.ADMIN_USERS,
          ROUTES.ADMIN_ROLES,
          ROUTES.ADMIN_NOTIFICATIONS,
        ],
        show: true,
      },
    ];
    return items.filter((item) => item.show).map(({ show: _show, ...rest }) => rest);
  }, [t, caps]);

  return (
    <MobileShell name="Admin" tabs={tabs}>
      {children}
    </MobileShell>
  );
};

export default AdminLayout;
