'use client';

import * as React from 'react';
import {
  Box,
  Button,
  Divider,
  Modal,
  Stack,
  Typography,
  useTheme,
} from '@mui/material';
import { AppLoader } from '@/components/core/app-loader';
import { Close as CloseIcon, Send as SendIcon } from '@mui/icons-material';
import IconButton from '@mui/material/IconButton';

interface NewsletterReviewModalProps {
  open: boolean;
  title: string;
  subject: string;
  content: string;
  isLoading?: boolean;
  mode: 'create' | 'resend';
  onClose: () => void;
  onBack: () => void;
  onConfirm: () => void;
}

const modalStyle = {
  position: 'absolute' as const,
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: '100%',
  maxWidth: 720,
  maxHeight: '90vh',
  bgcolor: 'background.paper',
  borderRadius: 4,
  boxShadow: 24,
  p: 4,
  overflowY: 'auto' as const,
};

export function NewsletterReviewModal({
  open,
  title,
  subject,
  content,
  isLoading = false,
  mode,
  onClose,
  onBack,
  onConfirm,
}: NewsletterReviewModalProps): React.JSX.Element {
  const theme = useTheme();

  return (
    <Modal open={open} onClose={isLoading ? undefined : onClose}>
      <Box sx={modalStyle}>
        <Stack direction="row" justifyContent="space-between" alignItems="flex-start" mb={2}>
          <Box>
            <Typography variant="h5" fontWeight={700}>
              Review Newsletter
            </Typography>
            <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
              Please review the details below before sending to all subscribed users.
            </Typography>
          </Box>
          <IconButton onClick={onClose} disabled={isLoading} size="small">
            <CloseIcon />
          </IconButton>
        </Stack>

        <Stack spacing={2.5} divider={<Divider flexItem />}>
          <Box>
            <Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ textTransform: 'uppercase' }}>
              Title
            </Typography>
            <Typography variant="body1" fontWeight={600} sx={{ mt: 0.5 }}>
              {title}
            </Typography>
          </Box>

          <Box>
            <Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ textTransform: 'uppercase' }}>
              Email Subject
            </Typography>
            <Typography variant="body1" sx={{ mt: 0.5 }}>
              {subject}
            </Typography>
          </Box>

          <Box>
            <Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ textTransform: 'uppercase' }}>
              Content Preview
            </Typography>
            <Box
              sx={{
                mt: 1,
                p: 2.5,
                borderRadius: 2,
                border: `1px solid ${theme.palette.divider}`,
                bgcolor: theme.palette.mode === 'dark' ? 'background.default' : '#ffffff',
                maxHeight: 320,
                overflowY: 'auto',
                '& img': { maxWidth: '100%' },
                '& a': { color: theme.palette.primary.main },
                '& ul, & ol': { pl: 3 },
              }}
              dangerouslySetInnerHTML={{ __html: content }}
            />
          </Box>
        </Stack>

        <Stack direction="row" spacing={2} justifyContent="flex-end" pt={3}>
          <Button variant="outlined" onClick={onBack} disabled={isLoading}>
            Back to Edit
          </Button>
          <Button
            variant="contained"
            startIcon={isLoading ? undefined : <SendIcon />}
            disabled={isLoading}
            onClick={onConfirm}
            sx={{
              minWidth: isLoading ? 160 : undefined,
              bgcolor: 'rgba(11, 5, 4, 0.8)',
              color: '#FFDD31',
              '&:hover': { bgcolor: 'rgba(11, 5, 4, 0.9)' },
            }}
          >
            {isLoading ? (
              <AppLoader size="xs" inline color="#FFDD31" />
            ) : mode === 'create' ? (
              'Confirm & Send Newsletter'
            ) : (
              'Confirm & Resend Newsletter'
            )}
          </Button>
        </Stack>
      </Box>
    </Modal>
  );
}