"use client";

import React, { useCallback, useRef, useState } from "react";
import { Box, Tab, Tabs } from "@mui/material";
import { useTranslation } from "react-i18next";
import type { MasterDataIssue } from "@/app/api/masterDataIssues";
import {
  fetchBomMasterDataIssuesClient,
  fetchItemMasterDataIssuesClient,
} from "@/app/api/masterDataIssues/client";
import MasterDataIssuesPanel from "./MasterDataIssuesPanel";

const MasterDataIssuesTabs: React.FC = () => {
  const { t } = useTranslation("masterDataIssue");
  const [tab, setTab] = useState(0);
  const [bomIssues, setBomIssues] = useState<MasterDataIssue[]>([]);
  const [itemIssues, setItemIssues] = useState<MasterDataIssue[]>([]);
  const [bomLoading, setBomLoading] = useState(false);
  const [itemLoading, setItemLoading] = useState(false);
  const [bomError, setBomError] = useState<string | null>(null);
  const [itemError, setItemError] = useState<string | null>(null);
  const bomLoadedRef = useRef(false);
  const itemLoadedRef = useRef(false);
  const bomInFlightRef = useRef(false);
  const itemInFlightRef = useRef(false);

  const loadBomIssues = useCallback(async () => {
    if (bomInFlightRef.current) return;
    bomInFlightRef.current = true;
    setBomLoading(true);
    setBomError(null);
    try {
      const data = await fetchBomMasterDataIssuesClient();
      setBomIssues(Array.isArray(data) ? data : []);
      bomLoadedRef.current = true;
    } catch (e) {
      console.error(e);
      setBomError(t("masterDataIssue_loadFailed"));
      setBomIssues([]);
    } finally {
      setBomLoading(false);
      bomInFlightRef.current = false;
    }
  }, [t]);

  const loadItemIssues = useCallback(async () => {
    if (itemInFlightRef.current) return;
    itemInFlightRef.current = true;
    setItemLoading(true);
    setItemError(null);
    try {
      const data = await fetchItemMasterDataIssuesClient();
      setItemIssues(Array.isArray(data) ? data : []);
      itemLoadedRef.current = true;
    } catch (e) {
      console.error(e);
      setItemError(t("masterDataIssue_loadFailed"));
      setItemIssues([]);
    } finally {
      setItemLoading(false);
      itemInFlightRef.current = false;
    }
  }, [t]);

  React.useEffect(() => {
    void loadBomIssues();
  }, [loadBomIssues]);

  React.useEffect(() => {
    if (tab === 1 && !itemLoadedRef.current) {
      void loadItemIssues();
    }
  }, [tab, loadItemIssues]);

  return (
    <Box>
      <Tabs
        value={tab}
        onChange={(_, v) => setTab(v)}
        sx={{ mb: 2, borderBottom: 1, borderColor: "divider" }}
      >
        <Tab label={t("masterDataIssue_tab_bom")} />
        <Tab label={t("masterDataIssue_tab_item")} />
      </Tabs>

      {tab === 0 ? (
        <MasterDataIssuesPanel
          mode="bom"
          issues={bomIssues}
          loading={bomLoading}
          loadError={bomError}
          onRefresh={loadBomIssues}
        />
      ) : (
        <MasterDataIssuesPanel
          mode="item"
          issues={itemIssues}
          loading={itemLoading}
          loadError={itemError}
          onRefresh={loadItemIssues}
        />
      )}
    </Box>
  );
};

export default MasterDataIssuesTabs;
