import { ExpenseProvisionCreate } from '@/components';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Button, Popconfirm, Space, Typography } from 'antd';
import { useState } from 'react';

const { Text } = Typography;

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

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

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

	return (
		<>
			<div
				style={{
					marginBottom: '8px',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'space-between',
					padding: '8px 12px',
					border: '1px solid #f0f0f0',
					borderRadius: '6px',
					background: '#fff',
				}}
			>
				<div>
					<div
						style={{ fontSize: '14px', fontWeight: 500, marginBottom: '4px' }}
					>
						车次号: {expenseProvision.vehicleNo || '未分配'}
					</div>
					<Text type="secondary" style={{ fontSize: '12px' }}>
						计提: {expenseProvision.provisionAmount.toLocaleString()}元
					</Text>
				</div>
				<Space size="small">
					<Button
						type="text"
						icon={<EditOutlined />}
						size="small"
						style={{
							color: '#1890ff',
							background: 'rgba(24, 144, 255, 0.1)',
						}}
						onClick={() => setEditVisible(true)}
					/>
					<Popconfirm
						title="删除确认"
						description={`确定要删除客户 ${expenseProvision.dealerName} 车次号为 ${expenseProvision.vehicleNo || '未分配'} 的计提记录吗？此操作不可撤销。`}
						onConfirm={() =>
							onDelete?.(expenseProvision.expenseProvisionId || '')
						}
						okText="删除"
						cancelText="取消"
						okButtonProps={{ danger: true }}
					>
						<Button
							type="text"
							icon={<DeleteOutlined />}
							size="small"
							danger
							style={{ background: 'rgba(255, 77, 79, 0.1)' }}
						/>
					</Popconfirm>
				</Space>
			</div>

			{/* 编辑弹窗 */}
			<ExpenseProvisionCreate
				visible={editVisible}
				editMode
				expenseProvision={expenseProvision}
				onClose={() => setEditVisible(false)}
				onFinish={(updatedProvision) => {
					onUpdate?.(updatedProvision);
					setEditVisible(false);
				}}
			/>
		</>
	);
}
