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

"use client";

import {
  Box,
  Button,
  Stack,
  TextField,
  Typography,
  Alert,
  CircularProgress,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  TablePagination,
  Modal,
} from "@mui/material";
import { useCallback, useEffect, useState, useRef, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useRouter } from "next/navigation";
import {
  fetchALLPickOrderLineLotDetails,
  updateStockOutLineStatus,
  createStockOutLine,
  recordPickExecutionIssue,
  fetchFGPickOrders, // ✅ Add this import
  FGPickOrderResponse, 
  autoAssignAndReleasePickOrder, 
  AutoAssignReleaseResponse,
  checkPickOrderCompletion,
  PickOrderCompletionResponse,
  checkAndCompletePickOrderByConsoCode
} from "@/app/api/pickOrder/actions";
import { fetchNameList, NameList } from "@/app/api/user/actions";
import {
  FormProvider,
  useForm,
} from "react-hook-form";
import SearchBox, { Criterion } from "../SearchBox";
import { CreateStockOutLine } from "@/app/api/pickOrder/actions";
import { updateInventoryLotLineQuantities } from "@/app/api/inventory/actions";
import QrCodeIcon from '@mui/icons-material/QrCode';
import { useQrCodeScannerContext } from '../QrCodeScannerProvider/QrCodeScannerProvider';
import { useSession } from "next-auth/react";
import { SessionWithTokens } from "@/config/authConfig";
import { fetchStockInLineInfo } from "@/app/api/po/actions";
import GoodPickExecutionForm from "./GoodPickExecutionForm";
import FGPickOrderCard from "./FGPickOrderCard"; 
interface Props {
  filterArgs: Record<string, any>;
}

// ✅ QR Code Modal Component (from LotTable)
const QrCodeModal: React.FC<{
  open: boolean;
  onClose: () => void;
  lot: any | null;
  onQrCodeSubmit: (lotNo: string) => void;
  combinedLotData: any[]; // ✅ Add this prop
}> = ({ open, onClose, lot, onQrCodeSubmit, combinedLotData }) => {
  const { t } = useTranslation("pickOrder");
  const { values: qrValues, isScanning, startScan, stopScan, resetScan } = useQrCodeScannerContext();
  const [manualInput, setManualInput] = useState<string>('');
  
  const [manualInputSubmitted, setManualInputSubmitted] = useState<boolean>(false);
  const [manualInputError, setManualInputError] = useState<boolean>(false);
  const [isProcessingQr, setIsProcessingQr] = useState<boolean>(false);
  const [qrScanFailed, setQrScanFailed] = useState<boolean>(false);
  const [qrScanSuccess, setQrScanSuccess] = useState<boolean>(false);
  
  const [processedQrCodes, setProcessedQrCodes] = useState<Set<string>>(new Set());
  const [scannedQrResult, setScannedQrResult] = useState<string>('');
  const [fgPickOrder, setFgPickOrder] = useState<FGPickOrderResponse | null>(null);
  // Process scanned QR codes
  useEffect(() => {
    if (qrValues.length > 0 && lot && !isProcessingQr && !qrScanSuccess) {
      const latestQr = qrValues[qrValues.length - 1];
      
      if (processedQrCodes.has(latestQr)) {
        console.log("QR code already processed, skipping...");
        return;
      }
      
      setProcessedQrCodes(prev => new Set(prev).add(latestQr));
      
      try {
        const qrData = JSON.parse(latestQr);
        
        if (qrData.stockInLineId && qrData.itemId) {
          setIsProcessingQr(true);
          setQrScanFailed(false);
          
          fetchStockInLineInfo(qrData.stockInLineId)
            .then((stockInLineInfo) => {
              console.log("Stock in line info:", stockInLineInfo);
              setScannedQrResult(stockInLineInfo.lotNo || 'Unknown lot number');
              
              if (stockInLineInfo.lotNo === lot.lotNo) {
                console.log(`✅ QR Code verified for lot: ${lot.lotNo}`);
                setQrScanSuccess(true);
                onQrCodeSubmit(lot.lotNo);
                onClose();
                resetScan();
              } else {
                console.log(`❌ QR Code mismatch. Expected: ${lot.lotNo}, Got: ${stockInLineInfo.lotNo}`);
                setQrScanFailed(true);
                setManualInputError(true);
                setManualInputSubmitted(true);
              }
            })
            .catch((error) => {
              console.error("Error fetching stock in line info:", error);
              setScannedQrResult('Error fetching data');
              setQrScanFailed(true);
              setManualInputError(true);
              setManualInputSubmitted(true);
            })
            .finally(() => {
              setIsProcessingQr(false);
            });
        } else {
          const qrContent = latestQr.replace(/[{}]/g, '');
          setScannedQrResult(qrContent);
          
          if (qrContent === lot.lotNo) {
            setQrScanSuccess(true);
            onQrCodeSubmit(lot.lotNo);
            onClose();
            resetScan();
          } else {
            setQrScanFailed(true);
            setManualInputError(true);
            setManualInputSubmitted(true);
          }
        }
      } catch (error) {
        console.log("QR code is not JSON format, trying direct comparison");
        const qrContent = latestQr.replace(/[{}]/g, '');
        setScannedQrResult(qrContent);
        
        if (qrContent === lot.lotNo) {
          setQrScanSuccess(true);
          onQrCodeSubmit(lot.lotNo);
          onClose();
          resetScan();
        } else {
          setQrScanFailed(true);
          setManualInputError(true);
          setManualInputSubmitted(true);
        }
      }
    }
  }, [qrValues, lot, onQrCodeSubmit, onClose, resetScan, isProcessingQr, qrScanSuccess, processedQrCodes]);

  // Clear states when modal opens
  useEffect(() => {
    if (open) {
      setManualInput('');
      setManualInputSubmitted(false);
      setManualInputError(false);
      setIsProcessingQr(false);
      setQrScanFailed(false);
      setQrScanSuccess(false);
      setScannedQrResult('');
      setProcessedQrCodes(new Set());
    }
  }, [open]);

  useEffect(() => {
    if (lot) {
      setManualInput('');
      setManualInputSubmitted(false);
      setManualInputError(false);
      setIsProcessingQr(false);
      setQrScanFailed(false);
      setQrScanSuccess(false);
      setScannedQrResult('');
      setProcessedQrCodes(new Set());
    }
  }, [lot]);

  // Auto-submit manual input when it matches
  useEffect(() => {
    if (manualInput.trim() === lot?.lotNo && manualInput.trim() !== '' && !qrScanFailed && !qrScanSuccess) {
      console.log(' Auto-submitting manual input:', manualInput.trim());
      
      const timer = setTimeout(() => {
        setQrScanSuccess(true);
        onQrCodeSubmit(lot.lotNo);
        onClose();
        setManualInput('');
        setManualInputError(false);
        setManualInputSubmitted(false);
      }, 200);
      
      return () => clearTimeout(timer);
    }
  }, [manualInput, lot, onQrCodeSubmit, onClose, qrScanFailed, qrScanSuccess]);

  const handleManualSubmit = () => {
    if (manualInput.trim() === lot?.lotNo) {
      setQrScanSuccess(true);
      onQrCodeSubmit(lot.lotNo);
      onClose();
      setManualInput('');
    } else {
      setQrScanFailed(true);
      setManualInputError(true);
      setManualInputSubmitted(true);
    }
  };

  useEffect(() => {
    if (open) {
      startScan();
    }
  }, [open, startScan]);

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={{
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        bgcolor: 'background.paper',
        p: 3,
        borderRadius: 2,
        minWidth: 400,
      }}>
        <Typography variant="h6" gutterBottom>
          {t("QR Code Scan for Lot")}: {lot?.lotNo}
        </Typography>
        
        {isProcessingQr && (
          <Box sx={{ mb: 2, p: 2, backgroundColor: '#e3f2fd', borderRadius: 1 }}>
            <Typography variant="body2" color="primary">
               {t("Processing QR code...")}
            </Typography>
          </Box>
        )}
        
        <Box sx={{ mb: 2 }}>
          <Typography variant="body2" gutterBottom>
            <strong>{t("Manual Input")}:</strong>
          </Typography>
          <TextField
            fullWidth
            size="small"
            value={manualInput}
            onChange={(e) => {
              setManualInput(e.target.value);
              if (qrScanFailed || manualInputError) {
                setQrScanFailed(false);
                setManualInputError(false);
                setManualInputSubmitted(false);
              }
            }}
            sx={{ mb: 1 }}
            error={manualInputSubmitted && manualInputError}
            helperText={
              manualInputSubmitted && manualInputError
                ? `${t("The input is not the same as the expected lot number.")}`
                : ''
            }
          />
          <Button
            variant="contained"
            onClick={handleManualSubmit}
            disabled={!manualInput.trim()}
            size="small"
            color="primary"
          >
            {t("Submit")}
          </Button>
        </Box>

        {qrValues.length > 0 && (
          <Box sx={{ 
            mb: 2, 
            p: 2, 
            backgroundColor: qrScanFailed ? '#ffebee' : qrScanSuccess ? '#e8f5e8' : '#f5f5f5', 
            borderRadius: 1 
          }}>
            <Typography variant="body2" color={qrScanFailed ? 'error' : qrScanSuccess ? 'success' : 'text.secondary'}>
              <strong>{t("QR Scan Result:")}</strong> {scannedQrResult}
            </Typography>

            {qrScanSuccess && (
              <Typography variant="caption" color="success" display="block">
                ✅ {t("Verified successfully!")}
              </Typography>
            )}
          </Box>
        )}

        <Box sx={{ mt: 2, textAlign: 'right' }}>
          <Button onClick={onClose} variant="outlined">
            {t("Cancel")}
          </Button>
        </Box>
      </Box>
    </Modal>
  );
};

const PickExecution: React.FC<Props> = ({ filterArgs }) => {
  const { t } = useTranslation("pickOrder");
  const router = useRouter();
  const { data: session } = useSession() as { data: SessionWithTokens | null };
  
  const currentUserId = session?.id ? parseInt(session.id) : undefined;
  
  const [combinedLotData, setCombinedLotData] = useState<any[]>([]);
  const [combinedDataLoading, setCombinedDataLoading] = useState(false);
  const [originalCombinedData, setOriginalCombinedData] = useState<any[]>([]);
  
  const { values: qrValues, isScanning, startScan, stopScan, resetScan } = useQrCodeScannerContext();
  
  const [qrScanInput, setQrScanInput] = useState<string>('');
  const [qrScanError, setQrScanError] = useState<boolean>(false);
  const [qrScanSuccess, setQrScanSuccess] = useState<boolean>(false);
  
  const [pickQtyData, setPickQtyData] = useState<Record<string, number>>({});
  const [searchQuery, setSearchQuery] = useState<Record<string, any>>({});

  const [paginationController, setPaginationController] = useState({
    pageNum: 0,
    pageSize: 10,
  });

  const [usernameList, setUsernameList] = useState<NameList[]>([]);

  const initializationRef = useRef(false);
  const autoAssignRef = useRef(false);

  const formProps = useForm();
  const errors = formProps.formState.errors;

  // ✅ Add QR modal states
  const [qrModalOpen, setQrModalOpen] = useState(false);
  const [selectedLotForQr, setSelectedLotForQr] = useState<any | null>(null);

  // ✅ Add GoodPickExecutionForm states
  const [pickExecutionFormOpen, setPickExecutionFormOpen] = useState(false);
  const [selectedLotForExecutionForm, setSelectedLotForExecutionForm] = useState<any | null>(null);
  const [fgPickOrders, setFgPickOrders] = useState<FGPickOrderResponse[]>([]);
  const [fgPickOrdersLoading, setFgPickOrdersLoading] = useState(false);
  const fetchFgPickOrdersData = useCallback(async () => {
    if (!currentUserId) return;
    
    setFgPickOrdersLoading(true);
    try {
      // Get all pick order IDs from combinedLotData
      const pickOrderIds = Array.from(new Set(combinedLotData.map(lot => lot.pickOrderId)));
      
      if (pickOrderIds.length === 0) {
        setFgPickOrders([]);
        return;
      }
      
      // Fetch FG pick orders for each pick order ID
      const fgPickOrdersPromises = pickOrderIds.map(pickOrderId => 
        fetchFGPickOrders(pickOrderId)
      );
      
      const fgPickOrdersResults = await Promise.all(fgPickOrdersPromises);
      
      // Flatten the results (each fetchFGPickOrders returns an array)
      const allFgPickOrders = fgPickOrdersResults.flat();
      
      setFgPickOrders(allFgPickOrders);
      console.log("✅ Fetched FG pick orders:", allFgPickOrders);
    } catch (error) {
      console.error("❌ Error fetching FG pick orders:", error);
      setFgPickOrders([]);
    } finally {
      setFgPickOrdersLoading(false);
    }
  }, [currentUserId, combinedLotData]);
  useEffect(() => {
    if (combinedLotData.length > 0) {
      fetchFgPickOrdersData();
    }
  }, [combinedLotData, fetchFgPickOrdersData]);

  // ✅ Handle QR code button click
  const handleQrCodeClick = (pickOrderId: number) => {
    console.log(`QR Code clicked for pick order ID: ${pickOrderId}`);
    // TODO: Implement QR code functionality
  };

  useEffect(() => {
    startScan();
    return () => {
      stopScan();
      resetScan();
    };
  }, [startScan, stopScan, resetScan]);

  const fetchAllCombinedLotData = useCallback(async (userId?: number) => {
    setCombinedDataLoading(true);
    try {
      const userIdToUse = userId || currentUserId;
      
      console.log(" fetchAllCombinedLotData called with userId:", userIdToUse);
      
      if (!userIdToUse) {
        console.warn("⚠️ No userId available, skipping API call");
        setCombinedLotData([]);
        setOriginalCombinedData([]);
        return;
      }
      
      // ✅ Use the non-auto-assign endpoint - this only fetches existing data
      const allLotDetails = await fetchALLPickOrderLineLotDetails(userIdToUse);
      console.log("✅ All combined lot details:", allLotDetails);
      setCombinedLotData(allLotDetails);
      setOriginalCombinedData(allLotDetails);
    } catch (error) {
      console.error("❌ Error fetching combined lot data:", error);
      setCombinedLotData([]);
      setOriginalCombinedData([]);
    } finally {
      setCombinedDataLoading(false);
    }
  }, [currentUserId]);

  // ✅ Only fetch existing data when session is ready, no auto-assignment
  useEffect(() => {
    if (session && currentUserId && !initializationRef.current) {
      console.log("✅ Session loaded, initializing pick order...");
      initializationRef.current = true;
      
      // ✅ Only fetch existing data, no auto-assignment
      fetchAllCombinedLotData();
    }
  }, [session, currentUserId, fetchAllCombinedLotData]);

  // ✅ Add event listener for manual assignment
  useEffect(() => {
    const handlePickOrderAssigned = () => {
      console.log("🔄 Pick order assigned event received, refreshing data...");
      fetchAllCombinedLotData();
    };

    window.addEventListener('pickOrderAssigned', handlePickOrderAssigned);
    
    return () => {
      window.removeEventListener('pickOrderAssigned', handlePickOrderAssigned);
    };
  }, [fetchAllCombinedLotData]);

  // ✅ Handle QR code submission for matched lot (external scanning)
   // ✅ Handle QR code submission for matched lot (external scanning)
   const handleQrCodeSubmit = useCallback(async (lotNo: string) => {
    console.log(`✅ Processing QR Code for lot: ${lotNo}`);
    
    // ✅ Use current data without refreshing to avoid infinite loop
    const currentLotData = combinedLotData;
    console.log(`🔍 Available lots:`, currentLotData.map(lot => lot.lotNo));
    
    const matchingLots = currentLotData.filter(lot => 
      lot.lotNo === lotNo || 
      lot.lotNo?.toLowerCase() === lotNo.toLowerCase()
    );
    
    if (matchingLots.length === 0) {
      console.error(`❌ Lot not found: ${lotNo}`);
      setQrScanError(true);
      setQrScanSuccess(false);
      return; 
    }
    
    console.log(`✅ Found ${matchingLots.length} matching lots:`, matchingLots);
    setQrScanError(false);
    
    try {
      let successCount = 0;
      let existsCount = 0;
      let errorCount = 0;
      
      for (const matchingLot of matchingLots) {
        console.log(`🔄 Processing pick order line ${matchingLot.pickOrderLineId} for lot ${lotNo}`);
        
        if (matchingLot.stockOutLineId) {
          console.log(`✅ Stock out line already exists for line ${matchingLot.pickOrderLineId}`);
          existsCount++;
        } else {
          const stockOutLineData: CreateStockOutLine = {
            consoCode: matchingLot.pickOrderConsoCode,
            pickOrderLineId: matchingLot.pickOrderLineId,
            inventoryLotLineId: matchingLot.lotId,
            qty: 0.0
          };
          
          console.log(`Creating stock out line for pick order line ${matchingLot.pickOrderLineId}:`, stockOutLineData);
          const result = await createStockOutLine(stockOutLineData);
          console.log(`Create stock out line result for line ${matchingLot.pickOrderLineId}:`, result);
          
          if (result && result.code === "EXISTS") {
            console.log(`✅ Stock out line already exists for line ${matchingLot.pickOrderLineId}`);
            existsCount++;
          } else if (result && result.code === "SUCCESS") {
            console.log(`✅ Stock out line created successfully for line ${matchingLot.pickOrderLineId}`);
            successCount++;
          } else {
            console.error(`❌ Failed to create stock out line for line ${matchingLot.pickOrderLineId}:`, result);
            errorCount++;
          }
        }
      }
      
      // ✅ Always refresh data after processing (success or failure)
      console.log("🔄 Refreshing data after QR code processing...");
      await fetchAllCombinedLotData();
      
      if (successCount > 0 || existsCount > 0) {
        console.log(`✅ QR Code processing completed: ${successCount} created, ${existsCount} already existed`);
        setQrScanSuccess(true);
        setQrScanInput(''); // Clear input after successful processing
        
        // ✅ Clear success state after a delay
        setTimeout(() => {
          setQrScanSuccess(false);
        }, 2000);
      } else {
        console.error(`❌ QR Code processing failed: ${errorCount} errors`);
        setQrScanError(true);
        setQrScanSuccess(false);
        
        // ✅ Clear error state after a delay
        setTimeout(() => {
          setQrScanError(false);
        }, 3000);
      }
    } catch (error) {
      console.error("❌ Error processing QR code:", error);
      setQrScanError(true);
      setQrScanSuccess(false);
      
      // ✅ Still refresh data even on error
      await fetchAllCombinedLotData();
      
      // ✅ Clear error state after a delay
      setTimeout(() => {
        setQrScanError(false);
      }, 3000);
    }
  }, [combinedLotData, fetchAllCombinedLotData]);

  const handleManualInputSubmit = useCallback(() => {
    if (qrScanInput.trim() !== '') {
      handleQrCodeSubmit(qrScanInput.trim());
    }
  }, [qrScanInput, handleQrCodeSubmit]);

  // ✅ Handle QR code submission from modal (internal scanning)
  const handleQrCodeSubmitFromModal = useCallback(async (lotNo: string) => {
    if (selectedLotForQr && selectedLotForQr.lotNo === lotNo) {
      console.log(`✅ QR Code verified for lot: ${lotNo}`);
      
      const requiredQty = selectedLotForQr.requiredQty;
      const lotId = selectedLotForQr.lotId;
      
      // Create stock out line
      const stockOutLineData: CreateStockOutLine = {
        consoCode: selectedLotForQr.pickOrderConsoCode, // ✅ Use pickOrderConsoCode instead of pickOrderCode
        pickOrderLineId: selectedLotForQr.pickOrderLineId,
        inventoryLotLineId: selectedLotForQr.lotId,
        qty: 0.0
      };
      
      try {
        await createStockOutLine(stockOutLineData);
        console.log("Stock out line created successfully!");
        
        // Close modal
        setQrModalOpen(false);
        setSelectedLotForQr(null);
        
        // Set pick quantity
        const lotKey = `${selectedLotForQr.pickOrderLineId}-${lotId}`;
        setTimeout(() => {
          setPickQtyData(prev => ({
            ...prev,
            [lotKey]: requiredQty
          }));
          console.log(`✅ Auto-set pick quantity to ${requiredQty} for lot ${lotNo}`);
        }, 500);
        
        // Refresh data
        await fetchAllCombinedLotData();
      } catch (error) {
        console.error("Error creating stock out line:", error);
      }
    }
  }, [selectedLotForQr, fetchAllCombinedLotData]);

  // ✅ Outside QR scanning - process QR codes from outside the page automatically
  useEffect(() => {
    if (qrValues.length > 0 && combinedLotData.length > 0) {
      const latestQr = qrValues[qrValues.length - 1];
      
      // Extract lot number from QR code
      let lotNo = '';
      try {
        const qrData = JSON.parse(latestQr);
        if (qrData.stockInLineId && qrData.itemId) {
          // For JSON QR codes, we need to fetch the lot number
          fetchStockInLineInfo(qrData.stockInLineId)
            .then((stockInLineInfo) => {
              console.log("Outside QR scan - Stock in line info:", stockInLineInfo);
              const extractedLotNo = stockInLineInfo.lotNo;
              if (extractedLotNo) {
                console.log(`Outside QR scan detected (JSON): ${extractedLotNo}`);
                handleQrCodeSubmit(extractedLotNo);
              }
            })
            .catch((error) => {
              console.error("Outside QR scan - Error fetching stock in line info:", error);
            });
          return; // Exit early for JSON QR codes
        }
      } catch (error) {
        // Not JSON format, treat as direct lot number
        lotNo = latestQr.replace(/[{}]/g, '');
      }
      
      // For direct lot number QR codes
      if (lotNo) {
        console.log(`Outside QR scan detected (direct): ${lotNo}`);
        handleQrCodeSubmit(lotNo);
      }
    }
  }, [qrValues, combinedLotData, handleQrCodeSubmit]);


  const handlePickQtyChange = useCallback((lotKey: string, value: number | string) => {
    if (value === '' || value === null || value === undefined) {
      setPickQtyData(prev => ({
        ...prev,
        [lotKey]: 0
      }));
      return;
    }
    
    const numericValue = typeof value === 'string' ? parseFloat(value) : value;
    
    if (isNaN(numericValue)) {
      setPickQtyData(prev => ({
        ...prev,
        [lotKey]: 0
      }));
      return;
    }
    
    setPickQtyData(prev => ({
      ...prev,
      [lotKey]: numericValue
    }));
  }, []);

  const [autoAssignStatus, setAutoAssignStatus] = useState<'idle' | 'checking' | 'assigned' | 'no_orders'>('idle');
  const [autoAssignMessage, setAutoAssignMessage] = useState<string>('');
  const [completionStatus, setCompletionStatus] = useState<PickOrderCompletionResponse | null>(null);

  const checkAndAutoAssignNext = useCallback(async () => {
    if (!currentUserId) return;
    
    try {
      const completionResponse = await checkPickOrderCompletion(currentUserId);
      
      if (completionResponse.code === "SUCCESS" && completionResponse.entity?.hasCompletedOrders) {
        console.log("Found completed pick orders, auto-assigning next...");
        // ✅ 移除前端的自动分配逻辑，因为后端已经处理了
        // await handleAutoAssignAndRelease(); // 删除这个函数
      }
    } catch (error) {
      console.error("Error checking pick order completion:", error);
    }
  }, [currentUserId]);

  // ✅ Handle submit pick quantity
  const handleSubmitPickQty = useCallback(async (lot: any) => {
    const lotKey = `${lot.pickOrderLineId}-${lot.lotId}`;
    const newQty = pickQtyData[lotKey] || 0;
    
    if (!lot.stockOutLineId) {
      console.error("No stock out line found for this lot");
      return;
    }
    
    try {
      const currentActualPickQty = lot.actualPickQty || 0;
      const cumulativeQty = currentActualPickQty + newQty;
      
      let newStatus = 'partially_completed';
      
      if (cumulativeQty >= lot.requiredQty) {
        newStatus = 'completed';
      }
      
      console.log(`=== PICK QUANTITY SUBMISSION DEBUG ===`);
      console.log(`Lot: ${lot.lotNo}`);
      console.log(`Required Qty: ${lot.requiredQty}`);
      console.log(`Current Actual Pick Qty: ${currentActualPickQty}`);
      console.log(`New Submitted Qty: ${newQty}`);
      console.log(`Cumulative Qty: ${cumulativeQty}`);
      console.log(`New Status: ${newStatus}`);
      console.log(`=====================================`);
      
      await updateStockOutLineStatus({
        id: lot.stockOutLineId,
        status: newStatus,
        qty: cumulativeQty
      });
      
      if (newQty > 0) {
        await updateInventoryLotLineQuantities({
          inventoryLotLineId: lot.lotId,
          qty: newQty,
          status: 'available',
          operation: 'pick'
        });
      }
      
      // ✅ FIXED: Use the proper API function instead of direct fetch
      if (newStatus === 'completed' && lot.pickOrderConsoCode) {
        console.log(`✅ Lot ${lot.lotNo} completed, checking if pick order ${lot.pickOrderConsoCode} is complete...`);
        
        try {
          // ✅ Use the imported API function instead of direct fetch
          const completionResponse = await checkAndCompletePickOrderByConsoCode(lot.pickOrderConsoCode);
          console.log(`✅ Pick order completion check result:`, completionResponse);
          
          if (completionResponse.code === "SUCCESS") {
            console.log(`�� Pick order ${lot.pickOrderConsoCode} completed successfully!`);
          } else if (completionResponse.message === "not completed") {
            console.log(`⏳ Pick order not completed yet, more lines remaining`);
          } else {
            console.error(`❌ Error checking completion: ${completionResponse.message}`);
          }
        } catch (error) {
          console.error("Error checking pick order completion:", error);
        }
      }
      
      await fetchAllCombinedLotData();
      console.log("Pick quantity submitted successfully!");
      
      setTimeout(() => {
        checkAndAutoAssignNext();
      }, 1000);
      
    } catch (error) {
      console.error("Error submitting pick quantity:", error);
    }
  }, [pickQtyData, fetchAllCombinedLotData, checkAndAutoAssignNext]);

  // ✅ Handle reject lot
  const handleRejectLot = useCallback(async (lot: any) => {
    if (!lot.stockOutLineId) {
      console.error("No stock out line found for this lot");
      return;
    }
  
    try {
      await updateStockOutLineStatus({
        id: lot.stockOutLineId,
        status: 'rejected',
        qty: 0
      });
      
      await fetchAllCombinedLotData();
      console.log("Lot rejected successfully!");
      
      setTimeout(() => {
        checkAndAutoAssignNext();
      }, 1000);
      
    } catch (error) {
      console.error("Error rejecting lot:", error);
    }
  }, [fetchAllCombinedLotData, checkAndAutoAssignNext]);

  // ✅ Handle pick execution form
  const handlePickExecutionForm = useCallback((lot: any) => {
    console.log("=== Pick Execution Form ===");
    console.log("Lot data:", lot);
    
    if (!lot) {
      console.warn("No lot data provided for pick execution form");
      return;
    }
    
    console.log("Opening pick execution form for lot:", lot.lotNo);
    
    setSelectedLotForExecutionForm(lot);
    setPickExecutionFormOpen(true);
    
    console.log("Pick execution form opened for lot ID:", lot.lotId);
  }, []);

  const handlePickExecutionFormSubmit = useCallback(async (data: any) => {
    try {
      console.log("Pick execution form submitted:", data);
      
      const result = await recordPickExecutionIssue(data);
      console.log("Pick execution issue recorded:", result);
      
      if (result && result.code === "SUCCESS") {
        console.log("✅ Pick execution issue recorded successfully");
      } else {
        console.error("❌ Failed to record pick execution issue:", result);
      }
      
      setPickExecutionFormOpen(false);
      setSelectedLotForExecutionForm(null);
      
      await fetchAllCombinedLotData();
    } catch (error) {
      console.error("Error submitting pick execution form:", error);
    }
  }, [fetchAllCombinedLotData]);

  // ✅ Calculate remaining required quantity
  const calculateRemainingRequiredQty = useCallback((lot: any) => {
    const requiredQty = lot.requiredQty || 0;
    const stockOutLineQty = lot.stockOutLineQty || 0;
    return Math.max(0, requiredQty - stockOutLineQty);
  }, []);

  // Search criteria
  const searchCriteria: Criterion<any>[] = [
    {
      label: t("Pick Order Code"),
      paramName: "pickOrderCode",
      type: "text",
    },
      {
        label: t("Item Code"),
        paramName: "itemCode",
        type: "text",
      },
      {
        label: t("Item Name"),
        paramName: "itemName",
        type: "text",
      },
      {
      label: t("Lot No"),
      paramName: "lotNo",
      type: "text",
    },
  ];

  const handleSearch = useCallback((query: Record<string, any>) => {
    setSearchQuery({ ...query });
    console.log("Search query:", query);

    if (!originalCombinedData) return;

    const filtered = originalCombinedData.filter((lot: any) => {
      const pickOrderCodeMatch = !query.pickOrderCode || 
        lot.pickOrderCode?.toLowerCase().includes((query.pickOrderCode || "").toLowerCase());
      
        const itemCodeMatch = !query.itemCode || 
        lot.itemCode?.toLowerCase().includes((query.itemCode || "").toLowerCase());
        
        const itemNameMatch = !query.itemName || 
        lot.itemName?.toLowerCase().includes((query.itemName || "").toLowerCase());
      
      const lotNoMatch = !query.lotNo || 
        lot.lotNo?.toLowerCase().includes((query.lotNo || "").toLowerCase());
      
      return pickOrderCodeMatch && itemCodeMatch && itemNameMatch && lotNoMatch;
    });
    
    setCombinedLotData(filtered);
    console.log("Filtered lots count:", filtered.length);
  }, [originalCombinedData]);

  const handleReset = useCallback(() => {
    setSearchQuery({});
    if (originalCombinedData) {
      setCombinedLotData(originalCombinedData);
    }
  }, [originalCombinedData]);

  const handlePageChange = useCallback((event: unknown, newPage: number) => {
    setPaginationController(prev => ({
      ...prev,
      pageNum: newPage,
    }));
  }, []);

  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    const newPageSize = parseInt(event.target.value, 10);
    setPaginationController({
      pageNum: 0,
      pageSize: newPageSize,
    });
  }, []);

  // Pagination data with sorting by routerIndex
  const paginatedData = useMemo(() => {
    // ✅ Sort by routerIndex first, then by other criteria
    const sortedData = [...combinedLotData].sort((a, b) => {
      const aIndex = a.routerIndex || 0;
      const bIndex = b.routerIndex || 0;
      
      // Primary sort: by routerIndex
      if (aIndex !== bIndex) {
        return aIndex - bIndex;
      }
      
      // Secondary sort: by pickOrderCode if routerIndex is the same
      if (a.pickOrderCode !== b.pickOrderCode) {
        return a.pickOrderCode.localeCompare(b.pickOrderCode);
      }
      
      // Tertiary sort: by lotNo if everything else is the same
      return (a.lotNo || '').localeCompare(b.lotNo || '');
    });
    
    const startIndex = paginationController.pageNum * paginationController.pageSize;
    const endIndex = startIndex + paginationController.pageSize;
    return sortedData.slice(startIndex, endIndex);
  }, [combinedLotData, paginationController]);

  return (
    <FormProvider {...formProps}>
      <Stack spacing={2}>
        {/* Search Box */}
        
        <Box>
          {/*
          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
            <Typography variant="h6" gutterBottom sx={{ mb: 0 }}>
              {t("FG Pick Orders")}
            </Typography>
          </Box>
          */}
          {fgPickOrdersLoading ? (
            <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
              <CircularProgress />
            </Box>
          ) : (
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {fgPickOrders.length === 0 ? (
                <Box sx={{ p: 3, textAlign: 'center' }}>
                  <Typography variant="body2" color="text.secondary">
                    {t("No FG pick orders found")}
                  </Typography>
                </Box>
              ) : (
                fgPickOrders.map((fgOrder) => (
                  <FGPickOrderCard
                    key={fgOrder.pickOrderId}
                    fgOrder={fgOrder}
                    onQrCodeClick={handleQrCodeClick}
                  />
                ))
              )}
            </Box>
          )}
        </Box>



        

        {/* Combined Lot Table */}
        <Box>
          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
            <Typography variant="h6" gutterBottom sx={{ mb: 0 }}>
              {t("All Pick Order Lots")}
            </Typography>
       
           
          </Box>
          
          <TableContainer component={Paper}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>{t("Index")}</TableCell>
                  <TableCell>{t("Route")}</TableCell>
                  <TableCell>{t("Item Name")}</TableCell>
                  <TableCell>{t("Lot#")}</TableCell>
                  <TableCell>{t("Target Date")}</TableCell>
                  {/* <TableCell>{t("Lot Location")}</TableCell> */}
                  <TableCell align="right">{t("Lot Required Pick Qty")}</TableCell>
                  <TableCell align="right">{t("Original Available Qty")}</TableCell>
                  <TableCell align="center">{t("Lot Actual Pick Qty")}</TableCell>
                 {/* <TableCell align="right">{t("Remaining Available Qty")}</TableCell> */}
                  <TableCell align="center">{t("Action")}</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {paginatedData.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={11} align="center">
                      <Typography variant="body2" color="text.secondary">
                        {t("No data available")}
                      </Typography>
                    </TableCell>
                  </TableRow>
                ) : (
                  paginatedData.map((lot, index) => (
                    <TableRow 
                      key={`${lot.pickOrderLineId}-${lot.lotId}`}
                      sx={{
                        backgroundColor: lot.lotAvailability === 'rejected' ? 'grey.100' : 'inherit',
                        opacity: lot.lotAvailability === 'rejected' ? 0.6 : 1,
                        '& .MuiTableCell-root': {
                          color: lot.lotAvailability === 'rejected' ? 'text.disabled' : 'inherit'
                        }
                      }}
                    >
                      <TableCell>
                        <Typography variant="body2" fontWeight="bold">
                          {lot.routerIndex || index + 1}
                        </Typography>
                      </TableCell>
                      <TableCell>
                        <Typography variant="body2">
                          {lot.routerRoute || '-'}
                        </Typography>
                      </TableCell>
                      <TableCell>{lot.itemName}</TableCell>
                      <TableCell>
                        <Box>
                          <Typography 
                            sx={{ 
                              color: lot.lotAvailability === 'rejected' ? 'text.disabled' : 'inherit',
                              opacity: lot.lotAvailability === 'rejected' ? 0.6 : 1
                            }}
                          >
                            {lot.lotNo}
                          </Typography>
                        </Box>
                      </TableCell>
                      <TableCell>{lot.pickOrderTargetDate}</TableCell>
                      {/* <TableCell>{lot.location}</TableCell> */} 
                      <TableCell align="right">{calculateRemainingRequiredQty(lot).toLocaleString()}</TableCell>
                      <TableCell align="right">
                        {(() => {
                          const inQty = lot.inQty || 0;
                          const outQty = lot.outQty || 0;
                          const result = inQty - outQty;
                          return result.toLocaleString();
                        })()}
                      </TableCell>
                      <TableCell align="center">
                        {/* ✅ QR Scan Button if not scanned, otherwise show TextField + Issue button */}
                        {!lot.stockOutLineId ? (
                          <Button
                            variant="outlined"
                            size="small"
                            onClick={() => {
                              setSelectedLotForQr(lot);
                              setQrModalOpen(true);
                              resetScan();
                            }}
                            disabled={
                              (lot.lotAvailability === 'expired' || 
                               lot.lotAvailability === 'status_unavailable' || 
                               lot.lotAvailability === 'rejected')
                            }
                            sx={{ 
                              fontSize: '0.7rem',
                              py: 0.5,
                              minHeight: '40px',
                              whiteSpace: 'nowrap',
                              minWidth: '80px',
                            }}
                            startIcon={<QrCodeIcon />}
                            title="Click to scan QR code"
                          >
                            {t("Scan")}
                          </Button>
                        ) : (
                          // ✅ When stockOutLineId exists, show TextField + Issue button
                          <Stack direction="row" spacing={1} alignItems="center">
                            <TextField
                              type="number"
                              size="small"
                              value={pickQtyData[`${lot.pickOrderLineId}-${lot.lotId}`] || ''}
                              onChange={(e) => {
                                const lotKey = `${lot.pickOrderLineId}-${lot.lotId}`;
                                handlePickQtyChange(lotKey, parseFloat(e.target.value) || 0);
                              }}
                              disabled={
                                (lot.lotAvailability === 'expired' || 
                                 lot.lotAvailability === 'status_unavailable' || 
                                 lot.lotAvailability === 'rejected') ||
                                lot.stockOutLineStatus === 'completed'
                              }
                              inputProps={{
                                min: 0,
                                max: calculateRemainingRequiredQty(lot),
                                step: 0.01
                              }}
                              sx={{ 
                                width: '80px',
                                '& .MuiInputBase-input': {
                                  fontSize: '0.75rem',
                                  textAlign: 'center',
                                  padding: '8px 4px'
                                }
                              }}
                              placeholder="0"
                            />
                            
                            <Button
                              variant="outlined"
                              size="small"
                              onClick={() => handlePickExecutionForm(lot)}
                              sx={{ 
                                fontSize: '0.7rem',
                                py: 0.5,
                                minHeight: '28px',
                                minWidth: '60px',
                                borderColor: 'warning.main',
                                color: 'warning.main'
                              }}
                              title="Report missing or bad items"
                            >
                              {t("Issue")}
                            </Button>
                          </Stack>
                        )}
                      </TableCell>
                      {/* <TableCell align="right">
                        {(() => {
                          const inQty = lot.inQty || 0;
                          const outQty = lot.outQty || 0;
                          const result = inQty - outQty;
                          return result.toLocaleString();
                        })()}
                      </TableCell> */}
                      <TableCell align="center">
                        <Stack direction="column" spacing={1} alignItems="center">
                          <Button
                            variant="contained"
                            onClick={() => {
                              handleSubmitPickQty(lot);
                            }}
                            disabled={
                              (lot.lotAvailability === 'expired' || 
                               lot.lotAvailability === 'status_unavailable' || 
                               lot.lotAvailability === 'rejected') ||
                              !pickQtyData[`${lot.pickOrderLineId}-${lot.lotId}`] ||
                              !lot.stockOutLineStatus ||
                              !['pending','checked', 'partially_completed'].includes(lot.stockOutLineStatus.toLowerCase())
                            }
                            sx={{ 
                              fontSize: '0.75rem',
                              py: 0.5,
                              minHeight: '28px'
                            }}
                          >
                            {t("Submit")}
                          </Button>
                        </Stack>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </TableContainer>
          
          <TablePagination
            component="div"
            count={combinedLotData.length}
            page={paginationController.pageNum}
            rowsPerPage={paginationController.pageSize}
            onPageChange={handlePageChange}
            onRowsPerPageChange={handlePageSizeChange}
            rowsPerPageOptions={[10, 25, 50]}
            labelRowsPerPage={t("Rows per page")}
            labelDisplayedRows={({ from, to, count }) => 
              `${from}-${to} of ${count !== -1 ? count : `more than ${to}`}`
            }
          />
        </Box>
      </Stack>

      {/* ✅ QR Code Modal */}
      <QrCodeModal
        open={qrModalOpen}
        onClose={() => {
          setQrModalOpen(false);
          setSelectedLotForQr(null);
          stopScan();
          resetScan();
        }}
        lot={selectedLotForQr}
        combinedLotData={combinedLotData} // ✅ Add this prop
        onQrCodeSubmit={handleQrCodeSubmitFromModal}
      />

      {/* ✅ Good Pick Execution Form Modal */}
      {pickExecutionFormOpen && selectedLotForExecutionForm && (
        <GoodPickExecutionForm
          open={pickExecutionFormOpen}
          onClose={() => {
            setPickExecutionFormOpen(false);
            setSelectedLotForExecutionForm(null);
          }}
          onSubmit={handlePickExecutionFormSubmit}
          selectedLot={selectedLotForExecutionForm}
          selectedPickOrderLine={{
            id: selectedLotForExecutionForm.pickOrderLineId,
            itemId: selectedLotForExecutionForm.itemId,
            itemCode: selectedLotForExecutionForm.itemCode,
            itemName: selectedLotForExecutionForm.itemName,
            pickOrderCode: selectedLotForExecutionForm.pickOrderCode,
            // ✅ Add missing required properties from GetPickOrderLineInfo interface
            availableQty: selectedLotForExecutionForm.availableQty || 0,
            requiredQty: selectedLotForExecutionForm.requiredQty || 0,
            uomCode: selectedLotForExecutionForm.uomCode || '',
            uomDesc: selectedLotForExecutionForm.uomDesc || '',
            pickedQty: selectedLotForExecutionForm.actualPickQty || 0, // ✅ Use pickedQty instead of actualPickQty
            suggestedList: [] // ✅ Add required suggestedList property
          }}
          pickOrderId={selectedLotForExecutionForm.pickOrderId}
          pickOrderCreateDate={new Date()}
        />
      )}
    </FormProvider>
  );
};

export default PickExecution;