import { Component, NewState, Util, RefreshState } from '@web/state'
import { VirtualScroll } from '@web/base'

Component.register('DataTable', container => {
	const vs = VirtualScroll()
	if (!container.state) container.state = NewState({})
	const state = container.state

	Object.assign(state, {
		list: [], fields: [], renderedList: [],
		prevHeight: 0, postHeight: 0, _listStartIndex: 0,
		selStartR: -1, selStartF: -1, selEndR: -1, selEndF: -1,
		multiSelections: [],
		isSelecting: false,
		idField: 'id',
		activeCell: { rIdx: -1, fIdx: -1 },
		editingCell: { row: null, rowId: null, fieldId: null, fIdx: -1 },
		features: { idSystem: true }
	})

	// --- 渲染刷新 ---
	const refresh = () => {
		const start = performance.now()
		const scrollEl = container.querySelector('.dt-body')
		if (!scrollEl) return
		const res = vs.calc(scrollEl, state.list)
		if (res) {
			Object.assign(state, {
				prevHeight: res.prevHeight, postHeight: res.postHeight,
				_listStartIndex: res.listStartIndex, renderedList: res.renderedList
			})
			const end = performance.now()
			if (end - start > 10) console.warn(`[DataTable] Keyed Refresh: ${(end - start).toFixed(2)}ms`);
		}
	}
	container.refresh = refresh

	state.__watch('list', list => {
		if (!list) return
		if (!state.idField) {
			if (list.length && list[0].id !== undefined) state.idField = 'id';
			else state.idField = '_rowId';
		}
		const idKey = state.idField;
		list.forEach((item, i) => { 
			if (item[idKey] === undefined) item[idKey] = 'ui_' + Math.random().toString(36).substr(2, 9)
		})
		
		state._listStartIndex = 0
		const scrollEl = container.querySelector('.dt-body')
		state.renderedList = vs.reset(list, scrollEl || container) || []
		if (scrollEl) { vs.init(list, refresh); requestAnimationFrame(refresh); }
	})

	container.onItemUpdate = (rIdx, node) => vs.update(rIdx + state._listStartIndex, node)

	container.isCellSelected = (r, f) => {
		const rMin = Math.min(state.selStartR, state.selEndR), rMax = Math.max(state.selStartR, state.selEndR)
		const fMin = Math.min(state.selStartF, state.selEndF), fMax = Math.max(state.selStartF, state.selEndF)
		if (r >= rMin && r <= rMax && f >= fMin && f <= fMax) return true
		return state.multiSelections.some(s => r >= s.r1 && r <= s.r2 && f >= s.f1 && f <= s.f2)
	}

	container.clearAllActive = (keepSelection = false) => {
		state.editingCell = { row: null, rowId: null, fieldId: null, fIdx: -1 }
		state.activeCell = { rIdx: -1, fIdx: -1 }
		if (!keepSelection) {
			state.selStartR = -1; state.multiSelections = []
		}
	}

	container.startSelect = (r, f, e) => {
		const alreadySelected = container.isCellSelected(r, f)
		if (e.shiftKey && state.selStartR !== -1) {
			state.selEndR = r; state.selEndF = f
		} else {
			if (!alreadySelected) {
				if (!e.ctrlKey && !e.metaKey) container.clearAllActive()
				else if (state.selStartR !== -1) {
					state.multiSelections.push({
						r1: Math.min(state.selStartR, state.selEndR), r2: Math.max(state.selStartR, state.selEndR),
						f1: Math.min(state.selStartF, state.selEndF), f2: Math.max(state.selStartF, state.selEndF)
					})
				}
				state.selStartR = state.selEndR = r
				state.selStartF = state.selEndF = f
			}
			state.isSelecting = true
			state.activeCell = { rIdx: r, fIdx: f }
		}
	}

	container.updateSelect = (r, f) => state.isSelecting && (state.selEndR = r, state.selEndF = f)
	container.endSelect = () => { state.isSelecting = false }

	container.editCell = (row, f, fIdx) => {
		container.clearAllActive(true) 
		const wrappedRow = row.__watch ? row : NewState(row)
		const listIdx = state.list.indexOf(row)
		if (listIdx !== -1) state.list[listIdx] = wrappedRow
		
		state.editingCell = { row: wrappedRow, rowId: wrappedRow[state.idField], fieldId: f.id, fIdx }
	}

	const onGlobalMouseUp = () => state.isSelecting && container.endSelect()
	window.addEventListener('mouseup', onGlobalMouseUp)
	const onGlobalMouseDown = e => !container.contains(e.target) && container.clearAllActive()
	document.addEventListener('mousedown', onGlobalMouseDown)
	container._onUnload = () => {
		document.removeEventListener('mousedown', onGlobalMouseDown)
		window.removeEventListener('mouseup', onGlobalMouseUp)
	}

	state.__watch('fields', fields => {
		if (!fields) return
		const leftOffsets = [], rightOffsets = []
		let lSum = 0
		fields.forEach((f, i) => { if (f.pinned === 'left') { leftOffsets[i] = lSum; lSum += (f.width || 150); } })
		fields.forEach((f, i) => {
			if (f.pinned === 'right') {
				let rs = 0
				for (let j = i + 1; j < fields.length; j++) { if (fields[j].pinned === 'right') rs += (fields[j].width || 150); }
				rightOffsets[i] = rs
			}
		})
		fields.forEach((f, i) => {
			const width = f.width || 150;
			const left = leftOffsets[i] || 0;
			const right = rightOffsets[i] || 0;
			f._preStyle = `width: var(--w-${f.id}, ${width}px); min-width: var(--w-${f.id}, ${width}px); height:40px;` + 
						 (f.pinned ? 'position:sticky; z-index:10;' : '') + 
						 (f.pinned === 'left' ? `left:${left}px;` : '') + 
						 (f.pinned === 'right' ? `right:${right}px;` : '');
		});
	})

}, Util.makeDom(/*html*/`
<div class="dt-root d-flex flex-column h-100 border bg-body text-body overflow-hidden" style="position:relative; user-select:none" tabindex="0" onunload="this._onUnload()">
	<div class="dt-header d-flex flex-shrink-0 border-bottom bg-body-tertiary fw-bold text-muted small" style="overflow:hidden; position:sticky; top:0; z-index:20; height:48px">
		<div $each="this.state.fields" as="f" class="dt-col border-end d-flex align-items-center px-2 bg-body-tertiary"
			$style="f._preStyle">
			<span $text="f.name" $class="'text-truncate flex-grow-1 ' + (f.type === 'number' ? 'text-end' : '')"></span>
			<Resizer class="dt-resizer" $.target="thisNode.parentNode" min="50" max="600" $bind="f.width" $onresizing="thisNode.closest('.dt-root').style.setProperty('--w-' + f.id, event.detail.newSize + 'px')"/>
		</div>
	</div>
	<div class="dt-body flex-grow-1 overflow-auto bg-body" $onscroll="requestAnimationFrame(() => this.refresh())" style="overflow-anchor:none">
		<div $if="this.state.prevHeight>0" $style="'height:' + this.state.prevHeight + 'px;'"></div>
		<div $each="this.state.renderedList" as="row" class="dt-row d-flex border-bottom" $onupdate="this.onItemUpdate(rIdx, thisNode)" index="rIdx">
			<div $each="this.state.fields" as="f" index="fIdx" class="dt-cell border-end d-flex align-items-center bg-body"
				$class="'dt-cell border-end d-flex align-items-center bg-body' + (this.isCellSelected(rIdx + this.state._listStartIndex, fIdx) ? ' bg-primary-subtle' : '') + (this.state.activeCell.rIdx === rIdx + this.state._listStartIndex && this.state.activeCell.fIdx === fIdx ? ' dt-cell-active' : '')"
				$style="f._preStyle"
				$onmousedown="this.startSelect(rIdx + this.state._listStartIndex, fIdx, event)"
				$onmouseenter="this.updateSelect(rIdx + this.state._listStartIndex, fIdx)"
				$ondblclick="this.editCell(row, f, fIdx)">
				
				<div $if="this.state.editingCell.rowId !== row[this.state.idField] || this.state.editingCell.fieldId !== f.id" $class="'px-2 text-truncate w-100 h-100 d-flex align-items-center ' + (f.type === 'number' ? 'justify-content-end' : (f.type === 'switch' ? 'justify-content-center' : ''))">
					<span $if="typeof row[f.id] !== 'boolean'" $text="row[f.id] ?? ''" class="text-truncate"></span>
					<div $if="typeof row[f.id] === 'boolean'" class="form-switch fs-5 m-0 d-flex align-items-center justify-content-center" style="padding-left:0">
						<input class="form-check-input m-0" type="checkbox" $checked="row[f.id]" disabled>
					</div>
				</div>

				<div $if="this.state.editingCell.rowId === row[this.state.idField] && this.state.editingCell.fieldId === f.id" $class="'dt-editor-container' + (f.type === 'textarea' ? ' dt-editor-textarea' : '')" $onclick="event.stopPropagation()" $onmousedown="event.stopPropagation()">
					<AutoForm inline class="dt-editor h-100 w-100" $.state.schema="[{ ...f, name: f.id, label: f.name }]" $.data="this.state.editingCell.row" 
						$onkeydown="(event.key === 'Enter' && f.type !== 'textarea') && (this.state.editingCell = {rowId:null}); event.key === 'Escape' && (this.state.editingCell = {rowId:null})"/>
				</div>
			</div>
		</div>
		<div $if="this.state.postHeight>0" $style="'height:' + this.state.postHeight + 'px;'"></div>
	</div>
	<style>
		.dt-root { font-size: 0.875rem; --dt-active-border: var(--bs-primary); outline: none; }
		.dt-row:hover .dt-cell { background-color: var(--bs-secondary-bg) !important; }
		.dt-cell { position: relative; transition: background 0.05s; border-color: var(--bs-border-color) !important; }
		.dt-cell.bg-primary-subtle { background-color: var(--bs-primary-bg-subtle) !important; }
		.dt-cell-active::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--dt-active-border); pointer-events: none; z-index: 12; }
		.dt-col { position: relative; }
		.dt-editor-container { position: absolute; left: -1px; top: -1px; width: fit-content; min-width: calc(100% + 2px); height: auto; min-height: calc(100% + 2px); background: var(--bs-body-bg); z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,.3); border: 1px solid var(--dt-active-border); display: flex; align-items: center; }
		.dt-editor-textarea { height: auto; min-height: 100%; min-width: 260px; align-items: flex-start; }
		.dt-resizer { width: 4px !important; opacity: 0; transition: opacity 0.2s; position: absolute; right: 0; top: 0; height: 100%; background: var(--bs-primary); cursor: col-resize; z-index: 15; }
		.dt-col:hover .dt-resizer { opacity: 0.5; }
		.dt-resizer:hover { opacity: 1 !important; }
	</style>
</div>
`))

if (typeof document !== 'undefined') RefreshState(document.documentElement)