/* eslint-disable react/no-danger */
import React, { isValidElement } from 'react';
import { Box, Link, Card, CardContent } from '@mui/material';
import PropTypes from 'prop-types';
import { Icon } from '@iconify/react';
import styled from '@emotion/styled';
import Skeleton from '@mui/material/Skeleton';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function Metric({
  icon = undefined,
  value,
  name,
  url = '',
  animated = false,
  LinkComponent = Link,
  loading = false
}) {
  const renderIcon = () => {
    if (/*#__PURE__*/React.isValidElement(icon)) {
      return icon;
    }
    return /*#__PURE__*/_jsx(Box, {
      component: Icon,
      icon: icon,
      alt: typeof name === 'string' ? name : '',
      sx: {
        fontSize: 30
      }
    });
  };
  const metricContent = /*#__PURE__*/_jsxs(CardContent, {
    className: "metric__content",
    children: [icon && /*#__PURE__*/_jsx(Box, {
      className: "metric__icon",
      children: renderIcon()
    }), /*#__PURE__*/_jsx(Box, {
      className: "metric__title",
      children: name
    }), /*#__PURE__*/_jsx(Box, {
      className: "metric__value",
      children: /*#__PURE__*/isValidElement(value) ? /*#__PURE__*/_jsx(Box, {
        className: `metric__number ${animated ? 'metric__number--animated' : ''}`,
        children: value
      }) : /*#__PURE__*/_jsx(Box, {
        className: `metric__number ${animated ? 'metric__number--animated' : ''}`,
        dangerouslySetInnerHTML: {
          __html: value
        }
      })
    })]
  });
  if (loading) {
    return /*#__PURE__*/_jsx(StyledCard, {
      variant: "outlined",
      children: /*#__PURE__*/_jsxs(CardContent, {
        className: "metric__content",
        children: [icon && /*#__PURE__*/_jsx(Box, {
          className: "metric__icon",
          children: /*#__PURE__*/_jsx(Skeleton, {
            variant: "circular",
            width: 40,
            height: 40
          })
        }), /*#__PURE__*/_jsx(Skeleton, {
          className: "metric__title",
          variant: "rounded",
          width: 120,
          height: 20,
          sx: {
            mb: 1
          }
        }), /*#__PURE__*/_jsx(Skeleton, {
          className: `metric__number ${animated ? 'metric__number--animated' : ''}`,
          variant: "rounded",
          width: 100,
          height: "32px"
        })]
      })
    });
  }
  return /*#__PURE__*/_jsx(StyledCard, {
    variant: "outlined",
    children: url ? /*#__PURE__*/_jsx(LinkComponent, {
      href: url,
      sx: {
        textDecoration: 'none',
        color: 'inherit'
      },
      children: metricContent
    }) : metricContent
  });
}
Metric.propTypes = {
  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
  name: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
  url: PropTypes.string,
  animated: PropTypes.bool,
  LinkComponent: PropTypes.elementType,
  loading: PropTypes.bool
};
const StyledCard = styled(Card)`
  height: 100%;
  transition:
    box-shadow 0.2s ease-in-out,
    transform 0.2s ease-in-out;

  &:hover {
    box-shadow: ${props => props.theme.shadows[4]};
  }

  .metric__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    height: 100%;

    @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
      padding: 16px;
      gap: 8px;
    }
  }

  .metric__icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 4px;
    width: 100%;

    /* Preserve original icon styles, only ensure minimum size */
    > * {
      min-width: 32px;
      min-height: 32px;

      @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
        min-width: 24px;
        min-height: 24px;
      }
    }
  }

  .metric__title {
    font-size: 14px;
    font-weight: 500;
    color: ${props => props.theme.palette.text.secondary};
    text-transform: capitalize;
    line-height: 1.4;
    width: 100%;

    @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
      font-size: 12px;
    }
  }

  .metric__value {
    width: 100%;
    margin-top: auto;
  }

  .metric__number {
    font-size: ${props => props.size === 'small' ? 28 : 32}px;
    font-weight: 600;
    line-height: 1.2;
    color: ${props => props.theme.typography.color.main};

    small {
      font-size: 14px;
      line-height: 1.2;
      font-weight: 400;
      color: ${props => props.theme.palette.text.secondary};
      margin-left: 4px;
    }

    @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
      font-size: ${props => props.size === 'small' ? 20 : 24}px;

      small {
        font-size: 12px;
      }
    }
  }

  .metric__number--animated {
    animation-name: blink-opacity;
    animation-duration: 250ms;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    background-color: transparent !important;
  }

  @keyframes blink-opacity {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.3;
    }
    100% {
      opacity: 1;
    }
  }
`;