fenghuo/apps/web/app/page.tsx

'use client';

import { useAuth } from '@/providers/auth-provider';
import { UserProfile } from '@/components/user-profile';
import { LoginButton } from '@/components/login-button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui/components/card';
import { Badge } from '@repo/ui/components/badge';
import { Separator } from '@repo/ui/components/separator';
import { Shield, Key, Users, CheckCircle, Info } from 'lucide-react';

export default function HomePage() {
	const { isAuthenticated, isLoading, error } = useAuth();

	return (
		<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
			<div className="container mx-auto px-4 py-8">
				{/* 页面标题 */}
				<div className="text-center mb-8">
					<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">OIDC 认证演示</h1>
					<p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
						基于 OpenID Connect 协议的安全认证系统演示
					</p>
					<div className="mt-4">
						<a
							href="/test-oidc"
							className="inline-flex items-center px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-800 border border-blue-300 rounded-lg hover:bg-blue-50 dark:text-blue-400 dark:border-blue-600 dark:hover:bg-blue-900"
						>
							测试 OIDC 流程
						</a>
					</div>
				</div>

				{/* 功能特性卡片 */}
				<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
					<Card>
						<CardHeader>
							<Shield className="h-8 w-8 text-blue-600 mb-2" />
							<CardTitle className="text-lg">安全认证</CardTitle>
							<CardDescription>基于 OAuth 2.0 和 OpenID Connect 标准的安全认证流程</CardDescription>
						</CardHeader>
					</Card>

					<Card>
						<CardHeader>
							<Key className="h-8 w-8 text-green-600 mb-2" />
							<CardTitle className="text-lg">Token 管理</CardTitle>
							<CardDescription>自动管理访问令牌、刷新令牌和 ID 令牌的生命周期</CardDescription>
						</CardHeader>
					</Card>

					<Card>
						<CardHeader>
							<Users className="h-8 w-8 text-purple-600 mb-2" />
							<CardTitle className="text-lg">用户信息</CardTitle>
							<CardDescription>获取和展示完整的用户配置文件信息</CardDescription>
						</CardHeader>
					</Card>
				</div>

				{/* 状态显示 */}
				{error && (
					<Card className="mb-6 border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20">
						<CardContent className="p-4">
							<div className="flex items-center gap-2 text-red-700 dark:text-red-300">
								<Info className="h-5 w-5" />
								<span className="font-medium">错误:</span>
								<span>{error}</span>
							</div>
						</CardContent>
					</Card>
				)}

				{/* 主要内容区域 */}
				<div className="flex flex-col items-center space-y-8">
					{isLoading ? (
						<Card className="w-full max-w-2xl">
							<CardContent className="p-8">
								<div className="animate-pulse space-y-4">
									<div className="h-4 bg-gray-200 rounded w-1/3 mx-auto"></div>
									<div className="h-4 bg-gray-200 rounded w-1/2 mx-auto"></div>
									<div className="h-4 bg-gray-200 rounded w-2/3 mx-auto"></div>
								</div>
							</CardContent>
						</Card>
					) : isAuthenticated ? (
						<UserProfile />
					) : (
						<Card className="w-full max-w-md">
							<CardHeader className="text-center">
								<CardTitle className="text-2xl">欢迎使用</CardTitle>
								<CardDescription>请点击下方按钮开始 OIDC 认证流程</CardDescription>
							</CardHeader>
							<CardContent className="flex flex-col items-center space-y-4">
								<LoginButton size="lg" className="w-full" />

								<Separator />

								<div className="text-sm text-gray-600 dark:text-gray-400 space-y-2">
									<p className="font-medium">演示账户信息：</p>
									<div className="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
										<p>
											用户名: <code className="text-sm">demouser</code>
										</p>
										<p>
											密码: <code className="text-sm">demo123</code>
										</p>
									</div>
								</div>
							</CardContent>
						</Card>
					)}

					{/* 技术信息 */}
					<Card className="w-full max-w-4xl">
						<CardHeader>
							<CardTitle className="flex items-center gap-2">
								<CheckCircle className="h-5 w-5 text-green-600" />
								技术实现特性
							</CardTitle>
						</CardHeader>
						<CardContent>
							<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
								<div>
									<h4 className="font-semibold mb-3">前端技术栈</h4>
									<div className="flex flex-wrap gap-2">
										<Badge variant="outline">Next.js 15</Badge>
										<Badge variant="outline">React 19</Badge>
										<Badge variant="outline">TypeScript</Badge>
										<Badge variant="outline">oidc-client-ts</Badge>
										<Badge variant="outline">Tailwind CSS</Badge>
									</div>
								</div>

								<div>
									<h4 className="font-semibold mb-3">后端技术栈</h4>
									<div className="flex flex-wrap gap-2">
										<Badge variant="outline">Hono</Badge>
										<Badge variant="outline">OIDC Provider</Badge>
										<Badge variant="outline">Redis</Badge>
										<Badge variant="outline">JWT</Badge>
										<Badge variant="outline">PKCE</Badge>
									</div>
								</div>

								<div>
									<h4 className="font-semibold mb-3">安全特性</h4>
									<div className="flex flex-wrap gap-2">
										<Badge variant="secondary">授权码流程</Badge>
										<Badge variant="secondary">PKCE 支持</Badge>
										<Badge variant="secondary">Token 轮换</Badge>
										<Badge variant="secondary">安全存储</Badge>
									</div>
								</div>

								<div>
									<h4 className="font-semibold mb-3">支持的作用域</h4>
									<div className="flex flex-wrap gap-2">
										<Badge variant="default">openid</Badge>
										<Badge variant="default">profile</Badge>
										<Badge variant="default">email</Badge>
										<Badge variant="default">phone</Badge>
										<Badge variant="default">address</Badge>
									</div>
								</div>
							</div>
						</CardContent>
					</Card>
				</div>
			</div>
		</div>
	);
}