"use client"

import { useState } from "react"
import { SignInForm } from "./signin-form"
import { SignUpForm } from "./signup-form"

export function AuthPage() {
	const [isSignIn, setIsSignIn] = useState(false)

	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 (minimal) */}
						<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 */}
								<div className={`${!isSignIn ? "bg-white text-black" : "bg-white/10 text-white border border-white/20"} rounded-xl p-4 flex items-center`}>
									<div className={`${!isSignIn ? "bg-black text-white" : "bg-white/20 text-white"} w-9 h-9 rounded-full 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 */}
								<div className={`${isSignIn ? "bg-white text-black" : "bg-white/10 text-white border border-white/20"} rounded-xl p-4 flex items-center`}>
									<div className={`${isSignIn ? "bg-black text-white" : "bg-white/20 text-white"} w-9 h-9 rounded-full flex items-center justify-center mr-4 text-sm font-semibold`}>2</div>
									<span className="font-medium">Set up your workspace</span>
								</div>
								{/* Step 3 */}
								{/* <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">3</div>
									<span className="font-medium">Set up your profile</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">{isSignIn ? "Sign In Account" : "Sign Up Account"}</h1>
							<p className="text-white/60">{isSignIn ? "Enter your credentials to access your account." : "Enter your personal data to create your account."}</p>
						</div>

						{isSignIn ? (
							<SignInForm onToggleMode={() => setIsSignIn(false)} />
						) : (
							<SignUpForm onToggleMode={() => setIsSignIn(true)} />
						)}
					</div>
				</div>
			</div>
		</div>
	)
}