'use client';

import * as React from 'react';
import {
  Box,
  Button,
  Card,
  Stack,
  Typography,
  useTheme,
} from '@mui/material';
import { Add as AddIcon } from '@mui/icons-material';
import { enqueueSnackbar } from 'notistack';

import { NewslettersTable } from '@/components/dashboard/newsletter/newsletters-table';
import { AppLoader } from '@/components/core/app-loader';
import { ConfirmDialog } from '@/components/core/confirm-dialog';
import { CreateNewsletterModal } from '@/components/dashboard/newsletter/create-newsletter-modal';
import {
  fetchNewsletters,
  deleteNewsletter,
  getApiErrorMessage,
  type NewslettersResponse,
  type NewslettersFiltersType,
  type Newsletter,
} from '@/services/newsletter.service';

const headerButtonSx = {
  bgcolor: 'rgba(11, 5, 4, 0.8)',
  color: '#FFDD31',
  borderRadius: 3,
  px: 3,
  py: 1.5,
  fontWeight: 600,
  border: '1px solid rgba(11, 5, 4, 0.9)',
  '&:hover': {
    bgcolor: 'rgba(11, 5, 4, 0.9)',
    transform: 'translateY(-2px)',
  },
  transition: 'all 0.3s ease',
};

export default function NewslettersPage(): React.JSX.Element {
  const theme = useTheme();
  const [data, setData] = React.useState<NewslettersResponse | null>(null);
  const [loading, setLoading] = React.useState<boolean>(true);
  const [filters, setFilters] = React.useState<NewslettersFiltersType>({
    skip: 0,
    limit: 10,
    search: '',
    status: '',
    sortBy: 'createdAt',
    sortOrder: 'desc',
  });
  const [isModalOpen, setIsModalOpen] = React.useState(false);
  const [editingNewsletterId, setEditingNewsletterId] = React.useState<string | null>(null);
  const [deleteTarget, setDeleteTarget] = React.useState<Newsletter | null>(null);
  const [isDeleting, setIsDeleting] = React.useState(false);

  const fetchData = React.useCallback(async () => {
    try {
      setLoading(true);
      const response = await fetchNewsletters(filters);
      setData(response);
    } catch (error) {
      console.error('Error fetching newsletters:', error);
      enqueueSnackbar(getApiErrorMessage(error, 'Failed to load newsletters'), { variant: 'error' });
    } finally {
      setLoading(false);
    }
  }, [filters]);

  React.useEffect(() => {
    fetchData();
  }, [fetchData]);

  const handlePageChange = (page: number) => {
    setFilters((prev) => ({
      ...prev,
      skip: (page - 1) * prev.limit,
    }));
  };

  const handleRowsPerPageChange = (limit: number) => {
    setFilters((prev) => ({
      ...prev,
      limit,
      skip: 0,
    }));
  };

  const handleOpenCreateModal = () => {
    setEditingNewsletterId(null);
    setIsModalOpen(true);
  };

  const handleEditNewsletter = (newsletter: Newsletter) => {
    setEditingNewsletterId(newsletter._id);
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    setEditingNewsletterId(null);
  };

  const handleDeleteNewsletter = (newsletter: Newsletter) => {
    setDeleteTarget(newsletter);
  };

  const handleDeleteCancel = () => {
    if (!isDeleting) {
      setDeleteTarget(null);
    }
  };

  const handleDeleteConfirm = async () => {
    if (!deleteTarget) return;

    try {
      setIsDeleting(true);
      const response = await deleteNewsletter(deleteTarget._id);
      enqueueSnackbar(response.message, { variant: 'success' });
      setDeleteTarget(null);
      fetchData();
    } catch (error) {
      console.error('Error deleting newsletter:', error);
      enqueueSnackbar(getApiErrorMessage(error, 'Failed to delete newsletter'), { variant: 'error' });
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <Box sx={{ bgcolor: 'background.default', minHeight: '100vh', py: 2 }}>
      <Stack
        direction="row"
        justifyContent="space-between"
        alignItems="center"
        sx={{
          mb: 4,
          p: 3,
          borderRadius: 4,
          background: '#FFDD31',
          color: '#0B0504',
        }}
      >
        <Box>
          <Typography variant="h4" fontWeight={700} gutterBottom>
            Newsletters
          </Typography>
          <Typography variant="body1" sx={{ opacity: 0.9 }}>
            Create, edit, and manage newsletters sent to subscribers
          </Typography>
        </Box>
        <Button
          variant="contained"
          startIcon={<AddIcon />}
          onClick={handleOpenCreateModal}
          sx={headerButtonSx}
        >
          Create Newsletter
        </Button>
      </Stack>

      <Card sx={{ borderRadius: 3, boxShadow: theme.shadows[2], position: 'relative', minHeight: 400 }}>
        {loading && !data ? (
          <AppLoader fill size="lg" />
        ) : (
          <NewslettersTable
            newsletters={data?.data.newsletters || []}
            pagination={data?.data.pagination}
            loading={loading}
            onPageChange={handlePageChange}
            onRowsPerPageChange={handleRowsPerPageChange}
            onSort={(sortBy, sortOrder) =>
              setFilters((prev) => ({ ...prev, sortBy, sortOrder, skip: 0 }))
            }
            currentSort={{
              sortBy: filters.sortBy,
              sortOrder: filters.sortOrder,
            }}
            onEdit={handleEditNewsletter}
            onDelete={handleDeleteNewsletter}
          />
        )}
      </Card>

      <CreateNewsletterModal
        open={isModalOpen}
        onClose={handleCloseModal}
        onSuccess={fetchData}
        newsletterId={editingNewsletterId}
      />

      <ConfirmDialog
        open={Boolean(deleteTarget)}
        title="Delete Newsletter"
        description="Are you sure you want to delete this newsletter? This action cannot be undone."
        confirmLabel="Delete"
        cancelLabel="Cancel"
        variant="danger"
        loading={isDeleting}
        detailTitle={deleteTarget?.title}
        detailSubtitle={deleteTarget?.subject}
        onConfirm={handleDeleteConfirm}
        onCancel={handleDeleteCancel}
      />
    </Box>
  );
}