<?php
require_once 'common/config.php';
include 'common/header.php';

$error = ""; $success = "";
if (isset($_POST['register'])) {
    $username = mysqli_real_escape_string($conn, $_POST['username']);
    $email = mysqli_real_escape_string($conn, $_POST['email']);
    $password = $_POST['password'];
    $confirm_password = $_POST['confirm_password'];

    if ($password !== $confirm_password) { $error = "AUTH_ERROR: Keys Mismatch!"; }
    else {
        $check = $conn->query("SELECT id FROM users WHERE email = '$email'");
        if ($check->num_rows > 0) { $error = "AUTH_ERROR: Identity Taken!"; }
        else {
            $hashed = password_hash($password, PASSWORD_DEFAULT);
            $insert = $conn->query("INSERT INTO users (username, email, password) VALUES ('$username', '$email', '$hashed')");
            if ($insert) { $success = "IDENTITY_CREATED: Please login."; }
            else { $error = "SYSTEM_ERROR: Database Failure!"; }
        }
    }
}
?>

<div class="flex items-center justify-center min-h-[calc(100vh-80px)] px-4 py-10">
    <div class="cyber-card w-full max-w-5xl overflow-hidden border-t-4 border-cyan-500/50 shadow-2xl">
        
        <div class="flex flex-col lg:flex-row">
            <!-- বাম অংশ -->
            <div class="lg:w-4/12 bg-slate-900/40 p-10 lg:p-16 flex flex-col items-center justify-center text-center border-b lg:border-b-0 lg:border-r border-white/5">
                <div class="w-20 h-20 bg-cyan-500/10 rounded-3xl border border-cyan-500/30 flex items-center justify-center mb-8">
                    <i class="fa-solid fa-user-plus text-5xl text-cyan-400"></i>
                </div>
                <h2 class="text-3xl lg:text-4xl font-bold logo-font tracking-tighter text-white uppercase leading-none">
                    CREATE <br><span class="text-cyan-400 glow-text">ACCOUNT</span>
                </h2>
                <p class="text-[9px] text-gray-500 uppercase tracking-[4px] mt-6 font-black opacity-60">Initiate New User Protocol</p>
            </div>

            <!-- ডান অংশ: ইনপুটগুলো গ্রিডে সাজানো হয়েছে ডেক্সটপের জন্য -->
            <div class="lg:w-8/12 p-8 lg:p-16 bg-slate-950/20">
                <?php if($error): ?>
                    <div class="bg-red-500/10 border border-red-500/30 text-red-500 p-4 rounded-xl mb-8 text-xs font-bold text-center uppercase tracking-widest">
                        <i class="fa-solid fa-triangle-exclamation mr-2"></i> <?php echo $error; ?>
                    </div>
                <?php endif; ?>
                <?php if($success): ?>
                    <div class="bg-green-500/10 border border-green-500/30 text-green-500 p-4 rounded-xl mb-8 text-xs font-bold text-center uppercase tracking-widest">
                        <i class="fa-solid fa-check-circle mr-2"></i> <?php echo $success; ?>
                    </div>
                <?php endif; ?>

                <form action="" method="POST" class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- ইউজারনেম -->
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black text-gray-500 uppercase tracking-[3px]">Username</label>
                        <div class="relative group">
                            <i class="fa-solid fa-id-badge absolute left-5 top-1/2 -translate-y-1/2 text-cyan-500/30 text-xl transition-all"></i>
                            <input type="text" name="username" required placeholder="USER_ID" 
                                   class="w-full bg-slate-900/60 border border-white/10 rounded-2xl py-5 pl-14 pr-6 text-white focus:border-cyan-500 outline-none text-lg">
                        </div>
                    </div>
                    <!-- ইমেইল -->
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black text-gray-500 uppercase tracking-[3px]">Email</label>
                        <div class="relative group">
                            <i class="fa-solid fa-envelope absolute left-5 top-1/2 -translate-y-1/2 text-cyan-500/30 text-xl transition-all"></i>
                            <input type="email" name="email" required placeholder="MAIL@HOST.COM" 
                                   class="w-full bg-slate-900/60 border border-white/10 rounded-2xl py-5 pl-14 pr-6 text-white focus:border-cyan-500 outline-none text-lg">
                        </div>
                    </div>
                    <!-- পাসওয়ার্ড -->
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black text-gray-500 uppercase tracking-[3px]">Access Key</label>
                        <div class="relative group">
                            <i class="fa-solid fa-key absolute left-5 top-1/2 -translate-y-1/2 text-cyan-500/30 text-xl transition-all"></i>
                            <input type="password" name="password" required placeholder="••••••••" 
                                   class="w-full bg-slate-900/60 border border-white/10 rounded-2xl py-5 pl-14 pr-6 text-white focus:border-cyan-500 outline-none text-lg">
                        </div>
                    </div>
                    <!-- কনফার্ম পাসওয়ার্ড -->
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black text-gray-500 uppercase tracking-[3px]">Confirm Key</label>
                        <div class="relative group">
                            <i class="fa-solid fa-shield-check absolute left-5 top-1/2 -translate-y-1/2 text-cyan-500/30 text-xl transition-all"></i>
                            <input type="password" name="confirm_password" required placeholder="••••••••" 
                                   class="w-full bg-slate-900/60 border border-white/10 rounded-2xl py-5 pl-14 pr-6 text-white focus:border-cyan-500 outline-none text-lg">
                        </div>
                    </div>

                    <div class="md:col-span-2 pt-4">
                        <button type="submit" name="register" 
                                class="w-full bg-gradient-to-r from-blue-600 to-cyan-500 text-white font-black py-6 rounded-2xl shadow-lg hover:scale-[1.01] transition-all uppercase tracking-[5px] text-sm md:text-base">
                            EXECUTE REGISTRATION
                        </button>
                    </div>
                </form>

                <div class="mt-12 text-center border-t border-white/5 pt-8">
                    <p class="text-[11px] text-gray-500 uppercase tracking-[3px] font-black">
                        Already Authorized? 
                        <a href="login.php" class="text-cyan-400 hover:text-white transition-colors ml-2 border-b-2 border-cyan-500/20 pb-1">Login Identity</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>