"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { SignUpForm } from "./signup-form"
import { Button } from "@/components/ui/button"
import { CheckCircle, ArrowRight } from "lucide-react"

export function SignUpPage() {
	const [isSuccess, setIsSuccess] = useState(false)
	const router = useRouter()

	const handleSignUpSuccess = () => {
		setIsSuccess(true)
		// Redirect to signin after 3 seconds
		setTimeout(() => {
			router.push("/signin?message=Please check your email to verify your account")
		}, 3000)
	}

	if (isSuccess) {
		return (
			<div className="min-h-screen bg-black text-white flex items-center justify-center p-6">
				<div className="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-2 gap-10">
					{/* Left: Gradient panel */}
					<div className="hidden lg:block">
						<div className="relative h-full rounded-3xl overflow-hidden border border-white/10 bg-gradient-to-b from-orange-400 via-orange-500 to-black p-10">
							{/* subtle grain */}
							<div className="pointer-events-none absolute inset-0 opacity-20 [mask-image:radial-gradient(ellipse_at_center,black_70%,transparent_100%)]">
								<div className="w-full h-full bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.12)_1px,transparent_0)] bg-[length:18px_18px]"></div>
							</div>

							{/* soft circular accents */}
							<div className="pointer-events-none absolute -top-10 -right-10 w-72 h-72 rounded-full blur-3xl bg-purple-300/40"></div>
							<div className="pointer-events-none absolute top-1/3 -left-10 w-56 h-56 rounded-full blur-2xl bg-indigo-300/25"></div>
							<div className="pointer-events-none absolute -bottom-12 left-1/3 w-64 h-64 rounded-full blur-3xl bg-purple-400/20"></div>

							<div className="relative z-10 flex h-full flex-col justify-center">
								<div className="mb-12">
									<p className="text-5xl font-bold text-center text-white/80">Codenuk</p>
								</div>
								<h2 className="text-3xl text-center font-bold mb-3">Account Created!</h2>
								<p className="text-white/80 text-center mb-10">Your account has been successfully created. Please verify your email to continue.</p>

								<div className="space-y-4">
									{/* Step 1 - Completed */}
									<div className="bg-white text-black rounded-xl p-4 flex items-center">
										<div className="w-9 h-9 rounded-full bg-green-500 text-white flex items-center justify-center mr-4 text-sm font-semibold">
											<CheckCircle className="h-5 w-5" />
										</div>
										<span className="font-medium">Sign up completed</span>
									</div>
									{/* Step 2 - Next */}
									<div className="bg-white/10 text-white border border-white/20 rounded-xl p-4 flex items-center">
										<div className="w-9 h-9 rounded-full bg-white/20 text-white flex items-center justify-center mr-4 text-sm font-semibold">2</div>
										<span className="font-medium">Verify email & sign in</span>
									</div>
								</div>
							</div>
						</div>
					</div>

					{/* Right: Success message */}
					<div className="flex items-center">
						<div className="w-full max-w-md ml-auto text-center">
							<div className="mb-8">
								<div className="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
									<CheckCircle className="h-10 w-10 text-white" />
								</div>
								<h1 className="text-2xl font-semibold text-white mb-2">Account Created Successfully!</h1>
								<p className="text-white/60 mb-6">We've sent a verification email to your inbox. Please check your email and click the verification link to activate your account.</p>
								<div className="bg-orange-500/10 border border-orange-500/30 rounded-lg p-4 mb-6">
									<p className="text-orange-300 text-sm">
										<strong>Next step:</strong> Check your email and click the verification link, then sign in to your account.
									</p>
								</div>
								<Button 
									onClick={() => router.push("/signin")}
									className="bg-gradient-to-r from-orange-500 to-orange-600 text-white hover:from-orange-600 hover:to-orange-700"
								>
									Go to Sign In
									<ArrowRight className="ml-2 h-4 w-4" />
								</Button>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}

	return (
		<div className="min-h-screen bg-black text-white flex items-center justify-center p-6">
			<div className="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-2 gap-10">
				{/* Left: Gradient panel with steps */}
				<div className="hidden lg:block">
					<div className="relative h-full rounded-3xl overflow-hidden border border-white/10 bg-gradient-to-b from-orange-400 via-orange-500 to-black p-10">
						{/* subtle grain */}
						<div className="pointer-events-none absolute inset-0 opacity-20 [mask-image:radial-gradient(ellipse_at_center,black_70%,transparent_100%)]">
							<div className="w-full h-full bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.12)_1px,transparent_0)] bg-[length:18px_18px]"></div>
						</div>

						{/* soft circular accents */}
						<div className="pointer-events-none absolute -top-10 -right-10 w-72 h-72 rounded-full blur-3xl bg-purple-300/40"></div>
						<div className="pointer-events-none absolute top-1/3 -left-10 w-56 h-56 rounded-full blur-2xl bg-indigo-300/25"></div>
						<div className="pointer-events-none absolute -bottom-12 left-1/3 w-64 h-64 rounded-full blur-3xl bg-purple-400/20"></div>

						<div className="relative z-10 flex h-full flex-col justify-center">
							<div className="mb-12">
								<p className="text-5xl font-bold text-center text-white/80">Codenuk</p>
							</div>
							<h2 className="text-3xl text-center font-bold mb-3">Get Started with Us</h2>
							<p className="text-white/80 text-center mb-10">Complete these easy steps to register your account.</p>

							<div className="space-y-4">
								{/* Step 1 - Active */}
								<div className="bg-white text-black rounded-xl p-4 flex items-center">
									<div className="w-9 h-9 rounded-full bg-black text-white flex items-center justify-center mr-4 text-sm font-semibold">1</div>
									<span className="font-medium">Sign up your account</span>
								</div>
								{/* Step 2 - Next */}
								<div className="bg-white/10 text-white border border-white/20 rounded-xl p-4 flex items-center">
									<div className="w-9 h-9 rounded-full bg-white/20 text-white flex items-center justify-center mr-4 text-sm font-semibold">2</div>
									<span className="font-medium">Verify email & sign in</span>
								</div>
							</div>
						</div>
					</div>
				</div>

				{/* Right: Form area */}
				<div className="flex items-center">
					<div className="w-full max-w-md ml-auto">
						<div className="text-center mb-8">
							<h1 className="text-2xl font-semibold text-white mb-1">Sign Up Account</h1>
							<p className="text-white/60">Enter your personal data to create your account.</p>
						</div>

						<SignUpForm onSignUpSuccess={handleSignUpSuccess} />
						
						<div className="text-center pt-4">
							<div className="text-white/60 text-xs mb-1">Already have an account?</div>
							<Button 
								type="button" 
								variant="link" 
								onClick={() => router.push("/signin")}
								className="text-orange-400 hover:text-orange-300 font-medium transition-colors text-sm p-0 h-auto cursor-pointer"
							>
								Sign in to your account
							</Button>
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}