import { Heading } from '@moex-vibe/design-system'
import { Box } from '@mui/material'
import type { UseQueryResult } from '@tanstack/react-query'
import { Link, useParams } from '@tanstack/react-router'
import { createContext, type ReactNode } from 'react'
import { useBrokerPortfolio } from '@/entities/broker-account'
import type { BrokerPortfolio } from '@/shared/api'

const baseLinkStyle: React.CSSProperties = {
  padding: '10px 12px',
  borderRadius: 8,
  color: 'var(--color-text-secondary)',
  textDecoration: 'none',
  whiteSpace: 'nowrap',
  flexShrink: 0,
  display: 'inline-flex',
  alignItems: 'center',
  fontSize: 14,
}

const links = [
  { to: '', label: 'Обзор' },
  { to: '/shares', label: 'Акции' },
  { to: '/bonds', label: 'Облигации' },
  { to: '/operations', label: 'Операции' },
  { to: '/events', label: 'События' },
]

export interface BrokerAccountContextValue {
  accountId: string
  portfolio: UseQueryResult<BrokerPortfolio>
}

export const BrokerAccountContext = createContext<BrokerAccountContextValue | null>(null)

export function BrokerAccountLayout({ children }: { children: ReactNode }) {
  const { accountId = '' } = useParams({ from: '/broker/$accountId' })
  const portfolio = useBrokerPortfolio(accountId)
  const basePath = `/broker/${encodeURIComponent(accountId)}`

  return (
    <BrokerAccountContext.Provider value={{ accountId, portfolio }}>
      <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) => (
              <Link
                key={link.to}
                to={`${basePath}${link.to}`}
                style={baseLinkStyle}
                activeOptions={{ exact: link.to === '' }}
                activeProps={{
                  style: {
                    ...baseLinkStyle,
                    color: 'var(--color-primary)',
                    fontWeight: 700,
                  },
                }}
              >
                {link.label}
              </Link>
            ))}
          </Box>

          <Box sx={{ minWidth: 0 }}>{children}</Box>
        </Box>
      </Box>
    </BrokerAccountContext.Provider>
  )
}