import { ReconciliationSummaryProps } from '@/components';
import { formatCurrency } from '@/utils/format';
import {
	ProFormDependency,
	ProFormMoney,
	ProFormSwitch,
	ProFormTextArea,
} from '@ant-design/pro-components';
import { Row, Typography } from 'antd';
import { useIntl } from 'umi';

const { Text } = Typography;

/** 调整类型映射 */
const ADJUSTMENT_TYPE_LABELS: Record<string, string> = {
	LOSS: '损耗调整总额',
	DOWNGRADE: '降级调整总额',
	SHORTAGE: '短少调整总额',
	DAMAGE: '破损调整总额',
	QUALITY: '质量调整总额',
	OTHER: '其他调整总额',
};

export default function ReconciliationSummary({
	shipOrders,
	adjustmentsMap,
	roundOffAmount = 0,
}: ReconciliationSummaryProps) {
	const intl = useIntl();
	const intlPrefix = 'reconciliation';

	// 计算原应收总额
	const originalTotalAmount =
		shipOrders.reduce(
			(total, item) => total + (item.receivableAmount || 0),
			0,
		) || 0;

	// 按类型汇总调整项
	const adjustmentTotalsByType = Object.values(adjustmentsMap)
		.flat()
		.reduce(
			(acc, adj) => {
				if (!acc[adj.type]) {
					acc[adj.type] = 0;
				}
				acc[adj.type] += adj.amount;
				return acc;
			},
			{} as Record<string, number>,
		);

	// 计算调整总额
	const adjustmentTotal = Object.values(adjustmentTotalsByType).reduce(
		(sum, amount) => sum + amount,
		0,
	);

	// 计算实际应收总额（包含抹零金额）
	const actualTotalAmount =
		originalTotalAmount - adjustmentTotal - roundOffAmount;

	return (
		<div
			style={{
				backgroundColor: '#f8f9fa',
				borderRadius: 8,
				padding: '20px',
			}}
		>
			{/* 原应收总额 */}
			<Row justify="space-between" align="middle" style={{ marginBottom: 10 }}>
				<Text type="secondary">
					{intl.formatMessage({
						id: `${intlPrefix}.summary.originalTotal`,
					})}
				</Text>
				<Text strong style={{ fontSize: 16 }}>
					{formatCurrency(originalTotalAmount)}
				</Text>
			</Row>

			{/* 各类调整项总额 */}
			{Object.entries(adjustmentTotalsByType).map(([type, amount]) => (
				<Row
					key={type}
					justify="space-between"
					align="middle"
					style={{ marginBottom: 10 }}
				>
					<Text type="secondary">
						{ADJUSTMENT_TYPE_LABELS[type] || `${type}调整总额`}
					</Text>
					<Text type={amount < 0 ? 'danger' : undefined}>
						{formatCurrency(amount)}
					</Text>
				</Row>
			))}

			{/* 抹零设置 */}
			<div
				style={{
					border: '1px solid #dee2e6',
					borderRadius: 8,
					padding: '16px',
					marginBottom: '10px',
					backgroundColor: '#f8f9fa',
				}}
			>
				<ProFormSwitch
					label={intl.formatMessage({
						id: `${intlPrefix}.summary.roundOffEnabled`,
					})}
					name={'roundOffEnabled'}
				/>
				<ProFormDependency name={['roundOffEnabled']}>
					{({ roundOffEnabled }) =>
						roundOffEnabled && (
							<>
								<ProFormMoney
									label={intl.formatMessage({
										id: `${intlPrefix}.summary.roundOffAmount`,
									})}
									name="roundOffAmount"
									placeholder={intl.formatMessage({
										id: `${intlPrefix}.summary.roundOffAmountPlaceholder`,
									})}
									fieldProps={{
										precision: 2,
										min: -999999999,
										max: 999999999,
									}}
								/>
								<ProFormTextArea
									label={intl.formatMessage({
										id: `${intlPrefix}.summary.roundOffRemark`,
									})}
									name="roundOffRemark"
									placeholder={intl.formatMessage({
										id: `${intlPrefix}.summary.roundOffRemarkPlaceholder`,
									})}
									fieldProps={{
										autoSize: { minRows: 3, maxRows: 6 },
										showCount: true,
										maxLength: 200,
									}}
								/>
							</>
						)
					}
				</ProFormDependency>
			</div>

			{/*/!* 调整总额 *!/*/}
			{/*<Row justify="space-between" align="middle" style={{ marginBottom: 10 }}>*/}
			{/*	<Text type="secondary">*/}
			{/*		{intl.formatMessage({*/}
			{/*			id: `${intlPrefix}.summary.adjustmentTotal`,*/}
			{/*		})}*/}
			{/*	</Text>*/}
			{/*	<Text type={adjustmentTotal < 0 ? 'danger' : undefined}>*/}
			{/*		{formatCurrency(adjustmentTotal)}*/}
			{/*	</Text>*/}
			{/*</Row>*/}

			{/* 实际应收总额 */}
			<Row
				justify="space-between"
				align="middle"
				style={{
					borderTop: '1px solid #dee2e6',
					paddingTop: 10,
				}}
			>
				<Text style={{ fontSize: 18 }}>
					{intl.formatMessage({
						id: `${intlPrefix}.summary.actualTotal`,
					})}
				</Text>
				<Text
					strong
					style={{
						fontSize: 18,
						color: '#2c3e50',
					}}
				>
					{formatCurrency(actualTotalAmount)}
				</Text>
			</Row>
		</div>
	);
}
