index.php

<?php
$pageTitle = 'Who\'s Practising?';
require_once __DIR__ . '/dbconfig.php';
require_once __DIR__ . '/includes/header.php';

// If profile already selected, show dashboard
if ($profileId) {
    // Fetch stats
    try {
        $db = getDB();
        $stats = $db->prepare("
            SELECT
                COUNT(CASE WHEN p.completed = 1 THEN 1 END) as completed_exercises,
                COUNT(DISTINCT p.exercise_id) as attempted,
                COALESCE(AVG(p.accuracy), 0) as avg_accuracy,
                COALESCE(MAX(p.best_score), 0) as top_score,
                COALESCE(SUM(p.best_score), 0) as total_score
            FROM progress p
            WHERE p.profile_id = ?
        ");
        $stats->execute([$profileId]);
        $s = $stats->fetch();
    } catch (Exception $e) {
        $s = ['completed_exercises' => 0, 'attempted' => 0, 'avg_accuracy' => 0, 'top_score' => 0, 'total_score' => 0];
    }
?>
    <div class="fade-in">
        <div class="exercises-header">
            <h1>Welcome back, <?= htmlspecialchars($profileName) ?>!</h1>
            <p class="subtitle">Ready to sharpen your Morse code skills?</p>
        </div>

        <div class="stats-row">
            <div class="stat-card">
                <div class="stat-value"><?= (int)$s['completed_exercises'] ?></div>
                <div class="stat-label">Completed</div>
            </div>
            <div class="stat-card">
                <div class="stat-value"><?= (int)$s['attempted'] ?></div>
                <div class="stat-label">Attempted</div>
            </div>
            <div class="stat-card">
                <div class="stat-value"><?= number_format($s['avg_accuracy'], 0) ?>%</div>
                <div class="stat-label">Accuracy</div>
            </div>
            <div class="stat-card">
                <div class="stat-value"><?= number_format($s['total_score']) ?></div>
                <div class="stat-label">Total Score</div>
            </div>
        </div>

        <div style="text-align: center;">
            <a href="/morse/exercises/" class="btn btn-primary btn-lg">Start Practising</a>
            <a href="/morse/?logout=1" class="btn btn-secondary btn-lg" style="margin-left: 1rem;">Switch Profile</a>
        </div>
    </div>
<?php
    require_once __DIR__ . '/includes/footer.php';
    exit;
}

// Handle logout / switch profile
if (isset($_GET['logout'])) {
    unset($_SESSION['profile_id'], $_SESSION['profile_name'], $_SESSION['profile_color']);
    header('Location: /morse/');
    exit;
}

// Fetch existing profiles
$profiles = [];
try {
    $db = getDB();
    $stmt = $db->query("SELECT * FROM profiles ORDER BY name");
    $profiles = $stmt->fetchAll();
} catch (Exception $e) {
    // DB not set up yet — that's fine
}
?>

<div class="profile-screen fade-in">
    <h1>Who's Practising?</h1>
    <p>Select your profile or create a new one</p>

    <div class="profiles-grid" id="profilesGrid">
        <?php foreach ($profiles as $p): ?>
            <div class="profile-card" onclick="selectProfile(<?= $p['id'] ?>)">
                <div class="profile-avatar" style="background: <?= htmlspecialchars($p['avatar_color']) ?>">
                    <?= strtoupper(substr($p['name'], 0, 1)) ?>
                </div>
                <span class="profile-name"><?= htmlspecialchars($p['name']) ?></span>
            </div>
        <?php endforeach; ?>

        <div class="profile-card add-profile" onclick="showAddProfile()">
            <div class="profile-avatar">+</div>
            <span class="profile-name">Add Profile</span>
        </div>
    </div>

    <?php if (empty($profiles)): ?>
        <div class="alert alert-info">
            No profiles yet. First, <a href="/morse/db/" style="color: var(--accent-cyan); font-weight: 600;">set up the database</a>, then create your first profile!
        </div>
    <?php endif; ?>
</div>

<!-- Add Profile Modal -->
<div class="modal-overlay" id="addProfileModal">
    <div class="modal scale-in">
        <h2>Create Profile</h2>
        <form id="addProfileForm" onsubmit="createProfile(event)">
            <div class="form-group">
                <label for="profileName">Your Name</label>
                <input type="text" id="profileName" name="name" placeholder="Enter your name" required maxlength="50" autocomplete="off">
            </div>
            <div class="form-group">
                <label>Choose Your Colour</label>
                <div class="color-picker">
                    <div class="color-option selected" style="background: #6C63FF" data-color="#6C63FF"></div>
                    <div class="color-option" style="background: #FF6B9D" data-color="#FF6B9D"></div>
                    <div class="color-option" style="background: #00D4FF" data-color="#00D4FF"></div>
                    <div class="color-option" style="background: #00E676" data-color="#00E676"></div>
                    <div class="color-option" style="background: #FF9100" data-color="#FF9100"></div>
                    <div class="color-option" style="background: #FFD600" data-color="#FFD600"></div>
                    <div class="color-option" style="background: #FF5252" data-color="#FF5252"></div>
                    <div class="color-option" style="background: #E040FB" data-color="#E040FB"></div>
                </div>
            </div>
            <div class="btn-row">
                <button type="submit" class="btn btn-primary">Create</button>
                <button type="button" class="btn btn-secondary" onclick="hideAddProfile()">Cancel</button>
            </div>
        </form>
    </div>
</div>

<script>
let selectedColor = '#6C63FF';

document.querySelectorAll('.color-option').forEach(el => {
    el.addEventListener('click', () => {
        document.querySelectorAll('.color-option').forEach(o => o.classList.remove('selected'));
        el.classList.add('selected');
        selectedColor = el.dataset.color;
    });
});

function showAddProfile() {
    document.getElementById('addProfileModal').classList.add('active');
    document.getElementById('profileName').focus();
}

function hideAddProfile() {
    document.getElementById('addProfileModal').classList.remove('active');
}

document.getElementById('addProfileModal').addEventListener('click', (e) => {
    if (e.target === e.currentTarget) hideAddProfile();
});

function selectProfile(id) {
    window.location.href = '/morse/api/profiles.php?action=select&id=' + id;
}

function createProfile(e) {
    e.preventDefault();
    const name = document.getElementById('profileName').value.trim();
    if (!name) return;

    fetch('/morse/api/profiles.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'create', name, color: selectedColor })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            window.location.href = '/morse/api/profiles.php?action=select&id=' + data.id;
        } else {
            alert(data.error || 'Failed to create profile');
        }
    })
    .catch(() => alert('Failed to create profile. Is the database set up?'));
}
</script>

<?php require_once __DIR__ . '/includes/footer.php'; ?>