"use client";

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

import { WorkingGroupChartCard } from "@/features/pswg/working-group/components/charts/working-group-chart-card";
import { ExportIconButton } from "@/features/pswg/working-group/components/charts/export-icon-button";
import { categoryRows } from "@/features/pswg/working-group/working-group-data";

const growX = keyframes`
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
`;

const fadeInText = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;

type CategoryBarProps = {
  label: string;
  value: number;
  index: number;
};

function CategoryBar({ label, value, index }: CategoryBarProps) {
  const theme = useTheme();
  const delay = index * 0.06;
  const widthPercent = `${(value / 6) * 100}%`;

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

      <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
        <Box
          sx={{
            width: "100%",
            height: 20,
            bgcolor:
              theme.palette.mode === "dark"
                ? alpha(theme.palette.common.white, 0.08)
                : "#edf2f7",
            borderRadius: "4px",
            overflow: "hidden",
          }}
        >
          <Box
            sx={{
              width: widthPercent,
              minWidth: value > 0 ? 22 : 0,
              height: "100%",
              position: "relative",
              overflow: "hidden",
            }}
          >
            <Box
              sx={{
                position: "absolute",
                inset: 0,
                bgcolor:
                  theme.palette.mode === "dark"
                    ? alpha(theme.palette.primary.main, 0.8)
                    : "#173f67",
                transform: value > 0 ? "scaleX(0)" : "none",
                transformOrigin: "left center",
                animation: value > 0 ? `${growX} 0.55s ease forwards` : undefined,
                animationDelay: `${delay}s`,
              }}
            />

            <Box
              sx={{
                position: "relative",
                zIndex: 1,
                width: "100%",
                height: "100%",
                color: "#ffffff",
                display: "flex",
                alignItems: "center",
                justifyContent: "flex-end",
                px: 1,
                fontSize: 10,
                fontWeight: 600,
                opacity: value > 0 ? 0 : 1,
                animation: value > 0 ? `${fadeInText} 0.2s ease forwards` : undefined,
                animationDelay: `${delay + 0.25}s`,
              }}
            >
              {value > 0 ? value : ""}
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}

export function CategoryIssuesCard() {
  const theme = useTheme();

  return (
    <WorkingGroupChartCard title="Category of Issues" action={<ExportIconButton />}>
      <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
        {categoryRows.map((row, index) => (
          <CategoryBar
            key={row.label}
            label={row.label}
            value={row.value}
            index={index}
          />
        ))}
      </Box>

      <Box
        sx={{
          mt: 2,
          display: "flex",
          justifyContent: "space-between",
          pl: { xs: 0, md: "124px" },
          color: theme.palette.text.secondary,
          fontSize: 11,
        }}
      >
        <span>0</span>
        <span>2</span>
        <span>4</span>
        <span>6</span>
      </Box>
    </WorkingGroupChartCard>
  );
}