"use client";

import { Chip } from "@mui/material";
import { alpha, useTheme } from "@mui/material/styles";

import type { RgcDecisionStatus } from "../rgc-decision-data";

const LIGHT_COLORS: Record<
    RgcDecisionStatus,
    { color: string; bgcolor: string; borderColor: string }
> = {
    Solved: {
        color: "#16A34A",
        bgcolor: "#ECFDF3",
        borderColor: "#BBF7D0",
    },
    "In Progress": {
        color: "#F59E0B",
        bgcolor: "#FFFBEB",
        borderColor: "#FDE68A",
    },
    "Not Addressed": {
        color: "#DC2626",
        bgcolor: "#FEF2F2",
        borderColor: "#FECACA",
    },
};

const DARK_COLORS: Record<
    RgcDecisionStatus,
    { color: string; bgcolor: string; borderColor: string }
> = {
    Solved: {
        color: "#86EFAC",
        bgcolor: "rgba(22, 163, 74, 0.16)",
        borderColor: "rgba(134, 239, 172, 0.36)",
    },
    "In Progress": {
        color: "#FCD34D",
        bgcolor: "rgba(245, 158, 11, 0.16)",
        borderColor: "rgba(252, 211, 77, 0.38)",
    },
    "Not Addressed": {
        color: "#FCA5A5",
        bgcolor: "rgba(220, 38, 38, 0.16)",
        borderColor: "rgba(252, 165, 165, 0.38)",
    },
};

export function RgcDecisionStatusChip({ status }: { status: RgcDecisionStatus }) {
    const theme = useTheme();
    const styles =
        theme.palette.mode === "dark" ? DARK_COLORS[status] : LIGHT_COLORS[status];

    return (
        <Chip
            label={status}
            variant="outlined"
            sx={{
                minWidth: 80,
                height: 18,
                color: `${styles.color} !important`,
                bgcolor: styles.bgcolor,
                borderColor: styles.borderColor,
                fontSize: 10,
                fontWeight: 700,
                borderRadius: 99,
                "& .MuiChip-label": {
                    px: 1.2,
                },
            }}
        />
    );
}

export default RgcDecisionStatusChip;