'use client';

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

import { NewsletterFilters } from '@/components/dashboard/newsletter/newsletter-filters';
import { NewsletterTable } from '@/components/dashboard/newsletter/newsletter-table';
import { NewsletterStats } from '@/components/dashboard/newsletter/newsletter-stats';
import {
  fetchNewsletterSubscribers,
  exportNewsletterSubscribersToCSV,
  type NewsletterSubscribersResponse,
  type NewsletterFiltersType,
} 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',
  '&:disabled': {
    bgcolor: 'rgba(11, 5, 4, 0.3)',
    color: 'rgba(255, 221, 49, 0.5)',
    border: '1px solid rgba(11, 5, 4, 0.2)',
  },
};

export default function NewsletterSubscribersPage(): React.JSX.Element {
  const theme = useTheme();
  const [data, setData] = React.useState<NewsletterSubscribersResponse | null>(null);
  const [loading, setLoading] = React.useState<boolean>(true);
  const [filters, setFilters] = React.useState<NewsletterFiltersType>({
    skip: 0,
    limit: 10,
    subscriptionType: '',
    search: '',
    sortBy: 'createdAt',
    sortOrder: 'desc',
  });

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

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

  const handleFiltersChange = (newFilters: Partial<NewsletterFiltersType>) => {
    setFilters((prev) => ({
      ...prev,
      ...newFilters,
      skip: newFilters.skip !== undefined ? newFilters.skip : 0,
    }));
  };

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

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

  const handleExport = () => {
    const subscribers = data?.data.subscribers || [];
    if (subscribers.length > 0) {
      exportNewsletterSubscribersToCSV(subscribers);
      enqueueSnackbar('Newsletter subscribers exported successfully', { variant: 'success' });
    } else {
      enqueueSnackbar('No newsletter subscribers to export', { variant: 'warning' });
    }
  };

  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>
            Subscribed Users
          </Typography>
          <Typography variant="body1" sx={{ opacity: 0.9 }}>
            View and manage users subscribed to your newsletter
          </Typography>
        </Box>
        <Button
          variant="contained"
          startIcon={<ExportIcon />}
          onClick={handleExport}
          disabled={!data?.data.subscribers || data.data.subscribers.length === 0}
          sx={headerButtonSx}
        >
          Export CSV
        </Button>
      </Stack>

      <Grid container spacing={3}>
        {data?.data.statistics && (
          <Grid item xs={12}>
            <NewsletterStats statistics={data.data.statistics} loading={loading} />
          </Grid>
        )}

        <Grid item xs={12}>
          <Card sx={{ borderRadius: 3, boxShadow: theme.shadows[2] }}>
            <CardContent>
              <NewsletterFilters
                filters={filters}
                onFiltersChange={handleFiltersChange}
                loading={loading}
              />
            </CardContent>
          </Card>
        </Grid>

        <Grid item xs={12}>
          <Card sx={{ borderRadius: 3, boxShadow: theme.shadows[2] }}>
            <NewsletterTable
              subscribers={data?.data.subscribers || []}
              pagination={data?.data.pagination}
              loading={loading}
              onPageChange={handlePageChange}
              onRowsPerPageChange={handleRowsPerPageChange}
              onSort={(sortBy, sortOrder) => handleFiltersChange({ sortBy, sortOrder })}
              currentSort={{
                sortBy: filters.sortBy,
                sortOrder: filters.sortOrder,
              }}
            />
          </Card>
        </Grid>
      </Grid>
    </Box>
  );
}