<template>
	<view class="container">
		<view class="header">
			<text class="title">Supabase 连接测试</text>
		</view>

		<view class="config-info">
			<text class="label">当前配置:</text>
			<text class="value">URL: {{ config.url }}</text>
			<text class="value">Key: {{ config.keyMasked }}</text>
		</view>

		<view class="test-section">
			<button class="btn-primary" @click="runAllTests" :disabled="isLoading">
				{{ isLoading ? '测试中...' : '运行全部测试' }}
			</button>
		</view>

		<view class="results" v-if="testResults.length > 0">
			<text class="section-title">测试结果</text>
			<view 
				class="result-item" 
				v-for="(result, index) in testResults" 
				:key="index"
				:class="{ success: result.success, error: !result.success }"
			>
				<text class="result-icon">{{ result.success ? '✅' : '❌' }}</text>
				<text class="result-text">{{ result.name }}</text>
				<text class="result-message">{{ result.message }}</text>
				<text v-if="result.errorDetails" class="error-details">{{ result.errorDetails }}</text>
			</view>
		</view>

		<view class="quick-tests">
			<text class="section-title">单项测试</text>
			<button class="btn-secondary" @click="testConnection">测试连接</button>
			<button class="btn-secondary" @click="testQuery">测试查询</button>
			<button class="btn-secondary" @click="testAuth">测试认证</button>
		</view>
	</view>
</template>

<script lang="uts">
// 导入你的封装库和配置
import supa from '@/components/supadb/aksupainstance.uts'
import { SUPA_URL, SUPA_KEY } from '@/ak/config.uts'

// 定义测试结果类型
type TestResult = {
	name: string
	success: boolean
	message: string
	errorDetails?: string
}

// 定义用户类型（用于类型安全查询）
type User = {
	id?: number
	email?: string
	nickname?: string
	phone?: string
	created_at?: string
}

export default {
	data() {
		return {
			config: {
				url: SUPA_URL,
				key: SUPA_KEY,
				keyMasked: SUPA_KEY.substring(0, 20) + '...' // 隐藏部分密钥
			},
			isLoading: false,
			testResults: [] as TestResult[]
		}
	},
	onLoad() {
		console.log('🎯 Supabase 测试页面加载完成')
		console.log('📋 配置信息:', {
			url: SUPA_URL,
			hasKey: !!SUPA_KEY
		})
	},
	methods: {
		// 获取错误消息的安全函数
		getErrorMessage(err: any): string {
			if (err == null) return '未知错误'
			if (typeof err === 'string') return err
			if (typeof err === 'object') {
				if (err.message) return err.message
				if (err.error) return err.error
				if (err.msg) return err.msg
				return JSON.stringify(err)
			}
			return String(err)
		},

		// 安全执行测试
		async safeExecute<T>(promise: Promise<T>, operationName: string): Promise<{ success: boolean; data?: T; error?: string }> {
			try {
				const result = await promise
				return { success: true, data: result }
			} catch (err) {
				const errorMessage = this.getErrorMessage(err)
				console.error(`❌ ${operationName} 失败:`, err)
				return { success: false, error: errorMessage }
			}
		},

		// 测试连接
		async testConnection(): Promise<TestResult> {
			console.log('🔍 开始测试连接...')
			
			const result = await this.safeExecute(
				uni.request({
					url: `${SUPA_URL}/rest/v1/`,
					method: 'GET',
					header: {
						'apikey': SUPA_KEY,
						'Authorization': `Bearer ${SUPA_KEY}`,
						'Content-Type': 'application/json'
					},
					timeout: 10000
				}),
				'基础连接测试'
			)

			if (result.success) {
				const response = result.data as any
				if (response.statusCode === 200 || response.statusCode === 404) {
					return {
						name: '基础连接',
						success: true,
						message: `API 可达 (HTTP ${response.statusCode})`,
						errorDetails: response.statusCode === 404 ? 'API 响应正常，但请求的资源不存在' : undefined
					}
				} else {
					return {
						name: '基础连接',
						success: false,
						message: `HTTP 错误`,
						errorDetails: `状态码: ${response.statusCode}, 数据: ${JSON.stringify(response.data)}`
					}
				}
			} else {
				return {
					name: '基础连接',
					success: false,
					message: '连接失败',
					errorDetails: result.error
				}
			}
		},

		// 测试查询
		async testQuery(): Promise<TestResult> {
			console.log('🔍 开始测试查询...')
			
			// 尝试查询 users 表
			const queryResult = await this.safeExecute(
				supa.from('users').select('id, email, nickname').limit(1).execute(),
				'查询测试'
			)

			if (queryResult.success) {
				const { data, error } = queryResult.data as any
				if (error) {
					const errorMsg = this.getErrorMessage(error)
					// 检查是否是表不存在的错误
					if (errorMsg.includes('relation') && errorMsg.includes('does not exist')) {
						return {
							name: '查询测试',
							success: false,
							message: '表不存在',
							errorDetails: 'users 表不存在，建议先在 Studio 中创建表'
						}
					}
					return {
						name: '查询测试',
						success: false,
						message: '查询出错',
						errorDetails: errorMsg
					}
				}
				return {
					name: '查询测试',
					success: true,
					message: `查询成功，返回 ${data?.length || 0} 条记录`,
					errorDetails: data && data.length > 0 ? `第一条: ${JSON.stringify(data[0])}` : '表为空'
				}
			} else {
				return {
					name: '查询测试',
					success: false,
					message: '查询失败',
					errorDetails: queryResult.error
				}
			}
		},

		// 测试认证
		async testAuth(): Promise<TestResult> {
			console.log('🔍 开始测试认证...')
			
			const authResult = await this.safeExecute(
				supa.auth.getSession(),
				'认证测试'
			)

			if (authResult.success) {
				const { data, error } = authResult.data as any
				if (error) {
					return {
						name: '认证测试',
						success: false,
						message: '获取会话失败',
						errorDetails: this.getErrorMessage(error)
					}
				}
				if (data?.session) {
					return {
						name: '认证测试',
						success: true,
						message: '用户已登录',
						errorDetails: `用户: ${data.session.user.email || data.session.user.phone || 'ID: ' + data.session.user.id}`
					}
				} else {
					return {
						name: '认证测试',
						success: true,
						message: '未登录（正常状态）',
						errorDetails: '当前没有活动会话，需要先登录'
					}
				}
			} else {
				return {
					name: '认证测试',
					success: false,
					message: '认证失败',
					errorDetails: authResult.error
				}
			}
		},

		// 运行所有测试
		async runAllTests() {
			this.isLoading = true
			this.testResults = []

			try {
				// 依次运行测试
				const tests = [
					{ name: 'connection', func: this.testConnection },
					{ name: 'query', func: this.testQuery },
					{ name: 'auth', func: this.testAuth }
				]

				for (const test of tests) {
					console.log(`🧪 运行测试: ${test.name}`)
					const result = await test.func.call(this)
					this.testResults.push(result)
					
					// 短暂延迟，让用户看到测试进度
					await new Promise(resolve => setTimeout(resolve, 500))
				}

				// 总结结果
				const passed = this.testResults.filter(r => r.success).length
				const total = this.testResults.length
				console.log(`📈 测试总结: ${passed}/${total} 通过`)

			} catch (error) {
				console.error('❌ 运行测试时发生错误:', error)
				this.testResults.push({
					name: '整体测试',
					success: false,
					message: '测试框架错误',
					errorDetails: this.getErrorMessage(error)
				})
			} finally {
				this.isLoading = false
			}
		}
	}
}
</script>

<style>
.container {
	padding: 30rpx;
	background-color: #f8f9fa;
	min-height: 100vh;
}

.header {
	text-align: center;
	margin-bottom: 40rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.config-info {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
}

.label {
	font-size: 28rpx;
	color: #666;
	display: block;
	margin-bottom: 10rpx;
}

.value {
	font-size: 24rpx;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
	word-break: break-all;
}

.test-section {
	margin-bottom: 40rpx;
}

.btn-primary {
	width: 100%;
	height: 80rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	border-radius: 12rpx;
	font-size: 28rpx;
	border: none;
	margin-bottom: 20rpx;
}

.btn-secondary {
	width: 100%;
	height: 70rpx;
	background-color: #6c757d;
	color: #fff;
	border-radius: 8rpx;
	font-size: 26rpx;
	border: none;
	margin-bottom: 15rpx;
}

.btn-primary:disabled, .btn-secondary:disabled {
	background-color: #ccc;
}

.results {
	margin-bottom: 40rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 20rpx;
}

.result-item {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 12rpx;
	margin-bottom: 15rpx;
}

.result-item.success {
	border-left: 4px solid #28a745;
	background-color: #d4edda;
}

.result-item.error {
	border-left: 4px solid #dc3545;
	background-color: #f8d7da;
}

.result-icon {
	font-size: 32rpx;
	margin-right: 10rpx;
	vertical-align: middle;
}

.result-text {
	font-size: 26rpx;
	color: #333;
	font-weight: bold;
	vertical-align: middle;
}

.result-message {
	display: block;
	font-size: 24rpx;
	color: #666;
	margin-top: 8rpx;
}

.error-details {
	display: block;
	font-size: 20rpx;
	color: #856404;
	background-color: #fff3cd;
	padding: 8rpx;
	border-radius: 4rpx;
	margin-top: 8rpx;
	word-break: break-all;
	white-space: pre-wrap;
}
</style>