"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 MeetingSummaryStatusStyle = {
  color: string;
  backgroundColor: string;
  borderColor: string;
};

// Figma meeting-summary table badges (39044:351921) — 12px medium label,
// 12px radius, 8px x / 2px y padding, 20px height.
export const MEETING_SUMMARY_STATUS_LIGHT_STYLES: Record<
  string,
  MeetingSummaryStatusStyle
> = {
  DRAFT: {
    color: "#717680",
    backgroundColor: "#fafafa",
    borderColor: "#e9eaeb",
  },
  Draft: {
    color: "#717680",
    backgroundColor: "#fafafa",
    borderColor: "#e9eaeb",
  },
  Drafted: {
    color: "#717680",
    backgroundColor: "#fafafa",
    borderColor: "#e9eaeb",
  },
  SUBMITTED: {
    color: "#1a64a8",
    backgroundColor: "#edf8fd",
    borderColor: "#b6dbf6",
  },
  Submitted: {
    color: "#1a64a8",
    backgroundColor: "#edf8fd",
    borderColor: "#b6dbf6",
  },
  REVIEWED: {
    color: "#fec84b",
    backgroundColor: "#fffaeb",
    borderColor: "#f3b129",
  },
  Reviewed: {
    color: "#fec84b",
    backgroundColor: "#fffaeb",
    borderColor: "#f3b129",
  },
  Review: {
    color: "#fec84b",
    backgroundColor: "#fffaeb",
    borderColor: "#f3b129",
  },
  COMPLETED: {
    color: "#32d583",
    backgroundColor: "#ecfdf3",
    borderColor: "#6ce9a6",
  },
  Completed: {
    color: "#32d583",
    backgroundColor: "#ecfdf3",
    borderColor: "#6ce9a6",
  },
  // Progress-report workflow statuses (shared badge reuse).
  Shared: {
    color: "#175cd3",
    backgroundColor: "#eff8ff",
    borderColor: "#b2ddff",
  },
  "Shared with PSWG": {
    color: "#175cd3",
    backgroundColor: "#eff8ff",
    borderColor: "#b2ddff",
  },
  "PSWG Reviewed": {
    color: "#6941c6",
    backgroundColor: "#f9f5ff",
    borderColor: "#e9d7fe",
  },
  "Needs Update": {
    color: "#f79009",
    backgroundColor: "#fffcf5",
    borderColor: "#fef0c7",
  },
  Updating: {
    color: "#f79009",
    backgroundColor: "#fffcf5",
    borderColor: "#fef0c7",
  },
  "Under Review": {
    color: "#f79009",
    backgroundColor: "#fffcf5",
    borderColor: "#fef0c7",
  },
};

export const MEETING_SUMMARY_STATUS_DARK_STYLES: Record<
  string,
  MeetingSummaryStatusStyle
> = {
  DRAFT: {
    color: "#d1d5db",
    backgroundColor: "rgba(255,255,255,0.08)",
    borderColor: "rgba(255,255,255,0.16)",
  },
  Draft: {
    color: "#d1d5db",
    backgroundColor: "rgba(255,255,255,0.08)",
    borderColor: "rgba(255,255,255,0.16)",
  },
  Drafted: {
    color: "#d1d5db",
    backgroundColor: "rgba(255,255,255,0.08)",
    borderColor: "rgba(255,255,255,0.16)",
  },
  SUBMITTED: {
    color: "#60a5fa",
    backgroundColor: "rgba(59,130,246,0.16)",
    borderColor: "rgba(59,130,246,0.35)",
  },
  Submitted: {
    color: "#60a5fa",
    backgroundColor: "rgba(59,130,246,0.16)",
    borderColor: "rgba(59,130,246,0.35)",
  },
  REVIEWED: {
    color: "#fbbf24",
    backgroundColor: "rgba(245,158,11,0.16)",
    borderColor: "rgba(245,158,11,0.35)",
  },
  Reviewed: {
    color: "#fbbf24",
    backgroundColor: "rgba(245,158,11,0.16)",
    borderColor: "rgba(245,158,11,0.35)",
  },
  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)",
  },
  Completed: {
    color: "#4ade80",
    backgroundColor: "rgba(34,197,94,0.16)",
    borderColor: "rgba(34,197,94,0.35)",
  },
  Shared: {
    color: "#60a5fa",
    backgroundColor: "rgba(59,130,246,0.16)",
    borderColor: "rgba(59,130,246,0.35)",
  },
  "Shared with PSWG": {
    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)",
  },
  "Needs Update": {
    color: "#fbbf24",
    backgroundColor: "rgba(245,158,11,0.16)",
    borderColor: "rgba(245,158,11,0.35)",
  },
  Updating: {
    color: "#fbbf24",
    backgroundColor: "rgba(245,158,11,0.16)",
    borderColor: "rgba(245,158,11,0.35)",
  },
  "Under Review": {
    color: "#fbbf24",
    backgroundColor: "rgba(245,158,11,0.16)",
    borderColor: "rgba(245,158,11,0.35)",
  },
};

const LIGHT_FALLBACK: MeetingSummaryStatusStyle = {
  color: "#717680",
  backgroundColor: "#fafafa",
  borderColor: "#e9eaeb",
};

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

const khmerFont =
  '"Kantumruy Pro", "Noto Sans Khmer", "Khmer OS", Arial, sans-serif';

function normalizeMeetingSummaryStatus(status: string) {
  const trimmed = status.trim();
  if (!trimmed) return trimmed;

  switch (trimmed.toUpperCase()) {
    case "DRAFT":
      return "DRAFT";
    case "SUBMITTED":
      return "SUBMITTED";
    case "REVIEWED":
      return "REVIEWED";
    case "COMPLETED":
      return "COMPLETED";
    default:
      return trimmed;
  }
}

export function getMeetingSummaryStatusStyle(
  status: string,
  isDark: boolean,
): MeetingSummaryStatusStyle {
  const map = isDark
    ? MEETING_SUMMARY_STATUS_DARK_STYLES
    : MEETING_SUMMARY_STATUS_LIGHT_STYLES;
  const normalized = normalizeMeetingSummaryStatus(status);

  return map[normalized] ?? map[status] ?? (isDark ? DARK_FALLBACK : LIGHT_FALLBACK);
}

export type MeetingSummaryStatusBadgeProps = {
  status: string;
  label?: string;
  language?: "en" | "kh";
  sx?: SxProps<Theme>;
};

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

export function MeetingSummaryStatusBadge({
  status,
  label,
  language = "en",
  sx,
}: MeetingSummaryStatusBadgeProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const style = getMeetingSummaryStatusStyle(status, isDark);

  return (
    <Box
      sx={[
        {
          minWidth: 105,
          height: 20,
          px: "8px",
          py: "2px",
          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",
          textAlign: "center",
          fontFamily:
            language === "kh" ? khmerFont : theme.typography.fontFamily,
        }}
      >
        {label ?? status}
      </Typography>
    </Box>
  );
}