import { View } from "@tarojs/components";
import { Dialog, Image } from "@nutui/nutui-react-taro";
import { useState } from "react";
import { BoxBrand } from "@/types/typings";
import PackageCreate from "./PackageCreate";

interface IPackageCardProps {
  boxBrand: BoxBrand;
  boxBrandList: BoxBrand[];
  boxType: BusinessAPI.OrderPackage["boxType"];
  orderPackageList: BusinessAPI.OrderPackage[];
  setOrderPackageList: (orderPackageList: BusinessAPI.OrderPackage[]) => void;
}

export default function PackageCard(props: IPackageCardProps) {
  const {
    boxBrand,
    boxBrandList,
    boxType,
    orderPackageList,
    setOrderPackageList,
  } = props;
  const [showEditModal, setShowEditModal] = useState(false);

  // 获取品牌信息用于展示品牌图片
  const brandInfo = boxBrandList?.find(
    (brand) => brand.boxBrandId === boxBrand.boxBrandId,
  );

  // 删除包装信息
  const removePackageInfo = (boxBrandId: string) => {
    Dialog.open("dialog", {
      title: "提示",
      content: "确定要移除此纸箱品牌吗？",
      confirmText: "确定",
      cancelText: "取消",
      onConfirm: () => {
        const newList = [
          ...orderPackageList.filter((item) => item.boxBrandId !== boxBrandId),
        ];
        setOrderPackageList(newList);
        Dialog.close("dialog");
      },
      onCancel: () => {
        Dialog.close("dialog");
      },
    });
  };

  return (
    <View
      className="overflow-hidden rounded-xl border border-gray-200 bg-white p-2.5 shadow-sm"
      key={boxBrand.id}
    >
      {/* 品牌背景水印 */}
      {brandInfo?.boxBrandImage && (
        <View className="top-2 right-2 opacity-10">
          <Image
            src={brandInfo.boxBrandImage}
            className="h-full w-full"
            mode="aspectFit"
          />
        </View>
      )}

      {/* 品牌信息和操作按钮放在同一行 */}
      <View className="mb-3 flex items-start justify-between">
        <View className="flex items-center">
          {brandInfo?.boxBrandImage && (
            <View className="mr-3 h-10 w-10 overflow-hidden rounded-lg border border-gray-200">
              <Image
                src={brandInfo.boxBrandImage}
                className="h-full w-full"
                mode="aspectFit"
              />
            </View>
          )}
          <View>
            <View className="text-lg font-bold text-gray-800">
              {boxBrand.boxBrandName || "未选择品牌"}
            </View>
          </View>
        </View>

        {/* 操作按钮与品牌信息放在同一行 */}
        <View className="flex gap-2">
          <View
            className="cursor-pointer rounded-lg bg-blue-100 px-3 py-1 text-xs font-medium text-blue-600 transition-colors hover:bg-blue-200"
            onClick={() => setShowEditModal(true)}
          >
            编辑
          </View>
          <View
            className="cursor-pointer rounded-lg bg-red-100 px-3 py-1 text-xs font-medium text-red-600 transition-colors hover:bg-red-200"
            onClick={() => removePackageInfo(boxBrand.boxBrandId)}
          >
            移除
          </View>
        </View>
      </View>

      {/* 详细信息展示，按分类显示 */}
      <View className="space-y-2">
        {boxBrand.boxSpecList &&
          boxBrand.boxSpecList.map((boxSpec, boxIndex) => (
            <View
              key={boxIndex}
              className="rounded-lg bg-gray-50 p-3 text-sm text-gray-600"
            >
              <View className="mb-1 font-medium text-gray-700">
                {boxSpec.boxSpecName}
              </View>
              <View>
                {boxSpec.boxProductList
                  .map(
                    (detail) =>
                      `${detail.boxProductName} 共 ${detail.boxCount} 个`,
                  )
                  .join("，")}
              </View>
            </View>
          ))}
      </View>

      {/* 使用 PackageCreate 组件进行编辑 */}
      <PackageCreate
        boxType={boxType}
        boxBrand={boxBrand}
        boxBrandList={boxBrandList}
        visible={showEditModal}
        editMode
        orderPackageList={orderPackageList}
        onClose={() => setShowEditModal(false)}
        onSave={(orderPackageList) => {
          setOrderPackageList(orderPackageList);
          setShowEditModal(false);
        }}
      />
    </View>
  );
}
