"use client";

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

type WorkingGroupStackedBarRowProps = {
  label: string;
  segments: {
    value: number;
    color: string;
    label?: string | number;
    textColor?: string;
  }[];
  labelWidth?: number;
  rowHeight?: number;
  labelFontSize?: number;
  trackColor?: string;
};

export function WorkingGroupStackedBarRow({
  label,
  segments,
  labelWidth = 250,
  rowHeight = 18,
  labelFontSize = 12,
  trackColor = "transparent",
}: WorkingGroupStackedBarRowProps) {
  const theme = useTheme();
  const total = segments.reduce((sum, segment) => sum + segment.value, 0);

  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: {
          xs: "1fr",
          md: `${labelWidth}px 2px minmax(0, 1fr)`,
        },
        alignItems: "center",
        gap: 1.5,
      }}
    >
      <Typography
        noWrap
        sx={{
          color: theme.palette.text.primary,
          fontSize: labelFontSize,
        }}
      >
        {label}
      </Typography>

      <Box
        sx={{
          display: { xs: "none", md: "block" },
          width: 2,
          alignSelf: "stretch",
          bgcolor:
            theme.palette.mode === "dark"
              ? alpha(theme.palette.common.white, 0.18)
              : "#1f2937",
          borderRadius: 999,
        }}
      />

      <Box
        sx={{
          display: "flex",
          height: rowHeight,
          borderRadius: "4px",
          overflow: "hidden",
          bgcolor: trackColor,
        }}
      >
        {segments
          .filter((segment) => segment.value > 0)
          .map((segment) => {
            const width = total === 0 ? 0 : (segment.value / total) * 100;

            return (
              <Box
                key={`${label}-${segment.color}`}
                sx={{
                  width: `${width}%`,
                  minWidth: segment.label ? 18 : 0,
                  bgcolor: segment.color,
                  color: segment.textColor ?? "#ffffff",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "flex-end",
                  px: 0.5,
                  fontSize: 10,
                  fontWeight: 600,
                  lineHeight: 1,
                }}
              >
                {width >= 8 ? segment.label ?? "" : ""}
              </Box>
            );
          })}
      </Box>
    </Box>
  );
}