<template>
	<view class="config-edit-page">
		<text class="page-title">公司全局配置管理</text>
		<button type="primary" @click="openAddModal">新增配置项</button>
		<list-view :loading="isLoading" class="config-list-view">
			<template #header>
				<view class="list-header-row">
					<text class="list-header-cell">配置键</text>
					<text class="list-header-cell">配置值</text>
					<text class="list-header-cell">类型</text>
					<text class="list-header-cell">分类</text>
					<text class="list-header-cell">可翻译</text>
					<text class="list-header-cell">排序</text>
					<text class="list-header-cell">启用</text>
					<text class="list-header-cell">操作</text>
				</view>
			</template>
			<list-item v-for="item in configList" :key="item.id" class="list-row">
				<text class="list-cell">{{ item.config_key }}</text>
				<text class="list-cell">{{ item.default_value }}</text>
				<text class="list-cell">{{ item.config_type }}</text>
				<text class="list-cell">{{ item.default_key }}</text>
				<text class="list-cell">{{ item.config_category }}</text>
				<text class="list-cell">{{ item.is_translatable ? '是' : '否' }}</text>
				<text class="list-cell">{{ item.sort_order }}</text>
				<view class="list-cell">
					<text
						:class="['tag', item.is_active ? 'tag-success' : 'tag-default']">{{ item.is_active ? '启用' : '停用' }}</text>
				</view>
				<view class="list-cell">
					<button size="mini" @click="openEditModal(item)">编辑</button>
				</view>
			</list-item>
		</list-view>
		<button type="default" @click="loadConfigList">刷新</button>

		<!-- 编辑/新增弹窗 -->
		<l-popup v-model="editPopupVisible" position="bottom" :closeable="true" @click-close="closeEditModal">
			<view class="popup-content">
				<view class="popup-title-bar">
					<text class="popup-title">{{ editMode === 'add' ? '新增配置项' : '编辑配置项' }}</text>
					<button class="popup-close-btn" @click="closeEditModal">关闭</button>
				</view>
				<form @submit="saveConfig">
					<view class="form-item">
						<text class="form-label">配置键</text>
						<input v-model="editForm.config_key" placeholder="如 social_weibo_url" required />
					</view>
					<view class="form-item">
						<text class="form-label">提示键</text>
						<input v-model="editForm.default_key" placeholder="如 social_weibo_url" required />
					</view>
					<view class="form-item">
						<text class="form-label">配置值</text>
						<input v-model="editForm.default_value" placeholder="如 https://weibo.com/innovation-tech" required />
					</view>
					<view class="form-item">
						<text class="form-label">类型</text>
						<input v-model="editForm.config_type" placeholder="如 string" />
					</view>
					<view class="form-item">
						<text class="form-label">分类</text>
						<input v-model="editForm.config_category" placeholder="如 social" />
					</view>
					<view class="form-item">
						<text class="form-label">可翻译</text>
						<switch :checked="!!editForm.is_translatable" @change="e => editForm.is_translatable = e.detail.value" />
					</view>
					<view class="form-item">
						<text class="form-label">排序</text>
						<input v-model="editForm.sort_order" type="number" placeholder="如 31" />
					</view>
					<view class="form-item">
						<text class="form-label">启用</text>
						<switch :checked="!!editForm.is_active" @change="e => editForm.is_active = e.detail.value" />
					</view>
					<view class="popup-actions">
						<button type="primary" form-type="submit">保存</button>
						<button @click="closeEditModal" type="button">取消</button>
					</view>
				</form>
			</view>
		</l-popup>
	</view>
</template>

<script setup lang="uts">
	import { ref, reactive, onMounted } from 'vue'
	import supa from '@/components/supadb/aksupainstance.uts'

	type CompanyConfig = {
		id ?: string
		config_key : string
		default_key : string
		default_value : string
		config_type : string
		config_category ?: string
		is_translatable ?: boolean
		sort_order ?: number
		is_active ?: boolean
		created_at ?: string
		updated_at ?: string
	}

	const configList = ref<Array<CompanyConfig>>([])
	const isLoading = ref(false)
	const editMode = ref<'add' | 'edit'>('add')
	const editForm = reactive<CompanyConfig>({
		config_key: '',
		default_key:'',
		default_value: '',
		config_type: '',
		config_category: '',
		is_translatable: true,
		sort_order: 0,
		is_active: true
	})
	const editPopupVisible = ref(false)

	function loadConfigList() {
		isLoading.value = true
		supa
			.from('ak_global_config')
			.select('*')
			.order('created_at', { ascending: false })
			.execute()
			.then((res) => {
				configList.value = res.data ?? []
			})
			.catch((err) => {
				uni.showToast({ title: '加载失败', icon: 'none' })
			})
			.finally(() => {
				isLoading.value = false
			})
	}

	function openAddModal() {
		editMode.value = 'add'
		Object.assign(editForm, {
			config_key: '',
			default_value: '',
			config_type: '',
			config_category: '',
			is_translatable: true,
			sort_order: 0,
			is_active: true
		})
		editPopupVisible.value = true
	}

	function openEditModal(item : CompanyConfig) {
		editMode.value = 'edit'
		Object.assign(editForm, item)
		editPopupVisible.value = true
	}

	function closeEditModal() {
		editPopupVisible.value = false
	}

	function saveConfig() {
		if (!editForm.config_key || !editForm.default_value) {
			uni.showToast({ title: '请填写必填项', icon: 'none' })
			return
		}
		isLoading.value = true
		if (editMode.value === 'add') {
			supa
				.from('ak_global_config')
				.insert([editForm])
                .execute()
				.then(() => {
					uni.showToast({ title: '新增成功', icon: 'success' })
					loadConfigList()
					closeEditModal()
				})
				.catch(() => {
					uni.showToast({ title: '新增失败', icon: 'none' })
				})
				.finally(() => {
					isLoading.value = false
				})
		} else {
			supa
				.from('ak_global_config')
				.update(editForm)
				.eq('id', editForm.id)
                .execute()
				.then(() => {
					uni.showToast({ title: '保存成功', icon: 'success' })
					loadConfigList()
					closeEditModal()
				})
				.catch(() => {
					uni.showToast({ title: '保存失败', icon: 'none' })
				})
				.finally(() => {
					isLoading.value = false
				})
		}
	}

	function deleteConfig(id : string) {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除该配置项吗？',
			success: (res) => {
				if (res.confirm) {
					isLoading.value = true
					supa
						.from('ak_global_config')
						.delete()
						.eq('id', id)
						.then(() => {
							uni.showToast({ title: '删除成功', icon: 'success' })
							loadConfigList()
						})
						.catch(() => {
							uni.showToast({ title: '删除失败', icon: 'none' })
						})
						.finally(() => {
							isLoading.value = false
						})
				}
			}
		})
	}

	onMounted(() => {
		loadConfigList()
	})
</script>

<style>
	.config-edit-page {
		padding: 20px;
		background: #f8fafc;
	}

	.page-title {
		font-size: 22px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 18px;
		color: #1f2937;
	}

	.config-list-view {
		margin-bottom: 16px;
	}

	.list-header-row {
		display: flex;
		flex-direction: row;
		background: #f1f5f9;
		padding: 8px 0;
		font-weight: bold;
		border-bottom-width: 1px;
		border-bottom-color: #e2e8f0;
	}

	.list-header-cell {
		flex: 1;
		text-align: center;
		color: #475569;
		font-size: 14px;
	}

	.list-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 8px 0;
		border-bottom-width: 1px;
		border-bottom-color: #e5e7eb;
		background: #fff;
	}

	.list-cell {
		flex: 1;
		text-align: center;
		font-size: 13px;
		color: #334155;
		padding: 0 4px;
	}

	.tag {
		padding: 2px 8px;
		border-radius: 8px;
		font-size: 12px;
		color: #fff;
		background: #9ca3af;
		margin: 0 auto;
		min-width: 40px;
		text-align: center;
	}

	.tag-success {
		background: #3b82f6;
	}

	.tag-default {
		background: #9ca3af;
	}

	.popup-content {
		padding: 20px;
	}

	.popup-title-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.popup-title {
		font-size: 18px;
		font-weight: bold;
		color: #1f2937;
	}

	.popup-close-btn {
		background: none;
		border: none;
		color: #475569;
		font-size: 16px;
		cursor: pointer;
	}

	.form-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 12px;
	}

	.form-label {
		width: 80px;
		font-size: 14px;
		color: #475569;
		margin-right: 8px;
	}

	input {
		flex: 1;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		padding: 6px 10px;
		font-size: 14px;
		color: #334155;
		background: #fff;
	}

	.picker-value {
		padding: 6px 10px;
		font-size: 14px;
		color: #334155;
		background: #f1f5f9;
		border-radius: 6px;
	}

	.popup-actions {
		display: flex;
		justify-content: center;
		gap: 16px;
		margin-top: 16px;
	}
</style>