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

"use client";

import { Box, Button, Grid, Stack, Typography, Select, MenuItem, FormControl, InputLabel ,Tooltip} from "@mui/material";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useSession } from "next-auth/react";
import { SessionWithTokens } from "@/config/authConfig";
import { fetchStoreLaneSummary, assignByLane, type StoreLaneSummary } from "@/app/api/pickOrder/actions";
import Swal from "sweetalert2";
import dayjs from "dayjs";

interface Props {
  onPickOrderAssigned?: () => void;
  onSwitchToDetailTab?: () => void;
}

const FinishedGoodFloorLanePanel: React.FC<Props> = ({ onPickOrderAssigned, onSwitchToDetailTab }) => {
  const { t } = useTranslation("pickOrder");
  const { data: session } = useSession() as { data: SessionWithTokens | null };
  const currentUserId = session?.id ? parseInt(session.id) : undefined;

  const [summary2F, setSummary2F] = useState<StoreLaneSummary | null>(null);
  const [summary4F, setSummary4F] = useState<StoreLaneSummary | null>(null);
  const [isLoadingSummary, setIsLoadingSummary] = useState(false);
  const [isAssigning, setIsAssigning] = useState(false);
  //const [selectedDate, setSelectedDate] = useState<string>("today");
  const [selectedDate, setSelectedDate] = useState<string>("today");
  const [releaseType, setReleaseType] = useState<string>("batch");
  const loadSummaries = useCallback(async () => {
    setIsLoadingSummary(true);
    try {
      // Convert selectedDate to the format needed
      let dateParam: string | undefined;
      if (selectedDate === "today") {
        dateParam = dayjs().format('YYYY-MM-DD');
      } else if (selectedDate === "tomorrow") {
        dateParam = dayjs().add(1, 'day').format('YYYY-MM-DD');
      } else if (selectedDate === "dayAfterTomorrow") {
        dateParam = dayjs().add(2, 'day').format('YYYY-MM-DD');
      }
      
      const [s2, s4] = await Promise.all([
        fetchStoreLaneSummary("2/F", dateParam, releaseType),
        fetchStoreLaneSummary("4/F", dateParam, releaseType)
      ]);
      setSummary2F(s2);
      setSummary4F(s4);
    } catch (error) {
      console.error("Error loading summaries:", error);
    } finally {
      setIsLoadingSummary(false);
    }
  }, [selectedDate, releaseType]);

  // 初始化
  useEffect(() => {
    loadSummaries();
  }, [loadSummaries]);

  const handleAssignByLane = useCallback(async (
    storeId: string, 
    truckDepartureTime: string, 
    truckLanceCode: string,
    requiredDate: string

  ) => {
    if (!currentUserId) {
      console.error("Missing user id in session");
      return;
    }
    let dateParam: string | undefined;
    if (requiredDate === "today") {
      dateParam = dayjs().format('YYYY-MM-DD');
    } else if (requiredDate === "tomorrow") {
      dateParam = dayjs().add(1, 'day').format('YYYY-MM-DD');
    } else if (requiredDate === "dayAfterTomorrow") {
      dateParam = dayjs().add(2, 'day').format('YYYY-MM-DD');
    }
    setIsAssigning(true);
    try {
      const res = await assignByLane(currentUserId, storeId, truckLanceCode, truckDepartureTime, dateParam);
    
    if (res.code === "SUCCESS") {
      console.log(" Successfully assigned pick order from lane", truckLanceCode);
      window.dispatchEvent(new CustomEvent('pickOrderAssigned'));
      loadSummaries(); // 刷新按钮状态
      onPickOrderAssigned?.();
      onSwitchToDetailTab?.();
    } else if (res.code === "USER_BUSY") {
      Swal.fire({
        icon: "warning",
        title: t("Warning"),
        text: t("You already have a pick order in progess. Please complete it first before taking next pick order."),
        confirmButtonText: t("Confirm"),
        confirmButtonColor: "#8dba00"
      });
      window.dispatchEvent(new CustomEvent('pickOrderAssigned'));
    } else if (res.code === "NO_ORDERS") {
      Swal.fire({
        icon: "info",
        title: t("Info"),
        text: t("No available pick order(s) for this lane."),
        confirmButtonText: t("Confirm"),
        confirmButtonColor: "#8dba00"
      });
    } else {
      console.log("ℹ️ Assignment result:", res.message);
    }
  } catch (error) {
    console.error("❌ Error assigning by lane:", error);
    Swal.fire({
      icon: "error",
      title: t("Error"),
      text: t("Error occurred during assignment."),
      confirmButtonText: t("Confirm"),
      confirmButtonColor: "#8dba00"
    });
  } finally {
    setIsAssigning(false);
  }
}, [currentUserId, t, selectedDate, onPickOrderAssigned, onSwitchToDetailTab, loadSummaries]);

const handleLaneButtonClick = useCallback(async (
  storeId: string,
  truckDepartureTime: string,
  truckLanceCode: string,
  requiredDate: string,
  unassigned: number,
  total: number
) => {
  // Format the date for display
  let dateDisplay: string;
  if (requiredDate === "today") {
    dateDisplay = dayjs().format('YYYY-MM-DD');
  } else if (requiredDate === "tomorrow") {
    dateDisplay = dayjs().add(1, 'day').format('YYYY-MM-DD');
  } else if (requiredDate === "dayAfterTomorrow") {
    dateDisplay = dayjs().add(2, 'day').format('YYYY-MM-DD');
  } else {
    dateDisplay = requiredDate;
  }

  // Show confirmation dialog
  const result = await Swal.fire({
    title: t("Confirm Assignment"),
    html: `
      <div style="text-align: left; padding: 10px 0;">
        <p><strong>${t("Store")}:</strong> ${storeId}</p>
        <p><strong>${t("Lane Code")}:</strong> ${truckLanceCode}</p>
        <p><strong>${t("Departure Time")}:</strong> ${truckDepartureTime}</p>
        <p><strong>${t("Required Date")}:</strong> ${dateDisplay}</p>
        <p><strong>${t("Available Orders")}:</strong> ${unassigned}/${total}</p>
      </div>
    `,
    icon: "question",
    showCancelButton: true,
    confirmButtonText: t("Confirm"),
    cancelButtonText: t("Cancel"),
    confirmButtonColor: "#8dba00",
    cancelButtonColor: "#F04438",
    reverseButtons: true
  });

  // Only proceed if user confirmed
  if (result.isConfirmed) {
    await handleAssignByLane(storeId, truckDepartureTime, truckLanceCode, requiredDate);
  }
}, [handleAssignByLane, t]);

const getDateLabel = (offset: number) => {
  return dayjs().add(offset, 'day').format('YYYY-MM-DD');
};

  // Flatten rows to create one box per lane
  const flattenRows = (rows: any[]) => {
    const flattened: any[] = [];
    rows.forEach(row => {
      row.lanes.forEach((lane: any) => {
        flattened.push({
          truckDepartureTime: row.truckDepartureTime,
          lane: lane
        });
      });
    });
    return flattened;
  };

  return (
    <Box sx={{ mb: 2 }}>
      {/* Date Selector Dropdown and Legend */}
      <Stack direction="row" spacing={2} sx={{ mb: 2, alignItems: 'flex-start' }}>
        <Box sx={{ maxWidth: 300 }}>
          <FormControl fullWidth size="small">
            <InputLabel id="date-select-label">{t("Select Date")}</InputLabel>
      
            <Select
              labelId="date-select-label"
              id="date-select"
              value={selectedDate}
              label={t("Select Date")}
              
              onChange={(e) => { {
                setSelectedDate(e.target.value);
                loadSummaries();
              }}}
            >

              <MenuItem value="today">
                {t("Today")} ({getDateLabel(0)})
              </MenuItem>
              <MenuItem value="tomorrow">
                {t("Tomorrow")} ({getDateLabel(1)})
              </MenuItem>
              <MenuItem value="dayAfterTomorrow">
                {t("Day After Tomorrow")} ({getDateLabel(2)})
              </MenuItem>
            </Select>
          </FormControl>
        </Box>
        <Box sx={{minWidth: 140, maxWidth: 300 }}>
          <FormControl fullWidth size="small">
            <InputLabel id="release-type-select-label">{t("Release Type")}</InputLabel>
      
            <Select
              labelId="release-type-select-label"
              id="release-type-select"
              value={releaseType}
              label={t("Release Type")}
              
              onChange={(e) => { {
                setReleaseType(e.target.value);
                loadSummaries();
              }}}
            >

              <MenuItem value="batch">
                {t("Batch")}
              </MenuItem>
              <MenuItem value="single">
                {t("Single")}
              </MenuItem>
        
            </Select>
          </FormControl>
        </Box>
        <Box 
          sx={{ 
            p: 1,
            backgroundColor: '#fafafa',
            borderRadius: 1,
            border: '1px solid #e0e0e0',
            flex: 1,
            maxWidth: 400
          }}
        >
          <Typography variant="body2" sx={{ display: 'block', color: 'text.secondary', fontWeight: 600 }}>
            {t("EDT - Lane Code (Unassigned/Total)")}
          </Typography>
        </Box>
      </Stack>
      <Stack direction="row" spacing={2} sx={{ mb: 2, alignItems: 'flex-start' }}>
     

   
    
        
      </Stack>


      {/* Grid containing both floors */}
      <Grid container spacing={2}>
        {/* 2/F 楼层面板 */}
        <Grid item xs={12}>
          <Stack direction="row" spacing={2} alignItems="flex-start">
            {/* Floor Label */}
            <Typography 
              variant="h6" 
              sx={{ 
                fontWeight: 600,
                minWidth: 60,
                pt: 1
              }}
            >
              2/F
            </Typography>
            
            {/* Content Box */}
            <Box
              sx={{
                border: '1px solid #e0e0e0',
                borderRadius: 1,
                p: 1,
                backgroundColor: '#fafafa',
                flex: 1
              }}
            >
              {isLoadingSummary ? (
                <Typography variant="caption"> {t("Loading...")}</Typography>
              ) : !summary2F?.rows || summary2F.rows.length === 0 ? (
                <Typography 
                  variant="body2" 
                  color="text.secondary"
                  sx={{
                    fontWeight: 600,
                    fontSize: '1rem',
                    textAlign: 'center',
                    py: 1
                  }}
                >
                  {t("No entries available")}
                </Typography>
              ) : (
                <Grid container spacing={1}>
                  {flattenRows(summary2F.rows).map((item, idx) => (
                    <Grid item xs={12} sm={6} md={3} key={idx}>
                      <Stack
                        direction="row"
                        spacing={1}
                        alignItems="center"
                        sx={{
                          border: '1px solid #e0e0e0',
                          borderRadius: 0.5,
                          p: 1,
                          backgroundColor: '#fff',
                          height: '100%'
                        }}
                      >
                        {/* Time on the left */}
                        <Typography 
                          variant="body2"
                          sx={{ 
                            fontWeight: 600,
                            fontSize: '1rem',
                            minWidth: 50,
                            whiteSpace: 'nowrap'
                          }}
                        >
                          {item.truckDepartureTime}
                        </Typography>
                        
                        {/* Single Button on the right */}
                        <Button
                          variant="outlined"
                          size="medium"
                          disabled={item.lane.unassigned === 0 || isAssigning}
                          onClick={() => handleLaneButtonClick("2/F", item.truckDepartureTime, item.lane.truckLanceCode, selectedDate, item.lane.unassigned, item.lane.total)}
                          sx={{
                            flex: 1,
                            fontSize: '1.1rem',
                            py: 1,
                            px: 1.5,
                            borderWidth: 1,
                            borderColor: '#ccc',
                            fontWeight: 500,
                            '&:hover': { 
                              borderColor: '#999',
                              backgroundColor: '#f5f5f5'
                            }
                          }}
                        >
                          {`${item.lane.truckLanceCode} (${item.lane.unassigned}/${item.lane.total})`}
                        </Button>
                      </Stack>
                    </Grid>
                  ))}
                </Grid>
              )}
            </Box>
          </Stack>
        </Grid>

        {/* 4/F 楼层面板 */}
        <Grid item xs={12}>
          <Stack direction="row" spacing={2} alignItems="flex-start">
            {/* Floor Label */}
            <Typography 
              variant="h6" 
              sx={{ 
                fontWeight: 600,
                minWidth: 60,
                pt: 1
              }}
            >
              4/F
            </Typography>
            
            {/* Content Box */}
            <Box
              sx={{
                border: '1px solid #e0e0e0',
                borderRadius: 1,
                p: 1,
                backgroundColor: '#fafafa',
                flex: 1
              }}
            >
              {isLoadingSummary ? (
                <Typography variant="caption">{t("Loading...")}</Typography>
              ) : !summary4F?.rows || summary4F.rows.length === 0 ? (
                <Typography 
                  variant="body2" 
                  color="text.secondary"
                  sx={{
                    fontWeight: 600,
                    fontSize: '1rem',
                    textAlign: 'center',
                    py: 1
                  }}
                >
                  {t("No entries available")}
                </Typography>
              ) : (
                <Grid container spacing={1}>
                  {flattenRows(summary4F.rows).map((item, idx) => (
                    <Grid item xs={12} sm={6} md={3} key={idx}>
                      <Stack
                        direction="row"
                        spacing={1}
                        alignItems="center"
                        sx={{
                          border: '1px solid #e0e0e0',
                          borderRadius: 0.5,
                          p: 1,
                          backgroundColor: '#fff',
                          height: '100%'
                        }}
                      >
                        {/* Time on the left */}
                        <Typography 
                          variant="body2"
                          sx={{ 
                            fontWeight: 600,
                            fontSize: '1rem',
                            minWidth: 50,
                            whiteSpace: 'nowrap'
                          }}
                        >
                          {item.truckDepartureTime}
                        </Typography>
                        
                        {/* Single Button on the right */}
                        <Button
                          variant="outlined"
                          size="medium"
                          disabled={item.lane.unassigned === 0 || isAssigning}
                          onClick={() => handleLaneButtonClick("4/F", item.truckDepartureTime, item.lane.truckLanceCode, selectedDate, item.lane.unassigned, item.lane.total)}
                          sx={{
                            flex: 1,
                            fontSize: '1.1rem',
                            py: 1,
                            px: 1.5,
                            borderWidth: 1,
                            borderColor: '#ccc',
                            fontWeight: 500,
                            '&:hover': { 
                              borderColor: '#999',
                              backgroundColor: '#f5f5f5'
                            }
                          }}
                        >
                          {`${item.lane.truckLanceCode} (${item.lane.unassigned}/${item.lane.total})`}
                        </Button>
                      </Stack>
                    </Grid>
                  ))}
                </Grid>
              )}
            </Box>
          </Stack>
        </Grid>
      </Grid>



      

    </Box>
  );
};

export default FinishedGoodFloorLanePanel;