"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";
import Clock from "./Clock";
import { Box, Grid } from "@mui/material";
import { I18nProvider } from "@/i18n";

const pathToLabelMap: { [path: string]: string } = {
  "": "Overview",
  "/home": "User Workspace",
  "/changepassword": "Change Password",
  "/dashboard": "Dashboard",
  "/dashboard/CompanyTeamCashFlow": "Company / Team Cash Flow",
  "/dashboard/ProjectCashFlow": "Project Cash Flow",
  "/dashboard/ProjectFinancialSummary": "Financial Summary",
  "/dashboard/ProjectResourceSummary": "Project Resource Summary",
  "/dashboard/ProjectStatusByClient": "Project Status by Client",
  "/dashboard/ProjectStatusByTeam": "Project Status by Team",
  "/dashboard/ProjectResourceConsumptionRanking": "Project Resource Consumption Ranking",
  "/dashboard/StaffUtilization": "Staff Utilization",
  "/projects": "Project Management",
  "/projects/create": "Create Project",
  "/projects/createSub": "Sub Project",
  "/projects/edit": "Edit Project",
  "/projects/editSub": "Sub Project",
  "/tasks": "Task Template",
  "/tasks/create": "Create Task Template",
  "/staffReimbursement": "Staff Reimbursement",
  "/settings/customer": "Client",
  "/settings/customer/create": "Create Client",
  "/settings/customer/edit": "Edit Client",
  "/settings/subsidiary": "Subsidiary",
  "/settings/subsidiary/create": "Create Subsidiary",
  "/settings/subsidiary/edit": "Edit Subsidiary",
  "/settings/staff": "Staff",
  "/settings/staff/create": "Create Staff",
  "/settings/staff/edit": "Edit Staff",
  "/settings/staff/user": "Edit User",
  "/settings": "Settings",
  "/company": "Company",
  "/settings/company": "Company",
  "/settings/company/edit": "Edit Company",
  "/settings/company/create": "Create Company",
  "/settings/skill": "Skill",
  "/settings/skill/edit": "Edit Skill",
  "/settings/skill/create": "Create Skill",
  "/settings/department": "Department",
  "/settings/department/new": "Create Department",
  "/settings/department/edit": "Edit Department",
  "/settings/position": "Position",
  "/settings/position/edit": "Edit Position",
  "/settings/position/new": "Create Position",
  "/settings/salary": "Salary",
  "/settings/team": "Team",
  "/settings/team/edit": "Edit Team",
  "/settings/team/create": "Create Team",
  "/settings/group": "User Group",
  "/settings/group/edit": "Edit User Group",
  "/settings/group/create": "Create User Group",
  "/settings/holiday": "Company Holiday",
  "/settings/mail": "Mail",
  "/analytics": "Analysis Report",
  "/analytics/LateStartReport": "Late Start Report",
  "/analytics/ProjectPotentialDelayReport": "Project Potential Delay Report",
  "/analytics/ResourceOverconsumptionReport": "Project Resource Overconsumption Report",
  "/analytics/CostandExpenseReport": "Cost and Expense Report",
  "/analytics/ProjectCompletionReport": "Project Completion Report",
  "/analytics/ProjectPandLReport": "Project P&L Report",
  "/analytics/FinancialStatusReport": "Financial Status Report",
  "/analytics/ProjectCashFlowReport": "Project Cash Flow Report",
  "/analytics/StaffMonthlyWorkHoursAnalysisReport": "Staff Monthly Work Hours Analysis Report",
  "/analytics/ProjectManhourSummaryReport": "Project Manhour Summary Monthly Report",
  "/analytics/ProjectMonthlyReport": "Project Manhour Summary Daily Report",
  "/analytics/LastModifiedReport": "Staff Last Record Report",
  "/analytics/CrossTeamChargeReport": "Cross Team Charge Report",
  "/invoice": "Invoice",
};

const Breadcrumb = () => {
  const pathname = usePathname();
  const segments = pathname.split("/");

  //const { t } = useTranslation("customer");
  const { t } = useTranslation("common");

  return (
    <Box
      display="flex"
      flexDirection={{ xs: "column-reverse", sm: "row"}}
      justifyContent={{ sm: "space-between" }}
    >
      <Breadcrumbs>
        {segments.map((segment, index) => {
          const href = segments.slice(0, index + 1).join("/");
          // const label = pathToLabelMap[href] || segment;
          const originalLabel = pathToLabelMap[href] || segment;
          const label = t(originalLabel, originalLabel);

          if (index === segments.length - 1) {
            return (
              <Typography key={index} color="text.primary">
                {label}
                {/* {t(label)} */}
              </Typography>
            );
          } else {
            return (
              <MUILink
                underline="hover"
                color="inherit"
                key={index}
                component={Link}
                href={href || "/"}
              >
                {label}
              </MUILink>
            );
          }
        })}
      </Breadcrumbs>
      <Box width={{ xs: "100%", sm: "auto" }} marginBlockEnd={{ xs: 1, sm: 0 }}>
        <Clock variant="body2" />
      </Box>
    </Box>
  );
};

export default Breadcrumb;
