<template>
	<div class="schema-canvas">
		<div class="schema-header">
			<div class="schema-actions">
				<button
					class="preview-btn"
					@click="store.togglePreview"
				>
					{{ store.preview ? t('Edit') : t('Preview') }}
				</button>
				<button
					class="save-btn"
					@click="saveSchema"
				>
					{{ t('Save') }}
				</button>
			</div>
		</div>

		<!-- 只有在非预览模式下才显示 SchemaTabs 组件 -->
		<SchemaTabs v-if="!store.preview" />

		<div class="schema-content">
			<!-- SchemaSections 组件已经在 SchemaTabs 中渲染，这里不需要重复 -->
			
			<div class="schema-preview" v-if="store.preview">
				<pre>{{ JSON.stringify(store.schema, null, 2) }}</pre>
			</div>
		</div>
	</div>
</template>

<script setup>
import SchemaTabs from "./SchemaTabs.vue";
import SchemaSections from "./SchemaSections.vue";
import EditableInput from "./EditableInput.vue";
import { useSchemaStore } from "../store";
import { useMagicKeys, whenever } from "@vueuse/core";
import { t } from '@/shared/i18n';

const store = useSchemaStore();

// delete/backspace to delete the field
const { Backspace } = useMagicKeys();
whenever(Backspace, (value) => {
	if (value && store.selectedField && store.notUsingInput) {
		deleteField(store.selectedField);
	}
});

function deleteField(fieldKey) {
	store.removeProperty(fieldKey);
}

function saveSchema() {
	// 先更新schema，然后触发保存
	store.updateSchema();
	
	// 触发保存事件，让父组件处理
	const saveEvent = new CustomEvent('schema-save', {
		detail: { schemaData: store.schema }
	});
	document.dispatchEvent(saveEvent);
}
</script>

<style lang="scss" scoped>
.schema-canvas {
	padding: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

.schema-header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 0;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border-color);
	background-color: var(--fg-color);
}

.schema-title {
	flex: 1;
	
	:deep(span) {
		font-weight: 600;
		color: var(--heading-color);
		font-size: 1.2rem;
	}
}

.schema-actions {
	display: flex;
	gap: 0.5rem;
}

.preview-btn {
	padding: 6px 12px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	background: #fff;
	color: #1f2937;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.2s ease;
	
	&:hover {
		background-color: #f9fafb;
		border-color: #9ca3af;
	}
	
	&:active {
		background-color: #f3f4f6;
	}
}

.save-btn {
	padding: 6px 12px;
	border: 1px solid #1fc76f;
	border-radius: 4px;
	background: #e6f8f0;
	color: #0d684b;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	
	&:hover {
		background: #dcfce7;
		border-color: #1fc76f;
		color: #166534;
		box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15);
	}
	
	&:focus {
		background: #dcfce7;
		border-color: #1fc76f;
		color: #166534;
		box-shadow: 0 0 0 2px rgba(31, 199, 111, 0.2);
	}
	
	&:active {
		background: #1fc76f;
		border-color: #1fc76f;
		color: white;
		box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2);
	}
}

.schema-content {
	padding: 1rem;
	/* 占据剩余空间，允许内部滚动 */
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
}

.schema-preview {
	pre {
		background-color: var(--bg-light-gray);
		padding: 1rem;
		border-radius: var(--border-radius);
		overflow-x: auto;
		font-size: var(--text-sm);
	}
}
</style>