'use client';
import { FunctionComponent, ReactNode } from 'react';
import { Badge, Box, Divider, Link as MuiLink, Stack, Typography } from '@mui/material';
import AppIcon from '@/components/common/AppIcon';
import SurfaceCard from '@/components/common/SurfaceCard';
import { Link } from '@/i18n/navigation';

export interface NavHubItem {
  title: string;
  /** One line of orientation — what the destination is for, not a restatement of the title. */
  subtitle?: string;
  icon?: string;
  /** Locale-less `ROUTES.*` path; the locale-aware `Link` adds the prefix. */
  path: string;
  /** Unread/pending count rendered on the glyph. */
  badgeCount?: number;
  /** A short trailing value (a status chip, a count) shown before the chevron. */
  meta?: ReactNode;
}

interface Props {
  items: Array<NavHubItem>;
  /** Optional section label rendered above the card. */
  title?: string;
}

const GLYPH_BOX = 36;

/**
 * The grouped list of destinations a group-root ("hub") page is built from — the surface that
 * replaced the sidebar. A drawer showed every destination in the app at once behind a hamburger;
 * a hub shows one area's destinations in place, with room for the subtitle and status the drawer
 * never had.
 * @component NavHubList
 */
const NavHubList: FunctionComponent<Props> = ({ items, title }) => (
  <Stack sx={{ gap: 1 }}>
    {title ? (
      <Typography variant="overline" sx={{ color: 'text.secondary', paddingInlineStart: 0.5 }}>
        {title}
      </Typography>
    ) : null}

    <SurfaceCard sx={{ p: 0, overflow: 'hidden' }}>
      <Stack divider={<Divider />}>
        {items.map((item) => (
          <MuiLink
            key={item.path}
            component={Link}
            href={item.path}
            color="inherit"
            underline="none"
            sx={{ display: 'block', '&:hover': { bgcolor: 'var(--bal-primary-soft)' } }}
          >
            <Stack direction="row" sx={{ alignItems: 'center', gap: 1.5, px: 2, py: 1.5, minWidth: 0 }}>
              <Badge
                badgeContent={item.badgeCount ?? 0}
                max={99}
                invisible={!item.badgeCount}
                sx={{ '& .MuiBadge-badge': { bgcolor: 'var(--bal-error)', color: 'var(--bal-error-contrast)' } }}
              >
                <Box
                  sx={{
                    width: GLYPH_BOX,
                    height: GLYPH_BOX,
                    display: 'grid',
                    placeItems: 'center',
                    borderRadius: 'var(--bal-radius-sm)',
                    bgcolor: 'var(--bal-primary-soft)',
                  }}
                >
                  <AppIcon icon={item.icon} size={18} color="var(--bal-primary)" />
                </Box>
              </Badge>

              <Stack sx={{ gap: 0.125, minWidth: 0, flexGrow: 1 }}>
                <Typography variant="body2" sx={{ fontWeight: 500 }}>
                  {item.title}
                </Typography>
                {item.subtitle ? (
                  <Typography variant="caption" sx={{ color: 'text.secondary' }}>
                    {item.subtitle}
                  </Typography>
                ) : null}
              </Stack>

              {item.meta}
              <AppIcon icon="chevron_end" size={18} color="var(--bal-text-secondary)" aria-hidden="true" />
            </Stack>
          </MuiLink>
        ))}
      </Stack>
    </SurfaceCard>
  </Stack>
);

export default NavHubList;
