import React from 'react';
import { Box, Grid, Typography, Paper, Button } from '@mui/material';
import {
    Public as PublicIcon,
    SupervisorAccount as SupervisorAccountIcon,
    AutoAwesome as MagicIcon,
    ChevronRight as ChevronRightIcon
} from '@mui/icons-material';
import StatCard from '../components/StatCard.js';

const Dashboard = ({ roleSummary, countrySummary, globalSettings }) => {
    // Calculate stats
    const activeRoles = Object.values(roleSummary || {}).filter(r => r.enabled).length;
    const activeCountries = Object.values(countrySummary || {}).filter(c => c.enabled).length;
    const globalActive = globalSettings?.enabled ? 'Active' : 'Inactive';

    return (
        <Box sx={{ maxWidth: 1000, mx: 'auto' }}>
            <Box sx={{ mb: 8 }}>
                <Typography variant="h4" sx={{ mb: 1, color: 'text.primary', fontWeight: 800 }}>
                    Overview
                </Typography>
                <Typography variant="body1" sx={{ color: 'text.secondary', maxWidth: 600 }}>
                    Monitor your store's visibility and restriction status. Refined rules for a professional shopping experience.
                </Typography>
            </Box>

            <Grid container spacing={4} sx={{ mb: 8 }}>
                <Grid item xs={12} md={4}>
                    <StatCard
                        title="Global Status"
                        value={globalActive}
                        icon={<PublicIcon sx={{ fontSize: 24 }} />}
                        color={globalSettings?.enabled ? 'primary' : 'secondary'}
                    />
                </Grid>
                <Grid item xs={12} md={4}>
                    <StatCard
                        title="Active Roles"
                        value={activeRoles}
                        icon={<SupervisorAccountIcon sx={{ fontSize: 24 }} />}
                        color="primary"
                    />
                </Grid>
                <Grid item xs={12} md={4}>
                    <StatCard
                        title="Active Countries"
                        value={activeCountries}
                        icon={<PublicIcon sx={{ fontSize: 24 }} />}
                        color="primary"
                    />
                </Grid>
            </Grid>

            <Paper
                elevation={0}
                sx={{
                    p: 5,
                    borderRadius: '20px',
                    border: '1px solid rgba(226, 232, 240, 0.6)',
                    background: 'linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%)',
                    position: 'relative',
                    overflow: 'hidden'
                }}
            >
                <Box sx={{ position: 'relative', zIndex: 1 }}>
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 2 }}>
                        <MagicIcon sx={{ color: 'primary.main', fontSize: 20 }} />
                        <Typography variant="h6" sx={{ fontWeight: 800 }}>
                            Ready to configure?
                        </Typography>
                    </Box>
                    <Typography variant="body1" sx={{ color: 'text.secondary', mb: 4, maxWidth: 500, lineHeight: 1.7 }}>
                        Use the sidebar to navigate through specific restriction types. You can hide products, categories, or entire store sections based on user identity or location.
                    </Typography>

                    <Grid container spacing={3}>
                        {[
                            { title: 'Role Rules', desc: 'Target customers or subscribers.' },
                            { title: 'Country Rules', desc: 'Region-specific visibility.' },
                            { title: 'Global Rules', desc: 'One-click full store hide.' }
                        ].map((item, i) => (
                            <Grid item xs={12} sm={4} key={i}>
                                <Box sx={{ p: 2, borderRadius: '12px', bgcolor: 'rgba(79, 70, 229, 0.03)', border: '1px solid rgba(79, 70, 229, 0.05)' }}>
                                    <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.5 }}>{item.title}</Typography>
                                    <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>{item.desc}</Typography>
                                </Box>
                            </Grid>
                        ))}
                    </Grid>
                </Box>

                {/* Decorative element */}
                <Box sx={{
                    position: 'absolute',
                    top: -50,
                    right: -50,
                    width: 200,
                    height: 200,
                    bgcolor: 'primary.light',
                    borderRadius: '50%',
                    opacity: 0.3,
                    filter: 'blur(40px)'
                }} />
            </Paper>
        </Box>
    );
};

export default Dashboard;
