<?php
session_start();

// CSRF Protection
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

$show_error = isset($error) && !empty($error);
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Mikhmon Login • Premium</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #6366f1;
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        
        body, html {
            height: 100%;
            font-family: 'Inter', sans-serif;
            background: #0f172a;
            background-image: 
                radial-gradient(at 20% 30%, rgba(99,102,241,0.6) 0%, transparent 50%),
                radial-gradient(at 80% 70%, rgba(167,139,250,0.5) 0%, transparent 50%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #f8fafc;
            overflow: hidden;
        }

        .login-card {
            width: 100%;
            max-width: 420px;
            padding: 42px 38px;
            background: rgba(255,255,255,0.035);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 28px;
            box-shadow: 0 25px 50px -12px rgb(0 0 0 / 60%);
            animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes popIn {
            from { opacity: 0; transform: scale(0.92) translateY(20px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .header {
            text-align: center;
            margin-bottom: 42px;
        }
        .header img {
            width: 88px;
            filter: drop-shadow(0 0 20px rgba(99,102,241,0.6));
            margin-bottom: 16px;
        }
        .header h3 {
            font-size: 26px;
            font-weight: 700;
            background: linear-gradient(90deg, #e0e7ff, #c4d0ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .input-group {
            position: relative;
            margin-bottom: 22px;
        }
        .form-control {
            width: 100%;
            padding: 16px 52px;
            background: rgba(0,0,0,0.25);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 16px;
            color: white;
            font-size: 15.5px;
            transition: all 0.3s ease;
        }
        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(99,102,241,0.25);
            background: rgba(255,255,255,0.08);
        }

        .input-icon {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            width: 22px;
            fill: #94a3b8;
            transition: 0.3s;
        }
        .form-control:focus + .input-icon { fill: var(--primary); }

        .toggle-password {
            position: absolute;
            right: 18px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #94a3b8;
            cursor: pointer;
            font-size: 20px;
        }

        .btn-login {
            width: 100%;
            padding: 17px;
            margin-top: 10px;
            border: none;
            border-radius: 16px;
            background: linear-gradient(135deg, #6366f1, #4f46e5);
            color: white;
            font-size: 16.5px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 10px 20px -5px rgba(99,102,241,0.5);
            transition: all 0.3s;
        }
        .btn-login:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 25px -5px rgba(99,102,241,0.6);
        }
        .btn-login:active { transform: scale(0.98); }

        .error-notif {
            margin-top: 20px;
            padding: 14px 16px;
            background: rgba(248, 113, 113, 0.1);
            border: 1px solid rgba(248, 113, 113, 0.3);
            border-radius: 14px;
            color: #fca5a5;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            animation: shake 0.4s;
        }

        .footer-copy {
            margin-top: 36px;
            text-align: center;
            font-size: 12px;
            color: #64748b;
        }
    </style>
</head>
<body>
    <div class="login-card">
        <div class="header">
            <img src="img/favicon.png" alt="Mikhmon Logo">
            <h3>MIKHMON ONLINE</h3>
            <p>Mod. Ros 6.xx • Premium Glass</p>
        </div>

        <form autocomplete="off" method="post">
            <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">

            <div class="input-group">
                <input type="text" class="form-control" name="user" placeholder="Username" required autofocus>
                <svg class="input-icon" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
            </div>

            <div class="input-group">
                <input type="password" id="password" class="form-control" name="pass" placeholder="Password" required>
                <svg class="input-icon" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>
                <button type="button" class="toggle-password" onclick="togglePass()">👁️</button>
            </div>

            <button type="submit" name="login" class="btn-login" id="btnLogin">
                Masuk ke Dashboard
            </button>

            <?php if ($show_error): ?>
            <div class="error-notif">
                <span>⚠️</span>
                <span>Kombinasi username & password salah!</span>
            </div>
            <?php endif; ?>
        </form>

        <div class="footer-copy">
            © <?= date("Y") ?> Erwan Raap<br>
            Powered by Laksamadi Guko • Enhanced by Grok
        </div>
    </div>

    <script>
        // Toggle password visibility
        function togglePass() {
            const pass = document.getElementById('password');
            const btn = document.querySelector('.toggle-password');
            if (pass.type === 'password') {
                pass.type = 'text';
                btn.textContent = '🙈';
            } else {
                pass.type = 'password';
                btn.textContent = '👁️';
            }
        }

        // Loading button effect
        document.querySelector('form').addEventListener('submit', function() {
            const btn = document.getElementById('btnLogin');
            btn.style.pointerEvents = 'none';
            btn.innerHTML = `
                <span style="display:inline-block; animation:spin 1s linear infinite;">⟳</span> 
                Sedang masuk...
            `;
        });
    </script>
</body>
</html>