import React, { useEffect, useRef, useState } from 'react';
import { Select } from 'antd';
import { Info } from 'lucide-react';
import { paginateWordHtml } from './contract-word-preview.js';

var PREVIEW_ZOOM_STEPS = [50, 75, 90, 100, 110, 125, 150, 175, 200];

function EditablePreviewPageBody(props) {
	var pageIndex = props.pageIndex;
	var initialHtml = props.initialHtml;
	var onInput = props.onInput;
	var bodyRef = useRef(null);
	var seededHtmlRef = useRef('');

	useEffect(function () {
		if (!bodyRef.current) return;
		if (seededHtmlRef.current === initialHtml) return;
		bodyRef.current.innerHTML = initialHtml || '';
		seededHtmlRef.current = initialHtml || '';
	}, [initialHtml]);

	return React.createElement('div', {
		ref: bodyRef,
		className: 'ct-preview-page__body ct-word-doc lc-preview-page__body--editable',
		contentEditable: true,
		suppressContentEditableWarning: true,
		role: 'textbox',
		'aria-multiline': true,
		'aria-label': '合同预览正文，第 ' + (pageIndex + 1) + ' 页',
		onInput: function (event) {
			if (onInput) onInput(pageIndex, event.currentTarget.innerHTML);
		},
	});
}

export function PreviewEditableHint() {
	return React.createElement('span', {
		className: 'lc-form-card__hint lc-preview-editable-hint lc-preview-editable-hint--inline',
		role: 'note',
		'data-annotation-id': 'lc-preview-editable-hint',
		id: 'lc-preview-editable-hint',
	},
		React.createElement(Info, {
			size: 13,
			className: 'lc-form-card__hint-icon',
			'aria-hidden': true,
		}),
		React.createElement('span', { className: 'lc-form-card__hint-text lc-preview-editable-hint__text' },
			'正文可编辑；改动',
			React.createElement('span', { className: 'lc-preview-editable-hint__risk' }, '风控红线条款'),
			'走非标准审批，未改则标准审批。',
		),
	);
}

function previewPagerIcon(name) {
	var common = {
		xmlns: 'http://www.w3.org/2000/svg',
		width: 16,
		height: 16,
		viewBox: '0 0 24 24',
		fill: 'none',
		stroke: 'currentColor',
		strokeWidth: 2,
		strokeLinecap: 'round',
		strokeLinejoin: 'round',
		'aria-hidden': true,
	};
	if (name === 'zoomOut') {
		return React.createElement('svg', common, React.createElement('path', { d: 'M5 12h14' }));
	}
	if (name === 'zoomIn') {
		return React.createElement('svg', common,
			React.createElement('path', { d: 'M5 12h14' }),
			React.createElement('path', { d: 'M12 5v14' }),
		);
	}
	return null;
}

export default function LeaseContractPreviewPanel({
	html,
	zoom,
	onZoomChange,
	editable,
	onContentChange,
}) {
	var baselinePagesState = useState([]);
	var pageIdxState = useState(0);
	var viewModeState = useState('scroll');
	var internalZoomState = useState(100);
	var baselinePages = baselinePagesState[0];
	var setBaselinePages = baselinePagesState[1];
	var draftPagesRef = useRef([]);
	var pageIdx = pageIdxState[0];
	var setPageIdx = pageIdxState[1];
	var viewMode = viewModeState[0];
	var setViewMode = viewModeState[1];
	var previewZoom = zoom != null ? zoom : internalZoomState[0];
	var setPreviewZoom = onZoomChange || internalZoomState[1];

	useEffect(function () {
		if (!html) {
			setBaselinePages([]);
			draftPagesRef.current = [];
			return;
		}
		var timer = window.setTimeout(function () {
			var nextPages = paginateWordHtml(html);
			setBaselinePages(nextPages);
			draftPagesRef.current = nextPages.slice();
			pageIdxState[1](0);
			notifyContentChange(nextPages);
		}, 0);
		return function () { window.clearTimeout(timer); };
	}, [html]);

	function notifyContentChange(nextPages) {
		if (!onContentChange) return;
		onContentChange((nextPages || []).join(''));
	}

	function handlePageInput(pageIndex, nextHtml) {
		var draft = draftPagesRef.current ? draftPagesRef.current.slice() : [];
		draft[pageIndex] = nextHtml;
		draftPagesRef.current = draft;
		notifyContentChange(draft);
	}

	function stepPreviewZoom(direction) {
		setPreviewZoom(function (current) {
			var idx = PREVIEW_ZOOM_STEPS.indexOf(current);
			if (idx < 0) {
				if (direction > 0) {
					return PREVIEW_ZOOM_STEPS.find(function (value) { return value > current; })
						|| PREVIEW_ZOOM_STEPS[PREVIEW_ZOOM_STEPS.length - 1];
				}
				var reversed = PREVIEW_ZOOM_STEPS.slice().reverse();
				return reversed.find(function (value) { return value < current; }) || PREVIEW_ZOOM_STEPS[0];
			}
			var nextIdx = idx + direction;
			if (nextIdx < 0) return PREVIEW_ZOOM_STEPS[0];
			if (nextIdx >= PREVIEW_ZOOM_STEPS.length) return PREVIEW_ZOOM_STEPS[PREVIEW_ZOOM_STEPS.length - 1];
			return PREVIEW_ZOOM_STEPS[nextIdx];
		});
	}

	if (!html || !String(html).trim()) {
		return React.createElement('div', { className: 'ct-preview-empty', role: 'status' },
			React.createElement('p', { className: 'ct-preview-empty__text' }, '暂无合同内容可预览'),
		);
	}

	if (!baselinePages.length) {
		return React.createElement('div', { className: 'ct-preview-doc ct-word-doc ct-word-paginated' },
			React.createElement('div', { className: 'ct-preview-body-shell' },
				React.createElement('div', { className: 'ct-preview-pages-wrap' },
					React.createElement('div', { className: 'ct-preview-pages' },
						React.createElement('div', { className: 'ct-preview-page is-loading' }, '合同分页排版计算中…'),
					),
				),
			),
		);
	}

	var previewToolbar = React.createElement('div', { className: 'ct-preview-toolbar' },
		React.createElement('div', { className: 'ct-preview-toolbar__row ct-preview-toolbar__row--primary', role: 'toolbar', 'aria-label': '预览缩放' },
			React.createElement('div', { className: 'ct-preview-pager__group', role: 'group', 'aria-label': '缩放' },
				React.createElement('div', { className: 'ct-preview-pager__group-body' },
					React.createElement('button', {
						type: 'button',
						className: 'ct-preview-pager__icon-btn',
						'aria-label': '缩小',
						disabled: previewZoom <= PREVIEW_ZOOM_STEPS[0],
						onClick: function () { stepPreviewZoom(-1); },
					}, previewPagerIcon('zoomOut')),
					React.createElement(Select, {
						className: 'ct-preview-zoom-select vm-focus-border',
						size: 'small',
						value: previewZoom,
						onChange: setPreviewZoom,
						'aria-label': '预览缩放比例',
						options: PREVIEW_ZOOM_STEPS.map(function (value) {
							return { value: value, label: value + '%' };
						}),
					}),
					React.createElement('button', {
						type: 'button',
						className: 'ct-preview-pager__icon-btn',
						'aria-label': '放大',
						disabled: previewZoom >= PREVIEW_ZOOM_STEPS[PREVIEW_ZOOM_STEPS.length - 1],
						onClick: function () { stepPreviewZoom(1); },
					}, previewPagerIcon('zoomIn')),
				),
			),
		),
		React.createElement('div', {
			className: 'ct-preview-toolbar__row ct-preview-toolbar__row--secondary ct-preview-pager',
			role: 'toolbar',
			'aria-label': '合同预览工具栏',
		},
			React.createElement('div', { className: 'ct-preview-pager__group', role: 'group', 'aria-label': '翻页' },
				React.createElement('span', { className: 'ct-preview-pager__group-label' }, '翻页'),
				React.createElement('div', { className: 'ct-preview-pager__group-body' },
					React.createElement('button', {
						type: 'button',
						className: 'vm-btn vm-btn-secondary ct-preview-pager__btn',
						disabled: pageIdx <= 0,
						onClick: function () { setPageIdx(Math.max(0, pageIdx - 1)); },
					}, '上一页'),
					React.createElement('span', { className: 'ct-preview-pager__page', 'aria-live': 'polite' },
						React.createElement('span', { className: 'ct-preview-pager__page-current' }, pageIdx + 1),
						' / ',
						React.createElement('span', { className: 'ct-preview-pager__page-total' }, baselinePages.length),
					),
					React.createElement('button', {
						type: 'button',
						className: 'vm-btn vm-btn-secondary ct-preview-pager__btn',
						disabled: pageIdx >= baselinePages.length - 1,
						onClick: function () { setPageIdx(Math.min(baselinePages.length - 1, pageIdx + 1)); },
					}, '下一页'),
				),
			),
			React.createElement('div', { className: 'ct-preview-pager__group ct-preview-pager__group--view', role: 'group', 'aria-label': '视图' },
				React.createElement('span', { className: 'ct-preview-pager__group-label' }, '视图'),
				React.createElement('div', { className: 'ct-preview-pager__segmented', role: 'group', 'aria-label': '预览视图模式' },
					React.createElement('button', {
						type: 'button',
						className: 'ct-preview-pager__segment' + (viewMode === 'scroll' ? ' is-active' : ''),
						'aria-pressed': viewMode === 'scroll',
						onClick: function () { setViewMode('scroll'); },
					}, '连续预览'),
					React.createElement('button', {
						type: 'button',
						className: 'ct-preview-pager__segment' + (viewMode === 'single' ? ' is-active' : ''),
						'aria-pressed': viewMode === 'single',
						onClick: function () { setViewMode('single'); },
					}, '单页预览'),
				),
			),
		),
	);

	function renderPageBody(pageHtml, i) {
		if (editable) {
			return React.createElement(EditablePreviewPageBody, {
				key: 'body-' + i + '-' + String(html || '').length,
				pageIndex: i,
				initialHtml: baselinePages[i],
				onInput: handlePageInput,
			});
		}
		return React.createElement('div', {
			key: 'body-' + i,
			className: 'ct-preview-page__body ct-word-doc',
			dangerouslySetInnerHTML: { __html: pageHtml },
		});
	}

	var pagesContent = viewMode === 'single'
		? React.createElement('div', { className: 'ct-preview-page', key: pageIdx },
			renderPageBody(baselinePages[pageIdx], pageIdx),
			React.createElement('div', { className: 'ct-preview-page__footer' }, '— ', pageIdx + 1, ' —'),
		)
		: baselinePages.map(function (pageHtml, i) {
			return React.createElement('div', { className: 'ct-preview-page', key: 'p-' + i },
				renderPageBody(pageHtml, i),
				React.createElement('div', { className: 'ct-preview-page__footer' }, '— ', i + 1, ' —'),
			);
		});

	return React.createElement('div', { className: 'ct-preview-doc ct-word-doc ct-word-paginated' + (editable ? ' lc-preview-doc--editable' : '') },
		previewToolbar,
		React.createElement('div', { className: 'ct-preview-body-shell' },
			React.createElement('div', { className: 'ct-preview-pages-wrap' },
				React.createElement('div', {
					className: 'ct-preview-pages',
					style: { zoom: previewZoom / 100 },
				}, pagesContent),
			),
		),
	);
}
