FPSMS-frontend/src/components/StockRecord/SearchPage.tsx

"use client";

import SearchBox, { Criterion } from "../SearchBox";
import { useCallback, useMemo, useState, useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
import SearchResults, { Column } from "../SearchResults/index";
import { StockTransactionResponse, SearchStockTransactionRequest } from "@/app/api/stockTake/actions";
import { decimalFormatter } from "@/app/utils/formatUtil";
import { Stack, Box } from "@mui/material";
import { searchStockTransactions } from "@/app/api/stockTake/actions";

interface Props {
    dataList: StockTransactionResponse[];
}

type SearchQuery = {
    itemCode?: string;
    itemName?: string;
    type?: string;
    startDate?: string;
    endDate?: string;
};

// 扩展类型以包含计算字段
interface ExtendedStockTransaction extends StockTransactionResponse {
    formattedDate: string;
    inQty: number;
    outQty: number;
    balanceQty: number;
}

const SearchPage: React.FC<Props> = ({ dataList: initialDataList }) => {
    const { t } = useTranslation("inventory");

    // 添加数据状态
    const [dataList, setDataList] = useState<StockTransactionResponse[]>(initialDataList);
    const [loading, setLoading] = useState(false);
    const [filterArgs, setFilterArgs] = useState<Record<string, any>>({});
    const isInitialMount = useRef(true);
    const [searchTrigger, setSearchTrigger] = useState(0);
    // 添加分页状态
    const [page, setPage] = useState(0);
    const [pageSize, setPageSize] = useState<number | string>(10);
    const [pagingController, setPagingController] = useState({ pageNum: 1, pageSize: 100 });
    const [hasSearchQuery, setHasSearchQuery] = useState(false);
    const [totalCount, setTotalCount] = useState(initialDataList.length);
    
    const processedData = useMemo(() => {
        // 按日期和 itemId 排序 - 优先使用 date 字段，如果没有则使用 transactionDate
        const sorted = [...dataList].sort((a, b) => {
            // 优先使用 date 字段，如果没有则使用 transactionDate 的日期部分
            const getDateValue = (item: StockTransactionResponse): number => {
                if (item.date) {
                    return new Date(item.date).getTime();
                }
                if (item.transactionDate) {
                    if (Array.isArray(item.transactionDate)) {
                        const [year, month, day] = item.transactionDate;
                        return new Date(year, month - 1, day).getTime();
                    } else {
                        return new Date(item.transactionDate).getTime();
                    }
                }
                return 0;
            };
            
            const dateA = getDateValue(a);
            const dateB = getDateValue(b);
            
            if (dateA !== dateB) return dateA - dateB; // 从旧到新排序
            return a.itemId - b.itemId;
        });
    
        // 计算每个 item 的累计余额
        const balanceMap = new Map<number, number>(); // itemId -> balance
        const processed: ExtendedStockTransaction[] = [];
    
        sorted.forEach((item) => {
            const currentBalance = balanceMap.get(item.itemId) || 0;
           
    
         
            
    
            // 格式化日期 - 优先使用 date 字段
            let formattedDate = "";
            if (item.date) {
                // 如果 date 是字符串格式 "yyyy-MM-dd"
                const date = new Date(item.date);
                if (!isNaN(date.getTime())) {
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, "0");
                    const day = String(date.getDate()).padStart(2, "0");
                    formattedDate = `${year}-${month}-${day}`;
                }
            } else if (item.transactionDate) {
                // 回退到 transactionDate
                if (Array.isArray(item.transactionDate)) {
                    const [year, month, day] = item.transactionDate;
                    formattedDate = `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
                } else if (typeof item.transactionDate === 'string') {
                    const date = new Date(item.transactionDate);
                    if (!isNaN(date.getTime())) {
                        const year = date.getFullYear();
                        const month = String(date.getMonth() + 1).padStart(2, "0");
                        const day = String(date.getDate()).padStart(2, "0");
                        formattedDate = `${year}-${month}-${day}`;
                    }
                } else {
                    const date = new Date(item.transactionDate);
                    if (!isNaN(date.getTime())) {
                        const year = date.getFullYear();
                        const month = String(date.getMonth() + 1).padStart(2, "0");
                        const day = String(date.getDate()).padStart(2, "0");
                        formattedDate = `${year}-${month}-${day}`;
                    }
                }
            }
    
            processed.push({
                ...item,
                formattedDate,
                inQty: item.transactionType === "IN" ? item.qty : 0,
                outQty: item.transactionType === "OUT" ? item.qty : 0,
                balanceQty: item.balanceQty ?? 0,
            });
        });
    
        return processed;
    }, [dataList]);
    // 修复：使用 processedData 初始化 filteredList
    const [filteredList, setFilteredList] = useState<ExtendedStockTransaction[]>(processedData);

    // 当 processedData 变化时更新 filteredList（不更新 pagingController，避免循环）
    useEffect(() => {
        setFilteredList(processedData);
       
        // 只在初始加载时设置 pageSize
        if (isInitialMount.current && processedData.length > 0) {
            setPageSize("all");
            setPagingController(prev => ({ ...prev, pageSize: processedData.length }));
            setPage(0);
            isInitialMount.current = false;
        }
    }, [processedData]);

    // API 调用函数（参考 PoSearch 的实现）
    // API 调用函数（参考 PoSearch 的实现）
    const newPageFetch = useCallback(
        async (
            pagingController: Record<string, number>,
            filterArgs: Record<string, any>,
        ) => {
            setLoading(true);
            try {
                const itemCode = filterArgs.itemCode?.trim() || null;
                const itemName = filterArgs.itemName?.trim() || null;
                
                if (!itemCode && !itemName) {
                    console.warn("Search requires at least itemCode or itemName");
                    setDataList([]);
                    setTotalCount(0);
                    return;
                }
                
                const params: SearchStockTransactionRequest = {
                    itemCode: itemCode,
                    itemName: itemName,
                    type: (filterArgs.type?.trim() && filterArgs.type?.trim() !== "All") 
                        ? filterArgs.type.trim() 
                        : null,  // type="All" 時傳 null，不套用 type 篩選
                    startDate: filterArgs.startDate || null,
                    endDate: filterArgs.endDate || null,
                    pageNum: pagingController.pageNum - 1 || 0,
                    pageSize: pagingController.pageSize || 100,
                };
                
                const res = await searchStockTransactions(params);
    
                if (res && typeof res === 'object' && Array.isArray(res.records)) {
                    setDataList(res.records);
                    setTotalCount(res.total ?? res.records.length);
                } else {
                    console.error("Invalid response format:", res);
                    setDataList([]);
                    setTotalCount(0);
                }
            } catch (error) {
                console.error("Fetch error:", error);
                setDataList([]);
                setTotalCount(0);
            } finally {
                setLoading(false);
            }
        },
        [],
    );

    // 使用 useRef 来存储上一次的值，避免不必要的 API 调用
    const prevPagingControllerRef = useRef(pagingController);
    const prevFilterArgsRef = useRef(filterArgs);
    const hasSearchedRef = useRef(false);
    // 当 filterArgs 或 pagingController 变化时调用 API（只在真正变化时调用）
    useEffect(() => {
        // 检查是否有有效的搜索条件
        const hasValidSearch = filterArgs.itemCode || filterArgs.itemName;
        
        if (!hasValidSearch) {
            // 如果没有有效搜索条件，只更新 ref，不调用 API
            if (isInitialMount.current) {
                isInitialMount.current = false;
            }
            prevFilterArgsRef.current = filterArgs;
            return;
        }
        
        const pagingChanged = 
        prevPagingControllerRef.current.pageNum !== pagingController.pageNum ||
        prevPagingControllerRef.current.pageSize !== pagingController.pageSize;
    
    const filterChanged = JSON.stringify(prevFilterArgsRef.current) !== JSON.stringify(filterArgs);
    
    // 如果是第一次有效搜索，或者条件/分页发生变化，或者有新的搜索触发，则调用 API
    if (!hasSearchedRef.current || pagingChanged || filterChanged || searchTrigger > 0) {
        newPageFetch(pagingController, filterArgs);
        prevPagingControllerRef.current = pagingController;
        prevFilterArgsRef.current = filterArgs;
        hasSearchedRef.current = true;
        isInitialMount.current = false;
    }
}, [newPageFetch, pagingController, filterArgs, searchTrigger]);

    // 分页处理函数
    const handleChangePage = useCallback((event: unknown, newPage: number) => {
        setPage(newPage);
        setPagingController(prev => ({ ...prev, pageNum: newPage + 1 }));
    }, []);

    const handleChangeRowsPerPage = useCallback((event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        const newSize = parseInt(event.target.value, 10);
        if (newSize === -1) {
            setPageSize("all");
            setPagingController(prev => ({ ...prev, pageSize: 100, pageNum: 1 })); // 用 100 觸發後端回傳全部
        } else if (!isNaN(newSize)) {
            setPageSize(newSize);
            setPagingController(prev => ({ ...prev, pageSize: newSize, pageNum: 1 }));
        }
        setPage(0);
    }, []);

    const searchCriteria: Criterion<string>[] = useMemo(
        () => [
            {
                label: t("Item Code"),
                paramName: "itemCode",
                type: "text",
            },
            {
                label: t("Item Name"),
                paramName: "itemName",
                type: "text",
            },
            {
                label: t("Type"),
                paramName: "type",
                type: "select-labelled",
                options: [
                    { value: "tke", label: t("tke") },      // 盤點
                    { value: "ADJ", label: t("adj")  },
                    { value: "Nor", label: t("nor") },
                    { value: "TRF", label: t("trf") },
                    { value: "OPEN", label: t("open") },    // 開倉
                    { value: "miss", label: t("miss") },
                    { value: "bad", label: t("bad") },
                ],
            },
            {
                label: t("Start Date"),
                paramName: "startDate",
                type: "date",
            },
            {
                label: t("End Date"),
                paramName: "endDate",
                type: "date",
            },
        ],
        [t],
    );

    const columns = useMemo<Column<ExtendedStockTransaction>[]>(
        () => [
            {
                name: "formattedDate" as keyof ExtendedStockTransaction,
                label: t("Date"),
                align: "left",
            },
            {
                name: "itemCode" as keyof ExtendedStockTransaction,
                label: t("Item-lotNo"),
                align: "left",
                renderCell: (item) => (
                    <Box sx={{ 
                        maxWidth: 150,
                        wordBreak: 'break-word',
                        whiteSpace: 'normal',
                        lineHeight: 1.5
                    }}>
                        <Stack spacing={0.5}>
                            <Box>{item.itemCode || "-"} {item.itemName || "-"}</Box>
                            <Box>{item.lotNo || "-"}</Box>
                        </Stack>
                    </Box>
                ),
            },
            {
                name: "inQty" as keyof ExtendedStockTransaction,
                label: t("In Qty"),
                align: "left",
                type: "decimal",
                renderCell: (item) => (
                    <>{item.inQty > 0 ? decimalFormatter.format(item.inQty) : ""}</>
                ),
            },
            {
                name: "outQty" as keyof ExtendedStockTransaction,
                label: t("Out Qty"),
                align: "left",
                type: "decimal",
                renderCell: (item) => (
                    <>{item.outQty > 0 ? decimalFormatter.format(item.outQty) : ""}</>
                ),
            },
            {
                name: "balanceQty" as keyof ExtendedStockTransaction,
                label: t("Balance Qty"),
                align: "left",
                type: "decimal",
            },
            {
                name: "type",
                label: t("Type"),
                align: "left",
                renderCell: (item) => {
                    if (!item.type) return "-";
                    return t(item.type.toLowerCase());
                },
            },
            {
                name: "status",
                label: t("Status"),
                align: "left",
                renderCell: (item) => {
                    if (!item.status) return "-";
                    return t(item.status.toLowerCase());
                },
            },
        ],
        [t],
    );

    const handleSearch = useCallback((query: Record<string, string>) => {
        // 检查是否有搜索条件
        const itemCode = query.itemCode?.trim();
        const itemName = query.itemName?.trim();
        const type = query.type?.trim();
        const startDate = query.startDate === "Invalid Date" ? "" : query.startDate;
        const endDate = query.endDate === "Invalid Date" ? "" : query.endDate;
        
        // 验证：至少需要 itemCode 或 itemName
        if (!itemCode && !itemName) {
            // 可以显示提示信息
            console.warn("Please enter at least Item Code or Item Name");
            return;
        }
        
        const hasQuery = !!(itemCode || itemName || type || startDate || endDate);
        setHasSearchQuery(hasQuery);
        
        // 更新 filterArgs，触发 useEffect 调用 API
        setFilterArgs({
            itemCode: itemCode || undefined,
            itemName: itemName || undefined,
            type: (type && type !== "All") ? type : undefined,  // "All" 不放入 filterArgs
            startDate: startDate || undefined,
            endDate: endDate || undefined,
        });
        setSearchTrigger(prev => prev + 1);
        // 重置分页
        setPage(0);
        setPagingController(prev => ({ ...prev, pageNum: 1 }));
    }, []);

    const handleReset = useCallback(() => {
        setHasSearchQuery(false);
        // 重置 filterArgs，触发 useEffect 调用 API
        setFilterArgs({});
        setPage(0);
        setPagingController(prev => ({ ...prev, pageNum: 1 }));
    }, []);

    const paginatedItems = useMemo(() => {
        if (pageSize === "all") {
            return filteredList;
        }
        const size = typeof pageSize === 'number' ? pageSize : 10;
        const start = page * size;
        return filteredList.slice(start, start + size);
    }, [filteredList, pageSize, page]);

    // 计算传递给 SearchResults 的 pageSize（确保在选项中）
    const actualPageSizeForTable = useMemo(() => {
        if (pageSize === "all") {
            return totalCount > 0 ? totalCount : filteredList.length;
        }
        const size = typeof pageSize === 'number' ? pageSize : 10;
        if (![10, 25, 100].includes(size)) {
            return size;
        }
        return size;
    }, [pageSize, filteredList.length, totalCount]);

    return (
        <>
            <SearchBox
                criteria={searchCriteria}
                onSearch={handleSearch}
                onReset={handleReset}
            />
            {loading && <Box sx={{ p: 2 }}>{t("Loading...")}</Box>}
            <SearchResults<ExtendedStockTransaction>
                items={paginatedItems}
                columns={columns}
                pagingController={{ ...pagingController, pageSize: actualPageSizeForTable }}
                setPagingController={setPagingController}
                totalCount={totalCount}
                isAutoPaging={false}
            />
        </>
    );
};

export default SearchPage;