import { type PropsWithChildren } from 'react'
import Box from '@mui/material/Box'
import Container from '@mui/material/Container'
import Divider from '@mui/material/Divider'
import Grid from '@mui/material/Grid'
import Link from '@mui/material/Link'
import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import { Link as RouterLink } from 'react-router-dom'
import { AppHeader } from '@/app/layout/AppHeader'
import vkLogoSrc from '@/shared/assets/vk-logo.svg'
import { STORE_EMAIL, STORE_NAME, STORE_PHONE, VK_URL } from '@/shared/config'
import { CookieConsentBanner } from '@/shared/ui/CookieConsentBanner'
import { ScrollOnNavigate } from '@/shared/ui/ScrollOnNavigate'
import { ScrollToTop } from '@/shared/ui/ScrollToTop'

export function MainLayout({ children }: PropsWithChildren) {
  const year = new Date().getFullYear()

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', minWidth: '500px' }}>
      <ScrollOnNavigate />
      <ScrollToTop />
      <AppHeader />

      <Box component="main" sx={{ flex: 1, py: { xs: 3, md: 5 } }}>
        <Container maxWidth="xl" sx={{ px: { xs: 2, sm: 3, md: 4 } }}>
          {children}
        </Container>
      </Box>

      <Box
        component="footer"
        sx={{
          mt: 'auto',
          borderTop: 1,
          borderColor: 'divider',
          bgcolor: 'background.paper',
          py: { xs: 5, md: 7 },
        }}
      >
        <Container maxWidth="xl" sx={{ px: { xs: 2, sm: 3, md: 4 } }}>
          <Grid container spacing={5}>
            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <Typography variant="subtitle1" component="h4" gutterBottom sx={{ fontWeight: 700, letterSpacing: '-0.5px' }}>
                {STORE_NAME}
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ mt: 1, maxWidth: 260 }}>
                Изделия ручной работы: вещи с характером и вниманием к деталям.
              </Typography>
            </Grid>
            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <Typography variant="subtitle1" component="h4" gutterBottom sx={{ fontWeight: 600, letterSpacing: '-0.25px' }}>
                Покупателям
              </Typography>
              <Stack spacing={1.5}>
                <Link component={RouterLink} to="/me" color="inherit" underline="hover" variant="body2">
                  Личный кабинет
                </Link>
                <Link component={RouterLink} to="/info" color="inherit" underline="hover" variant="body2">
                  О покупке
                </Link>
                <Link component={RouterLink} to="/about" color="inherit" underline="hover" variant="body2">
                  О нас
                </Link>
              </Stack>
            </Grid>
            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <Typography variant="subtitle1" component="h4" gutterBottom sx={{ fontWeight: 600, letterSpacing: '-0.25px' }}>
                Контакты
              </Typography>
              <Stack spacing={1}>
                <Typography variant="body2">
                  Email:{' '}
                  <Link href={`mailto:${STORE_EMAIL}`} underline="hover">
                    {STORE_EMAIL}
                  </Link>
                </Typography>
                <Typography variant="body2">
                  Телефон:{' '}
                  <Link href={`tel:${STORE_PHONE.replace(/\s/g, '')}`} underline="hover">
                    {STORE_PHONE}
                  </Link>
                </Typography>
                <Link
                  href={VK_URL}
                  target="_blank"
                  rel="noopener noreferrer"
                  color="text.secondary"
                  sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, '&:hover': { color: '#4A76A8' } }}
                >
                  <Box component="img" src={vkLogoSrc} alt="" sx={{ width: 20, height: 20 }} />
                  VK
                </Link>
              </Stack>
            </Grid>
            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <Typography variant="subtitle1" component="h4" gutterBottom sx={{ fontWeight: 600, letterSpacing: '-0.25px' }}>
                Юридическая информация
              </Typography>
              <Stack spacing={1.5}>
                <Link component={RouterLink} to="/privacy" color="inherit" underline="hover" variant="body2">
                  Политика конфиденциальности
                </Link>
                <Link component={RouterLink} to="/terms" color="inherit" underline="hover" variant="body2">
                  Пользовательское соглашение
                </Link>
              </Stack>
            </Grid>
          </Grid>
          <Divider sx={{ my: 4 }} />
          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.5 }}>
            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', textAlign: 'center' }}>
              © {year} {STORE_NAME}
            </Typography>
          </Box>
        </Container>
      </Box>
      <CookieConsentBanner />
    </Box>
  )
}