'use client';

import AuthForm from '@/components/auth/AuthForm';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import Image from 'next/image';
import { useSearchParams } from 'next/navigation';

export default function RegisterPage() {
    const searchParams = useSearchParams();
    const callbackUrl = searchParams.get('callbackUrl') || '/';
    
    return (
        <div className="min-h-screen bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-gray-900 dark:to-gray-800 relative overflow-hidden pb-8">
            {/* 背景装饰元素 - 渐变模糊效果 */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
                <div className="absolute -top-20 -right-20 w-80 h-80 bg-emerald-400/20 rounded-full blur-3xl"></div>
                <div className="absolute -bottom-20 -left-20 w-96 h-96 bg-teal-500/20 rounded-full blur-3xl"></div>
                <div className="absolute top-1/3 left-1/4 w-64 h-64 bg-emerald-300/10 rounded-full blur-3xl"></div>
            </div>

            {/* 主要内容区域 */}
            <div className="relative z-10 flex flex-col items-center justify-center min-h-screen px-4 py-12">
                <div className="w-full max-w-md">
                    {/* 装饰性头部 */}
                    <div className="text-center mb-8 sm:mb-10">
                        <div className="flex justify-center mb-6">
                            <div className="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 bg-emerald-600 rounded-2xl transform -rotate-6 shadow-lg transition-all duration-500 hover:rotate-0">
                                <div className="w-12 h-12 sm:w-14 sm:h-14 bg-white rounded-xl transform rotate-6 flex items-center justify-center transition-all duration-500 hover:rotate-0">
                                    <Image 
                                        src="/images/mc-favicon.ico" 
                                        alt="Logo" 
                                        width={40} 
                                        height={40} 
                                        className="rounded-xl w-8 h-8" 
                                    />
                                </div>
                            </div>
                        </div>
                        <h1 className="text-3xl sm:text-4xl font-bold text-gray-800 dark:text-white mb-3 tracking-tight">
                            欢迎加入
                            <span className="text-emerald-600 dark:text-emerald-400"> HITWH</span>
                            社区
                        </h1>
                        <p className="text-gray-600 dark:text-gray-400 text-sm sm:text-base leading-relaxed max-w-sm mx-auto">
                            创建你的账户，开始创作和分享独特的Minecraft皮肤
                        </p>
                    </div>

                    {/* 注册卡片 */}
                    <div className="relative group">
                        {/* 卡片阴影装饰 */}
                        <div className="absolute inset-0 bg-emerald-500 rounded-2xl transform rotate-2 opacity-20 transition-all duration-500 group-hover:rotate-1 group-hover:scale-102"></div>
                        <div className="absolute inset-0 bg-teal-400 rounded-2xl transform -rotate-1 opacity-15 transition-all duration-500 group-hover:-rotate-0.5 group-hover:scale-101"></div>
                        
                        <Card className="relative bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm border border-emerald-200 dark:border-emerald-900/50 shadow-xl rounded-2xl overflow-hidden">
                            <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-500 to-teal-500"></div>
                            
                            <CardHeader className="text-center pb-6 pt-8">
                                <CardTitle className="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white">
                                    🎮 创建新账户
                                </CardTitle>
                                <div className="w-16 h-1 bg-gradient-to-r from-emerald-500 to-teal-500 mx-auto mt-2 rounded-full"></div>
                            </CardHeader>
                            <CardContent className="space-y-6 px-6 pb-8">
                                {/* 使用统一的认证表单组件 */}
                                <AuthForm type="register" />
                                 
                                {/* 分割线 */}
                                <div className="relative my-6">
                                    <div className="absolute inset-0 flex items-center">
                                        <div className="w-full border-t border-gray-200 dark:border-gray-700"></div>
                                    </div>
                                    <div className="relative flex justify-center text-sm">
                                        <span className="px-3 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-full">或者</span>
                                    </div>
                                </div>

                                {/* 登录链接 */}
                                <div className="text-center space-y-4">
                                    <p className="text-gray-600 dark:text-gray-400">
                                        已有账号？直接登录开始游戏！
                                    </p>
                                    <Button asChild variant="outline" className="w-full border-emerald-600 text-emerald-600 hover:bg-emerald-50 dark:border-emerald-400 dark:text-emerald-400 dark:hover:bg-emerald-900/20 rounded-xl py-6 transition-all duration-300 transform hover:-translate-y-1">
                                        <Link href={`/login?callbackUrl=${encodeURIComponent(callbackUrl)}`}>
                                            🎮 登录现有账户
                                        </Link>
                                    </Button>
                                </div>
                            </CardContent>
                        </Card>
                    </div>

                    {/* 底部装饰 */}
                    <div className="text-center mt-8 sm:mt-10">
                        <div className="flex flex-wrap justify-center gap-x-4 gap-y-2 text-xs sm:text-sm text-gray-500 dark:text-gray-400">
                            <span>🎨 皮肤创作</span>
                            <span>•</span>
                            <span>🌍 社区分享</span>
                            <span>•</span>
                            <span>⚡ 快速上传</span>
                            <span>•</span>
                            <span>👥 角色中心</span>
                        </div>
                    </div>
                </div>
            </div>

            {/* 浮动装饰元素 */}
            <div className="absolute bottom-8 left-8 text-emerald-600 opacity-20 dark:opacity-10">
                <div className="text-4xl">🎨</div>
            </div>
            <div className="absolute top-8 right-8 text-teal-500 opacity-20 dark:opacity-10">
                <div className="text-4xl">🌟</div>
            </div>
        </div>
    );
}