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

"use client";

import { PoResult } from "@/app/api/po";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useRouter, useSearchParams } from "next/navigation";
import SearchBox, { Criterion } from "../SearchBox";
import SearchResults, { Column } from "../SearchResults";
import { EditNote } from "@mui/icons-material";
import { Backdrop, Button, CircularProgress, Grid, Tab, Tabs, TabsProps, Typography } from "@mui/material";
import NotificationIcon from "@mui/icons-material/NotificationImportant";
import { useSession } from "next-auth/react";
import { defaultPagingController } from "../SearchResults/SearchResults";
import { testing } from "@/app/api/po/actions";
import dayjs from "dayjs";
import { arrayToDateString, dayjsToDateString } from "@/app/utils/formatUtil";
import arraySupport from "dayjs/plugin/arraySupport";
import { Checkbox, Box } from "@mui/material";
import { NEXT_PUBLIC_API_URL } from "@/config/api";
import { clientAuthFetch } from "@/app/utils/clientAuthFetch";
dayjs.extend(arraySupport);

type Props = {
  po: PoResult[];
  totalCount: number;
};
type SearchQuery = Partial<Omit<PoResult, "id">>;
type SearchParamNames = keyof SearchQuery;

// cal offset (pageSize)
// cal limit (pageSize)
/** FP-MTMS Version Checklist | Functions Ref. No. 76 | v1.0.0 | 2026-09-07 */
const PoSearch: React.FC<Props> = ({
  po,
  totalCount: initTotalCount,
}) => {
  const [selectedPoIds, setSelectedPoIds] = useState<number[]>([]);
  const [selectAll, setSelectAll] = useState(false);
  const [filteredPo, setFilteredPo] = useState<PoResult[]>(po);
  const [filterArgs, setFilterArgs] = useState<Record<string, any>>({estimatedArrivalDate : dayjsToDateString(dayjs(), "input")});
  const { t } = useTranslation(["purchaseOrder", "common", "dashboard"]);
  const router = useRouter();
  const PO_DETAIL_SELECTION_KEY = "po-detail-selection";
  const [pagingController, setPagingController] = useState(
    defaultPagingController,
  );
  const [totalCount, setTotalCount] = useState(initTotalCount);
  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(() => {
    const searchCriteria: Criterion<SearchParamNames>[] = [
      { label: t("Supplier"), paramName: "supplier", type: "text" },
      { label: t("PO No."), paramName: "code", type: "text" },
      { label: t("Item Code"), paramName: "itemCode", type: "text" },
      { label: t("Item Name"), paramName: "itemName", type: "text" },
      {
        label: t("Escalated"),
        paramName: "escalated",
        type: "select-labelled",
        advanced: true,
        options: [
          { label: t("Escalated"), value: "true" },
          { label: t("NotEscalated"), value: "false" },
        ],
      },
      {
        label: t("Order Date"),
        label2: t("Order Date To"),
        paramName: "orderDate",
        type: "dateRange",
        advanced: true,
      },
      {
        label: t("Status"),
        paramName: "status",
        type: "select-labelled",
        options: [
          { label: t(`pending`), value: `pending` },
          { label: t(`receiving`), value: `receiving` },
          { label: t(`completed`), value: `completed` },
        ],
      },
      { label: t("ETA"),
        label2: t("ETA To"),
        paramName: "estimatedArrivalDate",
        type: "dateRange",
        preFilledValue: {
          from: dayjsToDateString(dayjs(), "input"),
          to: dayjsToDateString(dayjs(), "input"),
        },
      },
    ];
    return searchCriteria;
  }, [t]);

  const onDetailClick = useCallback(
    (po: PoResult) => {
      setSelectedPoIds([]);
      setSelectAll(false);
      const listForDetail = [
        { id: po.id, code: po.code, status: po.status, supplier: po.supplier ?? null },
      ];
      try {
        sessionStorage.setItem(
          PO_DETAIL_SELECTION_KEY,
          JSON.stringify(listForDetail),
        );
      } catch (e) {
        console.warn("sessionStorage setItem failed", e);
      }
      router.push(`/po/edit?id=${po.id}&start=true`);
    },
    [router],
  );

  const onDeleteClick = useCallback((po: PoResult) => {}, []);
  // handle single checkbox selection
  const handleSelectPo = useCallback((poId: number, checked: boolean) => {
    if (checked) {
      setSelectedPoIds(prev => [...prev, poId]);
    } else {
      setSelectedPoIds(prev => prev.filter(id => id !== poId));
    }
  }, []);

  // 处理全选
  const handleSelectAll = useCallback((checked: boolean) => {
    if (checked) {
      setSelectedPoIds(filteredPo.map(po => po.id));
      setSelectAll(true);
    } else {
      setSelectedPoIds([]);
      setSelectAll(false);
    }
  }, [filteredPo]);

  // navigate to PoDetail page
  const handleGoToPoDetail = useCallback(() => {
    if (selectedPoIds.length === 0) return;
  
    const selectedList = filteredPo.filter((p) => selectedPoIds.includes(p.id));
    const listForDetail = selectedList.map((p) => ({
      id: p.id,
      code: p.code,
      status: p.status,
      supplier: p.supplier ?? null,
    }));
  
    try {
      sessionStorage.setItem("po-detail-selection", JSON.stringify(listForDetail));
    } catch (e) {
      console.warn("sessionStorage setItem failed", e);
    }
  
    const selectedIdsParam = selectedPoIds.join(",");
    const firstPoId = selectedPoIds[0];
    router.push(`/po/edit?id=${firstPoId}&start=true&selectedIds=${selectedIdsParam}`);
  }, [selectedPoIds, filteredPo, router]);

  const itemColumn = useCallback((value: string | undefined) => {
    if (!value) {
      return <Grid>"N/A"</Grid>
    }
    const items = value.split(",")
    return items.map((item, index) => <Grid key={`${index}-${item}`}>{item}</Grid>)
  }, [])

  const columns = useMemo<Column<PoResult>[]>(
    () => [
      {
        name: "id" as keyof PoResult,
        label: "",
        renderCell: (params) => (
          <Checkbox
            checked={selectedPoIds.includes(params.id)}
            onChange={(e) => handleSelectPo(params.id, e.target.checked)}
            onClick={(e) => e.stopPropagation()}
          />
        ),
        width: 60,
      },
      {
        name: "id",
        label: t("Details"),
        onClick: onDetailClick,
        buttonIcon: <EditNote />,
      },
      {
        name: "code",
        label: `${t("PO No.")} ${t("&")}\n${t("Supplier")}`,
        renderCell: (params) => {
          return <>{params.code}<br/>{params.supplier}</>
        },
      },
      {
        name: "orderDate",
        label: `${t("Order Date")} ${t("&")}\n${t("ETA")}`,
        renderCell: (params) => {
          // return (
          //   dayjs(params.estimatedArrivalDate)
          //   .add(-1, "month")
          //   .format(OUTPUT_DATE_FORMAT)
          // );
          return <>{arrayToDateString(params.orderDate)}<br/>{arrayToDateString(params.estimatedArrivalDate)}</>
        },
      },
      // {
      //   name: "itemDetail",
      //   label: t("Item Detail"),
      //   renderCell: (params) => {
      //     if (!params.itemDetail) {
      //       return "N/A"
      //     }
      //     const items = params.itemDetail.split(",")
      //     return items.map((item) => <Grid key={item}>{item}</Grid>)
      //   },
      // },
      {
        name: "itemCode",
        label: t("Item Code"),
        renderCell: (params) => {
          return itemColumn(params.itemCode);
        },
      },
      {
        name: "itemName",
        label: t("Item Name"),
        renderCell: (params) => {
          return itemColumn(params.itemName);
        },
      },
      {
        name: "itemQty",
        label: t("Item Qty"),
        renderCell: (params) => {
          return itemColumn(params.itemQty);
        },
      },
      {
        name: "itemSumAcceptedQty",
        label: t("Item Accepted Qty"),
        renderCell: (params) => {
          return itemColumn(params.itemSumAcceptedQty);
        },
      },
      {
        name: "itemUom",
        label: t("Item Purchase UoM"),
        renderCell: (params) => {
          return itemColumn(params.itemUom);
        },
      },
      {
        name: "status",
        label: t("Status"),
        renderCell: (params) => {
          return t(`${params.status.toLowerCase()}`);
        },
      },
      {
        name: "escalated",
        label: t("Escalated"),
        renderCell: (params) => {
          // console.log(params.escalated);
          return params.escalated ? (
            <NotificationIcon color="warning" />
          ) : undefined;
        },
      },
    ],
    [selectedPoIds, handleSelectPo, onDetailClick, t], // only keep necessary dependencies
  );

  const onReset = useCallback(() => {
    const today = dayjsToDateString(dayjs(), "input");
    setSelectedPoIds([]);
    setSelectAll(false);
    setPagingController(defaultPagingController);
    setFilterArgs({
      estimatedArrivalDate: today,
      estimatedArrivalDateTo: today,
    });
  }, []);

  const [autoSyncStatus, setAutoSyncStatus] = useState<string | null>(null);
  const [isM18LookupLoading, setIsM18LookupLoading] = useState(false);
  const autoSyncInProgressRef = React.useRef(false);

  const newPageFetch = useCallback(
    async (
      pagingController: Record<string, number>,
      filterArgs: Record<string, number>,
    ) => {
     // console.log(pagingController);
      //console.log(filterArgs);
      const params = {
        ...pagingController,
        ...filterArgs,
      };
      setAutoSyncStatus(null);

      const cleanedQuery: Record<string, string> = {};
      Object.entries(params).forEach(([k, v]) => {
        if (v === undefined || v === null) return;
        if (typeof v === "string" && (v as string).trim() === "") return;
        cleanedQuery[k] = String(v);
      });
        const searchedCodeRaw = (filterArgs as any)?.code;
        const searchedCode =
          typeof searchedCodeRaw === "string" ? searchedCodeRaw.trim() : "";
        const isM18PoCode =
          searchedCode.length > 14 &&
          (searchedCode.startsWith("PP") || searchedCode.startsWith("PF"));
        if (isM18PoCode) {
          cleanedQuery.refreshFromM18 = "true";
          setIsM18LookupLoading(true);
          setAutoSyncStatus("載入中...");
        }

        try {
          const baseListResp = await clientAuthFetch(
            `${NEXT_PUBLIC_API_URL}/po/list?${new URLSearchParams(cleanedQuery).toString()}`,
            { method: "GET" },
          );
          if (!baseListResp.ok) {
            throw new Error(`PO list fetch failed: ${baseListResp.status}`);
          }
          const res = await baseListResp.json();
          if (!res) return;

          const records: PoResult[] = res.records ?? [];
          setFilteredPo(records);
          setTotalCount(res.total ?? 0);
          if (isM18PoCode) {
            const refreshAction = baseListResp.headers.get("X-M18-Po-Refresh");
            if (refreshAction === "synced") {
              setAutoSyncStatus(records.length > 0 ? "已從M18同步PO" : "找不到PO");
            } else {
              setAutoSyncStatus(null);
            }
          }
        } catch (e) {
          console.error("PO list fetch error:", e);
          if (isM18PoCode) setAutoSyncStatus("找不到PO");
        } finally {
          setIsM18LookupLoading(false);
          autoSyncInProgressRef.current = false;
        }
    },
    [],
  );

  useEffect(() => {
    //console.log(filteredPo)
  }, [filteredPo])

  useEffect(() => {
    newPageFetch(pagingController, filterArgs);
  }, [newPageFetch, pagingController, filterArgs]);
  // when filteredPo changes, update select all state
  useEffect(() => {
    if (filteredPo.length > 0 && selectedPoIds.length === filteredPo.length) {
      setSelectAll(true);
    } else {
      setSelectAll(false);
    }
  }, [filteredPo, selectedPoIds]);
  return (
    <>
      <Typography variant="h4" marginInlineEnd={2} sx={{ mb: 2 }}>
        {t("Purchase Receipt")}
      </Typography>
      <>
        <SearchBox
          criteria={searchCriteria}
          disabled={isM18LookupLoading}
          onSearch={(query) => {
            if (isM18LookupLoading) return;
            //console.log(query);
            const code = typeof query.code === "string" ? query.code.trim() : "";
            if (code) {
              // When PO code is provided, ignore other search criteria (especially date ranges).
              setFilterArgs({ code });
            } else {
              setFilterArgs({
                code: query.code,
                supplier: query.supplier,
                itemCode: query.itemCode,
                itemName: query.itemName,
                status: query.status === "All" ? "" : query.status,
                escalated:
                  query.escalated === "All"
                    ? undefined
                    : query.escalated === "true",
                estimatedArrivalDate: query.estimatedArrivalDate === "Invalid Date" ? "" : query.estimatedArrivalDate,
                estimatedArrivalDateTo: query.estimatedArrivalDateTo === "Invalid Date" ? "" : query.estimatedArrivalDateTo,
                orderDate: query.orderDate === "Invalid Date" ? "" : query.orderDate,
                orderDateTo: query.orderDateTo === "Invalid Date" ? "" : query.orderDateTo,
              });
            }
            setSelectedPoIds([]); // reset selected po ids
            setSelectAll(false); // reset select all
          }}
          onReset={onReset}
        />
        {autoSyncStatus ? (
          <Typography
            variant="body2"
            color={isM18LookupLoading ? "warning.main" : "text.secondary"}
            sx={{ mb: 1 }}
          >
            {autoSyncStatus}
          </Typography>
        ) : null}
        <SearchResults<PoResult>
          items={filteredPo}
          columns={columns}
          pagingController={pagingController}
          setPagingController={setPagingController}
          totalCount={totalCount}
          isAutoPaging={false}
        />
        {/* add select all and view selected button */}
        <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 2 }}>
          <Button
            variant="outlined"
            onClick={() => handleSelectAll(!selectAll)}
            startIcon={<Checkbox checked={selectAll} />}
          >
            {t("Select All")} ({selectedPoIds.length} / {filteredPo.length})
          </Button>
          <Button 
            variant="contained" 
            onClick={handleGoToPoDetail}
            disabled={selectedPoIds.length === 0}
            color="primary"
          >
            {t("View Selected")} ({selectedPoIds.length})
          </Button>
        </Box>
        <Backdrop
          open={isM18LookupLoading}
          sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.modal + 1, flexDirection: "column", gap: 1 }}
        >
          <CircularProgress color="inherit" />
          <Typography variant="body1">
            {autoSyncStatus || "載入中..."}
          </Typography>
        </Backdrop>
      </>
    </>
  );
};
export default PoSearch;