<template>
	<div class="docs-container">
		<aside class="sidebar">
			<div class="sidebar-header">
				<h2>{{ t('pages.docs.sidebarTitle') }}</h2>
			</div>
			<nav class="nav-menu">
				<div v-for="section in navSections" :key="section.title" class="nav-section">
					<h3>{{ section.title }}</h3>
					<ul>
						<li
							v-for="item in section.items"
							:key="item.key"
							:class="{ active: activeDoc === item.key }"
							@click="activeDoc = item.key"
						>
							{{ item.label }}
						</li>
					</ul>
				</div>
			</nav>
		</aside>

		<main class="docs-content">
			<article class="doc-article">
				<h1>{{ docTitle }}</h1>
				<div class="doc-body">
					<p class="lead">{{ docDescription }}</p>

					<section class="doc-section">
						<h2>{{ t('pages.docs.sections.overview') }}</h2>
						<p>{{ t('pages.docs.overviewText') }}</p>
					</section>

					<section class="doc-section">
						<h2>{{ t('pages.docs.sections.features') }}</h2>
						<ul class="feature-list">
							<li v-for="item in features" :key="item">
								<strong>{{ item.split(' - ')[0] }}</strong>
								<span v-if="item.includes(' - ')"> - {{ item.split(' - ').slice(1).join(' - ') }}</span>
							</li>
						</ul>
					</section>

					<section class="doc-section">
						<h2>{{ t('pages.docs.sections.example') }}</h2>
						<div class="code-block">
							<pre><code>// 在代码节点中处理数据
const data = $input.all();

const result = data.map(item => ({
  id: item.json.id,
  name: item.json.name.toUpperCase(),
  timestamp: new Date().toISOString()
}));

return result;</code></pre>
						</div>
					</section>

					<section class="doc-section">
						<h2>{{ t('pages.docs.sections.next') }}</h2>
						<div class="next-steps">
							<a v-for="step in nextSteps" :key="step.label" href="#" class="step-link">
								<SvgIcon :name="step.icon" />
								<span>{{ step.label }}</span>
							</a>
						</div>
					</section>
				</div>
			</article>
		</main>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useI18n } from '@/composables/useI18n'

const { t, tm } = useI18n()
const activeDoc = ref('intro')
const navSections = computed(
	() =>
		(tm('pages.docs.navSections') as Array<{
			title: string
			items: Array<{ key: string; label: string }>
		}>) || []
)

const docTitle = computed(() => {
	const docMap = (tm('pages.docs.docMap') as Record<string, { title: string; description: string }>) || {}
	return docMap[activeDoc.value]?.title || 'AI Agent Docs'
})

const docDescription = computed(() => {
	const docMap = (tm('pages.docs.docMap') as Record<string, { title: string; description: string }>) || {}
	return docMap[activeDoc.value]?.description || ''
})

const features = computed(() => (tm('pages.docs.features') as string[]) || [])
const nextSteps = computed(
	() => (tm('pages.docs.nextSteps') as Array<{ icon: string; label: string }>) || []
)
</script>

<style lang="less" scoped>
.docs-container {
	display: flex;
	height: 100vh;
	background: var(--bg-page);

	.sidebar {
		width: 280px;
		background: var(--bg-base);
		border-right: 1px solid var(--border-light);
		overflow-y: auto;
		flex-shrink: 0;

		.sidebar-header {
			padding: 0px 20px;
			border-bottom: 1px solid var(--border-light);

			h2 {
				font-size: 18px;
				font-weight: 600;
				color: var(--text-primary);
			}
		}

		.nav-menu {
			padding: 16px 0;

			.nav-section {
				margin-bottom: 24px;

				h3 {
					padding: 8px 20px;
					font-size: 12px;
					font-weight: 600;
					color: var(--text-tertiary);
					text-transform: uppercase;
					letter-spacing: 0.5px;
				}

				ul {
					list-style: none;
					padding: 0;
					margin: 0;

					li {
						padding: 8px 20px 8px 32px;
						font-size: 14px;
						color: var(--text-secondary);
						cursor: pointer;
						transition: all 0.2s;

						&:hover {
							background: var(--bg-container);
							color: var(--text-primary);
						}

						&.active {
							color: var(--el-color-primary);
							background: var(--el-color-primary-light-9);
							border-right: 3px solid var(--el-color-primary);
							font-weight: 500;
						}
					}
				}
			}
		}
	}
}

.docs-content {
	flex: 1;
	overflow-y: auto;
	padding: 40px;

	.doc-article {
		max-width: 900px;
		margin: 0 auto;
		background: var(--bg-base);
		border-radius: 12px;
		padding: 48px;
		box-shadow: var(--shadow-sm);

		h1 {
			font-size: 36px;
			font-weight: 700;
			color: var(--text-primary);
			margin-bottom: 16px;
		}

		.doc-body {
			.lead {
				font-size: 18px;
				color: var(--text-secondary);
				margin-bottom: 32px;
				line-height: 1.6;
			}

			.doc-section {
				margin-bottom: 40px;

				h2 {
					font-size: 24px;
					font-weight: 600;
					color: var(--text-primary);
					margin-bottom: 16px;
					padding-bottom: 8px;
					border-bottom: 2px solid var(--border-light);
				}

				p {
					font-size: 15px;
					color: var(--text-secondary);

					.feature-list {
						list-style: none;
						padding: 0;

						li {
							padding: 12px 0;
							padding-left: 28px;
							position: relative;
							color: var(--text-secondary);
							line-height: 1.6;

							&:before {
								content: '✓';
								position: absolute;
								left: 0;
								color: var(--el-color-primary);
								font-weight: 700;
							}

							strong {
								color: var(--text-primary);
							}
						}
					}

					.code-block {
						background: #282c34;
						border-radius: 8px;
						padding: 20px;
						overflow-x: auto;
						margin: 16px 0;

						pre {
							margin: 0;

							code {
								color: #abb2bf;
								font-family: 'Courier New', monospace;
								font-size: 14px;
								line-height: 1.6;
							}
						}
					}

					.next-steps {
						display: flex;
						gap: 16px;
						margin-top: 24px;

						.step-link {
							flex: 1;
							display: flex;
							align-items: center;
							gap: 12px;
							padding: 16px 20px;
							background: var(--bg-container);
							border: 1px solid var(--border-light);
							border-radius: 8px;
							text-decoration: none;
							color: var(--text-primary);
							transition: all 0.3s;

							&:hover {
								background: var(--bg-base);
								border-color: var(--el-color-primary);
								box-shadow: var(--shadow-md);
								font-size: 24px;
								color: var(--el-color-primary);
							}

							span {
								font-size: 14px;
								font-weight: 500;
							}
						}
					}
				}
			}
		}
	}
}
</style>
