"use client"

import { useState, useEffect } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { SignInForm } from "./signin-form"
import { Button } from "@/components/ui/button"
import { CheckCircle, AlertCircle } from "lucide-react"

export function SignInPage() {
	const router = useRouter()
	const searchParams = useSearchParams()
	const [verificationMessage, setVerificationMessage] = useState<string | null>(null)
	const [verificationType, setVerificationType] = useState<'success' | 'error'>('success')

	useEffect(() => {
		// Check for verification messages in URL
		if (typeof window !== 'undefined') {
			const verified = searchParams.get('verified')
			const message = searchParams.get('message')
			const error = searchParams.get('error')

			if (verified === 'true') {
				setVerificationMessage('Email verified successfully! You can now sign in to your account.')
				setVerificationType('success')
			} else if (message) {
				setVerificationMessage(decodeURIComponent(message))
				setVerificationType('success')
			} else if (error) {
				setVerificationMessage(decodeURIComponent(error))
				setVerificationType('error')
			}

			// Clear the message after 5 seconds
			if (verified || message || error) {
				const timer = setTimeout(() => {
					setVerificationMessage(null)
				}, 5000)
				return () => clearTimeout(timer)
			}
		}
	}, [searchParams])

	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">Welcome Back!</h2>
							<p className="text-white/80 text-center mb-10">Sign in to access your workspace and continue building.</p>

							<div className="space-y-4">
								{/* Step 1 - Completed */}
								<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">1</div>
									<span className="font-medium">Sign up your account</span>
								</div>
								{/* Step 2 - 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">2</div>
									<span className="font-medium">Sign in to workspace</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 In Account</h1>
							<p className="text-white/60">Enter your credentials to access your account.</p>
						</div>

						{/* Verification Message */}
						{verificationMessage && (
							<div className={`mb-6 p-4 rounded-lg border ${
								verificationType === 'success' 
									? 'bg-green-500/10 border-green-500/30 text-green-300' 
									: 'bg-red-500/10 border-red-500/30 text-red-300'
							}`}>
								<div className="flex items-center space-x-2">
									{verificationType === 'success' ? (
										<CheckCircle className="h-4 w-4" />
									) : (
										<AlertCircle className="h-4 w-4" />
									)}
									<span className="text-sm">{verificationMessage}</span>
								</div>
							</div>
						)}

						<SignInForm />
						
						<div className="text-center pt-4">
							<div className="text-white/60 text-xs mb-1">Don&apos;t have an account?</div>
							<Button 
								type="button" 
								variant="link" 
								onClick={() => router.push("/signup")}
								className="text-orange-400 hover:text-orange-300 font-medium transition-colors text-sm p-0 h-auto cursor-pointer"
							>
								Create a new account
							</Button>
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}
