"use client";

import { Box, Tabs, Tab, Typography } from "@mui/material";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import PickExecutionIssuesTab from "./PickExecutionIssuesTab";
import StockTakeTab from "./StockTakeTab";
import InventoryAdjustmentsTab from "./InventoryAdjustmentsTab";

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`inventory-management-tabpanel-${index}`}
      aria-labelledby={`inventory-management-tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ py: 3 }}>{children}</Box>}
    </div>
  );
}

const StockTakeManagement: React.FC = () => {
  const { t } = useTranslation(["stockTake", "common"]);
  const [currentTab, setCurrentTab] = useState(0);

  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
    setCurrentTab(newValue);
  };

  return (
    <Box sx={{ width: "100%" }}>
      <Typography variant="h4" sx={{ mb: 3 }}>
        {t("Stock Take Management")}
      </Typography>

      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Tabs value={currentTab} onChange={handleTabChange}>
          <Tab label={t("Pick Execution Issues")} />
          <Tab label={t("Stock Take")} />
          <Tab label={t("Inventory Adjustments")} />
        </Tabs>
      </Box>

      <TabPanel value={currentTab} index={0}>
        <PickExecutionIssuesTab />
      </TabPanel>

      <TabPanel value={currentTab} index={1}>
        <StockTakeTab />
      </TabPanel>

      <TabPanel value={currentTab} index={2}>
        <InventoryAdjustmentsTab />
      </TabPanel>
    </Box>
  );
};

export default StockTakeManagement;