import * as React from 'react';
import {
  Card,
  CardContent,
  Stack,
  Typography,
  Avatar,
  Box,
  Chip,
  LinearProgress,
  useTheme,
} from '@mui/material';
import type { SxProps } from '@mui/material/styles';
import { TrendUp as TrendUpIcon, TrendDown as TrendDownIcon } from '@phosphor-icons/react/dist/ssr';

export interface ModernKpiCardProps {
  sx?: SxProps;
  title: string;
  value: string | number;
  icon: React.ReactNode;
  trend?: {
    value: number;
    isPositive: boolean;
    label?: string;
  };
  gradient?: string;
  progress?: number;
  subtitle?: string;
  showProgress?: boolean;
}

export function ModernKpiCard({
  sx,
  title,
  value,
  icon,
  trend,
  gradient = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  progress,
  subtitle,
  showProgress = false,
}: ModernKpiCardProps): React.JSX.Element {
  const theme = useTheme();
  return (
    <Card
      sx={{
        background: theme.palette.mode === 'dark' 
          ? 'linear-gradient(145deg, #1a202c 0%, #2d3748 100%)' 
          : 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
        borderRadius: 4,
        boxShadow: theme.palette.mode === 'dark'
          ? '0 8px 32px rgba(0, 0, 0, 0.3)'
          : '0 8px 32px rgba(0, 0, 0, 0.08)',
        border: theme.palette.mode === 'dark'
          ? '1px solid rgba(255, 255, 255, 0.1)'
          : '1px solid rgba(255, 255, 255, 0.2)',
        position: 'relative',
        overflow: 'hidden',
        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
        '&:hover': {
          transform: 'translateY(-4px)',
          boxShadow: theme.palette.mode === 'dark'
            ? '0 16px 48px rgba(0, 0, 0, 0.4)'
            : '0 16px 48px rgba(0, 0, 0, 0.12)',
        },
        '&::before': {
          content: '""',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: '4px',
          background: gradient,
        },
        ...sx,
      }}
    >
      <CardContent sx={{ p: 3 }}>
        <Stack spacing={2}>
          <Stack direction="row" sx={{ alignItems: 'flex-start', justifyContent: 'space-between' }}>
            <Stack spacing={0.5}>
              <Typography
                color="text.secondary"
                variant="body2"
                sx={{ 
                  fontWeight: 600,
                  textTransform: 'uppercase',
                  letterSpacing: '0.5px',
                  fontSize: '0.75rem'
                }}
              >
                {title}
              </Typography>
              <Typography 
                variant="h3" 
                sx={{ 
                  fontWeight: 700,
                  background: gradient,
                  backgroundClip: 'text',
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                  fontSize: { xs: '1.75rem', sm: '2rem' }
                }}
              >
                {value}
              </Typography>
              {subtitle && (
                <Typography color="text.secondary" variant="body2">
                  {subtitle}
                </Typography>
              )}
            </Stack>
            
            <Avatar
              sx={{
                background: gradient,
                height: 60,
                width: 60,
                boxShadow: '0 8px 24px rgba(0, 0, 0, 0.15)',
                '& svg': {
                  fontSize: '1.5rem',
                }
              }}
            >
              {icon}
            </Avatar>
          </Stack>

          {trend && (
            <Chip
              icon={trend.isPositive ? <TrendUpIcon size={16} /> : <TrendDownIcon size={16} />}
              label={`${trend.isPositive ? '+' : ''}${trend.value}% ${trend.label || 'vs last month'}`}
              size="small"
              color={trend.isPositive ? 'success' : 'error'}
              variant="outlined"
              sx={{
                alignSelf: 'flex-start',
                bgcolor: trend.isPositive ? 'success.50' : 'error.50',
                borderColor: trend.isPositive ? 'success.200' : 'error.200',
                '& .MuiChip-icon': {
                  fontSize: '16px',
                },
              }}
            />
          )}

          {showProgress && progress !== undefined && (
            <Box>
              <Stack direction="row" justifyContent="space-between" alignItems="center" mb={1}>
                <Typography variant="body2" color="text.secondary">
                  Progress
                </Typography>
                <Typography variant="body2" fontWeight={600}>
                  {progress}%
                </Typography>
              </Stack>
              <LinearProgress
                variant="determinate"
                value={progress}
                sx={{
                  height: 8,
                  borderRadius: 4,
                  bgcolor: theme.palette.mode === 'dark' ? 'grey.800' : 'grey.100',
                  '& .MuiLinearProgress-bar': {
                    borderRadius: 4,
                    background: gradient,
                  },
                }}
              />
            </Box>
          )}
        </Stack>
      </CardContent>
    </Card>
  );
}