'use client';
import { useTranslations } from 'next-intl';
import { Stack } from '@mui/material';
import { NavHubList, PageHeader } from '@/components';
import type { NavHubItem } from '@/components';
import { useAdminCapabilities } from '@/hooks';
import { ROUTES } from '@/constants';

interface ConsoleEntry extends NavHubItem {
  /** Section this console belongs to — the same four groups the bottom nav carries. */
  section: 'trust' | 'finance' | 'support' | 'system';
  enabled: boolean;
}

/**
 * Admin overview landing (f15) — the backoffice index. Every worklist the current principal may
 * act on, grouped by the same four sections as the bottom nav, so the overview and the tabs agree
 * on where a console lives. Gating comes from `useAdminCapabilities()` (a UI hint; the server
 * still enforces every command's role scope): a `support` admin sees verification/tickets/alerts,
 * a `finance` admin sees payouts/config, only a `super_admin` sees roles.
 *
 * The old 3-column card grid is gone — inside a phone-width frame it collapsed to a single column
 * of oversized tiles carrying nothing but an icon and one word each.
 */
export default function AdminOverviewScreen() {
  const t = useTranslations('admin');
  const th = useTranslations('hub');
  const tNav = useTranslations('nav');
  const caps = useAdminCapabilities();

  const consoles: ConsoleEntry[] = [
    { section: 'trust', title: tNav('verification'), subtitle: th('admin_verification_sub'), path: ROUTES.ADMIN_VERIFICATION, icon: 'verification', enabled: caps.canVerify },
    { section: 'trust', title: tNav('reviews'), subtitle: th('admin_reviews_sub'), path: ROUTES.ADMIN_REVIEWS, icon: 'moderation', enabled: caps.canModerate },
    { section: 'finance', title: tNav('payouts'), subtitle: th('admin_payouts_sub'), path: ROUTES.ADMIN_PAYOUTS, icon: 'earnings', enabled: caps.canPayout },
    { section: 'support', title: tNav('tickets'), subtitle: th('admin_tickets_sub'), path: ROUTES.ADMIN_TICKETS, icon: 'support', enabled: caps.canManageTickets },
    { section: 'support', title: tNav('alerts'), subtitle: th('admin_alerts_sub'), path: ROUTES.ADMIN_ALERTS, icon: 'alerts', enabled: caps.canManageAlerts },
    { section: 'system', title: tNav('config'), subtitle: th('admin_config_sub'), path: ROUTES.ADMIN_CONFIG, icon: 'config', enabled: caps.canConfig },
    { section: 'system', title: tNav('holidays'), subtitle: th('admin_holidays_sub'), path: ROUTES.ADMIN_HOLIDAYS, icon: 'calendar', enabled: caps.canConfig },
    { section: 'system', title: tNav('audit'), subtitle: th('admin_audit_sub'), path: ROUTES.ADMIN_AUDIT, icon: 'audit', enabled: caps.canViewAudit },
    { section: 'system', title: tNav('partners'), subtitle: th('admin_partners_sub'), path: ROUTES.ADMIN_PARTNERS, icon: 'partners', enabled: caps.canManagePartners },
    { section: 'system', title: tNav('users'), subtitle: th('admin_users_sub'), path: ROUTES.ADMIN_USERS, icon: 'users', enabled: caps.canManageRoles },
    { section: 'system', title: tNav('roles'), subtitle: th('admin_roles_sub'), path: ROUTES.ADMIN_ROLES, icon: 'roles', enabled: caps.canManageRoles },
  ];

  const sections: Array<{ key: ConsoleEntry['section']; label: string }> = [
    { key: 'trust', label: tNav('group_trust') },
    { key: 'finance', label: tNav('group_finance') },
    { key: 'support', label: tNav('group_support') },
    { key: 'system', label: tNav('group_system') },
  ];

  return (
    <Stack sx={{ gap: 2.5 }}>
      <PageHeader title={t('overview_title')} subtitle={t('overview_subtitle')} />

      {sections.map((section) => {
        const items = consoles.filter((entry) => entry.section === section.key && entry.enabled);
        if (items.length === 0) return null;
        return <NavHubList key={section.key} title={section.label} items={items} />;
      })}
    </Stack>
  );
}
