"use client";

import Box from "@mui/material/Box";
import Tooltip from "@mui/material/Tooltip";
import React from "react";
import { useMasterDataIssueNavCount } from "@/hooks/useMasterDataIssueNavCount";

type Props = {
  enabled: boolean;
};

/** Sidebar red count pill (fixed size, no pulse). */
const MasterDataIssuesNavBadge: React.FC<Props> = ({ enabled }) => {
  const { bomGroupCount, itemGroupCount, totalGroupCount } =
    useMasterDataIssueNavCount(enabled);

  if (!enabled || totalGroupCount <= 0) return null;

  const label = `BOM ${bomGroupCount} 筆 · 貨品 ${itemGroupCount} 筆（共 ${totalGroupCount} 筆）`;
  const display = totalGroupCount > 99 ? "99+" : String(totalGroupCount);

  return (
    <Tooltip title={label} placement="right">
      <Box
        component="span"
        aria-label={label}
        sx={{
          flexShrink: 0,
          minWidth: 22,
          height: 22,
          px: 0.75,
          borderRadius: "11px",
          bgcolor: "error.main",
          color: "error.contrastText",
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          fontSize: "0.75rem",
          fontWeight: 700,
          lineHeight: 1,
        }}
      >
        {display}
      </Box>
    </Tooltip>
  );
};

export default MasterDataIssuesNavBadge;
