"use client";
import React, { useCallback, useEffect, useState, useMemo } from "react";
import {
  Box,
  Button,
  Paper,
  Stack,
  Typography,
  TextField,
  Grid,
  Card,
  CardContent,
  CircularProgress,
  Tabs,
  Tab,
  TabsProps,
  IconButton,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  InputAdornment 
} from "@mui/material";
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { useTranslation } from "react-i18next";
import { fetchProductProcessesByJobOrderId ,deleteJobOrder, updateProductProcessPriority, updateJoPlanStart} from "@/app/api/jo/actions";
import ProductionProcessDetail from "./ProductionProcessDetail";
import dayjs from "dayjs";
import { OUTPUT_DATE_FORMAT, integerFormatter, arrayToDateString } from "@/app/utils/formatUtil";
import StyledDataGrid from "../StyledDataGrid/StyledDataGrid";
import { GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
import { decimalFormatter } from "@/app/utils/formatUtil";
import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
import DoDisturbAltRoundedIcon from '@mui/icons-material/DoDisturbAltRounded';
import { fetchInventories } from "@/app/api/inventory/actions";
import { InventoryResult } from "@/app/api/inventory";
import { releaseJo, startJo } from "@/app/api/jo/actions";
import JobPickExecutionsecondscan from "../Jodetail/JobPickExecutionsecondscan";
import ProcessSummaryHeader from "./ProcessSummaryHeader";
import EditIcon from "@mui/icons-material/Edit";
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { dayjsToDateString } from "@/app/utils/formatUtil";

interface JobOrderLine {
  id: number;
  jobOrderId: number;
  jobOrderCode: string;
  itemId: number;
  itemCode: string;
  itemName: string;
  reqQty: number;
  stockQty: number;
  uom: string;
  shortUom: string;
  availableStatus: string;
  type: string;
}

interface ProductProcessJobOrderDetailProps {
  jobOrderId: number;
  onBack: () => void;
  fromJosave?: boolean;
}

const ProductionProcessJobOrderDetail: React.FC<ProductProcessJobOrderDetailProps> = ({
  jobOrderId,
  onBack,
  fromJosave,
}) => {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [processData, setProcessData] = useState<any>(null);
  const [jobOrderLines, setJobOrderLines] = useState<JobOrderLine[]>([]);
  const [inventoryData, setInventoryData] = useState<InventoryResult[]>([]);
  const [tabIndex, setTabIndex] = useState(0);
  const [selectedProcessId, setSelectedProcessId] = useState<number | null>(null);
  const [operationPriority, setOperationPriority] = useState<number>(50);
  const [openOperationPriorityDialog, setOpenOperationPriorityDialog] = useState(false);
  const [openPlanStartDialog, setOpenPlanStartDialog] = useState(false);
  const [planStartDate, setPlanStartDate] = useState<dayjs.Dayjs | null>(null);
  
  
  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const data = await fetchProductProcessesByJobOrderId(jobOrderId);
      if (data && data.length > 0) {
        const firstProcess = data[0];
        setProcessData(firstProcess);
        setJobOrderLines((firstProcess as any).jobOrderLines || []);
      }
    } catch (error) {
      console.error("Error loading data:", error);
    } finally {
      setLoading(false);
    }
  }, [jobOrderId]);

  // 获取库存数据
  useEffect(() => {
    const fetchInventoryData = async () => {
      try {
        const inventoryResponse = await fetchInventories({
          code: "",
          name: "",
          type: "",
          pageNum: 0,
          pageSize: 1000 
        });
        setInventoryData(inventoryResponse.records);
      } catch (error) {
        console.error("Error fetching inventory data:", error);
      }
    };
    fetchInventoryData();
  }, []);

  useEffect(() => {
    fetchData();
  }, [fetchData]);
// PickTable 组件内容
const getStockAvailable = (line: JobOrderLine) => {
  if (line.type?.toLowerCase() === "consumables" || line.type?.toLowerCase() === "nm") {
    return null;
  }
  const inventory = inventoryData.find(inv => 
    inv.itemCode === line.itemCode || inv.itemName === line.itemName
  );
  if (inventory) {
    return inventory.availableQty || (inventory.onHandQty - inventory.onHoldQty - inventory.unavailableQty);
  }
  return line.stockQty || 0;
};
const handleOpenPlanStartDialog = useCallback(() => {
  // 将 processData.date 转换为 dayjs 对象
  if (processData?.date) {
    // processData.date 可能是字符串或 Date 对象
    setPlanStartDate(dayjs(processData.date));
  } else {
    setPlanStartDate(dayjs());
  }
  setOpenPlanStartDialog(true);
}, [processData?.date]);

const handleClosePlanStartDialog = useCallback((_event?: object, _reason?: "backdropClick" | "escapeKeyDown") => {
  setOpenPlanStartDialog(false);
  setPlanStartDate(null);
}, []);

const handleUpdatePlanStart = useCallback(async (jobOrderId: number, planStart: string) => {
  const response = await updateJoPlanStart({ id: jobOrderId, planStart });
  if (response) {
    await fetchData();
  }
}, [fetchData]);

const handleConfirmPlanStart = useCallback(async () => {
  if (!jobOrderId || !planStartDate) return;
  
  // 将日期转换为后端需要的格式 (YYYY-MM-DDTHH:mm:ss)
  const dateString = `${dayjsToDateString(planStartDate, "input")}T00:00:00`;
  await handleUpdatePlanStart(jobOrderId, dateString);
  setOpenPlanStartDialog(false);
  setPlanStartDate(null);
}, [jobOrderId, planStartDate, handleUpdatePlanStart]);
const handleUpdateOperationPriority = useCallback(async (productProcessId: number, productionPriority: number) => {
  const response = await updateProductProcessPriority(productProcessId, productionPriority)
  if (response) {
    await fetchData();
  }
}, [jobOrderId]);
const handleOpenPriorityDialog = () => {
  setOperationPriority(processData?.productionPriority ?? 50);
  setOpenOperationPriorityDialog(true);
};

const handleClosePriorityDialog = (_event?: object, _reason?: "backdropClick" | "escapeKeyDown") => {
  setOpenOperationPriorityDialog(false);
};
const handleConfirmPriority = async () => {
  if (!processData?.id) return;
  await handleUpdateOperationPriority(processData.id, Number(operationPriority));
  setOpenOperationPriorityDialog(false);
};
const isStockSufficient = (line: JobOrderLine) => {
  if (line.type?.toLowerCase() === "consumables") {
    return false;
  }
  const stockAvailable = getStockAvailable(line);
  if (stockAvailable === null) {
    return false;
  }
  return stockAvailable >= line.reqQty;
};
const stockCounts = useMemo(() => {
  // 过滤掉 consumables 类型的 lines
  const nonConsumablesLines = jobOrderLines.filter(
    line => line.type?.toLowerCase() !== "consumables" && line.type?.toLowerCase() !== "cmb" && line.type?.toLowerCase() !== "nm"
  );
  const total = nonConsumablesLines.length;
  const sufficient = nonConsumablesLines.filter(isStockSufficient).length;
  return {
    total,
    sufficient,
    insufficient: total - sufficient,
  };
}, [jobOrderLines, inventoryData]);
const status = processData?.status?.toLowerCase?.() ?? "";
const handleDeleteJobOrder = useCallback(async ( jobOrderId: number) => {
  const response = await deleteJobOrder(jobOrderId)
  if (response) {
    //setProcessData(response.entity);
    //await fetchData();
    onBack();
  }
}, [jobOrderId]);
const handleRelease = useCallback(async ( jobOrderId: number) => {
  // TODO: 替换为实际的 release 调用
  console.log("Release clicked for jobOrderId:", jobOrderId);
  const response = await releaseJo({ id: jobOrderId })
  if (response) {
    //setProcessData(response.entity);
    await fetchData();
  }
}, [jobOrderId]);
  const handleTabChange = useCallback<NonNullable<TabsProps["onChange"]>>(
    (_e, newValue) => {
      setTabIndex(newValue);
    },
    [],
  );

  // 如果选择了 process detail，显示 detail 页面
  if (selectedProcessId !== null) {
    return (
      <ProductionProcessDetail
        jobOrderId={selectedProcessId}
        onBack={() => {
          setSelectedProcessId(null);
          fetchData(); // 刷新数据
        }}
      />
    );
  }

  if (loading) {
    return (
      <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
        <CircularProgress/>
      </Box>
    );
  }

  if (!processData) {
    return (
      <Box>
        <Button variant="outlined" onClick={onBack} startIcon={<ArrowBackIcon />}>
          {t("Back")}
        </Button>
        <Typography sx={{ mt: 2 }}>{t("No data found")}</Typography>
      </Box>
    );
  }
 
  
  // InfoCard 组件内容
  const InfoCardContent = () => (
    <Card sx={{ display: "block", mt: 2 }}>
      <CardContent component={Stack} spacing={4}>
        <Box>
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            <Grid item xs={6}>
              <TextField
                label={t("Job Order Code")}
                fullWidth
                disabled={true}
                value={processData?.jobOrderCode || ""}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                label={t("Item Code")}
                fullWidth
                disabled={true}
                value={processData?.itemCode+"-"+processData?.itemName || ""}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Job Type")}
                fullWidth
                disabled={true}
               value={t(processData?.jobType) || t("N/A")}
               //value={t("N/A")}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Req. Qty")}
                fullWidth
                disabled={true}
                value={processData?.outputQty + "(" + processData?.outputQtyUom + ")" || ""}
              />
            </Grid>

            <Grid item xs={6}>
              <TextField
                value={processData?.date ? dayjs(processData.date).format(OUTPUT_DATE_FORMAT) : ""}
                label={t("Target Production Date")}
                fullWidth
                disabled={true}
                InputProps={{
                  endAdornment: (processData?.jobOrderStatus === "planning" ? (
                    <InputAdornment position="end">
                      <IconButton size="small" onClick={handleOpenPlanStartDialog}>
                        <EditIcon fontSize="small" />
                      </IconButton>
                    </InputAdornment>
                  ) : null),
                }}
              />
            </Grid>
            <Grid item xs={6}>
            <TextField
              label={t("Production Priority")}
              fullWidth
              disabled={true}
              value={processData?.productionPriority ?? "50"}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton size="small" onClick={handleOpenPriorityDialog}>
                      <EditIcon fontSize="small" />
                    </IconButton>
                  </InputAdornment>
                ),
              }}
            />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Is Dark | Dense | Float| Scrap Rate| Allergic Substance | Time Sequence | Complexity")}
                fullWidth
                disabled={true}
                value={`${processData?.isDark == null || processData?.isDark === "" ? t("N/A") : processData.isDark} | ${processData?.isDense == null || processData?.isDense === "" || processData?.isDense === 0 ? t("N/A") : processData.isDense} | ${processData?.isFloat == null || processData?.isFloat === "" ? t("N/A") : processData.isFloat} | ${processData?.scrapRate == -1 || processData?.scrapRate === "" ? t("N/A") : processData.scrapRate} | ${processData?.allergicSubstance == null || processData?.allergicSubstance === "" ? t("N/A") :t (processData.allergicSubstance)} | ${processData?.timeSequence == null || processData?.timeSequence === "" ? t("N/A") : processData.timeSequence} | ${processData?.complexity == null || processData?.complexity === "" ? t("N/A") : processData.complexity}`}
              />
            </Grid>

          </Grid>
        </Box>
      </CardContent>
    </Card>
  );

  const productionProcessesLineRemarkTableColumns: GridColDef[] = [
    {
      field: "seqNo",
      headerName: t("Seq"),
      flex: 0.2,
      align: "left",
      headerAlign: "left",
      type: "number",
      renderCell: (params) => {
        return <Typography sx={{ fontWeight: 500 }}>{params.value}</Typography>;
      },
    },
    {
      field: "description",
      headerName: t("Remark"),
      flex: 1,
      align: "left",
      headerAlign: "left",
      renderCell: (params) => {
        return(
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
                       <Typography sx={{ fontWeight: 500 }}>&nbsp;</Typography>
            <Typography sx={{ fontWeight: 500 }}>{params.value || ""}</Typography>
 
            <Typography sx={{ fontWeight: 500 }}>&nbsp;</Typography>
          </Box>
        )
  
      },
    },

  ];
  const productionProcessesLineRemarkTableRows =
  processData?.productProcessLines?.map((line: any) => ({
  id: line.seqNo,
  seqNo: line.seqNo,

  description: line.description ?? "",



  })) ?? [];




  const pickTableColumns: GridColDef[] = [
    {
      field: "id",
      headerName: t("id"),
      flex: 0.2,
      align: "left",
      headerAlign: "left",
      type: "number",
      
    },
    {
      field: "itemCode",
      headerName: t("Item Code"),
      flex: 0.6,
    },
    {
      field: "itemName",
      headerName: t("Item Name"),
      flex: 1,
      renderCell: (params: GridRenderCellParams<JobOrderLine>) => {
        return `${params.value} (${params.row.uom})`;
      },
    },
    {
      field: "reqQty",
      headerName: t("Req. Qty"),
      flex: 0.7,
      align: "right",
      headerAlign: "right",
      renderCell: (params: GridRenderCellParams<JobOrderLine>) => {
       
        
        return `${decimalFormatter.format(params.value)} (${params.row.shortUom})`;
      },
    },
    {
      field: "stockAvailable",
      headerName: t("Stock Available"),
      flex: 0.7,
      align: "right",
      headerAlign: "right",
      type: "number",
      renderCell: (params: GridRenderCellParams<JobOrderLine>) => {
        // 如果是 consumables，显示 N/A
    
        const stockAvailable = getStockAvailable(params.row);
      
        return `${decimalFormatter.format(stockAvailable || 0)} (${params.row.shortUom})`;
      },
    },
    {
      field: "bomProcessSeqNo",
      headerName: t("Seq No"),
      flex: 0.5,
      align: "right",
      headerAlign: "right",
      type: "number",
    },
/*
    {
      field: "seqNoRemark",
      headerName: t("Seq No Remark"),
      flex: 1,
      align: "left",
      headerAlign: "left",
      type: "string",
    },
    */
    {
      field: "stockStatus",
      headerName: t("Stock Status"),
      flex: 0.5,
      align: "center",
      headerAlign: "center",
      type: "boolean",
      renderCell: (params: GridRenderCellParams<JobOrderLine>) => {
   
        return isStockSufficient(params.row) 
          ? <CheckCircleOutlineOutlinedIcon fontSize={"large"} color="success" />
          : <DoDisturbAltRoundedIcon fontSize={"large"} color="error" />;
      },
    },
  ];

  const pickTableRows = jobOrderLines.map((line, index) => ({
    ...line,
    //id: line.id || index,
    id: index + 1,
  }));

  const PickTableContent = () => (
    <Box sx={{ mt: 2 }}>
      <ProcessSummaryHeader processData={processData} />
      <Card sx={{ mb: 2 }}>
        <CardContent>
          <Stack
            direction="row"
            alignItems="center"
            justifyContent="space-between"
            spacing={2}
          >
            <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
              {t("Total lines: ")}<strong>{stockCounts.total}</strong>
            </Typography>

            <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
              {t("Lines with sufficient stock: ")}<strong style={{ color: "green" }}>{stockCounts.sufficient}</strong>
            </Typography>

            <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
              {t("Lines with insufficient stock: ")}<strong style={{ color: "red" }}>{stockCounts.insufficient}</strong>
            </Typography>
            {fromJosave && (
              <Button
              variant="contained"
              color="error"
              onClick={() => handleDeleteJobOrder(jobOrderId)}
              disabled={processData?.jobOrderStatus !== "planning"}
            >
              {t("Delete Job Order")}
            </Button>
            )}
            {fromJosave && (
            <Button
              variant="contained"
              color="primary"
              onClick={() => handleRelease(jobOrderId)}
              disabled={stockCounts.insufficient > 0 || processData?.jobOrderStatus !== "planning"}
            >
              {t("Release")}
            </Button>
            )}
            
          </Stack>
        </CardContent>
      </Card>

      <StyledDataGrid
        sx={{ "--DataGrid-overlayHeight": "100px" }}
        disableColumnMenu
        rows={pickTableRows}
        columns={pickTableColumns}
        getRowHeight={() => "auto"}
      />
    </Box>
  );
 const ProductionProcessesLineRemarkTableContent = () => (
  <Box sx={{ mt: 2 }}>
    <ProcessSummaryHeader processData={processData} />
    <StyledDataGrid
      sx={{
        "--DataGrid-overlayHeight": "100px",
        // ✅ Match ProductionProcessDetail font size (default body2 = 0.875rem)
        "& .MuiDataGrid-cell": {
          fontSize: "0.875rem",  // ✅ Match default body2 size
          fontWeight: 500,
        },
        "& .MuiDataGrid-columnHeader": {
          fontSize: "0.875rem",  // ✅ Match header size
          fontWeight: 600,
        },
        // ✅ Ensure empty columns are visible
        "& .MuiDataGrid-columnHeaders": {
          display: "flex",
        },
        "& .MuiDataGrid-row": {
          display: "flex",
        },
      }}
      disableColumnMenu
      rows={productionProcessesLineRemarkTableRows ?? []}
      columns={productionProcessesLineRemarkTableColumns}
      getRowHeight={() => 'auto'}
      hideFooter={false}  // ✅ Ensure footer is visible
    />
  </Box>
);
  

  return (
    <Box>
      {/* 返回按钮 */}
      <Box sx={{ mb: 2 }}>
        <Button variant="outlined" onClick={onBack} startIcon={<ArrowBackIcon />}>
          {t("Back to List")}
        </Button>
      </Box>
    
      {/* 标签页 */}
      <Box sx={{ borderBottom: '1px solid #e0e0e0' }}>
        <Tabs value={tabIndex} onChange={handleTabChange} variant="scrollable">
          <Tab label={t("Job Order Info")} />
          <Tab label={t("BoM Material")} />
      
            <Tab label={t("Production Process")} />
          
      
            <Tab label={t("Production Process Line Remark")} />
            {/* {!fromJosave && (
            <Tab label={t("Matching Stock")} />
          )} */}
        </Tabs>
      </Box>

      {/* 标签页内容 */}
      <Box sx={{ p: 2 }}>
        {tabIndex === 0 && <InfoCardContent />}
        {tabIndex === 1 && <PickTableContent />}
        
        {tabIndex === 2 && (
          <ProductionProcessDetail
            jobOrderId={jobOrderId}
            onBack={() => {
              // 切换回第一个标签页，或者什么都不做
              setTabIndex(0);

            }}
            fromJosave={fromJosave}
          />
        )}
        {tabIndex === 3 && <ProductionProcessesLineRemarkTableContent />}
 
       {/* {tabIndex === 4 && <JobPickExecutionsecondscan filterArgs={{ jobOrderId: jobOrderId }} />} */}
  
        <Dialog
            open={openOperationPriorityDialog}
            onClose={handleClosePriorityDialog}
            fullWidth
            maxWidth="xs"
          >
          <DialogTitle>{t("Update Production Priority")}</DialogTitle>
          <DialogContent>
            <TextField
              autoFocus
              margin="dense"
              label={t("Production Priority")}
              type="number"
              fullWidth
              value={operationPriority}
              onChange={(e) => setOperationPriority(Number(e.target.value))}
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={handleClosePriorityDialog}>{t("Cancel")}</Button>
            <Button variant="contained" onClick={handleConfirmPriority}>{t("Save")}</Button>
          </DialogActions>
        </Dialog>
        <Dialog
        open={openPlanStartDialog}
        onClose={handleClosePlanStartDialog}
        fullWidth
        maxWidth="xs"
      >
        <DialogTitle>{t("Update Target Production Date")}</DialogTitle>
        <DialogContent>
          <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DatePicker
              label={t("Target Production Date")}
              value={planStartDate}
              onChange={(newValue) => setPlanStartDate(newValue)}
              slotProps={{
                textField: {
                  fullWidth: true,
                  margin: "dense",
                  autoFocus: true,
                }
              }}
            />
          </LocalizationProvider>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClosePlanStartDialog}>{t("Cancel")}</Button>
          <Button 
            variant="contained" 
            onClick={handleConfirmPlanStart}
            disabled={!planStartDate}
          >
            {t("Save")}
          </Button>
        </DialogActions>
      </Dialog>


      </Box>
    </Box>
    
  );
  
};

export default ProductionProcessJobOrderDetail;