"use client";

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

export type IssueStatusStyle = {
  color: string;
  backgroundColor: string;
  borderColor: string;
};

// Single source of truth for issue-status colors. Keyed by the status label so
// any table can reuse it. Unknown statuses fall back to a neutral grey.
export const ISSUE_STATUS_LIGHT_STYLES: Record<string, IssueStatusStyle> = {
  Solved: { color: "#3ead46", backgroundColor: "#f6fef9", borderColor: "#d1fadf" },
  "In Progress": { color: "#f79009", backgroundColor: "#fffcf5", borderColor: "#fef0c7" },
  "Not Addressed": { color: "#f04438", backgroundColor: "#fef3f2", borderColor: "#fee4e2" },
  Draft: { color: "#717680", backgroundColor: "#fafafa", borderColor: "#f5f5f5" },
  Saved: { color: "#6941c6", backgroundColor: "#f9f5ff", borderColor: "#e9d7fe" },
  Sent: { color: "#1a64a8", backgroundColor: "#edf8fd", borderColor: "#b6dbf6" },
  "New Submission": { color: "#175cd3", backgroundColor: "#eff8ff", borderColor: "#b2ddff" },
  "New Submitted": { color: "#175cd3", backgroundColor: "#eff8ff", borderColor: "#b2ddff" },
  // Ministry / PSWG per-report workflow statuses.
  Shared: { color: "#175cd3", backgroundColor: "#eff8ff", borderColor: "#b2ddff" },
  "PSWG Reviewed": { color: "#6941c6", backgroundColor: "#f9f5ff", borderColor: "#e9d7fe" },
  Updating: { color: "#f79009", backgroundColor: "#fffcf5", borderColor: "#fef0c7" },
  Submitted: { color: "#1a64a8", backgroundColor: "#edf8fd", borderColor: "#b6dbf6" },
  "Under Review": { color: "#f79009", backgroundColor: "#fffcf5", borderColor: "#fef0c7" },
  Completed: { color: "#027a48", backgroundColor: "#ecfdf3", borderColor: "#abefc6" },
};

export const ISSUE_STATUS_DARK_STYLES: Record<string, IssueStatusStyle> = {
  Solved: { color: "#4ade80", backgroundColor: "rgba(34,197,94,0.16)", borderColor: "rgba(34,197,94,0.35)" },
  "In Progress": { color: "#fbbf24", backgroundColor: "rgba(245,158,11,0.16)", borderColor: "rgba(245,158,11,0.35)" },
  "Not Addressed": { color: "#f87171", backgroundColor: "rgba(239,68,68,0.16)", borderColor: "rgba(239,68,68,0.35)" },
  Draft: { color: "#d1d5db", backgroundColor: "rgba(255,255,255,0.08)", borderColor: "rgba(255,255,255,0.16)" },
  Saved: { color: "#c4b5fd", backgroundColor: "rgba(139,92,246,0.16)", borderColor: "rgba(139,92,246,0.35)" },
  Sent: { color: "#60a5fa", backgroundColor: "rgba(59,130,246,0.16)", borderColor: "rgba(59,130,246,0.35)" },
  "New Submission": { color: "#60a5fa", backgroundColor: "rgba(59,130,246,0.16)", borderColor: "rgba(59,130,246,0.35)" },
  "New Submitted": { color: "#60a5fa", backgroundColor: "rgba(59,130,246,0.16)", borderColor: "rgba(59,130,246,0.35)" },
  // Ministry / PSWG per-report workflow statuses.
  Shared: { color: "#60a5fa", backgroundColor: "rgba(59,130,246,0.16)", borderColor: "rgba(59,130,246,0.35)" },
  "PSWG Reviewed": { color: "#c4b5fd", backgroundColor: "rgba(139,92,246,0.16)", borderColor: "rgba(139,92,246,0.35)" },
  Updating: { color: "#fbbf24", backgroundColor: "rgba(245,158,11,0.16)", borderColor: "rgba(245,158,11,0.35)" },
  Submitted: { color: "#60a5fa", backgroundColor: "rgba(59,130,246,0.16)", borderColor: "rgba(59,130,246,0.35)" },
  "Under Review": { color: "#fbbf24", backgroundColor: "rgba(245,158,11,0.16)", borderColor: "rgba(245,158,11,0.35)" },
  Completed: { color: "#4ade80", backgroundColor: "rgba(34,197,94,0.16)", borderColor: "rgba(34,197,94,0.35)" },
};

const LIGHT_FALLBACK: IssueStatusStyle = {
  color: "#717680",
  backgroundColor: "#fafafa",
  borderColor: "#f5f5f5",
};

const DARK_FALLBACK: IssueStatusStyle = {
  color: "#d1d5db",
  backgroundColor: "rgba(255,255,255,0.08)",
  borderColor: "rgba(255,255,255,0.16)",
};

// Resolve the themed style for a status, falling back to neutral grey.
export function getIssueStatusStyle(
  status: string,
  isDark: boolean,
): IssueStatusStyle {
  const map = isDark ? ISSUE_STATUS_DARK_STYLES : ISSUE_STATUS_LIGHT_STYLES;
  return map[status] ?? (isDark ? DARK_FALLBACK : LIGHT_FALLBACK);
}

export type IssueStatusBadgeProps = {
  // The status key used for color lookup (e.g. "In Progress", "Saved").
  status: string;
  // Optional display text. Defaults to the status (pass a translated label here).
  label?: string;
  sx?: SxProps<Theme>;
};

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

// Reusable issue-status pill badge (theme-aware). Drop into any table cell.
export function IssueStatusBadge({ status, label, sx }: IssueStatusBadgeProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const style = getIssueStatusStyle(status, isDark);

  return (
    <Box
      sx={[
        {
          minWidth: 112,
          height: 20,
          px: 1,
          borderRadius: "12px",
          border: `1px solid ${style.borderColor}`,
          bgcolor: style.backgroundColor,
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
        },
        ...getSxArray(sx),
      ]}
    >
      <Typography
        sx={{
          color: style.color,
          fontSize: 12,
          fontWeight: 500,
          lineHeight: 1,
          whiteSpace: "nowrap",
        }}
      >
        {label ?? status}
      </Typography>
    </Box>
  );
}