import { NavLink, Outlet, useOutletContext, useParams } from 'react-router-dom';
import { Box } from '@mui/material';
import { Heading } from '@moex-vibe/design-system';
import { useBrokerPortfolio } from '@/entities/broker-account';

export type BrokerAccountContext = {
  accountId: string;
  portfolio: ReturnType<typeof useBrokerPortfolio>;
};

export function useBrokerAccountContext() {
  return useOutletContext<BrokerAccountContext>();
}

const links = [
  { to: '', label: 'Обзор', end: true },
  { to: '/shares', label: 'Акции' },
  { to: '/bonds', label: 'Облигации' },
  { to: '/operations', label: 'Операции' },
];

export function BrokerAccountLayout() {
  const { accountId = '' } = useParams();
  const portfolio = useBrokerPortfolio(accountId);
  const basePath = `/broker/${encodeURIComponent(accountId)}`;
  const context: BrokerAccountContext = { accountId, portfolio };

  return (
    <Box sx={{ display: 'grid', gap: 3 }}>
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
        <Heading level={1}>{portfolio.data?.account.name || 'Брокерский счёт'}</Heading>
      </Box>

      <Box
        sx={{
          display: 'grid',
          gridTemplateColumns: '1fr',
          gap: 2,
          '@media (min-width: 720px)': {
            gridTemplateColumns: 'minmax(150px, 190px) minmax(0, 1fr)',
            gap: 3,
          },
        }}
      >
        <Box
          component="nav"
          aria-label="Разделы брокерского счёта"
          sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: 0.5,
            '@media (max-width: 719px)': {
              flexDirection: 'row',
              overflowX: 'auto',
              scrollbarWidth: 'thin',
            },
          }}
        >
          {links.map((link) => (
            <Box
              key={link.to}
              component={NavLink}
              to={`${basePath}${link.to}`}
              end={link.end}
              sx={{
                px: 1.5,
                py: 1.25,
                borderRadius: 2,
                color: 'text.secondary',
                textDecoration: 'none',
                whiteSpace: 'nowrap',
                flexShrink: 0,
                display: 'inline-flex',
                alignItems: 'center',
                '&[aria-current="page"]': {
                  color: 'primary.main',
                  bgcolor: 'primary.light',
                  fontWeight: 700,
                },
                '&:focus-visible': {
                  outline: '3px solid',
                  outlineColor: 'primary.main',
                  outlineOffset: 2,
                },
              }}
            >
              {link.label}
            </Box>
          ))}
        </Box>

        <Box sx={{ minWidth: 0 }}>
          <Outlet context={context} />
        </Box>
      </Box>
    </Box>
  );
}