<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PinkPulse Member Portal — Account & Deliverables Hub</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body style="padding-top: 5rem;">

    <!-- Navbar -->
    <nav class="navbar">
        <div class="container nav-content">
            <a href="index.php" class="brand-logo">
                <div class="brand-icon">⚡</div>
                <span>Pink<span class="gradient-text">Pulse Members</span></span>
            </a>
            <div style="display:flex;gap:12px;align-items:center;">
                <a href="index.php" class="btn btn-secondary btn-sm">← Back to Tools</a>
                            </div>
        </div>
    </nav>

    <div class="container" style="max-width: 960px; margin-bottom: 4rem;">

                    <!-- Login / Signup Form if not logged in -->
            <div style="max-width: 460px; margin: 4rem auto;" class="glass-card">
                <div style="text-align: center; margin-bottom: 1.5rem;">
                    <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">👑</div>
                    <h2 class="gradient-text">Member Access Hub</h2>
                    <p style="color: var(--text-muted); font-size: 0.9rem;">Sign in or create your account to access your VIP Playbook and licenses.</p>
                </div>

                <div class="app-tabs-nav" style="margin-top: 0; margin-bottom: 1.5rem;">
                    <button class="tab-btn active" id="tabBtnLogin" onclick="switchAuthTab('login')">Sign In</button>
                    <button class="tab-btn" id="tabBtnRegister" onclick="switchAuthTab('register')">Create Account</button>
                </div>

                <!-- Sign In Form -->
                <form id="memberLoginForm" onsubmit="handleAuthSubmit(event, 'login')">
                    <div class="input-group">
                        <label class="input-label">Email Address</label>
                        <input type="email" id="loginEmail" class="form-control" required placeholder="you@example.com">
                    </div>
                    <div class="input-group">
                        <label class="input-label">Password</label>
                        <input type="password" id="loginPass" class="form-control" required placeholder="••••••••">
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 1rem;">Sign In to Member Hub</button>
                </form>

                <!-- Register Form -->
                <form id="memberRegisterForm" style="display: none;" onsubmit="handleAuthSubmit(event, 'register')">
                    <div class="input-group">
                        <label class="input-label">Your Name</label>
                        <input type="text" id="regName" class="form-control" required placeholder="Alex Growth">
                    </div>
                    <div class="input-group">
                        <label class="input-label">Email Address</label>
                        <input type="email" id="regEmail" class="form-control" required placeholder="you@example.com">
                    </div>
                    <div class="input-group">
                        <label class="input-label">Password (6+ chars)</label>
                        <input type="password" id="regPass" class="form-control" required placeholder="••••••••">
                    </div>
                    <div class="input-group">
                        <label class="input-label">Select Tier</label>
                        <select id="regPlan" class="form-control">
                            <option value="vip">Pink VIP Pro Pass (Lifetime - 29€)</option>
                            <option value="free">Discovery Pass (Free - 3 uses)</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 1rem;">Create Account & Access</button>
                </form>
            </div>

        
    </div>

    <script>
    function switchAuthTab(type) {
        document.getElementById('memberLoginForm').style.display = type === 'login' ? 'block' : 'none';
        document.getElementById('memberRegisterForm').style.display = type === 'register' ? 'block' : 'none';
        document.getElementById('tabBtnLogin').classList.toggle('active', type === 'login');
        document.getElementById('tabBtnRegister').classList.toggle('active', type === 'register');
    }

    async function handleAuthSubmit(e, type) {
        e.preventDefault();
        const payload = { action: type };

        if (type === 'login') {
            payload.email = document.getElementById('loginEmail').value;
            payload.password = document.getElementById('loginPass').value;
        } else {
            payload.full_name = document.getElementById('regName').value;
            payload.email = document.getElementById('regEmail').value;
            payload.password = document.getElementById('regPass').value;
            payload.plan = document.getElementById('regPlan').value;
        }

        try {
            const res = await fetch('api/auth.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            const json = await res.json();
            if (json.success) {
                window.location.reload();
            } else {
                alert(json.error || 'Authentication error.');
            }
        } catch (err) {
            alert('Server connection error.');
        }
    }

    async function handleProfileUpdate(e) {
        e.preventDefault();
        const full_name = document.getElementById('editFullName').value;
        const email = document.getElementById('editEmail').value;
        const new_password = document.getElementById('editNewPassword').value;
        const btn = document.getElementById('btnSaveProfile');

        btn.innerText = 'Saving...';

        try {
            const res = await fetch('api/auth.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ action: 'update_profile', full_name, email, new_password })
            });
            const json = await res.json();

            if (json.success) {
                alert('Account settings updated successfully!');
                document.getElementById('displayFullName').innerText = full_name;
                document.getElementById('displayEmail').innerText = email;
                document.getElementById('editNewPassword').value = '';
            } else {
                alert(json.error || 'Update failed.');
            }
        } catch (err) {
            alert('Server error.');
        } finally {
            btn.innerText = '💾 Save Changes';
        }
    }

    async function handleLogout() {
        if (!confirm('Are you sure you want to sign out?')) return;
        await fetch('api/auth.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ action: 'logout' })
        });
        window.location.href = 'index.php';
    }
    </script>
</body>
</html>
