import React, { memo, useEffect, useState } from "react";
import { Box, Card, CardContent, Typography, Chip } from "@mui/material";
import { useContext } from "react";
import { DataContext } from "../context/Context";
import ComponentWrapper from "../common/ComponentWrapper";
import { getFieldName } from "../permissions/getFieldName";
import { withJsonFormsControlProps } from "@jsonforms/react";
import { inputProps } from "../interface/inputfieldProps";
import { getComponentProps } from "../common/getComponentProps";
import TrendingUpIcon from '@mui/icons-material/TrendingUp';
import TrendingDownIcon from '@mui/icons-material/TrendingDown';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward'

const MetricCard = memo(function ({
    uischema,
    path,
    data,
    schema,
    rootSchema,
}: inputProps) {
    const uischemaData = uischema?.config?.main;
    const { pageName, permissions, theme, additionalIcons } = useContext(DataContext);
    const fieldName = getFieldName(path);

    const [imageSrc, setImageSrc] = useState(data ? data?.url : uischemaData?.url);

    const label = data?.label || uischemaData?.label || "";
    const value = data?.cardValue || uischemaData?.cardValue || "--";
    const description = data?.description || uischemaData?.description;
    const growthRate = data?.growthRate || uischemaData?.growthRate;
    const color = uischemaData?.color || "#9CA3AF";

    useEffect(() => {
        setImageSrc(data ? data?.url : uischemaData?.url);
    }, [data, uischemaData?.url]);

    const GrowthIcon ={
        positive: TrendingUpIcon,
        negative: TrendingDownIcon
    }[growthRate]

    return (
        <ComponentWrapper
            {...getComponentProps(
                `${pageName}:${fieldName}`,
                permissions,
                schema,
                rootSchema
            )}
        >
            <Card
                sx={{
                    position: 'relative',
                    overflow: 'hidden',
                    borderRadius: 4,
                    border: `2px solid ${color}30`,
                    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                    transition: 'all 0.3s ease',
                    '&:hover': {
                        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
                        transform: 'scale(1.05)',
                    },
                    width: "100%",
                    ...theme.MetricCardStyle,
                    ...uischema?.config?.style,
                }}
            >
                <CardContent sx={{ p: 3, ...uischema?.config?.containerStyle  }}>
                    <Box
                        sx={{
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'space-between',
                            mb: 2,
                        }}
                    >
                        <Typography
                            variant="caption"
                            sx={{
                                fontSize: '0.75rem',
                                fontWeight: 600,
                                color: '#6A7282',
                                textTransform: 'uppercase',
                                letterSpacing: '0.05em',
                                ...uischema?.config?.style?.labelStyle,
                            }}
                        >
                            {label}
                        </Typography>
                        <Box
                            sx={{
                                width: 40,
                                height: 40,
                                borderRadius: 2,
                                backgroundColor: `${color}20`,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                ...uischema?.config?.style?.iconContainerStyle,
                            }}
                        >
                             <Box
                                sx={{
                                    width: 20,
                                    height: 20,
                                    backgroundColor: color,
                                    maskImage: `url(${imageSrc})`,
                                    maskSize: 'contain',
                                    maskRepeat: 'no-repeat',
                                    maskPosition: 'center',
                                    WebkitMaskImage: `url(${imageSrc})`,
                                    WebkitMaskSize: 'contain',
                                    WebkitMaskRepeat: 'no-repeat',
                                    WebkitMaskPosition: 'center',
                                    ...uischema?.config?.style?.iconStyle,
                                }}
                                />
                        </Box>

                    </Box>

                    <Typography
                        variant="h3"
                        sx={{
                            fontSize: '30px',
                            fontWeight: 700,
                            color: color,
                            lineHeight: 1,
                            mb: 2,
                            ...uischema?.config?.style?.valueStyle,
                        }}
                    >
                        {value}
                    </Typography>

                    {description && (
                        <Chip
                            icon={ GrowthIcon ? <GrowthIcon sx={{ fontSize: '14px !important' }} /> : undefined}
                            label={description}
                            size="small"
                            sx={{
                                backgroundColor: color,
                                color: 'white',
                                fontWeight: 600,
                                fontSize: '0.75rem',
                                height: 28,
                                borderRadius: 2,
                                '& .MuiChip-icon': {
                                    color: 'white',
                                    marginLeft: '8px',
                                },
                                ...uischema?.config?.style?.descriptionStyle,
                            }}
                        />
                    )}
                </CardContent>
            </Card>
        </ComponentWrapper>
    );
});


export default withJsonFormsControlProps(MetricCard);