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 SvgIcon from '@mui/material/SvgIcon'
import Typography from '@mui/material/Typography'
import { Link as RouterLink } from 'react-router-dom'
import { AppHeader } from '@/app/layout/AppHeader'
import { STORE_EMAIL, STORE_NAME, STORE_PHONE, VK_URL } from '@/shared/config'

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

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

      <Box component="main" sx={{ flex: 1, py: 3 }}>
        <Container maxWidth="lg">{children}</Container>
      </Box>

      <Box
        component="footer"
        sx={{
          mt: 'auto',
          borderTop: 1,
          borderColor: 'divider',
          bgcolor: 'background.default',
          py: { xs: 3, md: 4 },
        }}
      >
        <Container maxWidth="lg">
          <Grid container spacing={3}>
            <Grid size={{ xs: 12, sm: 4 }}>
              <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 700 }}>
                Магазин
              </Typography>
              <Stack spacing={1}>
                <Link component={RouterLink} to="/" color="inherit" underline="hover" variant="body2">
                  Каталог
                </Link>
                <Link component={RouterLink} to="/privacy" color="inherit" underline="hover" variant="body2">
                  Политика конфиденциальности
                </Link>
                <Typography variant="body2" color="text.secondary">
                  Изделия ручной работы: вещи с характером и вниманием к деталям.
                </Typography>
              </Stack>
            </Grid>
            <Grid size={{ xs: 12, sm: 4 }}>
              <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 700 }}>
                Покупателям
              </Typography>
              <Stack spacing={1}>
                <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: 4 }}>
              <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 700 }}>
                Контакты
              </Typography>
              <Stack spacing={0.75}>
                <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' } }}
                >
                  <SvgIcon sx={{ fontSize: 20 }}>
                    <path d="M12.776 2.553a.267.267 0 0 0-.104-.002C10.184 2.973 4.08 7.575 2.34 9.478c-.19.208-.33.505-.33.85 0 .344.122.634.3.85.556.688 2.005 1.759 2.005 1.759s1.168 2.52 1.76 3.677c.232.463.45.858.604 1.13.348.611.534.857.926 1.077.392.22.776.22 1.194.01.417-.212 2.452-1.61 3.46-2.36.256-.19.49-.19.73.01 1.517 1.256 3.2 2.743 4.003 3.586.373.391.701.548 1.104.548.402 0 .683-.283.805-.86.053-.25 1.025-5.076 1.025-5.076s.633-2.24 2.763-3.897c.292-.228.462-.57.462-.95 0-.38-.143-.68-.38-.895-1.198-1.088-5.9-3.039-6.365-3.226z" />
                  </SvgIcon>
                  VK
                </Link>
              </Stack>
            </Grid>
          </Grid>
          <Divider sx={{ my: 2 }} />
          <Typography
            variant="caption"
            color="text.secondary"
            sx={{ display: 'block', textAlign: { xs: 'left', sm: 'center' } }}
          >
            © {year} {STORE_NAME}
          </Typography>
        </Container>
      </Box>
    </Box>
  )
}