<template>
	<div class="user-center-container">
		<div class="header">
			<h1>{{ t('pages.userCenter.title') }}</h1>
		</div>

		<div class="content">
			<div class="profile-card">
				<div class="avatar-section">
					<div class="avatar">
						<SvgIcon name="user-round" size="60" />
					</div>
					<el-button type="primary" size="small">{{ t('pages.userCenter.changeAvatar') }}</el-button>
				</div>
				<div class="info-section">
					<h2>{{ t('pages.userCenter.profile') }}</h2>
					<el-form label-width="100px">
						<el-form-item :label="t('pages.userCenter.fields.username')">
							<el-input
								v-model="userInfo.username"
								:placeholder="t('pages.userCenter.placeholders.username')"
							/>
						</el-form-item>
						<el-form-item :label="t('pages.userCenter.fields.email')">
							<el-input
								v-model="userInfo.email"
								:placeholder="t('pages.userCenter.placeholders.email')"
							/>
						</el-form-item>
						<el-form-item :label="t('pages.userCenter.fields.phone')">
							<el-input
								v-model="userInfo.phone"
								:placeholder="t('pages.userCenter.placeholders.phone')"
							/>
						</el-form-item>
						<el-form-item :label="t('pages.userCenter.fields.company')">
							<el-input
								v-model="userInfo.company"
								:placeholder="t('pages.userCenter.placeholders.company')"
							/>
						</el-form-item>
						<el-form-item>
							<el-button type="primary">{{ t('pages.userCenter.saveChanges') }}</el-button>
							<el-button>{{ t('common.cancel') }}</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>

			<div class="stats-grid">
				<div class="stat-card">
					<div class="stat-icon">
						<SvgIcon name="workflow" size="30" />
					</div>
					<div class="stat-info">
						<div class="stat-value">12</div>
						<div class="stat-label">{{ t('pages.userCenter.stats.workflows') }}</div>
					</div>
				</div>
				<div class="stat-card">
					<div class="stat-icon">
						<SvgIcon name="play" size="30" />
					</div>
					<div class="stat-info">
						<div class="stat-value">1,234</div>
						<div class="stat-label">{{ t('pages.userCenter.stats.executions') }}</div>
					</div>
				</div>
				<div class="stat-card">
					<div class="stat-icon">
						<SvgIcon name="clock" size="30" />
					</div>
					<div class="stat-info">
						<div class="stat-value">45</div>
						<div class="stat-label">{{ t('pages.userCenter.stats.savedHours') }}</div>
					</div>
				</div>
			</div>

			<div class="security-card">
				<h2>{{ t('pages.userCenter.security.title') }}</h2>
				<div class="security-items">
					<div class="security-item">
						<div class="security-left">
							<SvgIcon name="lock" size="30" />
							<div class="security-text">
								<div class="security-title">{{ t('pages.userCenter.security.password.title') }}</div>
								<div class="security-desc">{{ t('pages.userCenter.security.password.desc') }}</div>
							</div>
						</div>
						<el-button size="small">{{ t('pages.userCenter.security.password.action') }}</el-button>
					</div>
					<div class="security-item">
						<div class="security-left">
							<SvgIcon name="shield" size="30" />
							<div class="security-text">
								<div class="security-title">{{ t('pages.userCenter.security.twoFactor.title') }}</div>
								<div class="security-desc">{{ t('pages.userCenter.security.twoFactor.desc') }}</div>
							</div>
						</div>
						<el-button size="small">{{ t('pages.userCenter.security.twoFactor.action') }}</el-button>
					</div>
					<div class="security-item">
						<div class="security-left">
							<SvgIcon name="smartphone" size="30" />
							<div class="security-text">
								<div class="security-title">{{ t('pages.userCenter.security.boundPhone.title') }}</div>
								<div class="security-desc">131****1111</div>
							</div>
						</div>
						<el-button size="small">{{ t('pages.userCenter.security.boundPhone.action') }}</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

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

const { t } = useI18n()
const userInfo = ref({
	username: 'admin',
	email: 'admin@qq.com',
	phone: '13333333333333',
	company: 'AI Agent'
})
</script>

<style lang="less" scoped>
.user-center-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;

	.header {
		margin-bottom: 32px;

		h1 {
			font-size: 28px;
			font-weight: 600;
			color: #333;
		}
	}

	.content {
		.profile-card {
			background: var(--bg-base);
			border-radius: 12px;
			padding: 32px;
			margin-bottom: 24px;
			box-shadow: var(--shadow-sm);
			display: flex;
			gap: 48px;

			.avatar-section {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 16px;

				.avatar {
					width: 120px;
					height: 120px;
					border-radius: 50%;
					background: linear-gradient(135deg, var(--el-color-primary) 0%, #764ba2 100%);
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 60px;
				}
			}

			.info-section {
				flex: 1;

				h2 {
					font-size: 20px;
					font-weight: 600;
					color: var(--text-primary);
					margin-bottom: 24px;
				}
			}
		}

		.stats-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			gap: 20px;
			margin-bottom: 24px;

			.stat-card {
				background: var(--bg-base);
				border-radius: 12px;
				padding: 24px;
				box-shadow: var(--shadow-sm);
				display: flex;
				align-items: center;
				gap: 20px;

				.stat-icon {
					width: 60px;
					height: 60px;
					border-radius: 12px;
					background: linear-gradient(135deg, var(--el-color-primary) 0%, #764ba2 100%);
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 28px;
				}

				.stat-info {
					.stat-value {
						font-size: 32px;
						font-weight: 700;
						color: var(--text-primary);
						line-height: 1;
						margin-bottom: 8px;
					}

					.stat-label {
						font-size: 14px;
						color: var(--text-secondary);
					}
				}
			}
		}

		.security-card {
			background: var(--bg-base);
			border-radius: 12px;
			padding: 32px;
			box-shadow: var(--shadow-sm);

			h2 {
				font-size: 20px;
				font-weight: 600;
				color: var(--text-primary);
				margin-bottom: 24px;
			}

			.security-items {
				display: flex;
				flex-direction: column;
				gap: 20px;

				.security-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20px;
					background: var(--bg-container);
					border-radius: 8px;

					.security-left {
						display: flex;
						align-items: center;
						gap: 16px;

						svg {
							font-size: 32px;
							color: var(--el-color-primary);
						}

						.security-text {
							.security-title {
								font-size: 15px;
								font-weight: 500;
								color: var(--text-primary);
								margin-bottom: 4px;
							}

							.security-desc {
								font-size: 13px;
								color: var(--text-secondary);
							}
						}
					}
				}
			}
		}
	}
}
</style>
