'use client';

import { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui/components/card';
import { Button } from '@repo/ui/components/button';
import { Badge } from '@repo/ui/components/badge';
import { Alert, AlertDescription } from '@repo/ui/components/alert';
import { CheckCircle, XCircle, Loader2, ArrowRight, Key, User, Shield } from 'lucide-react';

export default function TestOidcPage() {
	const [testResults, setTestResults] = useState<{
		discovery: 'idle' | 'loading' | 'success' | 'error';
		discoveryData?: any;
		discoveryError?: string;
	}>({
		discovery: 'idle',
	});

	const testDiscoveryEndpoint = async () => {
		setTestResults((prev) => ({ ...prev, discovery: 'loading' }));

		try {
			const response = await fetch('http://localhost:3000/oidc/.well-known/openid_configuration');
			if (!response.ok) {
				throw new Error(`HTTP ${response.status}: ${response.statusText}`);
			}

			const data = await response.json();
			setTestResults((prev) => ({
				...prev,
				discovery: 'success',
				discoveryData: data,
			}));
		} catch (error) {
			setTestResults((prev) => ({
				...prev,
				discovery: 'error',
				discoveryError: error instanceof Error ? error.message : '未知错误',
			}));
		}
	};

	const startOidcFlow = () => {
		const params = new URLSearchParams({
			response_type: 'code',
			client_id: 'demo-client',
			redirect_uri: 'http://localhost:3001/auth/callback',
			scope: 'openid profile email',
			state: `test-${Date.now()}`,
		});

		window.location.href = `http://localhost:3000/oidc/auth?${params.toString()}`;
	};

	const getStatusIcon = (status: string) => {
		switch (status) {
			case 'loading':
				return <Loader2 className="h-5 w-5 animate-spin text-blue-500" />;
			case 'success':
				return <CheckCircle className="h-5 w-5 text-green-500" />;
			case 'error':
				return <XCircle className="h-5 w-5 text-red-500" />;
			default:
				return <div className="h-5 w-5 rounded-full border-2 border-gray-300" />;
		}
	};

	return (
		<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-8">
			<div className="max-w-4xl mx-auto space-y-8">
				{/* 页面标题 */}
				<div className="text-center">
					<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">OIDC 流程测试</h1>
					<p className="text-lg text-gray-600 dark:text-gray-300">测试和验证 OpenID Connect 认证流程的各个环节</p>
				</div>

				{/* OIDC 流程步骤 */}
				<Card>
					<CardHeader>
						<CardTitle className="flex items-center gap-2">
							<Shield className="h-5 w-5" />
							标准 OIDC 认证流程
						</CardTitle>
						<CardDescription>按照正确的 OIDC 架构，所有登录都在 OIDC Provider 中处理</CardDescription>
					</CardHeader>
					<CardContent className="space-y-6">
						{/* 流程步骤图示 */}
						<div className="grid grid-cols-1 md:grid-cols-5 gap-4 text-center">
							<div className="flex flex-col items-center space-y-2">
								<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
									<User className="h-6 w-6 text-blue-600 dark:text-blue-300" />
								</div>
								<p className="text-sm font-medium">用户点击登录</p>
							</div>

							<div className="flex items-center justify-center">
								<ArrowRight className="h-5 w-5 text-gray-400" />
							</div>

							<div className="flex flex-col items-center space-y-2">
								<div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
									<Shield className="h-6 w-6 text-green-600 dark:text-green-300" />
								</div>
								<p className="text-sm font-medium">重定向到 Provider</p>
							</div>

							<div className="flex items-center justify-center">
								<ArrowRight className="h-5 w-5 text-gray-400" />
							</div>

							<div className="flex flex-col items-center space-y-2">
								<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
									<Key className="h-6 w-6 text-purple-600 dark:text-purple-300" />
								</div>
								<p className="text-sm font-medium">返回授权码</p>
							</div>
						</div>

						{/* 测试按钮 */}
						<div className="flex justify-center">
							<Button onClick={startOidcFlow} size="lg" className="px-8">
								开始 OIDC 认证流程
							</Button>
						</div>

						{/* 提示信息 */}
						<Alert>
							<Shield className="h-4 w-4" />
							<AlertDescription>
								点击上方按钮将重定向到 OIDC Provider 的登录页面。
								<br />
								<strong>演示账号:</strong> demouser / demo123
							</AlertDescription>
						</Alert>
					</CardContent>
				</Card>

				{/* Discovery 端点测试 */}
				<Card>
					<CardHeader>
						<CardTitle className="flex items-center gap-2">
							{getStatusIcon(testResults.discovery)}
							Discovery 端点测试
						</CardTitle>
						<CardDescription>测试 OIDC Provider 的配置发现端点</CardDescription>
					</CardHeader>
					<CardContent className="space-y-4">
						<Button onClick={testDiscoveryEndpoint} disabled={testResults.discovery === 'loading'}>
							{testResults.discovery === 'loading' ? '测试中...' : '测试 Discovery 端点'}
						</Button>

						{testResults.discovery === 'error' && (
							<Alert variant="destructive">
								<XCircle className="h-4 w-4" />
								<AlertDescription>
									<strong>错误:</strong> {testResults.discoveryError}
								</AlertDescription>
							</Alert>
						)}

						{testResults.discovery === 'success' && testResults.discoveryData && (
							<div className="space-y-4">
								<Alert>
									<CheckCircle className="h-4 w-4" />
									<AlertDescription>
										<strong>成功!</strong> OIDC Provider 配置已获取
									</AlertDescription>
								</Alert>

								<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
									<h4 className="font-semibold mb-3">Provider 信息</h4>
									<div className="space-y-2 text-sm">
										<p>
											<strong>Issuer:</strong>{' '}
											<code className="bg-gray-200 dark:bg-gray-700 px-1 rounded">
												{testResults.discoveryData.issuer}
											</code>
										</p>
										<p>
											<strong>授权端点:</strong>{' '}
											<code className="bg-gray-200 dark:bg-gray-700 px-1 rounded">
												{testResults.discoveryData.authorization_endpoint}
											</code>
										</p>
										<p>
											<strong>令牌端点:</strong>{' '}
											<code className="bg-gray-200 dark:bg-gray-700 px-1 rounded">
												{testResults.discoveryData.token_endpoint}
											</code>
										</p>
									</div>
								</div>

								<div>
									<h4 className="font-semibold mb-3">支持的功能</h4>
									<div className="flex flex-wrap gap-2">
										{testResults.discoveryData.response_types_supported?.map((type: string) => (
											<Badge key={type} variant="outline">
												{type}
											</Badge>
										))}
									</div>
									<div className="flex flex-wrap gap-2 mt-2">
										{testResults.discoveryData.scopes_supported?.map((scope: string) => (
											<Badge key={scope} variant="secondary">
												{scope}
											</Badge>
										))}
									</div>
								</div>
							</div>
						)}
					</CardContent>
				</Card>

				{/* 架构说明 */}
				<Card>
					<CardHeader>
						<CardTitle>正确的 OIDC 架构</CardTitle>
					</CardHeader>
					<CardContent className="space-y-4">
						<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
							<div>
								<h4 className="font-semibold text-green-600 mb-2">✅ 已实现</h4>
								<ul className="space-y-1 text-sm">
									<li>• OIDC Provider 包含登录页面</li>
									<li>• 标准授权码流程</li>
									<li>• PKCE 支持</li>
									<li>• 内置会话管理</li>
									<li>• 自动令牌刷新</li>
								</ul>
							</div>
							<div>
								<h4 className="font-semibold text-red-600 mb-2">❌ 已移除</h4>
								<ul className="space-y-1 text-sm">
									<li>• 客户端应用的登录页面</li>
									<li>• 自定义认证逻辑</li>
									<li>• 重复的用户管理</li>
									<li>• 混合认证流程</li>
								</ul>
							</div>
						</div>
					</CardContent>
				</Card>
			</div>
		</div>
	);
}