import React from 'react';
import {
  Box,
  Card,
  CardActionArea,
  CardContent,
  Skeleton,
  Typography,
  Alert,
} from '@mui/material';
import InboxIcon from '@mui/icons-material/Inbox';
import type { SxProps, Theme } from '@mui/material/styles';

export interface WidgetCardProps {
  title: string;
  icon?: React.ReactNode;
  action?: React.ReactNode;
  isLoading?: boolean;
  isError?: boolean;
  errorMessage?: string;
  isEmpty?: boolean;
  emptyMessage?: string;
  emptyIcon?: React.ReactNode;
  onClick?: () => void;
  skeleton?: React.ReactNode;
  children?: React.ReactNode;
  noPadding?: boolean;
  footer?: React.ReactNode;
  sx?: SxProps<Theme>;
}

/** Universal dashboard widget wrapper with loading/error/empty states. */
export const WidgetCard: React.FC<WidgetCardProps> = ({
  title,
  icon,
  action,
  isLoading = false,
  isError = false,
  errorMessage = 'Fehler beim Laden',
  isEmpty = false,
  emptyMessage = 'Keine Einträge',
  emptyIcon,
  onClick,
  skeleton,
  children,
  noPadding = false,
  footer,
  sx,
}) => {
  const header = (
    <Box
      sx={noPadding ? { px: 2.5, pt: 2.5 } : undefined}
    >
      <Box
        display="flex"
        alignItems="center"
        justifyContent="space-between"
        mb={1.5}
      >
        <Box display="flex" alignItems="center" gap={0.75}>
          {icon && (
            <Box sx={{
              bgcolor: 'primary.main',
              borderRadius: 1.5,
              p: 0.5,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: 'white',
              '& > *': { fontSize: '1rem' },
            }}>
              {icon}
            </Box>
          )}
          <Typography variant="subtitle2" fontWeight={600} color="text.secondary" sx={{ textTransform: 'uppercase', fontSize: '0.6875rem', letterSpacing: '0.06em' }}>
            {title}
          </Typography>
        </Box>
        {action}
      </Box>
    </Box>
  );

  const renderContent = () => {
    if (isLoading) {
      return skeleton ?? (
        <Box>
          <Skeleton animation="wave" height={20} sx={{ mb: 1 }} />
          <Skeleton animation="wave" height={20} sx={{ mb: 1 }} />
          <Skeleton animation="wave" height={20} width="60%" />
        </Box>
      );
    }

    if (isError) {
      return (
        <Alert severity="error" variant="outlined" sx={{ border: 'none' }}>
          {errorMessage}
        </Alert>
      );
    }

    if (isEmpty) {
      return (
        <Box
          display="flex"
          flexDirection="column"
          alignItems="center"
          justifyContent="center"
          py={4}
          color="text.secondary"
        >
          {emptyIcon ?? <InboxIcon sx={{ fontSize: 40, mb: 1, opacity: 0.5 }} />}
          <Typography variant="body2" color="text.secondary">
            {emptyMessage}
          </Typography>
        </Box>
      );
    }

    return children;
  };

  const cardContent = (
    <>
      {header}
      <Box sx={noPadding ? { px: 0 } : undefined}>
        {renderContent()}
      </Box>
      {footer && (
        <>
          <Box sx={{ mt: 2, pt: 1.5, borderTop: '1px solid', borderColor: 'divider', ...(noPadding ? { mx: 2.5, pb: 2.5 } : {}) }}>
            {footer}
          </Box>
        </>
      )}
    </>
  );

  const cardContentSx = noPadding
    ? { p: 0, '&:last-child': { pb: 0 } }
    : { p: 2.5, '&:last-child': { pb: 2.5 } };

  return (
    <Card sx={{ height: '100%', ...sx }}>
      {onClick ? (
        <CardActionArea onClick={onClick} sx={{ height: '100%' }}>
          <CardContent sx={cardContentSx}>
            {cardContent}
          </CardContent>
        </CardActionArea>
      ) : (
        <CardContent sx={cardContentSx}>
          {cardContent}
        </CardContent>
      )}
    </Card>
  );
};
