'use client';

import React from 'react';
import {
  Box,
  Card,
  CardContent,
  Typography,
  useTheme,
  Grid,
  LinearProgress,
} from '@mui/material';
import { AppLoader } from '@/components/core/app-loader';
import {
  Email as EmailIcon,
  Phone as PhoneIcon,
  Groups as GroupsIcon,
  TrendingUp as TrendingUpIcon,
  Person as PersonIcon,
} from '@mui/icons-material';
import { NewsletterStatistics } from '@/services/newsletter.service';

interface NewsletterStatsProps {
  statistics: NewsletterStatistics;
  loading?: boolean;
}

interface StatCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  icon: React.ReactNode;
  gradient: string;
  progress?: number;
  showProgress?: boolean;
}

function StatCard({ 
  title, 
  value, 
  subtitle, 
  icon, 
  gradient, 
  progress, 
  showProgress = false 
}: StatCardProps) {
  const theme = useTheme();

  return (
    <Card
      sx={{
        borderRadius: 3,
        boxShadow: theme.shadows[2],
        background: gradient,
        color: 'white',
        height: '100%',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      <CardContent sx={{ p: 3 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
          <Box>
            <Typography variant="h4" fontWeight={700} gutterBottom>
              {typeof value === 'number' ? value.toLocaleString() : value}
            </Typography>
            <Typography variant="h6" fontWeight={600} sx={{ opacity: 0.9 }}>
              {title}
            </Typography>
            {subtitle && (
              <Typography variant="body2" sx={{ opacity: 0.7, mt: 0.5 }}>
                {subtitle}
              </Typography>
            )}
          </Box>
          <Box sx={{ 
            opacity: 0.8,
            fontSize: '2.5rem',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}>
            {icon}
          </Box>
        </Box>
        
        {showProgress && progress !== undefined && (
          <Box sx={{ mt: 2 }}>
            <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
              <Typography variant="body2" sx={{ opacity: 0.8 }}>
                Subscription Rate
              </Typography>
              <Typography variant="body2" sx={{ opacity: 0.8 }}>
                {progress}%
              </Typography>
            </Box>
            <LinearProgress
              variant="determinate"
              value={parseFloat(progress.toString())}
              sx={{
                height: 8,
                borderRadius: 4,
                backgroundColor: 'rgba(255, 255, 255, 0.2)',
                '& .MuiLinearProgress-bar': {
                  borderRadius: 4,
                  backgroundColor: 'rgba(255, 255, 255, 0.9)',
                },
              }}
            />
          </Box>
        )}
      </CardContent>
    </Card>
  );
}

export function NewsletterStats({ statistics, loading }: NewsletterStatsProps) {
  const theme = useTheme();

  if (loading) {
    return (
      <Card sx={{ borderRadius: 3, boxShadow: theme.shadows[2], position: 'relative', minHeight: 200 }}>
        <AppLoader fill size="md" />
      </Card>
    );
  }

  return (
    <Box>
      <Typography variant="h6" fontWeight={600} gutterBottom sx={{ mb: 3 }}>
        Newsletter Subscription Overview
      </Typography>
      
      <Grid container spacing={3}>
        {/* Total Volunteers */}
        <Grid item xs={12} sm={6} md={2.4}>
          <StatCard
            title="Total Volunteers"
            value={statistics.totalVolunteers}
            subtitle="Registered volunteers"
            icon={<PersonIcon />}
            gradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
          />
        </Grid>

        {/* Email Subscribers */}
        <Grid item xs={12} sm={6} md={2.4}>
          <StatCard
            title="Email Subscribers"
            value={statistics.emailSubscribers}
            subtitle={`${statistics.subscriptionRate.email}% of users`}
            icon={<EmailIcon />}
            gradient="linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
            progress={parseFloat(statistics.subscriptionRate.email)}
            showProgress={true}
          />
        </Grid>

        {/* Phone Subscribers */}
        <Grid item xs={12} sm={6} md={2.4}>
          <StatCard
            title="Phone Subscribers"
            value={statistics.phoneSubscribers}
            subtitle={`${statistics.subscriptionRate.phone}% of users`}
            icon={<PhoneIcon />}
            gradient="linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
            progress={parseFloat(statistics.subscriptionRate.phone)}
            showProgress={true}
          />
        </Grid>

        {/* Both Subscribers */}
        <Grid item xs={12} sm={6} md={2.4}>
          <StatCard
            title="Both Channels"
            value={statistics.bothSubscribers}
            subtitle="Email & Phone"
            icon={<GroupsIcon />}
            gradient="linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
          />
        </Grid>

        {/* Total Subscribers */}
        <Grid item xs={12} sm={6} md={2.4}>
          <StatCard
            title="Total Subscribers"
            value={statistics.totalSubscribers}
            // subtitle={`${statistics.subscriptionRate.overall}% overall rate`}
            icon={<TrendingUpIcon />}
            gradient="linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
            progress={parseFloat(statistics.subscriptionRate.overall)}
            showProgress={true}
          />
        </Grid>
      </Grid>
    </Box>
  );
}