<?php
// ==========================================
// 1. CEK SESSION & INISIALISASI
// ==========================================
session_start();

// Redirect jika belum login
if (!isset($_SESSION['username'])) {
    header("Location: index.php");
    exit();
}
$username = htmlspecialchars($_SESSION['username']);

// ==========================================
// 2. VARIABEL DUMMY INFO SERVER
// ==========================================
if (!isset($_SESSION['rank'])) $_SESSION['rank'] = 'MVP';
if (!isset($_SESSION['money'])) $_SESSION['money'] = 50000;
if (!isset($_SESSION['email'])) $_SESSION['email'] = '';
if (!isset($_SESSION['phone'])) $_SESSION['phone'] = '';

$rank = $_SESSION['rank'];
$money = $_SESSION['money'];
$current_email = $_SESSION['email'];
$current_phone = $_SESSION['phone'];

$platform = isset($_SESSION['platform']) ? $_SESSION['platform'] : 'java';
$name_path = ($platform === 'bedrock') ? "bedrock-" . urlencode($username) : urlencode($username);
$store_base_url = "https://store.fanaesmc.me/" . $name_path;

// ==========================================
// 3. LOGIKA OTP (NATIVE @mail TANPA PHPMAILER)
// ==========================================
$show_otp_modal = false;
$otp_message = "";
$success_message = "";
$error_message = "";

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    
    // TAHAP 1: REQUEST OTP
    if (isset($_POST['action']) && $_POST['action'] === 'request_otp') {
        $new_email = trim($_POST['email']);
        $new_phone = trim($_POST['phone']);

        $changed_email = ($new_email !== $current_email && $new_email !== '');
        $changed_phone = ($new_phone !== $current_phone && $new_phone !== '');

        if ($changed_email || $changed_phone) {
            
            $kode_otp_asli = rand(100000, 999999);
            
            $_SESSION['kode_otp_asli'] = $kode_otp_asli; 
            $_SESSION['temp_email'] = $changed_email ? $new_email : $current_email;
            $_SESSION['temp_phone'] = $changed_phone ? $new_phone : $current_phone;
            
            $show_otp_modal = true;

            // ==========================================
            // PENGIRIMAN EMAIL NATIVE (MIRIP INDEX.PHP)
            // ==========================================
            if ($changed_email) {
                // Teks Polos (Plain Text)
                $pesan_email = "Halo " . $username . ",\n\n";
                $pesan_email .= "Anda baru saja melakukan permintaan perubahan email di Web Store FANAESMC.\n";
                $pesan_email .= "Kode Verifikasi (OTP) Anda adalah: " . $kode_otp_asli . "\n\n";
                $pesan_email .= "Jangan berikan kode ini kepada siapapun.";
                
                // Header Native
                $headers = "From: no-reply@" . $_SERVER['HTTP_HOST'];
                
                // Kirim Email
                @mail($new_email, "Kode Verifikasi OTP - FANAESMC", $pesan_email, $headers);
                
                $otp_message = "Masukkan kode OTP yang telah kami kirim ke Email Baru Anda <b>($new_email)</b>.";
            } 
            elseif ($changed_phone) {
                // Simulasi WhatsApp
                $otp_message = "Masukkan kode OTP untuk WhatsApp <b>($new_phone)</b>. <br><small style='color: #fbbf24;'>(Simulasi: <b>$kode_otp_asli</b>)</small>";
            }
        } else {
            $error_message = "Tidak ada perubahan data yang terdeteksi.";
        }
    } 
    
    // TAHAP 2: VERIFIKASI OTP
    elseif (isset($_POST['action']) && $_POST['action'] === 'verify_otp') {
        $otp_input = trim($_POST['otp']);
        
        if (isset($_SESSION['kode_otp_asli']) && $otp_input == $_SESSION['kode_otp_asli']) {
            if (isset($_SESSION['temp_email'])) $_SESSION['email'] = $_SESSION['temp_email'];
            if (isset($_SESSION['temp_phone'])) $_SESSION['phone'] = $_SESSION['temp_phone'];
            
            unset($_SESSION['temp_email']);
            unset($_SESSION['temp_phone']);
            unset($_SESSION['kode_otp_asli']);
            
            $current_email = $_SESSION['email'];
            $current_phone = $_SESSION['phone'];
            
            $success_message = "Verifikasi Berhasil! Profil diperbarui.";
        } else {
            $error_message = "Kode OTP Salah atau sudah kadaluarsa!";
            $show_otp_modal = true;
            $otp_message = "Silakan periksa kembali dan masukkan kode yang benar.";
        }
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil Akun - ANYMHOST</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* CSS Reset & Basic Setup */
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body { background-color: #0f172a; color: #f8fafc; line-height: 1.6; padding-bottom: 40px; }

        /* HEADER NAVIGASI */
        header {
            background-color: #1e293b;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            position: relative;
        }
        .logo-container { display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 1.2rem; text-transform: uppercase; }
        .logo-container img { max-height: 30px; width: auto; }
        
        .hamburger-btn {
            background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); color: white;
            font-size: 1.5rem; cursor: pointer; padding: 5px 10px; border-radius: 6px;
            transition: background 0.3s ease; width: 45px; display: flex; justify-content: center; align-items: center;
        }
        .hamburger-btn:hover { background: rgba(255, 255, 255, 0.1); }

        .dropdown-menu {
            display: block; position: absolute; top: 100%; right: 20px; background-color: #1e293b;
            min-width: 200px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            border: 1px solid rgba(255, 255, 255, 0.05); z-index: 1000; overflow: hidden; margin-top: 10px;
            visibility: hidden; opacity: 0; transform: translateY(-15px); transition: all 0.3s ease; pointer-events: none;
        }
        .dropdown-menu.active { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
        .dropdown-menu a { display: block; padding: 12px 20px; color: #f8fafc; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background 0.3s; }
        .dropdown-menu a:hover { background-color: rgba(255, 255, 255, 0.05); }

        /* KONTEN UTAMA */
        .container { max-width: 800px; margin: 30px auto; padding: 0 20px; display: flex; flex-direction: column; gap: 20px; }

        .alert { padding: 15px; border-radius: 8px; font-weight: bold; font-size: 0.95rem; }
        .alert-success { background-color: rgba(34, 197, 94, 0.1); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
        .alert-error { background-color: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }

        /* CARD 1: INFORMASI AKUN */
        .card { background-color: #1e293b; border-radius: 12px; padding: 25px; border: 1px solid rgba(255, 255, 255, 0.05); }
        
        .profile-header { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
        .avatar {
            width: 80px; height: 80px; border-radius: 50%; border: 3px solid #6366f1;
            background: #0f172a; display: flex; justify-content: center; align-items: center; overflow: hidden;
        }
        .avatar img { width: 100%; height: 100%; object-fit: cover; }
        .user-info h2 { font-size: 1.5rem; margin-bottom: 5px; }
        .badge-rank { background-color: #f97316; color: white; padding: 4px 12px; border-radius: 50px; font-size: 0.85rem; font-weight: bold; text-transform: uppercase; }
        .money-display { margin-left: auto; text-align: right; }
        .money-title { font-size: 0.9rem; color: #94a3b8; }
        .money-value { font-size: 1.6rem; font-weight: bold; color: #fbbf24; }

        @media (max-width: 500px) {
            .profile-header { flex-direction: column; text-align: center; }
            .money-display { margin-left: 0; text-align: center; margin-top: 10px; }
        }

        /* CARD 2: REFERRAL BUTTON */
        .referral-card {
            background: linear-gradient(135deg, #0f172a, #1e293b); border: 1px dashed rgba(255,255,255,0.2);
            text-align: center; cursor: pointer; transition: transform 0.3s ease, border-color 0.3s;
            text-decoration: none; color: white; display: block; padding: 20px; border-radius: 12px;
        }
        .referral-card:hover { transform: translateY(-3px); border-color: #f97316; }
        .referral-card i { font-size: 2rem; color: #f97316; margin-bottom: 10px; }
        .referral-card h3 { font-size: 1.2rem; }

        /* CARD 3: FORM PENGATURAN */
        .card-title { font-size: 1.2rem; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; font-size: 0.9rem; color: #94a3b8; margin-bottom: 8px; }
        .input-box {
            width: 100%; background-color: #0f172a; border: 1px solid rgba(255,255,255,0.1); color: white;
            padding: 12px 15px; border-radius: 8px; outline: none; font-size: 1rem; transition: border-color 0.3s;
        }
        .input-box:focus { border-color: #6366f1; }
        .input-box::placeholder { color: #64748b; }

        .btn-submit {
            width: 100%; padding: 14px; border: none; border-radius: 8px;
            background: linear-gradient(135deg, #6366f1, #a855f7); color: white;
            font-weight: bold; font-size: 1.05rem; cursor: pointer; transition: opacity 0.3s;
        }
        .btn-submit:hover { opacity: 0.9; }

        /* KOTAK MODAL OTP */
        .modal {
            position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px);
            justify-content: center; align-items: center; padding: 20px;
        }
        .modal-content {
            background-color: #1e293b; border-radius: 12px; width: 100%; max-width: 450px;
            padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px rgba(0,0,0,0.5); position: relative;
        }
        .modal-icon { font-size: 3rem; color: #22c55e; margin-bottom: 15px; }
        .modal-title { font-size: 1.3rem; margin-bottom: 10px; }
        .modal-desc { font-size: 0.95rem; color: #cbd5e1; margin-bottom: 25px; line-height: 1.5; }
        .close-modal {
            position: absolute; top: 15px; right: 20px; font-size: 1.5rem; color: #94a3b8;
            cursor: pointer; background: none; border: none; transition: color 0.3s;
        }
        .close-modal:hover { color: white; }
    </style>
</head>
<body>

    <header>
        <div class="logo-container">
            <span><i class="fa-solid fa-crown" style="color:#ff7eb3;"></i> ANYMHOST</span>
        </div>
        
        <button class="hamburger-btn" onclick="toggleMenu()">
            <i id="hamburgerIcon" class="fa-solid fa-bars"></i>
        </button>

        <div class="dropdown-menu" id="navDropdown">
            <a href="<?php echo $store_base_url; ?>/dashboard">Dashboard</a>
            <a href="<?php echo $store_base_url; ?>/ranks">Ranks</a>
            <a href="<?php echo $store_base_url; ?>/money">Money</a>
            <a href="<?php echo $store_base_url; ?>/rules">Rules</a>
            <a href="logout.php">Logout</a>
        </div>
    </header>

    <div class="container">

        <?php if(!empty($success_message)): ?>
            <div class="alert alert-success"><i class="fa-solid fa-circle-check"></i> <?php echo $success_message; ?></div>
        <?php endif; ?>
        <?php if(!empty($error_message)): ?>
            <div class="alert alert-error"><i class="fa-solid fa-circle-exclamation"></i> <?php echo $error_message; ?></div>
        <?php endif; ?>

        <div class="card profile-header">
            <div class="avatar">
                <img src="https://mc-heads.net/avatar/<?php echo str_replace('.', '', $username); ?>/100" alt="Avatar">
            </div>
            <div class="user-info">
                <h2><?php echo $username; ?></h2>
                <span class="badge-rank"><?php echo $rank; ?></span>
            </div>
            <div class="money-display">
                <div class="money-title">Money Saat Ini</div>
                <div class="money-value">Rp <?php echo number_format($money, 0, ',', '.'); ?></div>
            </div>
        </div>

        <a href="referral.php" class="referral-card">
            <i class="fa-solid fa-users"></i>
            <h3>Program Referral</h3>
            <p style="color: #94a3b8; font-size: 0.9rem; margin-top: 5px;">Ajak teman dan dapatkan bonus tambahan!</p>
        </a>

        <div class="card">
            <h3 class="card-title"><i class="fa-solid fa-user-gear"></i> Pengaturan Profil</h3>
            
            <form action="" method="POST">
                <input type="hidden" name="action" value="request_otp">
                
                <div class="form-group">
                    <label for="email">Alamat Email</label>
                    <input type="email" id="email" name="email" class="input-box" 
                           placeholder="Email Baru" 
                           value="<?php echo htmlspecialchars($current_email); ?>">
                </div>
                
                <div class="form-group">
                    <label for="phone">Nomor WhatsApp / HP</label>
                    <input type="text" id="phone" name="phone" class="input-box" 
                           placeholder="Nomor HP/WhatsApp Baru" 
                           value="<?php echo htmlspecialchars($current_phone); ?>">
                </div>

                <button type="submit" class="btn-submit">Simpan Perubahan</button>
            </form>
        </div>

    </div>

    <div id="otpModal" class="modal" style="<?php echo $show_otp_modal ? 'display: flex;' : 'display: none;'; ?>">
        <div class="modal-content">
            <button class="close-modal" onclick="closeModal()"><i class="fa-solid fa-xmark"></i></button>
            <i class="fa-solid fa-shield-halved modal-icon"></i>
            <h2 class="modal-title">Verifikasi Keamanan</h2>
            <p class="modal-desc"><?php echo $otp_message; ?></p>
            
            <form action="" method="POST">
                <input type="hidden" name="action" value="verify_otp">
                <div class="form-group">
                    <input type="text" name="otp" class="input-box" placeholder="Masukkan 6 Digit OTP..." style="text-align: center; letter-spacing: 2px; font-size: 1.2rem; font-weight: bold;" required>
                </div>
                <button type="submit" class="btn-submit" style="background: #22c55e;">Verifikasi & Perbarui</button>
            </form>
        </div>
    </div>

    <script>
        // Fungsi untuk Hamburger Menu
        function toggleMenu() {
            var menu = document.getElementById("navDropdown");
            var icon = document.getElementById("hamburgerIcon");
            
            menu.classList.toggle("active");
            
            if (menu.classList.contains("active")) {
                icon.classList.remove("fa-bars");
                icon.classList.add("fa-xmark");
            } else {
                icon.classList.remove("fa-xmark");
                icon.classList.add("fa-bars");
            }
        }

        // Fungsi Menutup Modal OTP
        function closeModal() {
            document.getElementById('otpModal').style.display = 'none';
        }

        // Tutup menu/modal jika area luar diklik
        window.onclick = function(event) {
            var modal = document.getElementById('otpModal');
            if (event.target == modal) {
                closeModal();
            }
            if (!event.target.matches('.hamburger-btn') && !event.target.closest('.hamburger-btn')) {
                var menu = document.getElementById("navDropdown");
                var icon = document.getElementById("hamburgerIcon");
                if (menu.classList.contains('active')) {
                    menu.classList.remove('active');
                    icon.classList.remove('fa-xmark');
                    icon.classList.add('fa-bars');
                }
            }
        }
    </script>
</body>
</html>