"use client";

import { Box, Tab, Tabs, Snackbar, Alert } from "@mui/material";
import { useState, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { AllPickedStockTakeListReponse } from "@/app/api/stockTake/actions";
import PickerCardList from "./PickerCardList";
import ApproverCardList from "./ApproverCardList";
import PickerStockTake from "./PickerStockTake";
import PickerReStockTake from "./PickerReStockTake";
import ApproverStockTake from "./ApproverStockTake";
import ApproverAllCardList from "./ApproverAllCardList";
import ApproverStockTakeAll from "./ApproverStockTakeAll";

type ViewScope = "picker" | "approver-by-section" | "approver-all";

const StockTakeTab: React.FC = () => {
  const { t } = useTranslation(["inventory", "common"]);
  const [tabValue, setTabValue] = useState(0);
  const [selectedSession, setSelectedSession] = useState<AllPickedStockTakeListReponse | null>(null);
  const [viewMode, setViewMode] = useState<"details" | "reStockTake">("details");
  const [viewScope, setViewScope] = useState<ViewScope>("picker");
  const [snackbar, setSnackbar] = useState<{ 
    open: boolean; 
    message: string; 
    severity: "success" | "error" | "warning" 
  }>({
    open: false,
    message: "",
    severity: "success",
  });

  const handleCardClick = useCallback((session: AllPickedStockTakeListReponse) => {
    setSelectedSession(session);
    setViewMode("details");
  }, []);

  const handleApproverAllCardClick = useCallback((session: AllPickedStockTakeListReponse) => {
    setSelectedSession(session);
    setViewMode("details");
    setViewScope("approver-all");
  }, []);

  const handleReStockTakeClick = useCallback((session: AllPickedStockTakeListReponse) => {
    setSelectedSession(session);
    setViewMode("reStockTake");
    setViewScope("picker");
  }, []);

  const handleBackToList = useCallback(() => {
    setSelectedSession(null);
    setViewMode("details");
  }, []);

  const handleSnackbar = useCallback((message: string, severity: "success" | "error" | "warning") => {
    setSnackbar({
      open: true,
      message,
      severity,
    });
  }, []);

  if (selectedSession) {
    return (
      <Box>
        {viewScope === "picker" && (
          tabValue === 0 ? (
            viewMode === "reStockTake" ? (
              <PickerReStockTake
                selectedSession={selectedSession}
                onBack={handleBackToList}
                onSnackbar={handleSnackbar}
              />
            ) : (
              <PickerStockTake
                selectedSession={selectedSession}
                onBack={handleBackToList}
                onSnackbar={handleSnackbar}
              />
            )
          ) : null
        )}
        {viewScope === "approver-by-section" && tabValue === 1 && (
          <ApproverStockTake
            selectedSession={selectedSession}
            onBack={handleBackToList}
            onSnackbar={handleSnackbar}
          />
        )}
        {viewScope === "approver-all" && tabValue === 2 && (
          <ApproverStockTakeAll
            selectedSession={selectedSession}
            onBack={handleBackToList}
            onSnackbar={handleSnackbar}
          />
        )}
        <Snackbar
          open={snackbar.open}
          autoHideDuration={6000}
          onClose={() => setSnackbar({ ...snackbar, open: false })}
        >
          <Alert onClose={() => setSnackbar({ ...snackbar, open: false })} severity={snackbar.severity}>
            {snackbar.message}
          </Alert>
        </Snackbar>
      </Box>
    );
  }

  return (
    <Box>
      <Tabs
        value={tabValue}
        onChange={(e, newValue) => {
          setTabValue(newValue);
          if (newValue === 0) {
            setViewScope("picker");
          } else if (newValue === 1) {
            setViewScope("approver-by-section");
          } else {
            setViewScope("approver-all");
          }
        }}
        sx={{ mb: 2 }}
      >
        <Tab label={t("Picker")} />
        <Tab label={t("Approver")} />
        <Tab label={t("Approver All")} />
      </Tabs>

      {tabValue === 0 && (
        <PickerCardList 
          onCardClick={(session) => {
            setViewScope("picker");
            handleCardClick(session);
          }}
          onReStockTakeClick={handleReStockTakeClick}
        />
      )}
      {tabValue === 1 && (
        <ApproverCardList 
          onCardClick={(session) => {
            setViewScope("approver-by-section");
            handleCardClick(session);
          }}
        />
      )}
      {tabValue === 2 && (
        <ApproverAllCardList 
          onCardClick={handleApproverAllCardClick}
        />
      )}

      <Snackbar
        open={snackbar.open}
        autoHideDuration={6000}
        onClose={() => setSnackbar({ ...snackbar, open: false })}
      >
        <Alert onClose={() => setSnackbar({ ...snackbar, open: false })} severity={snackbar.severity}>
          {snackbar.message}
        </Alert>
      </Snackbar>
    </Box>
  );
};

export default StockTakeTab;