'use client';
import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
import { useTranslations } from 'next-intl';
import { NotificationBell } from '@/components/notifications';
import { ProfileSummary } from '@/components';
import { ROUTES } from '@/constants';
import { useAdminCapabilities } from '@/hooks';
import { LinkToPage } from '@/utils';
import { useMe } from '@/services/auth';
import TopBarAndSideBarLayout from './TopBarAndSideBarLayout';

/**
 * Admin / backoffice shell — the desktop ops console (f15). The sidebar is **sectioned**
 * (اعتماد/مالی/پشتیبانی/سیستم) and **role-gated**: each console appears only when the current
 * admin role can act on it (`useAdminCapabilities`), unchanged from before — grouping never adds,
 * removes, or loosens a gate. The TopBar carries a page title, the notification bell (widened to
 * the `'admin'` role), and a compact identity chip showing the admin's fine-grained role.
 * @layout AdminLayout
 */
const AdminLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
  const t = useTranslations('nav');
  const ta = useTranslations('admin');
  const { data: me } = useMe();
  const caps = useAdminCapabilities();

  const sidebarItems: Array<LinkToPage> = useMemo(() => {
    const groupTrust = t('group_trust');
    const groupFinance = t('group_finance');
    const groupSupport = t('group_support');
    const groupSystem = t('group_system');
    const items: Array<LinkToPage & { show: boolean }> = [
      { title: t('overview'), path: ROUTES.ADMIN, icon: 'dashboard', show: true },
      { title: t('verification'), path: ROUTES.ADMIN_VERIFICATION, icon: 'verification', group: groupTrust, show: caps.canVerify },
      { title: t('reviews'), path: ROUTES.ADMIN_REVIEWS, icon: 'moderation', group: groupTrust, show: caps.canModerate },
      { title: t('payouts'), path: ROUTES.ADMIN_PAYOUTS, icon: 'earnings', group: groupFinance, show: caps.canPayout },
      { title: t('tickets'), path: ROUTES.ADMIN_TICKETS, icon: 'support', group: groupSupport, show: caps.canManageTickets },
      { title: t('alerts'), path: ROUTES.ADMIN_ALERTS, icon: 'alerts', group: groupSupport, show: caps.canManageAlerts },
      { title: t('config'), path: ROUTES.ADMIN_CONFIG, icon: 'config', group: groupSystem, show: caps.canConfig },
      { title: t('holidays'), path: ROUTES.ADMIN_HOLIDAYS, icon: 'calendar', group: groupSystem, show: caps.canConfig },
      { title: t('audit'), path: ROUTES.ADMIN_AUDIT, icon: 'audit', group: groupSystem, show: caps.canViewAudit },
      { title: t('partners'), path: ROUTES.ADMIN_PARTNERS, icon: 'partners', group: groupSystem, show: caps.canManagePartners },
      { title: t('users'), path: ROUTES.ADMIN_USERS, icon: 'users', group: groupSystem, show: caps.canManageRoles },
      { title: t('roles'), path: ROUTES.ADMIN_ROLES, icon: 'roles', group: groupSystem, show: caps.canManageRoles },
    ];
    return items.filter((item) => item.show).map(({ show: _show, ...rest }) => rest);
  }, [t, caps]);

  const primaryRoleCode = caps.roles[0];

  return (
    <TopBarAndSideBarLayout
      sidebarItems={sidebarItems}
      headerActions={<NotificationBell role="admin" />}
      identity={
        me && primaryRoleCode ? (
          <ProfileSummary
            compact
            displayName={[me.firstName, me.lastName].filter(Boolean).join(' ').trim() || me.phone}
            roleLabel={ta(`role_${primaryRoleCode}`)}
          />
        ) : undefined
      }
    >
      {children}
    </TopBarAndSideBarLayout>
  );
};

export default AdminLayout;
