import React from 'react';
import { Box, Button, Card, CardContent, Stack, Typography, useMediaQuery } from '@mui/material';
import AirportShuttleIcon from '@mui/icons-material/AirportShuttle';
import CampaignIcon from '@mui/icons-material/Campaign';
import Inventory2Icon from '@mui/icons-material/Inventory2';
import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
import { useTheme } from '@mui/material/styles';
import AddIcon from '@mui/icons-material/Add';
import AnalyticsPage from './AnalyticsPage';
import AnalyticsPageOccupancy from './AnalyticsPageOccupancy';
import AnalyticsPagebill from './AnalyticsPagebill';

const IconCircle = ({ children, bgColor = '#DEDEFA', outerColor = '#EFEFFD' }) => (
    <Box
        sx={{
            position: 'relative',
            width: { xs: 40, sm: 45, md: 50 },
            height: { xs: 43, sm: 48, md: 53 },
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
        }}
    >
        <Box
            sx={{
                position: 'absolute',
                width: { xs: 32, sm: 36, md: 40 },
                height: { xs: 35, sm: 39, md: 43 },
                borderRadius: '50%',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                backgroundColor: outerColor,
                zIndex: 0,
            }}
        />
        <Box
            sx={{
                width: { xs: 24, sm: 27, md: 30 },
                height: { xs: 27, sm: 30, md: 33 },
                backgroundColor: bgColor,
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                zIndex: 1,
            }}
        >
            {children}
        </Box>
    </Box>
);


const DashboardContect = () => {
    const theme = useTheme();
    const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
    const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));

    return (
        <>
            {/* Header Section */}
            <Box
                sx={{

                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: { xs: 'flex-start', sm: 'center', md: 'center' },
                    mb: 1,
                    pl: 1,
                    pr: { xs: 1, sm: 3 },
                    flexDirection: { xs: 'column', sm: 'row', md: 'row' },
                    gap: { xs: 2, sm: 0 }
                }}
            >
                {/* Title */}
                <Typography
                    variant="h6"
                    sx={{
                        fontWeight: '500',
                        fontSize: { xs: '20px', sm: '22px', md: '24px' },
                        color: '#121212'
                    }}
                >
                    Dashboard
                </Typography>

                {/* Buttons */}
                {/* <Box sx={{
                    display: 'flex',
                    gap: { xs: 1, sm: 2 },
                    flexWrap: { xs: 'wrap', sm: 'nowrap' },
                    width: { xs: '100%', sm: 'auto' },
                    justifyContent: { xs: 'space-between', sm: 'space-between', md: 'flex-end' }
                }}>
                    <Button
                        variant="contained"
                        sx={{
                            textTransform: 'none',
                            color: 'white',
                            backgroundColor: theme.palette.primary.main,
                            boxShadow: 'none',
                            borderRadius: '8px',
                            height: '40px',
                            width: { xs: '48%', sm: '130px', md: '156px' },
                            fontSize: { xs: '12px', sm: '13px', md: '14px' },
                            fontWeight: 600,
                            p: 0,
                            m: 0,
                            whiteSpace: 'nowrap',
                            minWidth: 'unset'
                        }}
                    >
                        <AddIcon sx={{ fontSize: { xs: 16, sm: 18, md: 20 } }} />
                        {!isSmallScreen && 'Add New Menu'}
                    </Button>
                    <Button
                        variant="contained"
                        sx={{
                            textTransform: 'none',
                            color: 'white',
                            backgroundColor: '#5F6868',
                            boxShadow: 'none',
                            borderRadius: '8px',
                            height: '40px',
                            width: { xs: '48%', sm: '150px', md: '208px' },
                            fontSize: { xs: '12px', sm: '13px', md: '14px' },
                            fontWeight: 600,
                            p: 0,
                            m: 0,
                            whiteSpace: 'nowrap',
                            minWidth: 'unset'
                        }}
                    >
                        {isSmallScreen ? 'Marketing' : 'Start Marketing '}
                    </Button>
                    <Button
                        variant="contained"
                        sx={{
                            textTransform: 'none',
                            color: 'black',
                            backgroundColor: '#FFFFFF',
                            boxShadow: 'none',
                            borderRadius: '8px',
                            height: '40px',
                            width: { xs: '100%', sm: '120px', md: '141px' },
                            fontSize: { xs: '12px', sm: '13px', md: '14px' },
                            fontWeight: 600,
                            p: 0,
                            m: 0,
                            whiteSpace: 'nowrap',
                            minWidth: 'unset'
                        }}
                    >
                        Check Inventory
                    </Button>
                </Box> */}
            </Box>

            {/* Status Cards */}
            {/* <Box
                sx={{

                    display: 'flex',
                    gap: { xs: 1.5, sm: 2 },
                    flexWrap: 'wrap',
                    justifyContent: { xs: 'center', sm: 'flex-start' }
                }}
            >
                <StatusCard
                    icon={<DeveloperBoardIcon />}
                    statusText="Active"
                    statusColor="#0D894F"
                    iconColor="#057DEC"
                    innerColor="#DEDEFA"
                    outerColor="#EFEFFD"
                    iconSpacing={{ xs: 6, sm: 8, md: 12 }}
                    extraButton={
                        <Button
                            variant="contained"
                            sx={{
                                backgroundColor: '#F6F6F6',
                                color: '#5F6868',
                                textTransform: 'none',
                                fontSize: { xs: '0.7rem', sm: '0.8rem', md: '0.85rem' },
                                borderRadius: '8px',
                                padding: { xs: '2px 8px', sm: '4px 12px' },
                                boxShadow: 'none',
                                fontWeight: 600,
                                height: { xs: 32, sm: 36, md: 40 },
                                width: { xs: 70, sm: 80, md: 85 },
                                whiteSpace: 'nowrap',

                            }}
                        >
                            Register
                        </Button>
                    }
                />
                <StatusCard
                    icon={<Inventory2Icon />}
                    statusText="Active"
                    statusColor="#0D894F"
                    iconColor="#34B405"
                    innerColor="#E1F6DF"
                    outerColor="#EDFBE9"
                    iconSpacing={{ xs: 6, sm: 8, md: 12 }}
                    title="Inventory"
                />
                <StatusCard
                    icon={<CampaignIcon />}
                    statusText="Pending"
                    statusColor="#BBB50F"
                    iconColor="#990463"
                    innerColor="#FEC8EA"
                    outerColor="#FFE3F5"
                    iconSpacing={{ xs: 6, sm: 8, md: 12 }}
                    title="Marketing"
                />
                <StatusCard
                    icon={<AirportShuttleIcon />}
                    statusText="Action Need"
                    statusColor="#EF0A0A"
                    iconColor="#069797"
                    outerColor="#DBFBFB"
                    innerColor="#B5F5F5"
                    iconSpacing={{ xs: 3, sm: 5, md: 7 }}
                    title="Delivery"
                />
            </Box> */}

            {/* OrderStatusCard/ StatisticsCard */}
            <Box
                sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    flexWrap: 'nowrap',
                    flexDirection: { xs: 'column', sm: 'row' },
                    gap: { xs: 1, sm: 1, md: 7 }, // gap مرن
                    mr: { xs: 4, sm: 3, md: 0 },
                    ml: { xs: 2, sm: 0 },
                    flexShrink: 0,
                }}
            >
                {/* OrderStatusCard */}
                <Box
                    sx={{
                        flexGrow: 0,
                        width: { xs: '100%', sm: '35%', md: '30%' },
                        minWidth: 20,
                        ml: { xs: 0, sm: -1 },
                        flexShrink: 0,
                        mt:8
                    }}
                >
                    <AnalyticsPageOccupancy />
                </Box>

                {/* StatisticsCard */}
                <Box
                    sx={{
                        flexGrow: 1,
                        minWidth: 0,
                        // ml: { xs: 0, sm: 2 },
                        // backgroundColor:'red'
                    }}
                >
                    <AnalyticsPage />
                </Box>
            </Box>


            {/* RecentActivity */}
            <Box
                sx={{
                    mr: { xs: 4, sm: 3, md: 0 },
                    ml: { xs: 2, sm: 0 },
                }}
            >
                <AnalyticsPagebill />
            </Box>
        </>
    );
};

export default DashboardContect;