'use client';

import * as React from 'react';
import {
  Box,
  Card,
  CardContent,
  Typography,
  useTheme,
  Paper,
  Grid,
  Button,
  Stack,
} from '@mui/material';
import { GetApp as ExportIcon } from '@mui/icons-material';
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';
import { enqueueSnackbar } from 'notistack';

export default function NewsletterPage(): 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);
    } finally {
      setLoading(false);
    }
  }, [filters]);

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

  const handleFiltersChange = (newFilters: Partial<NewsletterFiltersType>) => {
    setFilters(prev => ({
      ...prev,
      ...newFilters,
      // Reset to first page when filters change (except pagination)
      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, // Reset to first page
    }));
  };

  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 }}>
      {/* Header Section */}
      <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>
            Newsletter Subscribers
          </Typography>
          <Typography variant="body1" sx={{ opacity: 0.9 }}>
            Manage and analyze your newsletter subscription data
          </Typography>
        </Box>
        <Button
          variant="contained"
          startIcon={<ExportIcon />}
          onClick={handleExport}
          disabled={!data?.data.subscribers || data.data.subscribers.length === 0}
          sx={{
            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 CSV
        </Button>
      </Stack>

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

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

        {/* Table Section */}
        <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>
  );
}