import { View } from "@tarojs/components";
import { ExpenseCostCreate, Icon } from "@/components";
import { useState } from "react";
import { Dialog } from "@nutui/nutui-react-taro";

interface IExpenseCostCardProps {
  cost?: BusinessAPI.CostVO;
  expenseCost?: BusinessAPI.ExpenseCost;
  onUpdate?: (updatedCost: BusinessAPI.ExpenseCost) => void;
  onDelete?: (costId: string) => void;
}

export default function ExpenseCostCard(props: IExpenseCostCardProps) {
  const { cost, expenseCost, onUpdate, onDelete } = props;

  // 编辑弹窗状态
  const [editVisible, setEditVisible] = useState(false);

  // 删除确认状态
  const [deleteVisible, setDeleteVisible] = useState(false);

  // 如果有 expenseCost 则使用其数据，否则使用 cost 的数据
  const displayName = expenseCost?.costName || cost?.name || "";
  const displayRemark = expenseCost?.remark || "";
  const displayAmount = expenseCost?.expenseAmount || 0;
  const hasRecord = !!expenseCost; // 是否已录入

  return (
    <>
      <View
        key={cost?.costId || expenseCost?.expenseCostId}
        className="expense-item flex items-center justify-between p-2.5"
      >
        <View className="flex-1">
          <View className="flex items-center">
            <View
              className={`mr-2 flex h-8 w-8 items-center justify-center rounded-full ${
                hasRecord ? "bg-primary/10" : "bg-gray-100"
              }`}
            >
              <Icon name="receipt" size={18} />
            </View>
            <View>
              <View
                className={`text-sm font-medium ${
                  hasRecord ? "text-neutral-darkest" : "text-neutral-dark"
                }`}
              >
                {displayName}
              </View>
              {displayRemark && (
                <View className="text-neutral-darker text-xs">
                  {displayRemark}
                </View>
              )}
            </View>
          </View>
        </View>
        <View className="text-right">
          {hasRecord ? (
            <>
              <View className="text-neutral-darkest text-sm font-medium">
                ¥{displayAmount.toFixed(2)}
              </View>
              <View className="flex">
                <View
                  className="bg-primary/10 text-primary mr-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-md"
                  onClick={() => setEditVisible(true)}
                >
                  <Icon name="pen" size={18} />
                </View>
                <View
                  className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-red-50 text-red-500"
                  onClick={() => setDeleteVisible(true)}
                >
                  <Icon
                    name="trash-can"
                    size={18}
                    color={"var(--color-red-500)"}
                  />
                </View>
              </View>
            </>
          ) : (
            <View
              className="bg-primary/10 text-primary flex h-8 cursor-pointer items-center justify-center rounded-md px-3"
              onClick={() => setEditVisible(true)}
            >
              <Icon name="plus" size={16} className="mr-1" />
              <View className="text-xs font-medium">添加</View>
            </View>
          )}
        </View>
      </View>

      {/* 编辑/添加弹窗 */}
      <ExpenseCostCreate
        visible={editVisible}
        editMode={hasRecord}
        cost={cost}
        expenseCost={expenseCost}
        onClose={() => setEditVisible(false)}
        onFinish={(updatedCost) => {
          onUpdate?.(updatedCost);
          setEditVisible(false);
        }}
      />

      {/* 删除确认对话框 */}
      {hasRecord && (
        <Dialog
          visible={deleteVisible}
          title="删除确认"
          content={`确定要删除费用类型为 ${displayName} 的费用记录吗？此操作不可撤销。`}
          onCancel={() => setDeleteVisible(false)}
          onConfirm={() => {
            onDelete?.(cost?.costId || "");
            setDeleteVisible(false);
          }}
          confirmText="删除"
          cancelText="取消"
        />
      )}
    </>
  );
}
