'use client';
import { useLocale, useTranslations } from 'next-intl';
import { Box, Paper, Typography } from '@mui/material';
import { AppIcon, AppLink } from '@/components';
import { AdminPageHeader } from '@/components/admin';
import { useAdminCapabilities } from '@/hooks';
import { ROUTES } from '@/constants';

/**
 * Admin overview landing (f15) — the backoffice home. Renders one **console card** per worklist the current
 * principal may act on, derived 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. Each card deep-links into its console.
 */
export default function AdminOverviewPage() {
  const t = useTranslations('admin');
  const tNav = useTranslations('nav');
  const locale = useLocale();
  const caps = useAdminCapabilities();

  // `key` doubles as the `nav` i18n key for the card label.
  const consoles: { key: string; route: string; icon: string; enabled: boolean }[] = [
    { key: 'verification', route: ROUTES.ADMIN_VERIFICATION, icon: 'verification', enabled: caps.canVerify },
    { key: 'tickets', route: ROUTES.ADMIN_TICKETS, icon: 'support', enabled: caps.canManageTickets },
    { key: 'payouts', route: ROUTES.ADMIN_PAYOUTS, icon: 'earnings', enabled: caps.canPayout },
    { key: 'reviews', route: ROUTES.ADMIN_REVIEWS, icon: 'moderation', enabled: caps.canModerate },
    { key: 'config', route: ROUTES.ADMIN_CONFIG, icon: 'config', enabled: caps.canConfig },
    { key: 'holidays', route: ROUTES.ADMIN_HOLIDAYS, icon: 'calendar', enabled: caps.canConfig },
    { key: 'alerts', route: ROUTES.ADMIN_ALERTS, icon: 'alerts', enabled: caps.canManageAlerts },
    { key: 'audit', route: ROUTES.ADMIN_AUDIT, icon: 'audit', enabled: caps.canViewAudit },
    { key: 'partners', route: ROUTES.ADMIN_PARTNERS, icon: 'partners', enabled: caps.canManagePartners },
    { key: 'roles', route: ROUTES.ADMIN_ROLES, icon: 'roles', enabled: caps.canManageRoles },
  ].filter((c) => c.enabled);

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
      <AdminPageHeader title={t('overview_title')} subtitle={t('overview_subtitle')} />

      <Box
        sx={{
          display: 'grid',
          gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr', md: '1fr 1fr 1fr' },
          gap: 2,
        }}
      >
        {consoles.map((c) => (
          <AppLink
            key={c.key}
            to={`/${locale}${c.route}`}
            color="inherit"
            underline="none"
            sx={{ display: 'block', height: '100%' }}
          >
            <Paper
              elevation={0}
              sx={{
                p: 3,
                height: '100%',
                border: '1px solid',
                borderColor: 'divider',
                borderRadius: 2,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'flex-start',
                gap: 1.5,
                cursor: 'pointer',
                transition: 'border-color 150ms ease, box-shadow 150ms ease',
                '&:hover': { borderColor: 'primary.main', boxShadow: 3 },
              }}
            >
              <AppIcon icon={c.icon} size={32} color="var(--bal-primary)" />
              <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
                {tNav(c.key)}
              </Typography>
            </Paper>
          </AppLink>
        ))}
      </Box>
    </Box>
  );
}