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

const { Text } = Typography;

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);

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

	return (
		<>
			<div
				key={cost?.costId || expenseCost?.expenseCostId}
				style={{
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'space-between',
					padding: '12px',
					borderBottom: '1px solid #f0f0f0',
				}}
			>
				<div style={{ flex: 1 }}>
					<div style={{ display: 'flex', alignItems: 'center' }}>
						<div
							style={{
								marginRight: '8px',
								display: 'flex',
								alignItems: 'center',
								justifyContent: 'center',
								width: '32px',
								height: '32px',
								borderRadius: '50%',
								background: hasRecord ? 'rgba(24, 144, 255, 0.1)' : '#f5f5f5',
							}}
						>
							{/*<ReceiptOutlined*/}
							{/*	style={{*/}
							{/*		fontSize: '16px',*/}
							{/*		color: hasRecord ? '#1890ff' : '#999',*/}
							{/*	}}*/}
							{/*/>*/}
						</div>
						<div>
							<div
								style={{
									fontSize: '14px',
									fontWeight: 500,
									color: hasRecord ? '#262626' : '#595959',
								}}
							>
								{displayName}
							</div>
							{displayRemark && (
								<Text type="secondary" style={{ fontSize: '12px' }}>
									{displayRemark}
								</Text>
							)}
						</div>
					</div>
				</div>
				<div style={{ textAlign: 'right' }}>
					{hasRecord ? (
						<>
							<div
								style={{
									fontSize: '14px',
									fontWeight: 500,
									marginBottom: '4px',
								}}
							>
								¥{displayAmount.toFixed(2)}
							</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={`确定要删除费用类型为 ${displayName} 的费用记录吗？此操作不可撤销。`}
									onConfirm={() => onDelete?.(cost?.costId || '')}
									okText="删除"
									cancelText="取消"
									okButtonProps={{ danger: true }}
								>
									<Button
										type="text"
										icon={<DeleteOutlined />}
										size="small"
										danger
										style={{ background: 'rgba(255, 77, 79, 0.1)' }}
									/>
								</Popconfirm>
							</Space>
						</>
					) : (
						<Button
							type="primary"
							ghost
							icon={<PlusOutlined />}
							onClick={() => setEditVisible(true)}
						>
							快捷添加
						</Button>
					)}
				</div>
			</div>

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