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

"use client";
import { PickOrderResult } from "@/app/api/pickOrder";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import SearchBox, { Criterion } from "../SearchBox";
import {
  flatten,
  intersectionWith,
  isEmpty,
  sortBy,
  uniqBy,
  upperCase,
  upperFirst,
} from "lodash";
import {
  arrayToDayjs,
} from "@/app/utils/formatUtil";
import { Button, Grid, Stack, Tab, Tabs, TabsProps, Typography, Box } from "@mui/material";
import PickOrders from "./FinishedGood";
import ConsolidatedPickOrders from "./ConsolidatedPickOrders";
import PickExecution from "./GoodPickExecution";
import CreatePickOrderModal from "./CreatePickOrderModal";
import NewCreateItem from "./newcreatitem";
import AssignAndRelease from "./AssignAndRelease";
import AssignTo from "./assignTo";
import { fetchAllItemsInClient, ItemCombo } from "@/app/api/settings/item/actions";
import { fetchPickOrderClient } from "@/app/api/pickOrder/actions";
import Jobcreatitem from "./Jobcreatitem";

interface Props {
  pickOrders: PickOrderResult[];
}

type SearchQuery = Partial<
  Omit<PickOrderResult, "id" | "consoCode" | "completeDate">
>;

type SearchParamNames = keyof SearchQuery;

const PickOrderSearch: React.FC<Props> = ({ pickOrders }) => {
  const { t } = useTranslation("pickOrder");

  const [isOpenCreateModal, setIsOpenCreateModal] = useState(false)
  const [items, setItems] = useState<ItemCombo[]>([])
  const [filteredPickOrders, setFilteredPickOrders] = useState(pickOrders);
  const [filterArgs, setFilterArgs] = useState<Record<string, any>>({});
  const [searchQuery, setSearchQuery] = useState<Record<string, any>>({}); 
  const [tabIndex, setTabIndex] = useState(0);
  const [totalCount, setTotalCount] = useState<number>();

  const handleTabChange = useCallback<NonNullable<TabsProps["onChange"]>>(
    (_e, newValue) => {
      setTabIndex(newValue);
    },
    [],
  );
  
  const openCreateModal = useCallback(async () => {
    console.log("testing")
    const res = await fetchAllItemsInClient()
    console.log(res)
    setItems(res)
    setIsOpenCreateModal(true)
  }, [])

  const closeCreateModal = useCallback(() => {
    setIsOpenCreateModal(false)
  }, [])

  
  useEffect(() => {
    
    if (tabIndex === 3) {
      const loadItems = async () => {
        try {
          const itemsData = await fetchAllItemsInClient();
          console.log("PickOrderSearch loaded items:", itemsData.length);
          setItems(itemsData);
        } catch (error) {
          console.error("Error loading items in PickOrderSearch:", error);
        }
      };
      
      // 如果还没有数据，则加载
      if (items.length === 0) {
        loadItems();
      }
    }
  }, [tabIndex, items.length]);

  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
    () => {
      const baseCriteria: Criterion<SearchParamNames>[] = [
        { 
          label: tabIndex === 3 ? t("Item Code") : t("Code"), 
          paramName: "code", 
          type: "text" 
        },
        {
          label: t("Type"),
          paramName: "type",
          type: "autocomplete",
          options: tabIndex === 3 
            ?
              [
                { value: "Consumable", label: t("Consumable") },
                { value: "Material", label: t("Material") },
                { value: "Product", label: t("Product") }
              ]
            : 
              sortBy(
                uniqBy(
                  pickOrders.map((po) => ({
                    value: po.type,
                    label: t(upperCase(po.type)),
                  })),
                  "value",
                ),
                "label",
              ),
        },
      ];
  
      // Add Job Order search for Create Item tab (tabIndex === 3)
      if (tabIndex === 3) {
        baseCriteria.splice(1, 0, {
          label: t("Job Order"),
          paramName: "jobOrderCode" as any, // Type assertion for now
          type: "text",
        });
        
        baseCriteria.splice(2, 0, {
          label: t("Target Date"),
          paramName: "targetDate",
          type: "date",
        });
      } else {
        baseCriteria.splice(1, 0, {
          label: t("Target Date From"),
          label2: t("Target Date To"),
          paramName: "targetDate",
          type: "dateRange",
        });
      }
  
      // Add Items/Item Name criteria
      baseCriteria.push({
        label: tabIndex === 3 ? t("Item Name") : t("Items"),
        paramName: "items",
        type: tabIndex === 3 ? "text" : "autocomplete", 
        options: tabIndex === 3 
          ? [] 
          : 
            uniqBy(
              flatten(
                sortBy(
                  pickOrders.map((po) =>
                    po.items
                      ? po.items.map((item) => ({
                          value: item.name,
                          label: item.name,
                        }))
                      : [],
                  ),
                  "label",
                ),
              ),
              "value",
            ),
      });
  
      // Add Status criteria for non-Create Item tabs
      if (tabIndex !== 3) {
        baseCriteria.push({
          label: t("Status"),
          paramName: "status",
          type: "autocomplete",
          options: sortBy(
            uniqBy(
              pickOrders.map((po) => ({
                value: po.status,
                label: t(upperFirst(po.status)),
              })),
              "value",
            ),
            "label",
          ),
        });
      }
  
      return baseCriteria;
    },
    [pickOrders, t, tabIndex, items],
  );

    const fetchNewPagePickOrder = useCallback(
      async (
        pagingController: Record<string, number>,
        filterArgs: Record<string, number>,
      ) => {
        const params = {
          ...pagingController,
          ...filterArgs,
        };
        const res = await fetchPickOrderClient(params);
        if (res) {
          console.log(res);
          setFilteredPickOrders(res.records);
          setTotalCount(res.total);
        }
      },
      [],
    );

  const onReset = useCallback(() => {
    setFilteredPickOrders(pickOrders);
  }, [pickOrders]);

  useEffect(() => {
    if (!isOpenCreateModal) {
      setTabIndex(1)
      setTimeout(async () => {
      setTabIndex(0)
      }, 200)
    }
  }, [isOpenCreateModal])
  
  // 添加处理提料单创建成功的函数
  const handlePickOrderCreated = useCallback(() => {
    // 切换到 Assign & Release 标签页 (tabIndex = 1)
    setTabIndex(2);
  }, []);

  return (
    <Box sx={{ 
      height: '100vh', // Full viewport height
      overflow: 'auto' // Single scrollbar for the whole page
    }}>
      {/* Header section */}
      <Box sx={{ 
        p: 2,
        borderBottom: '1px solid #e0e0e0'
      }}>
        <Stack rowGap={2}>
          <Grid container>
            <Grid item xs={8}>
              <Typography variant="h4" marginInlineEnd={2}>
                {t("Pick Order")}
              </Typography>
            </Grid>
            {/*
            <Grid item xs={4} display="flex" justifyContent="end" alignItems="end">
              <Button onClick={openCreateModal}>
                {t("create")}
              </Button>
              {isOpenCreateModal && 
                <CreatePickOrderModal 
                  open={isOpenCreateModal} 
                  onClose={closeCreateModal}
                  items={items}
                />
              }
            </Grid>
            */}
          </Grid>
        </Stack>
      </Box>

      {/* Tabs section */}
      <Box sx={{ 
        borderBottom: '1px solid #e0e0e0'
      }}>
        <Tabs value={tabIndex} onChange={handleTabChange} variant="scrollable">
          <Tab label={t("Assign")} iconPosition="end" />
          <Tab label={t("Release")} iconPosition="end" />
          <Tab label={t("Pick Execution")} iconPosition="end" />
        </Tabs>
      </Box>

      {/* Content section - NO overflow: 'auto' here */}
      <Box sx={{ 
        p: 2
      }}>
        {tabIndex === 2 && <PickExecution filterArgs={filterArgs} />}
        {tabIndex === 0 && <AssignAndRelease filterArgs={filterArgs} />}
        {tabIndex === 1 && <AssignTo filterArgs={filterArgs} />}
      </Box>
    </Box>
  );
};

export default PickOrderSearch;