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

// Figma badge (38290:316329) — 12px medium label, 12px radius, 8px x / 2px y padding.
export const MEETING_REQUEST_STATUS_LIGHT_STYLES: Record<
  string,
  MeetingRequestStatusStyle
> = {
  Draft: { color: "#f04438", backgroundColor: "#fef3f2", borderColor: "#fee4e2" },
  Drafted: { color: "#f04438", backgroundColor: "#fef3f2", borderColor: "#fee4e2" },
  "Under Review": {
    color: "#f79009",
    backgroundColor: "#fffaeb",
    borderColor: "#fedf89",
  },
  Submitted: {
    color: "#12b76a",
    backgroundColor: "#ecfdf3",
    borderColor: "#d1fadf",
  },
  Scheduled: {
    color: "#667085",
    backgroundColor: "#f9fafb",
    borderColor: "#eaecf0",
  },
  Completed: {
    color: "#1a64a8",
    backgroundColor: "#eff8ff",
    borderColor: "#b2ddff",
  },
};

export const MEETING_REQUEST_STATUS_DARK_STYLES: Record<
  string,
  MeetingRequestStatusStyle
> = {
  Draft: {
    color: "#f87171",
    backgroundColor: "rgba(239,68,68,0.16)",
    borderColor: "rgba(239,68,68,0.35)",
  },
  Drafted: {
    color: "#f87171",
    backgroundColor: "rgba(239,68,68,0.16)",
    borderColor: "rgba(239,68,68,0.35)",
  },
  "Under Review": {
    color: "#fbbf24",
    backgroundColor: "rgba(245,158,11,0.16)",
    borderColor: "rgba(245,158,11,0.35)",
  },
  Submitted: {
    color: "#4ade80",
    backgroundColor: "rgba(34,197,94,0.16)",
    borderColor: "rgba(34,197,94,0.35)",
  },
  Scheduled: {
    color: "#d1d5db",
    backgroundColor: "rgba(255,255,255,0.08)",
    borderColor: "rgba(255,255,255,0.16)",
  },
  Completed: {
    color: "#60a5fa",
    backgroundColor: "rgba(59,130,246,0.16)",
    borderColor: "rgba(59,130,246,0.35)",
  },
};

const LIGHT_FALLBACK: MeetingRequestStatusStyle = {
  color: "#717680",
  backgroundColor: "#f5f5f5",
  borderColor: "#e9eaeb",
};

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

function normalizeMeetingRequestStatus(status: string) {
  if (status === "Draft") return "Drafted";
  return status;
}

export function getMeetingRequestStatusStyle(
  status: string,
  isDark: boolean,
): MeetingRequestStatusStyle {
  const map = isDark
    ? MEETING_REQUEST_STATUS_DARK_STYLES
    : MEETING_REQUEST_STATUS_LIGHT_STYLES;
  const normalized = normalizeMeetingRequestStatus(status);

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

export type MeetingRequestStatusBadgeProps = {
  status: string;
  label?: string;
  sx?: SxProps<Theme>;
};

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

export function MeetingRequestStatusBadge({
  status,
  label,
  sx,
}: MeetingRequestStatusBadgeProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const style = getMeetingRequestStatusStyle(status, isDark);

  return (
    <Box
      sx={[
        {
          minWidth: 96,
          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",
        }}
      >
        {label ?? status}
      </Typography>
    </Box>
  );
}