FPSMS-frontend/src/components/Breadcrumb/Breadcrumb.tsx

"use client";

import Breadcrumbs from "@mui/material/Breadcrumbs";
import Typography from "@mui/material/Typography";
import Link from "next/link";
import MUILink from "@mui/material/Link";
import { usePathname } from "next/navigation";
import { useTranslation } from "react-i18next";

const pathToLabelMap: { [path: string]: string } = {
  "": "總覽",
  "/chart": "圖表報告",
  "/chart/warehouse": "庫存與倉儲",
  "/chart/purchase": "採購",
  "/chart/delivery": "發貨與配送",
  "/chart/joborder": "工單",
  "/chart/joborder/board": "工單即時看板",
  "/chart/forecast": "預測與計劃",
  "/projects": "Projects",
  "/projects/create": "Create Project",
  "/tasks": "Task Template",
  "/tasks/create": "Create Task Template",
  "/settings/qcItem": "Qc Item",
  "/settings/qcItemAll": "QC Item All",
  "/settings/qrCodeHandle": "QR Code Handle",
  "/settings/rss": "Demand Forecast Setting",
  "/settings/equipment": "Equipment",
  "/settings/equipment/MaintenanceEdit": "MaintenanceEdit",
  "/settings/shop": "ShopAndTruck",
  "/settings/shop/board": "Route Board",
  "/settings/shop/detail": "Shop Detail",
  "/settings/shop/truckdetail": "Truck Lane Detail",
  "/settings/printer": "Printer",
  "/scheduling/rough": "Demand Forecast",
  "/scheduling/rough/edit": "FG & Material Demand Forecast Detail",
  "/scheduling/detailed": "Detail Scheduling",
  "/scheduling/detailed/edit": "FG Production Schedule",
  "/inventory": "Inventory",
  "/settings/importTesting": "Import Testing",
  "/do": "Delivery Order",
  "/doworkbench": "DO Workbench",
  "/doworkbenchsearch": "DO Workbench Search",
  "/doworkbench/pick": "DO Workbench pick",
  "/doworkbench/edit": "DO Workbench detail",
  "/pickOrder": "Pick Order",
  "/po": "Purchase Order",
  "/po/workbench": "PO Workbench",
  "/dashboard": "dashboard",
  "/jo": "Job Order",
  "/jo/edit": "Edit Job Order",
  "/jo/testing": "Job order testing",
  "/jo/workbench": "Job Order Workbench",
  "/putAway": "Put Away",
  "/stockIssue": "Stock Issue",
  "/report": "Report",
  "/m18Syn": "M18 Sync",
  "/bagPrint": "打袋機",
  "/laserPrint": "檸檬機(激光機)",
  "/settings/itemPrice": "Price Inquiry",
  "/finishedGood": "Finished Good Order",
  "/finishedGood/management": "Finished Good Management",
};

const Breadcrumb = () => {
  const pathname = usePathname();
  const segments = pathname.split("/");
  const { t } = useTranslation("common");

  return (
    <Breadcrumbs>
      {segments.map((segment, index) => {
        const href = segments.slice(0, index + 1).join("/");
        const label = pathToLabelMap[href] || segment;

        if (index === segments.length - 1) {
          return (
            <Typography key={index} color="text.primary">
              {t(label)}
            </Typography>
          );
        } else {
          return (
            <MUILink
              underline="hover"
              color="inherit"
              key={index}
              component={Link}
              href={href || "/"}
            >
              {t(label)}
            </MUILink>
          );
        }
      })}
    </Breadcrumbs>
  );
};

export default Breadcrumb;