import { Card, CardContent, Box, Typography, Avatar, Stack } from '@mui/material';
import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';

// ==============================|| STAT / KPI CARD ||============================== //

export default function StatCard({ title, value, icon: Icon, color = 'primary', trend, caption, accent = false }) {
  const trendUp = typeof trend === 'number' ? trend >= 0 : null;

  return (
    <Card
      sx={{
        height: '100%',
        position: 'relative',
        overflow: 'hidden',
        borderRadius: 3,
        boxShadow: '0 8px 24px rgba(0,0,0,0.03)',
        border: '1px solid rgba(0,0,0,0.04)',
        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
        '&:hover': { transform: 'translateY(-4px)', boxShadow: '0 16px 32px rgba(0,0,0,0.06)' },
        background: (theme) => `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${theme.palette[color].lighter}15 100%)`
      }}
    >
      {Icon && (
        <Box sx={{ position: 'absolute', right: -15, bottom: -15, opacity: 0.04, transform: 'rotate(-15deg)', pointerEvents: 'none' }}>
          <Icon sx={{ fontSize: 110 }} />
        </Box>
      )}
      <CardContent sx={{ p: 2.5, '&:last-child': { pb: 2.5 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
        <Stack direction="row" justifyContent="space-between" alignItems="flex-start" sx={{ mb: 1.5, position: 'relative', zIndex: 2 }}>
          <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.secondary' }}>
            {title}
          </Typography>
          {Icon && (
            <Box
              sx={{
                width: 38,
                height: 38,
                borderRadius: 2,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                bgcolor: `${color}.lighter`,
                color: `${color}.main`,
                boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.05)'
              }}
            >
              <Icon fontSize="small" />
            </Box>
          )}
        </Stack>
        
        <Box sx={{ flexGrow: 1, position: 'relative', zIndex: 2 }}>
          <Typography variant="h4" sx={{ fontWeight: 800, color: 'grey.900', letterSpacing: '-0.5px', lineHeight: 1 }}>
            {value}
          </Typography>
        </Box>

        {(trendUp !== null || caption) && (
          <Stack direction="row" spacing={1} alignItems="center" sx={{ mt: 2, pt: 1.5, borderTop: '1px dashed rgba(0,0,0,0.06)', position: 'relative', zIndex: 2 }}>
            {trendUp !== null && (
              <Stack direction="row" spacing={0.25} alignItems="center" sx={{ bgcolor: trendUp ? 'success.lighter' : 'error.lighter', px: 0.75, py: 0.25, borderRadius: 1 }}>
                {trendUp ? (
                  <ArrowUpwardRoundedIcon sx={{ fontSize: 14, color: 'success.dark' }} />
                ) : (
                  <ArrowDownwardRoundedIcon sx={{ fontSize: 14, color: 'error.dark' }} />
                )}
                <Typography variant="caption" sx={{ fontWeight: 700, color: trendUp ? 'success.dark' : 'error.dark' }}>
                  {Math.abs(trend)}%
                </Typography>
              </Stack>
            )}
            {caption && (
              <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600 }}>
                {caption}
              </Typography>
            )}
          </Stack>
        )}
      </CardContent>
    </Card>
  );
}