import Box from '@mui/material/Box'
import Paper from '@mui/material/Paper'
import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import * as maplibregl from 'maplibre-gl'
import Map, { Marker } from 'react-map-gl/maplibre'
import { PICKUP_ADDRESS_FULL, PICKUP_COORDINATES } from '@/shared/constants/pickup-point'

const rasterStyle = {
  version: 8 as const,
  sources: {
    osm: {
      type: 'raster' as const,
      tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
      tileSize: 256,
      attribution: '© OpenStreetMap contributors',
    },
  },
  layers: [{ id: 'osm', type: 'raster' as const, source: 'osm' }],
}

export function AboutPage() {
  const { lat, lng } = PICKUP_COORDINATES
  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        О нас
      </Typography>
      <Typography color="text.secondary" sx={{ mb: 3 }}>
        Магазин изделий ручной работы. Мы отвечаем за качество и сроки изготовления всего, что вы видите в каталоге.
      </Typography>

      <Stack spacing={3}>
        <Paper variant="outlined" sx={{ p: 2, borderRadius: 2 }}>
          <Typography variant="h6" gutterBottom>
            Контакты и самовывоз
          </Typography>
          <Typography sx={{ mb: 1 }}>
            Забрать заказ можно по адресу самовывоза (координаты указаны на карте ниже):
          </Typography>
          <Typography sx={{ whiteSpace: 'pre-wrap', fontWeight: 600 }}>{PICKUP_ADDRESS_FULL}</Typography>
          <Typography color="text.secondary" variant="body2" sx={{ mt: 1 }}>
            Перед визитом мы свяжемся с вами и согласуем время — чтобы заказ точно был готов к выдаче.
          </Typography>
        </Paper>

        <Box
          sx={{
            height: 380,
            borderRadius: 2,
            overflow: 'hidden',
            border: 1,
            borderColor: 'divider',
            position: 'relative',
          }}
        >
          <Map
            mapLib={maplibregl}
            initialViewState={{ latitude: lat, longitude: lng, zoom: 16 }}
            style={{ width: '100%', height: 380 }}
            mapStyle={rasterStyle}
            scrollZoom={false}
            dragRotate={false}
            dragPan={false}
            doubleClickZoom={false}
            keyboard={false}
            touchZoomRotate={false}
          >
            <Marker longitude={lng} latitude={lat} anchor="bottom">
              <Box
                sx={{
                  width: 20,
                  height: 20,
                  bgcolor: 'primary.main',
                  borderRadius: '50%',
                  border: 2,
                  borderColor: 'background.paper',
                  boxShadow: 3,
                }}
              />
            </Marker>
          </Map>
        </Box>
      </Stack>
    </Box>
  )
}
