import {
  Button,
  Popup,
  SafeArea,
  Tabs,
  Uploader,
  UploaderFileItem,
} from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import { useState } from "react";
import Taro from "@tarojs/taro";
import { uploadFile } from "@/utils/uploader";

export default function SupplierInfoSection(props: {
  purchaseOrderVO: BusinessAPI.PurchaseOrderVO;
  onChange?: (purchaseOrderVO: BusinessAPI.PurchaseOrderVO) => void;
  readOnly?: boolean;
}) {
  const { purchaseOrderVO, readOnly, onChange } = props;

  const [tab, setTab] = useState<string | number>("0");

  // 为每个供应商维护未上传状态
  const [uploadStates, setUploadStates] = useState<
    Record<
      string,
      {
        emptyWeightImg?: UploaderFileItem[];
        totalWeightImg?: UploaderFileItem[];
        contractImg?: UploaderFileItem[];
        invoiceImg?: UploaderFileItem[];
      }
    >
  >({});

  // 控制弹窗显示状态
  const [popupVisible, setPopupVisible] = useState(false);
  const [currentSupplier, setCurrentSupplier] =
    useState<BusinessAPI.OrderSupplier | null>(null);
  const [currentUploadType, setCurrentUploadType] = useState<string>("");

  // 判断供应商是否所有附件都已未上传
  const isSupplierFullyUploaded = (supplier: BusinessAPI.OrderSupplier) => {
    return (
      supplier.emptyWeightImg &&
      supplier.totalWeightImg &&
      supplier.invoiceUpload &&
      supplier.contractUpload
    );
  };

  // 获取显示的标签文本
  const getTabTitle = (supplier: BusinessAPI.OrderSupplier) => {
    if (isSupplierFullyUploaded(supplier)) {
      return `${supplier.name} - 票证已未上传`;
    } else {
      return `${supplier.name} - 待补充`;
    }
  };

  // 处理未上传按钮点击
  const handleUploadClick = (
    supplier: BusinessAPI.OrderSupplier,
    type: string,
  ) => {
    if (readOnly) return;
    setCurrentSupplier(supplier);
    setCurrentUploadType(type);
    setPopupVisible(true);
  };

  // 处理查看按钮点击 - 使用 Taro.previewImage 预览图片
  const handleViewClick = (
    supplier: BusinessAPI.OrderSupplier,
    type: string,
  ) => {
    // 构造图片 URL 数组
    const imageUrls: string[] = [];

    console.log("supplier", supplier,  type)
    if (type === "emptyWeightImg" && supplier.emptyWeightImg) {
      imageUrls.push(supplier.emptyWeightImg);
    } else if (type === "totalWeightImg" && supplier.totalWeightImg) {
      imageUrls.push(supplier.totalWeightImg);
    } else if (type === "contractImg" && supplier.contractUpload) {
      supplier.contractImg?.forEach((file) => {
        if (file) {
          imageUrls.push(file);
        }
      });
    }  else if (type === "invoiceImg" && supplier.invoiceUpload) {
      supplier.invoiceImg?.forEach((file) => {
        if (file) {
          imageUrls.push(file);
        }
      });
    }

    // 使用 Taro.previewImage 预览图片
    if (imageUrls.length > 0) {
      Taro.previewImage({
        urls: imageUrls,
      });
    }
  };

  // 处理上传确认
  const handleUploadConfirm = () => {
    if (!currentSupplier || !currentUploadType) return;

    // 获取当前上传的文件列表
    const uploadedFiles = uploadStates[currentSupplier.orderSupplierId]?.[currentUploadType];

    if (!uploadedFiles) return;

    // 创建新的 purchaseOrderVO 副本
    const updatedPurchaseOrderVO = { ...purchaseOrderVO };
    if (updatedPurchaseOrderVO.orderSupplierList) {
      updatedPurchaseOrderVO.orderSupplierList = [...updatedPurchaseOrderVO.orderSupplierList];
    }

    // 找到当前供应商在列表中的索引
    const supplierIndex = updatedPurchaseOrderVO.orderSupplierList?.findIndex(
      (supplier) => supplier.orderSupplierId === currentSupplier.orderSupplierId
    );

    if (supplierIndex === undefined || supplierIndex === -1) return;

    // 更新对应的供应商字段
    const updatedSupplier = { ...updatedPurchaseOrderVO.orderSupplierList[supplierIndex] };

    switch (currentUploadType) {
      case "emptyWeightImg":
        // 空磅照片只取第一张图片的 URL
        updatedSupplier.emptyWeightImg = uploadedFiles[0]?.url || "";
        break;
      case "totalWeightImg":
        // 总磅照片只取第一张图片的 URL
        updatedSupplier.totalWeightImg = uploadedFiles[0]?.url || "";
        break;
      case "contractImg":
        // 合同图片可以有多张，保存所有 URL
        updatedSupplier.contractImg = uploadedFiles
          .filter(file => file.url)
          .map(file => file.url!);
        updatedSupplier.contractUpload = uploadedFiles.length > 0;
        break;
      case "invoiceImg":
        // 发票图片可以有多张，保存所有 URL
        updatedSupplier.invoiceImg = uploadedFiles
          .filter(file => file.url)
          .map(file => file.url!);
        updatedSupplier.invoiceUpload = uploadedFiles.length > 0;
        break;
    }

    // 更新供应商列表
    if (updatedPurchaseOrderVO.orderSupplierList) {
      updatedPurchaseOrderVO.orderSupplierList[supplierIndex] = updatedSupplier;
    }

    // 调用 onChange 回调更新父组件状态
    if (onChange) {
      onChange(updatedPurchaseOrderVO);
    }

    // 重置弹窗状态
    setPopupVisible(false);
    setCurrentSupplier(null);
    setCurrentUploadType("");
  };

  return (
    <>
      <Tabs
        style={{
          // @ts-ignore
          "--nutui-tabs-tabpane-padding": 0,
        }}
        value={tab}
        onChange={(value) => {
          setTab(value);
        }}
      >
        {purchaseOrderVO?.orderSupplierList?.map((item, index) => (
          <Tabs.TabPane title={getTabTitle(item)} key={index}>
            {/* 瓜农凭证信息 */}
            <View className="flex w-full flex-col gap-2.5">
              <View className="flex !h-8 flex-row items-center justify-between">
                <View className="text-neutral-dark flex-shrink-0 text-sm">
                  空磅照片
                </View>
                <View className="text-neutral-darkest text-sm font-medium">
                  {item.emptyWeightImg ? (
                    <Button
                      fill={"none"}
                      type={"primary"}
                      className="edit-btn"
                      onClick={() => handleViewClick(item, "emptyWeightImg")}
                    >
                      查看
                    </Button>
                  ) : readOnly ? (
                    <Button fill={"none"} type={"default"} disabled>
                      未上传
                    </Button>
                  ) : (
                    <Button
                      fill={"none"}
                      type={"primary"}
                      className="edit-btn"
                      onClick={() => handleUploadClick(item, "emptyWeightImg")}
                    >
                      未上传
                    </Button>
                  )}
                </View>
              </View>
              <View className="flex !h-8 flex-row items-center justify-between">
                <View className="text-neutral-dark flex-shrink-0 text-sm">
                  总磅照片
                </View>
                <View className="text-neutral-darkest text-sm font-medium">
                  {item.totalWeightImg ? (
                    <Button
                      fill={"none"}
                      type={"primary"}
                      className="edit-btn"
                      onClick={() => handleViewClick(item, "totalWeightImg")}
                    >
                      查看
                    </Button>
                  ) : readOnly ? (
                    <Button fill={"none"} type={"default"} disabled>
                      未上传
                    </Button>
                  ) : (
                    <Button
                      fill={"none"}
                      type={"primary"}
                      className="edit-btn"
                      onClick={() => handleUploadClick(item, "totalWeightImg")}
                    >
                      未上传
                    </Button>
                  )}
                </View>
              </View>
              <View className="flex !h-8 flex-row items-center justify-between">
                <View className="text-neutral-dark flex-shrink-0 text-sm">
                  合同
                </View>
                <View className="text-neutral-darkest text-sm font-medium">
                  {item.contractUpload ? (
                    <Button
                      fill={"none"}
                      type={"primary"}
                      className="edit-btn"
                      onClick={() => handleViewClick(item, "contractImg")}
                    >
                      查看
                    </Button>
                  ) : readOnly ? (
                    <Button fill={"none"} type={"default"} disabled>
                      未上传
                    </Button>
                  ) : (
                    <Button
                      fill={"none"}
                      type={"primary"}
                      className="edit-btn"
                      onClick={() => handleUploadClick(item, "contractImg")}
                    >
                      未上传
                    </Button>
                  )}
                </View>
              </View>
              <View className="flex !h-8 flex-row items-center justify-between">
                <View className="text-neutral-dark flex-shrink-0 text-sm">
                  发票
                </View>
                <View className="text-neutral-darkest text-sm font-medium">
                  {item.invoiceUpload ? (
                    <Button
                      fill={"none"}
                      type={"primary"}
                      className="edit-btn"
                      onClick={() => handleViewClick(item, "invoiceImg")}
                    >
                      查看
                    </Button>
                  ) : readOnly ? (
                    <Button fill={"none"} type={"default"} disabled>
                      未上传
                    </Button>
                  ) : (
                    <Button
                      fill={"none"}
                      type={"primary"}
                      className="edit-btn"
                      onClick={() => handleUploadClick(item, "invoiceImg")}
                    >
                      未上传
                    </Button>
                  )}
                </View>
              </View>
            </View>
          </Tabs.TabPane>
        ))}
      </Tabs>

      {/* 未上传弹窗 */}
      <Popup
        visible={popupVisible && !readOnly}
        position="bottom"
        onClose={() => setPopupVisible(false)}
        round
        lockScroll
      >
        <View className="flex h-full flex-col p-4">
          <View className="mb-4 text-lg font-bold">
            {currentUploadType === "emptyWeightImg" && "空磅照片"}
            {currentUploadType === "totalWeightImg" && "总磅照片"}
            {currentUploadType === "contractImg" && "合同"}
            {currentUploadType === "invoiceImg" && "发票"}
          </View>

          <View className="mb-4 flex-1 overflow-y-auto">
            <Uploader
              multiple={currentUploadType === "contractImg"}
              maxCount={currentUploadType === "contractImg" ? 9 : 1}
              //@ts-ignore
              upload={uploadFile}
              defaultValue={
                currentSupplier
                  ? uploadStates[currentSupplier.orderSupplierId]?.[currentUploadType] || []
                  : []
              }
              onChange={(fileList) => {
                if (currentSupplier) {
                  setUploadStates((prev) => ({
                    ...prev,
                    [currentSupplier.orderSupplierId]: {
                      ...prev[currentSupplier.orderSupplierId],
                      [currentUploadType]: fileList,
                    },
                  }));
                }
              }}
            />
          </View>

          <View className="flex justify-end gap-2">
            <View className={"flex-1"}>
              <Button
                size="large"
                block
                type="default"
                onClick={() => setPopupVisible(false)}
              >
                关闭
              </Button>
            </View>
            <View className={"flex-1"}>
              <Button
                size="large"
                block
                type="primary"
                onClick={handleUploadConfirm}
              >
                确定
              </Button>
            </View>
          </View>
        </View>
        <SafeArea position={"bottom"} />
      </Popup>
    </>
  );
}