import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { Box, Button, Link, Paper, Stack, Typography } from '@mui/material';
import { useAnalyticsConsent } from '../../contexts/AnalyticsConsentContext';

/**
 * Opt-in for custom Tianji events / identify. Page views already load via Tracker.
 */
const AnalyticsConsentBanner = (): JSX.Element | null => {
  const { showBanner, acceptAnalytics, declineAnalytics } = useAnalyticsConsent();

  if (!showBanner) return null;

  return (
    <Box
      role="dialog"
      aria-label="Analytics consent"
      aria-modal="false"
      sx={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 1400,
        px: { xs: 2, sm: 3 },
        pb: { xs: 2, sm: 3 },
        pointerEvents: 'none',
      }}
    >
      <Paper
        elevation={8}
        sx={{
          pointerEvents: 'auto',
          maxWidth: 960,
          mx: 'auto',
          p: { xs: 2, sm: 2.5 },
          borderRadius: 2,
        }}
      >
        <Stack
          direction={{ xs: 'column', md: 'row' }}
          spacing={2}
          alignItems={{ xs: 'stretch', md: 'center' }}
          justifyContent="space-between"
        >
          <Box sx={{ flex: 1 }}>
            <Typography variant="subtitle1" fontWeight={700} gutterBottom>
              Help us improve Hesychia
            </Typography>
            <Typography variant="body2" color="text.secondary">
              We always collect anonymous page views and referral data to understand traffic.
              With your consent, we also collect how you use features (sign-in, checkout, chat
              actions, and similar). We do not use advertising cookies. When you accept and are
              signed in, we may associate that activity with your account. See the{' '}
              <Link
                component={RouterLink}
                to="/terms_of_service/#analytics"
                underline="hover"
              >
                Analytics and Cookies
              </Link>{' '}
              section of our Terms of Service for details.
            </Typography>
          </Box>
          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ flexShrink: 0 }}>
            <Button variant="outlined" color="inherit" onClick={declineAnalytics}>
              Decline
            </Button>
            <Button variant="contained" onClick={acceptAnalytics}>
              Accept analytics
            </Button>
          </Stack>
        </Stack>
      </Paper>
    </Box>
  );
};

export default AnalyticsConsentBanner;
