<?php
session_start();

// Kalau sudah login, langsung ke mainboard
if (isset($_SESSION['login'])) {
    header("Location: mainboard.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login & Register - Memory Game</title>

<style>
/* --- 1. RESET & BACKGROUND UTAMA --- */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}

/* --- 2. CONTAINER KARTU --- */
.auth-card {
    width: 380px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
    overflow: hidden;
    position: relative;
    transition: height .4s cubic-bezier(.25,1,.5,1);
}
.forms-container {
    display: flex;
    width: 200%;
    transition: transform .5s cubic-bezier(.68,-.55,.27,1.55);
}
.auth-card.active .forms-container { transform: translateX(-50%); }

/* --- FORM --- */
form {
    width: 50%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
h2 {
    margin-bottom: 10px;
    font-size: 26px;
    background: linear-gradient(45deg,purple,hotpink);
    -webkit-background-clip: text;
    color: transparent;
}
label { width:100%; font-weight:bold; margin-bottom:6px; }
input {
    width:100%;
    padding:12px;
    border-radius:12px;
    border:2px solid #ccc;
    margin-bottom:15px;
}
.btn-submit {
    width:100%;
    padding:14px;
    border:none;
    border-radius:15px;
    background:linear-gradient(45deg,purple,hotpink);
    color:#fff;
    font-weight:bold;
    cursor:pointer;
}

/* ERROR BOX */
.error-box {
    width:100%;
    display:none;
    padding:12px;
    border-radius:10px;
    margin-bottom:20px;
    font-size:13px;
    font-weight:bold;
    text-align:center;
    background:#ffbaba;
    border:1px solid #ff7675;
}
</style>
</head>

<body>

<div class="auth-card" id="authCard">
<div class="forms-container">

<!-- LOGIN -->
<form id="loginForm" action="auth.php" method="POST">
    <h2>Selamat Datang ✨</h2>
    <div id="loginError" class="error-box"></div>

    <label>Username</label>
    <input type="text" name="username" required>

    <label>Password</label>
    <input type="password" name="password" required>

    <button class="btn-submit" name="btn-login">Login Sekarang</button>
    <p class="switch-text">Belum punya akun?
        <a onclick="toggleAuth('register')">Daftar</a>
    </p>
</form>

<!-- REGISTER -->
<form id="registerForm" action="auth.php" method="POST">
    <h2>Buat Akun ✨</h2>
    <div id="regError" class="error-box"></div>

    <label>Username</label>
    <input type="text" id="regUser" name="username" required>

    <label>Email</label>
    <input type="email" id="regEmail" name="email" required>

    <label>Password</label>
    <input type="password" id="regPass" name="password" required>

    <label>Konfirmasi Password</label>
    <input type="password" id="regConfirm" name="confirm_password" required>

    <button class="btn-submit" name="btn-register">Daftar</button>
    <p class="switch-text">Sudah punya akun?
        <a onclick="toggleAuth('login')">Login</a>
    </p>
</form>

</div>
</div>

<script>
const card = document.getElementById("authCard");
const loginForm = document.getElementById("loginForm");
const registerForm = document.getElementById("registerForm");

function setHeight() {
    const h = card.classList.contains("active")
        ? registerForm.offsetHeight
        : loginForm.offsetHeight;
    card.style.height = h + "px";
}

function toggleAuth(mode){
    document.getElementById("loginError").style.display = "none";
    document.getElementById("regError").style.display = "none";
    card.classList.toggle("active", mode === 'register');
    setTimeout(setHeight, 50);
}

window.addEventListener("DOMContentLoaded", () => {
    setHeight();
    const params = new URLSearchParams(window.location.search);

    // LOGIN GAGAL
    if (params.get("error") === "gagal") {
        const box = document.getElementById("loginError");
        box.innerText = "Username atau Password salah!";
        box.style.display = "block";
        setHeight();
    }

    // REGISTER BERHASIL
    if (params.get("register") === "success") {
        const box = document.getElementById("loginError");
        box.innerText = "Registrasi berhasil! Silakan login 🎉";
        box.style.display = "block";
        box.style.background = "#d4edda";
        box.style.color = "#155724";
        box.style.border = "1px solid #c3e6cb";
        card.classList.remove("active");
        setHeight();
    }

    window.history.replaceState(null, null, window.location.pathname);
});

// VALIDASI REGISTER
registerForm.addEventListener("submit", function(e){
    e.preventDefault();
    const u = regUser.value,
          eMail = regEmail.value,
          p = regPass.value,
          c = regConfirm.value;

    function show(msg){
        const box = regError;
        box.innerText = msg;
        box.style.display = "block";
        setHeight();
    }

    if (!u || !eMail || !p || !c) return show("Semua field wajib diisi");
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(eMail)) return show("Email tidak valid");
    if (p.length < 6) return show("Password minimal 6 karakter");
    if (p !== c) return show("Password tidak cocok");

    this.submit();
});
</script>

</body>
</html>
