"use client";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";
import type { SxProps, Theme } from "@mui/material/styles";

export type StatusBadgeValue =
  | "In Progress"
  | "Solved"
  | "Draft"
  | "New Submission"
  | "Not Addressed"
  | "Active"
  | "Inactive";

type BadgeColor = {
  dotColor: string;
  textColor: string;
  backgroundColor: string;
  borderColor: string;
};

type AppStatusBadgeProps = {
  status: StatusBadgeValue | string;
  label?: string;
  sx?: SxProps<Theme>;
};

const lightStatusColors: Record<StatusBadgeValue, BadgeColor> = {
  "In Progress": {
    dotColor: "#f79009",
    textColor: "#414651",
    backgroundColor: "#ffffff",
    borderColor: "#d5d7da",
  },
  Solved: {
    dotColor: "#17b26a",
    textColor: "#414651",
    backgroundColor: "#ffffff",
    borderColor: "#d5d7da",
  },
  Draft: {
    dotColor: "#717680",
    textColor: "#414651",
    backgroundColor: "#ffffff",
    borderColor: "#d5d7da",
  },
  "New Submission": {
    dotColor: "#175cd3",
    textColor: "#414651",
    backgroundColor: "#ffffff",
    borderColor: "#d5d7da",
  },
  "Not Addressed": {
    dotColor: "#f04438",
    textColor: "#414651",
    backgroundColor: "#ffffff",
    borderColor: "#d5d7da",
  },
  Active: {
    dotColor: "#17b26a",
    textColor: "#414651",
    backgroundColor: "#ffffff",
    borderColor: "#d5d7da",
  },
  Inactive: {
    dotColor: "#f04438",
    textColor: "#414651",
    backgroundColor: "#ffffff",
    borderColor: "#d5d7da",
  },
};

const darkStatusColors: Record<StatusBadgeValue, BadgeColor> = {
  "In Progress": {
    dotColor: "#fbbf24",
    textColor: "#d1d5db",
    backgroundColor: "rgba(245,158,11,0.16)",
    borderColor: "rgba(245,158,11,0.35)",
  },
  Solved: {
    dotColor: "#4ade80",
    textColor: "#d1d5db",
    backgroundColor: "rgba(34,197,94,0.16)",
    borderColor: "rgba(34,197,94,0.35)",
  },
  Draft: {
    dotColor: "#d1d5db",
    textColor: "#d1d5db",
    backgroundColor: "rgba(255,255,255,0.08)",
    borderColor: "rgba(255,255,255,0.16)",
  },
  "New Submission": {
    dotColor: "#60a5fa",
    textColor: "#d1d5db",
    backgroundColor: "rgba(59,130,246,0.16)",
    borderColor: "rgba(59,130,246,0.35)",
  },
  "Not Addressed": {
    dotColor: "#f87171",
    textColor: "#d1d5db",
    backgroundColor: "rgba(239,68,68,0.16)",
    borderColor: "rgba(239,68,68,0.35)",
  },
  Active: {
    dotColor: "#4ade80",
    textColor: "#d1d5db",
    backgroundColor: "rgba(34,197,94,0.16)",
    borderColor: "rgba(34,197,94,0.35)",
  },
  Inactive: {
    dotColor: "#f87171",
    textColor: "#d1d5db",
    backgroundColor: "rgba(239,68,68,0.16)",
    borderColor: "rgba(239,68,68,0.35)",
  },
};

function getSxArray(sx?: SxProps<Theme>) {
  if (!sx) return [];

  return Array.isArray(sx) ? sx : [sx];
}

function toTitleCase(value: string) {
  return value
    .replace(/[-_]/g, " ")
    .split(" ")
    .filter(Boolean)
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join(" ");
}

function normalizeStatus(status: string): StatusBadgeValue | null {
  const cleanStatus = toTitleCase(status.trim());

  if (cleanStatus === "In Progress") return "In Progress";
  if (cleanStatus === "Solved" || cleanStatus === "Solve") return "Solved";
  if (cleanStatus === "Draft") return "Draft";
  if (cleanStatus === "New Submission") return "New Submission";
  if (cleanStatus === "Not Addressed") return "Not Addressed";
  if (cleanStatus === "Active") return "Active";
  if (cleanStatus === "Inactive") return "Inactive";

  return null;
}

export function AppStatusBadge({ status, label, sx }: AppStatusBadgeProps) {
  const theme = useTheme();
  const normalizedStatus = normalizeStatus(status);
  const isDark = theme.palette.mode === "dark";
  const colorMap = isDark ? darkStatusColors : lightStatusColors;
  const fallbackColor: BadgeColor = {
    dotColor: isDark ? "#d1d5db" : "#717680",
    textColor: isDark ? "#d1d5db" : "#414651",
    backgroundColor: isDark ? alpha("#ffffff", 0.08) : "#fafafa",
    borderColor: isDark ? alpha("#ffffff", 0.16) : "#d5d7da",
  };
  const color = normalizedStatus ? colorMap[normalizedStatus] : fallbackColor;
  const displayLabel = label ?? normalizedStatus ?? toTitleCase(status);

  return (
    <Box
      sx={[
        {
          minWidth: 0,
          height: 24,
          px: "6px",
          py: "2px",
          gap: "4px",
          borderRadius: "6px",
          border: `1px solid ${color.borderColor}`,
          bgcolor: color.backgroundColor,
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          boxShadow: isDark ? "none" : "0px 1px 2px rgba(10, 13, 18, 0.05)",
        },
        ...getSxArray(sx),
      ]}
    >
      <Box
        sx={{
          width: 8,
          height: 8,
          borderRadius: "999px",
          bgcolor: color.dotColor,
          flexShrink: 0,
        }}
      />

      <Typography
        sx={{
          color: color.textColor,
          fontSize: 12,
          fontWeight: 500,
          lineHeight: "18px",
          textAlign: "center",
          whiteSpace: "nowrap",
        }}
      >
        {displayLabel}
      </Typography>
    </Box>
  );
}