import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Row, Col, Select, message } from 'antd';
import { Info, Check } from 'lucide-react';
import { DEFAULT_MILEAGE_STANDARD, DEFAULT_FEE_INFO } from '../contract-template-management/contract-template-vars.js';
import {
	getPublishedContractTemplateOptions,
	subscribePublishedContractTemplateOptions,
	getContractTemplatePreviewBadge,
	getContractTypeLabel,
} from '../contract-template-management/contract-template-catalog.js';
import { buildLeaseContractEditFormState } from './lease-contract-edit-bridge.js';
import { createDefaultLeaseOrderState, createDefaultPowerOfAttorneyState } from './lease-order-vars.js';
import { buildLeaseContractPreviewHtml } from './lease-contract-preview-build.js';
import {
	resolveContractApprovalType,
	STANDARD_CONTRACT_APPROVAL,
	NONSTANDARD_CONTRACT_APPROVAL,
} from './lease-contract-risk-detect.js';
import {
	isMainContractFormComplete,
	isLeaseOrderFormComplete,
	isPowerOfAttorneyFormComplete,
	isPowerOfAttorneySubmitReady,
	isPowerOfAttorneyOptionalEmpty,
	isSealTypeSelected,
	isLeaseContractFormComplete,
} from './lease-contract-form-validation.js';
import LeaseContractPreviewPanel, { PreviewEditableHint } from './LeaseContractPreviewPanel.jsx';
import LeaseContractEditorForm, {
	LeaseContractLeaseOrderSection,
	LeaseContractPowerOfAttorneySection,
} from './LeaseContractEditorForm.jsx';

var SEAL_TYPE_OPTIONS = [
	{ value: 'contract', label: '合同章' },
	{ value: 'official', label: '公章' },
	{ value: 'legal_person', label: '法人章' },
	{ value: 'finance', label: '财务章' },
	{ value: 'invoice', label: '发票章' },
];

export default function LeaseContractCreate({ onBack, initialScrollSection, editRecord }) {
	var contractTypeState = useState('');
	var contractType = contractTypeState[0];
	var setContractType = contractTypeState[1];
	var contractTemplateIdState = useState('');
	var contractTemplateId = contractTemplateIdState[0];
	var setContractTemplateId = contractTemplateIdState[1];
	var contractTemplateIdRef = useRef('');
	useEffect(function () {
		contractTemplateIdRef.current = contractTemplateId;
	}, [contractTemplateId]);
	var templateOptionsState = useState(function () { return getPublishedContractTemplateOptions(); });
	var templateOptions = templateOptionsState[0];
	var setTemplateOptions = templateOptionsState[1];
	var templateSelectOptions = useMemo(function () {
		return templateOptions.map(function (option) {
			var typeLabel = getContractTypeLabel(option.contractType) || option.contractType || '—';
			var fileLabel = option.fileName || option.title || option.id;
			return {
				value: option.id,
				label: typeLabel + ' · ' + fileLabel,
				contractType: option.contractType,
			};
		});
	}, [templateOptions]);
	function handleTemplateSelect(templateId) {
		if (!templateId) {
			setContractTemplateId('');
			setContractType('');
			return;
		}
		var match = templateOptions.find(function (item) { return item.id === templateId; });
		setContractTemplateId(templateId);
		setContractType(match ? match.contractType : '');
	}
	useEffect(function () {
		return subscribePublishedContractTemplateOptions(function () {
			var next = getPublishedContractTemplateOptions();
			setTemplateOptions(next);
			var currentId = contractTemplateIdRef.current;
			if (currentId && !next.some(function (item) { return item.id === currentId; })) {
				setContractTemplateId('');
				setContractType('');
				message.warning('所选模板已停用或不可用，请重新选择');
			}
		});
	}, []);
	var workspaceZoomState = useState(100);
	var workspaceZoom = workspaceZoomState[0];
	var setWorkspaceZoom = workspaceZoomState[1];
	var lessorIdState = useState('');
	var customerIdState = useState('');
	var mileageState = useState(Object.assign({}, DEFAULT_MILEAGE_STANDARD));
	var feeInfoState = useState(Object.assign({}, DEFAULT_FEE_INFO));
	var contractCodeState = useState('');
	var businessDeptState = useState('');
	var businessOwnerState = useState('');
	var leaseOrderState = useState(function () {
		var initial = createDefaultLeaseOrderState();
		return {
			insuredVehicleCount: initial.insuredVehicleCount,
			thirdPartyLiabilityMillion: initial.thirdPartyLiabilityMillion,
			deliveryRegion: initial.deliveryRegion.slice(),
			deliveryDate: initial.deliveryDate,
			rows: initial.rows.map(function (row) {
				return Object.assign({}, row, {
					brandModels: row.brandModels ? row.brandModels.slice() : [],
					plateNos: row.plateNos ? row.plateNos.slice() : undefined,
				});
			}),
		};
	});
	var lessorId = lessorIdState[0];
	var setLessorId = lessorIdState[1];
	var customerId = customerIdState[0];
	var setCustomerId = customerIdState[1];
	var mileage = mileageState[0];
	var setMileage = mileageState[1];
	var feeInfo = feeInfoState[0];
	var setFeeInfo = feeInfoState[1];
	var contractCode = contractCodeState[0];
	var setContractCode = contractCodeState[1];
	var businessDept = businessDeptState[0];
	var setBusinessDept = businessDeptState[1];
	var businessOwner = businessOwnerState[0];
	var setBusinessOwner = businessOwnerState[1];
	var leaseOrder = leaseOrderState[0];
	var setLeaseOrder = leaseOrderState[1];
	var powerOfAttorneyState = useState(function () {
		var initial = createDefaultPowerOfAttorneyState();
		return {
			delegates: initial.delegates.map(function (row) {
				return Object.assign({}, row);
			}),
		};
	});
	var powerOfAttorney = powerOfAttorneyState[0];
	var setPowerOfAttorney = powerOfAttorneyState[1];
	var contractRemarkState = useState('');
	var contractRemark = contractRemarkState[0];
	var setContractRemark = contractRemarkState[1];
	var sealTypesState = useState(['contract']);
	var sealTypes = sealTypesState[0];
	var setSealTypes = sealTypesState[1];
	var contractApprovalTypeState = useState(STANDARD_CONTRACT_APPROVAL);
	var contractApprovalType = contractApprovalTypeState[0];
	var setContractApprovalType = contractApprovalTypeState[1];

	var previewHtml = useMemo(function () {
		if (!contractTemplateId) return '';
		return buildLeaseContractPreviewHtml({
			contractTemplateId: contractTemplateId,
			lessorId: lessorId,
			customerId: customerId,
			mileage: mileage,
			feeInfo: feeInfo,
			contractCode: contractCode,
			leaseOrder: leaseOrder,
			powerOfAttorney: powerOfAttorney,
		});
	}, [contractTemplateId, lessorId, customerId, mileage, feeInfo, contractCode, leaseOrder, powerOfAttorney]);

	var handlePreviewContentChange = useCallback(function (mergedHtml) {
		setContractApprovalType(resolveContractApprovalType(previewHtml, mergedHtml));
	}, [previewHtml]);

	useEffect(function () {
		setContractApprovalType(STANDARD_CONTRACT_APPROVAL);
	}, [previewHtml]);

	var isNonStandardApproval = contractApprovalType === NONSTANDARD_CONTRACT_APPROVAL;
	var isTemplateSelected = Boolean(contractTemplateId);
	var previewBadge = getContractTemplatePreviewBadge(contractTemplateId);

	var isMainContractComplete = useMemo(function () {
		return isMainContractFormComplete({
			lessorId: lessorId,
			customerId: customerId,
			contractCode: contractCode,
			businessDept: businessDept,
			businessOwner: businessOwner,
			mileage: mileage,
			feeInfo: feeInfo,
		});
	}, [lessorId, customerId, contractCode, businessDept, businessOwner, mileage, feeInfo]);

	var isLeaseOrderComplete = useMemo(function () {
		return isLeaseOrderFormComplete({ leaseOrder: leaseOrder });
	}, [leaseOrder]);

	var isPowerOfAttorneyComplete = useMemo(function () {
		return isPowerOfAttorneyFormComplete({ powerOfAttorney: powerOfAttorney });
	}, [powerOfAttorney]);

	var isPoaSubmitReady = useMemo(function () {
		return isPowerOfAttorneySubmitReady({ powerOfAttorney: powerOfAttorney });
	}, [powerOfAttorney]);

	var isPowerOfAttorneyEmpty = useMemo(function () {
		return isPowerOfAttorneyOptionalEmpty({ powerOfAttorney: powerOfAttorney });
	}, [powerOfAttorney]);

	var isSealTypeComplete = useMemo(function () {
		return isSealTypeSelected({ sealTypes: sealTypes });
	}, [sealTypes]);

	var isFormSubmitReady = useMemo(function () {
		return isLeaseContractFormComplete({
			lessorId: lessorId,
			customerId: customerId,
			contractCode: contractCode,
			mileage: mileage,
			feeInfo: feeInfo,
			leaseOrder: leaseOrder,
			powerOfAttorney: powerOfAttorney,
			sealTypes: sealTypes,
		});
	}, [lessorId, customerId, contractCode, mileage, feeInfo, leaseOrder, powerOfAttorney, sealTypes]);

	function toggleSealType(value) {
		setSealTypes(function (current) {
			var index = current.indexOf(value);
			if (index >= 0) {
				var next = current.filter(function (item) { return item !== value; });
				return next.length ? next : current;
			}
			return current.concat([value]);
		});
	}

	function getSealTypeLabel(value) {
		var match = SEAL_TYPE_OPTIONS.find(function (item) { return item.value === value; });
		return match ? match.label : value;
	}

	var columnRef = useRef(null);
	var sectionRefs = {
		template: useRef(null),
		main: useRef(null),
		leaseOrder: useRef(null),
		poa: useRef(null),
		seal: useRef(null),
	};

	useEffect(function () {
		if (!initialScrollSection) return undefined;
		var timer = window.setTimeout(function () {
			scrollToCreateSection(initialScrollSection);
		}, 160);
		return function () { window.clearTimeout(timer); };
	}, [initialScrollSection, editRecord && editRecord.id]);

	useEffect(function () {
		if (!editRecord || !editRecord.id) return;
		var formState = buildLeaseContractEditFormState(editRecord);
		if (!formState) return;
		setContractTemplateId(formState.contractTemplateId || '');
		setLessorId(formState.lessorId || '');
		setCustomerId(formState.customerId || '');
		setContractCode(formState.contractCode || '');
		setBusinessDept(formState.businessDept || '');
		setBusinessOwner(formState.businessOwner || '');
		setMileage(Object.assign({}, formState.mileage));
		setFeeInfo(Object.assign({}, formState.feeInfo));
		setLeaseOrder({
			insuredVehicleCount: formState.leaseOrder.insuredVehicleCount,
			thirdPartyLiabilityMillion: formState.leaseOrder.thirdPartyLiabilityMillion,
			deliveryRegion: (formState.leaseOrder.deliveryRegion || []).slice(),
			deliveryDate: formState.leaseOrder.deliveryDate,
			rows: (formState.leaseOrder.rows || []).map(function (row) {
				return Object.assign({}, row, {
					brandModels: row.brandModels ? row.brandModels.map(function (pair) { return pair.slice(); }) : [],
					plateNos: row.plateNos ? row.plateNos.slice() : undefined,
					extraServices: row.extraServices ? row.extraServices.slice() : [],
				});
			}),
		});
		setPowerOfAttorney({
			delegates: (formState.powerOfAttorney.delegates || []).map(function (row) {
				return Object.assign({}, row);
			}),
		});
		setContractRemark(formState.contractRemark || '');
		setSealTypes((formState.sealTypes || ['contract']).slice());
	}, [editRecord && editRecord.id]);

	var createSteps = useMemo(function () {
		return [
			{
				key: 'template',
				label: '选择模板',
				done: isTemplateSelected,
				optional: false,
				locked: false,
			},
			{
				key: 'main',
				label: '主体合同',
				done: isMainContractComplete,
				optional: false,
				locked: !isTemplateSelected,
			},
			{
				key: 'leaseOrder',
				label: '租赁订单',
				done: isLeaseOrderComplete,
				optional: false,
				locked: !isTemplateSelected,
			},
			{
				key: 'poa',
				label: '授权委托',
				done: !isPowerOfAttorneyEmpty && isPowerOfAttorneyComplete,
				optional: isPowerOfAttorneyEmpty,
				locked: !isTemplateSelected,
			},
			{
				key: 'seal',
				label: '用章类型',
				done: isSealTypeComplete,
				optional: false,
				locked: !isTemplateSelected,
			},
		];
	}, [
		isTemplateSelected,
		isMainContractComplete,
		isLeaseOrderComplete,
		isPowerOfAttorneyComplete,
		isPowerOfAttorneyEmpty,
		isSealTypeComplete,
	]);

	var requiredDoneCount = useMemo(function () {
		var count = 0;
		if (isTemplateSelected) count += 1;
		if (isMainContractComplete) count += 1;
		if (isLeaseOrderComplete) count += 1;
		if (isPowerOfAttorneyComplete) count += 1;
		if (isSealTypeComplete) count += 1;
		return count;
	}, [isTemplateSelected, isMainContractComplete, isLeaseOrderComplete, isPowerOfAttorneyComplete, isSealTypeComplete]);

	function scrollToCreateSection(stepKey) {
		var target = sectionRefs[stepKey] && sectionRefs[stepKey].current;
		if (!target) return;
		target.scrollIntoView({ behavior: 'smooth', block: 'start' });
	}

	function handleStepNavClick(step) {
		if (step.locked && step.key !== 'template') {
			message.info('请先选择合同模板');
			scrollToCreateSection('template');
			return;
		}
		scrollToCreateSection(step.key);
	}

	function renderSectionLock(stepKey) {
		if (isTemplateSelected) return null;
		return React.createElement('div', {
			className: 'lc-create-section__lock',
			role: 'region',
			'aria-label': '需先选择合同模板',
		},
			React.createElement('p', { className: 'lc-create-section__lock-text' }, '请先完成第 1 步选择合同模板，再填写本节内容。'),
			React.createElement('button', {
				type: 'button',
				className: 'vm-btn vm-btn-secondary lc-create-section__lock-btn',
				onClick: function () { scrollToCreateSection('template'); },
			}, '前往选择模板'),
		);
	}

	function renderStepNav() {
		return React.createElement('nav', {
			className: 'lc-create-step-nav',
			'aria-label': '填写步骤',
			'data-annotation-id': 'lc-create-step-nav',
		},
			React.createElement('ol', { className: 'lc-create-step-nav__list' },
				createSteps.map(function (step, index) {
					var statusClass = step.done
						? 'lc-create-step-nav__item--done'
						: (step.optional ? 'lc-create-step-nav__item--optional' : 'lc-create-step-nav__item--pending');
					if (step.locked) statusClass += ' lc-create-step-nav__item--locked';
					return React.createElement('li', { key: step.key, className: 'lc-create-step-nav__item ' + statusClass },
						React.createElement('button', {
							type: 'button',
							className: 'lc-create-step-nav__btn',
							onClick: function () { handleStepNavClick(step); },
							'aria-current': step.key === 'template' && !isTemplateSelected ? 'step' : undefined,
						},
							React.createElement('span', { className: 'lc-create-step-nav__index', 'aria-hidden': true },
								step.done
									? React.createElement(Check, { size: 14, strokeWidth: 2.5, 'aria-hidden': true })
									: String(index + 1),
							),
							React.createElement('span', { className: 'lc-create-step-nav__label' }, step.label),
							step.optional
								? React.createElement('span', { className: 'lc-create-step-nav__tag' }, '选填')
								: null,
						),
						index < createSteps.length - 1
							? React.createElement('span', { className: 'lc-create-step-nav__sep', 'aria-hidden': true })
							: null,
					);
				}),
			),
		);
	}

	return React.createElement('div', { className: 'vm-page lc-page lc-create-page ct-page' },
		React.createElement('div', { className: 'lc-create-topbar' },
			React.createElement('button', {
				type: 'button',
				className: 'vm-btn vm-btn-back',
				onClick: onBack,
			}, '返回列表'),
			React.createElement('div', { className: 'lc-create-topbar__intro' },
				React.createElement('h1', { className: 'lc-create-topbar__title' }, '新增租赁合同'),
				React.createElement('p', { className: 'lc-create-topbar__meta', role: 'status' },
					'必填进度 ',
					React.createElement('strong', null, requiredDoneCount),
					' / 5',
					isTemplateSelected
						? React.createElement('span', { className: 'lc-create-topbar__meta-divider', 'aria-hidden': true }, '·')
						: null,
					isTemplateSelected
						? React.createElement('span', { className: 'lc-create-topbar__meta-template' }, previewBadge)
						: React.createElement('span', { className: 'lc-create-topbar__meta-hint' }, '请先选择合同模板'),
				),
			),
		),
		React.createElement('div', { className: 'ct-editor-page lc-create-editor-page' },
			React.createElement('div', { className: 'ct-editor-workspace' },
				React.createElement(Row, { gutter: [16, 16] },
					React.createElement(Col, { xs: 24, lg: 12 },
						React.createElement('div', { className: 'lc-create-editor-column', ref: columnRef },
							renderStepNav(),
							React.createElement('section', {
								className: 'ct-editor-column-card lc-template-step-card lc-create-section',
								'aria-label': '选择合同类型',
								'data-annotation-id': 'lc-create-template',
								id: 'lc-create-section-template',
								ref: sectionRefs.template,
							},
								React.createElement('div', {
									className: 'ct-panel-head lc-main-contract-card__head lc-template-step-card__head',
									'aria-describedby': 'lc-template-step-hint',
								},
									React.createElement('div', { className: 'lc-template-step-card__title-row' },
										React.createElement('div', { className: 'ct-panel-head__title' }, '第 1 步：选择合同类型'),
										React.createElement('span', {
											className: 'lc-form-card__hint',
											role: 'note',
											id: 'lc-template-step-hint',
										},
											React.createElement(Info, {
												size: 13,
												className: 'lc-form-card__hint-icon',
												'aria-hidden': true,
											}),
											React.createElement('span', { className: 'lc-form-card__hint-text' },
												'请选择模板管理中已发布且启用的合同模板，右侧将自动生成预览。',
											),
										),
									),
									React.createElement('span', {
										className: 'lc-form-completion-badge ' + (isTemplateSelected ? 'lc-form-completion-badge--done' : 'lc-form-completion-badge--pending'),
										role: 'status',
										'aria-live': 'polite',
									}, isTemplateSelected ? '已选择' : '必选'),
								),
								React.createElement('div', { className: 'ct-editor-panel lc-create-editor-panel lc-template-step-panel' },
									React.createElement(Select, {
										className: 'lc-template-select',
										value: contractTemplateId || undefined,
										placeholder: templateSelectOptions.length ? '请选择合同模板' : '暂无可用模板',
										allowClear: true,
										showSearch: true,
										optionFilterProp: 'label',
										disabled: !templateSelectOptions.length,
										onChange: handleTemplateSelect,
										options: templateSelectOptions,
										'aria-label': '合同模板',
									}),
									!templateSelectOptions.length
										? React.createElement('p', { className: 'lc-template-step-empty' }, '暂无已启用的合同模板，请先在合同模板管理中发布并启用。')
										: null,
								),
							),
							React.createElement('section', {
								className: 'ct-editor-column-card lc-main-contract-card lc-create-section'
									+ (isTemplateSelected ? '' : ' lc-create-section--disabled'),
								'aria-label': '主体合同信息',
								'data-annotation-id': 'lc-create-main-contract',
								id: 'lc-create-section-main',
								ref: sectionRefs.main,
							},
								React.createElement('div', { className: 'ct-panel-head lc-main-contract-card__head' },
									React.createElement('div', { className: 'ct-panel-head__title' }, '第 2 步：主体合同信息'),
									React.createElement('span', {
										className: 'lc-form-completion-badge ' + (isMainContractComplete ? 'lc-form-completion-badge--done' : 'lc-form-completion-badge--pending'),
										role: 'status',
										'aria-live': 'polite',
									}, isMainContractComplete ? '已完成' : '未完成'),
								),
								React.createElement('div', { className: 'ct-editor-panel lc-create-editor-panel lc-main-contract-panel' },
									React.createElement(LeaseContractEditorForm, {
										lessorId: lessorId,
										customerId: customerId,
										contractCode: contractCode,
										businessDept: businessDept,
										businessOwner: businessOwner,
										mileage: mileage,
										feeInfo: feeInfo,
										onLessorChange: setLessorId,
										onCustomerChange: setCustomerId,
										onContractCodeChange: setContractCode,
										onBusinessAssignmentChange: function (dept, owner) {
											setBusinessDept(dept);
											setBusinessOwner(owner);
										},
										onMileageChange: setMileage,
										onFeeInfoChange: setFeeInfo,
									}),
								),
								renderSectionLock('main'),
							),
							React.createElement('section', {
								className: 'ct-editor-column-card lc-create-section'
									+ (isTemplateSelected ? '' : ' lc-create-section--disabled'),
								'aria-label': '附件1：租赁订单',
								'data-annotation-id': 'lc-create-lease-order',
								id: 'lc-create-section-lease-order',
								ref: sectionRefs.leaseOrder,
							},
								React.createElement('div', { className: 'ct-panel-head' },
									React.createElement('div', { className: 'ct-panel-head__title' }, '第 3 步：附件1 · 租赁订单'),
									React.createElement('span', {
										className: 'lc-form-completion-badge ' + (isLeaseOrderComplete ? 'lc-form-completion-badge--done' : 'lc-form-completion-badge--pending'),
										role: 'status',
										'aria-live': 'polite',
									}, isLeaseOrderComplete ? '已完成' : '未完成'),
								),
								React.createElement('div', { className: 'ct-editor-panel lc-create-editor-panel' },
									React.createElement(LeaseContractLeaseOrderSection, {
										leaseOrder: leaseOrder,
										onLeaseOrderChange: setLeaseOrder,
									}),
								),
								renderSectionLock('leaseOrder'),
							),
							React.createElement('section', {
								className: 'ct-editor-column-card lc-create-section'
									+ (isTemplateSelected ? '' : ' lc-create-section--disabled'),
								'aria-label': '授权委托书',
								'data-annotation-id': 'lc-create-poa',
								id: 'lc-create-section-poa',
								ref: sectionRefs.poa,
							},
								React.createElement('div', {
									className: 'ct-panel-head lc-create-section__head lc-create-section-poa-head',
									'aria-describedby': 'lc-create-poa-hint',
								},
									React.createElement('div', { className: 'lc-template-step-card__title-row' },
										React.createElement('div', { className: 'ct-panel-head__title' }, '第 4 步：授权委托书'),
										React.createElement('span', {
											className: 'lc-form-card__hint lc-create-poa-hint',
											role: 'note',
											id: 'lc-create-poa-hint',
											'data-annotation-id': 'lc-create-poa-hint',
										},
											React.createElement(Info, {
												size: 13,
												className: 'lc-form-card__hint-icon',
												'aria-hidden': true,
											}),
											React.createElement('span', { className: 'lc-form-card__hint-text' },
												'添加受托人须同时上传授权委托书',
											),
										),
									),
									React.createElement('span', {
										className: 'lc-form-completion-badge '
											+ (isPowerOfAttorneyEmpty
												? 'lc-form-completion-badge--optional'
												: (isPowerOfAttorneyComplete
													? 'lc-form-completion-badge--done'
													: 'lc-form-completion-badge--pending')),
										role: 'status',
										'aria-live': 'polite',
									}, isPowerOfAttorneyEmpty ? '选填' : (isPowerOfAttorneyComplete ? '已完成' : '未完成')),
								),
								React.createElement('div', { className: 'ct-editor-panel lc-create-editor-panel' },
									React.createElement(LeaseContractPowerOfAttorneySection, {
										powerOfAttorney: powerOfAttorney,
										onPowerOfAttorneyChange: setPowerOfAttorney,
										contractRemark: contractRemark,
										onContractRemarkChange: setContractRemark,
									}),
								),
								renderSectionLock('poa'),
							),
							React.createElement('section', {
								className: 'ct-editor-column-card lc-create-section'
									+ (isTemplateSelected ? '' : ' lc-create-section--disabled'),
								'aria-label': '用章类型',
								'data-annotation-id': 'lc-create-seal',
								id: 'lc-create-section-seal',
								ref: sectionRefs.seal,
							},
								React.createElement('div', {
									className: 'ct-panel-head lc-create-section__head lc-create-section-seal-head',
								},
									React.createElement('div', { className: 'lc-template-step-card__title-row' },
										React.createElement('div', { className: 'ct-panel-head__title' }, '第 5 步：用章类型'),
										sealTypes.length
											? React.createElement('span', {
												className: 'lc-seal-type-head-tags',
												'aria-label': '已选用章',
											},
												sealTypes.map(function (value) {
													return React.createElement('span', {
														key: value,
														className: 'lc-seal-type-head-tag',
													}, getSealTypeLabel(value));
												}),
											)
											: null,
									),
									React.createElement('span', {
										className: 'lc-form-completion-badge ' + (isSealTypeComplete ? 'lc-form-completion-badge--done' : 'lc-form-completion-badge--pending'),
										role: 'status',
										'aria-live': 'polite',
									}, isSealTypeComplete ? '已选择' : '必选'),
								),
								React.createElement('div', { className: 'ct-editor-panel lc-create-editor-panel' },
									React.createElement('div', {
										className: 'lc-seal-type-chips',
										role: 'group',
										'aria-label': '用章类型',
										'data-annotation-id': 'lc-create-seal-type',
									},
										SEAL_TYPE_OPTIONS.map(function (option) {
											var active = sealTypes.indexOf(option.value) >= 0;
											return React.createElement('button', {
												key: option.value,
												type: 'button',
												className: 'lc-seal-type-chip' + (active ? ' is-active' : ''),
												'aria-pressed': active,
												onClick: function () { toggleSealType(option.value); },
											}, option.label);
										}),
									),
								),
								renderSectionLock('seal'),
							),
						),
					),
					React.createElement(Col, { xs: 24, lg: 12 },
						React.createElement('section', {
							className: 'ct-editor-column-card ct-editor-column-card--preview',
							'aria-label': '实时预览',
							'data-annotation-id': 'lc-create-preview',
						},
							React.createElement('div', {
								className: 'ct-panel-head lc-create-preview-head',
								'aria-describedby': isTemplateSelected ? 'lc-preview-editable-hint' : undefined,
							},
								React.createElement('div', { className: 'lc-template-step-card__title-row' },
									React.createElement('div', { className: 'ct-panel-head__title' }, '实时预览'),
									isTemplateSelected ? React.createElement(PreviewEditableHint) : null,
								),
								React.createElement('div', { className: 'ct-panel-head__actions' },
									React.createElement('span', {
										className: 'lc-approval-type-badge'
											+ (isNonStandardApproval ? ' lc-approval-type-badge--nonstd' : ' lc-approval-type-badge--standard'),
										role: 'status',
										'aria-live': 'polite',
									}, '审批：' + contractApprovalType),
								),
							),
							React.createElement('div', { className: 'ct-preview-panel ct-preview-panel--word' },
								isTemplateSelected
									? React.createElement(LeaseContractPreviewPanel, {
										html: previewHtml,
										zoom: workspaceZoom,
										onZoomChange: setWorkspaceZoom,
										editable: true,
										onContentChange: handlePreviewContentChange,
									})
									: React.createElement('div', { className: 'lc-template-preview-empty' }, '请先在左侧选择合同模板，右侧将自动生成对应预览。'),
							),
						),
					),
				),
			),
		),
		React.createElement('div', { className: 'lc-create-footer', 'data-annotation-id': 'lc-create-footer' },
			React.createElement('button', {
				type: 'button',
				className: 'vm-btn vm-btn-ghost',
				onClick: onBack,
			}, '取消'),
			React.createElement('button', {
				type: 'button',
				className: 'vm-btn vm-btn-secondary',
				onClick: function () {
					if (!contractTemplateId) {
						message.warning('请先选择合同模板');
						return;
					}
					message.success('已保存草稿（' + getContractTypeLabel(contractType) + ' · ' + contractApprovalType + '，原型）');
				},
			}, '保存草稿'),
			React.createElement('button', {
				type: 'button',
				className: 'vm-btn vm-btn-primary',
				onClick: function () {
					if (!contractTemplateId) {
						message.warning('请先选择合同模板');
						return;
					}
					if (!isFormSubmitReady) {
						if (!isPoaSubmitReady) {
							message.warning('提交审核前须完成授权委托书填写');
							scrollToCreateSection('poa');
							return;
						}
						message.warning('请先完成左侧必填项');
						return;
					}
					message.info('提交审核：' + getContractTypeLabel(contractType) + ' · ' + contractApprovalType + '（原型）');
				},
			}, '提交审核'),
		),
	);
}
