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

interface IExpenseCostCardProps {
  expenseProvision: BusinessAPI.ExpenseProvision;
  index: number;
  onUpdate?: (updatedProvision: BusinessAPI.ExpenseProvision) => void;
  onDelete?: (provisionId: string) => void;
}

export default function ExpenseProvisionCard(props: IExpenseCostCardProps) {
  const { expenseProvision, index, onUpdate, onDelete } = props;

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

  // 删除确认状态
  const [deleteVisible, setDeleteVisible] = useState(false);
  return (
    <>
      <View
        className={`mb-2 flex items-center justify-between rounded-md border-1 border-gray-200 bg-white px-3 py-2 ${index > 0 ? "mt-2" : ""}`}
      >
        <View>
          <View className="text-neutral-darkest text-sm font-medium">
            车次号: {expenseProvision.vehicleNo || "未分配"}
          </View>
          <View className="text-neutral-darker text-xs">
            计提: {expenseProvision.provisionAmount.toLocaleString()}元
          </View>
        </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>

      {/* 编辑弹窗 */}
      <ExpenseProvisionCreate
        visible={editVisible}
        editMode
        expenseProvision={expenseProvision}
        onClose={() => setEditVisible(false)}
        onFinish={(updatedProvision) => {
          onUpdate?.(updatedProvision);
          setEditVisible(false);
        }}
      />
      {/* 删除确认对话框 */}
      <Dialog
        visible={deleteVisible}
        title="删除确认"
        content={`确定要删除客户 ${expenseProvision.dealerName} 车次号为 ${expenseProvision.vehicleNo || "未分配"} 的计提记录吗？此操作不可撤销。`}
        onCancel={() => setDeleteVisible(false)}
        onConfirm={() => {
          onDelete?.(expenseProvision.expenseProvisionId || "");
          setDeleteVisible(false);
        }}
        confirmText="删除"
        cancelText="取消"
      />
    </>
  );
}
