HTMLify

// --- Mock Data Store --- 
const MOCK_USER_DATA = {
    id: 'U1001',
    name: 'Jane Doe',
    email: 'jane.doe@example.com',
    age: 30,
    height: '165 cm',
    weight: '68 kg',
    occupation: 'Software Engineer',
    moodLogs: [
        { date: '2024-07-20', mood: 'Energetic', notes: 'Great workout.' },
        { date: '2024-07-21', mood: 'Neutral', notes: 'Long meeting.' },
        { date: '2024-07-22', mood: 'Stressed', notes: 'Deadline approaching.' },
        { date: '2024-07-23', mood: 'Energetic', notes: 'Feeling positive.' },
        { date: '2024-07-24', mood: 'Tired', notes: 'Slept poorly.' },
    ],
    recommendations: [
        { id: 'R001', title: 'Mindful Breathing Session', source: 'AI Mental Health' },
        { id: 'R002', title: 'Low-Impact Cardio Plan', source: 'AI Physical Health' }
    ]
};

const MOCK_PRODUCTS = [
    { id: 'P001', name: 'ErgoFlow Office Chair', price: 15000, desc: 'Supports posture for long working hours.', img: 'https://via.placeholder.com/150/A0C4FF/FFFFFF?text=Ergonomic+Chair' },
    { id: 'P002', name: 'Serenity Herbal Tea', price: 850, desc: 'Natural blend to aid relaxation before sleep.', img: 'https://via.placeholder.com/150/FFC3A0/FFFFFF?text=Calm+Tea' }
];

// --- Utility Functions ---

function getActivePage() {
    const path = window.location.pathname;
    if (path.includes('index.html') || path === '/' || path.endsWith('/')) return 'index';
    if (path.includes('profile.html')) return 'profile';
    if (path.includes('tips.html')) return 'tips';
    if (path.includes('admin.html')) return 'admin';
    return 'index';
}

function showMessage(elementId, message, isError = false) {
    const el = document.getElementById(elementId);
    if (el) {
        el.textContent = message;
        el.style.backgroundColor = isError ? 'rgba(220, 53, 69, 0.2)' : 'rgba(40, 167, 69, 0.2)';
        el.style.color = isError ? 'var(--color-error)' : 'var(--color-success)';
        el.style.display = 'block';
        setTimeout(() => {
            el.style.display = 'none';
        }, 5000);
    }
}

// --- Core Initialization --- 

document.addEventListener('DOMContentLoaded', () => {
    const page = getActivePage();

    if (page === 'index') {
        initializeDashboard();
    } else if (page === 'profile') {
        initializeProfile();
    } else if (page === 'tips') {
        initializeTipsPage();
    } else if (page === 'admin') {
        initializeAdminPanel();
    }
});

// --- Dashboard Logic ---
function initializeDashboard() {
    renderRecommendationsDashboard();
    setupCheckinListeners();
    updateHealthSnapshot();
}

function setupCheckinListeners() {
    const moodButtons = document.querySelectorAll('.mood-btn');
    const submitButton = document.getElementById('submitCheckin');
    let selectedMood = null;

    moodButtons.forEach(button => {
        button.addEventListener('click', function() {
            moodButtons.forEach(btn => btn.classList.remove('selected'));
            this.classList.add('selected');
            selectedMood = this.dataset.mood;
        });
    });

    submitButton.addEventListener('click', () => {
        const notes = document.getElementById('dailyNotes').value.trim();
        const messageEl = document.getElementById('checkinMessage');

        if (!selectedMood) {
            messageEl.textContent = 'Please select how you are feeling today.';
            messageEl.style.backgroundColor = 'rgba(220, 53, 69, 0.2)';
            messageEl.style.color = 'var(--color-error)';
            return;
        }

        // Mock logging
        const today = new Date().toISOString().slice(0, 10);
        MOCK_USER_DATA.moodLogs.push({ date: today, mood: selectedMood, notes: notes || '(No notes provided)' });
        
        messageEl.textContent = `Success! Logged mood: ${selectedMood}. Thank you for checking in.`;
        messageEl.style.backgroundColor = 'rgba(40, 167, 69, 0.2)';
        messageEl.style.color = 'var(--color-success)';
        
        document.getElementById('dailyNotes').value = '';
        moodButtons.forEach(btn => btn.classList.remove('selected'));
        selectedMood = null;
        updateHealthSnapshot();
    });
}

function updateHealthSnapshot() {
    const logs = MOCK_USER_DATA.moodLogs;
    
    // Compliance (Example: 5/7 days logged in the last 7 entries)
    const compliance = Math.min(100, (logs.length / 7) * 100);
    document.getElementById('complianceRate').textContent = `${Math.round(compliance)}%`;

    // Last Mood Log
    if (logs.length > 0) {
        const lastMood = logs[logs.length - 1].mood;
        document.getElementById('lastMood').textContent = lastMood;
    } else {
        document.getElementById('lastMood').textContent = 'N/A';
    }
}

function renderRecommendationsDashboard() {
    const recList = document.getElementById('recList');
    if (!recList) return;
    
    // Showing top 2 recommendations from the general list for the dashboard
    const displayRecs = MOCK_USER_DATA.recommendations.slice(0, 2);
    
    recList.innerHTML = displayRecs.map(rec => `
        <article class="tip-card">
            <h4>${rec.title}</h4>
            <p>A personalized suggestion based on your recent activity.</p>
            <span class="tip-source">${rec.source}</span>
        </article>
    `).join('');

    if (displayRecs.length === 0) {
        recList.innerHTML = '<p style="color: var(--color-text-muted);">No personalized recommendations available right now.</p>';
    }
}

// --- Profile Logic ---
function initializeProfile() {
    populateProfileData();
    renderMoodChart();
}

function populateProfileData() {
    document.getElementById('profUserId').textContent = MOCK_USER_DATA.id;
    document.getElementById('profName').textContent = MOCK_USER_DATA.name;
    document.getElementById('profEmail').textContent = MOCK_USER_DATA.email;
    document.getElementById('profAge').textContent = MOCK_USER_DATA.age;
    document.getElementById('profHeight').textContent = MOCK_USER_DATA.height;
    document.getElementById('profWeight').textContent = MOCK_USER_DATA.weight;
    document.getElementById('profOccupation').textContent = MOCK_USER_DATA.occupation;
}

function renderMoodChart() {
    const ctx = document.getElementById('moodChart').getContext('2d');
    
    // Prepare data for the last 7 days
    const recentLogs = MOCK_USER_DATA.moodLogs.slice(-7);
    const labels = recentLogs.map(log => log.date.substring(5)); // MM-DD
    
    // Map moods to numerical values for simple charting (for visualization purposes)
    const moodMap = { 'Energetic': 4, 'Neutral': 3, 'Tired': 2, 'Stressed': 1 };
    const dataValues = recentLogs.map(log => moodMap[log.mood] || 0);

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Mental State Score (1=Low, 4=High)',
                data: dataValues,
                backgroundColor: 'rgba(0, 123, 255, 0.5)',
                borderColor: 'rgba(0, 123, 255, 1)',
                borderWidth: 2,
                tension: 0.3,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 4.5,
                    ticks: { color: 'var(--color-text-muted)' }
                },
                x: {
                    ticks: { color: 'var(--color-text-muted)' }
                }
            },
            plugins: {
                legend: { display: false },
                title: { display: false }
            }
        }
    });
}

// --- Tips & Products Logic ---
function initializeTipsPage() {
    renderTips();
    renderProductList();
    setupMpesaModal();
}

function renderTips() {
    const tipContainer = document.getElementById('tipContainer');
    if (!tipContainer) return;

    // Clear default tip and render all AI tips
    tipContainer.innerHTML = MOCK_USER_DATA.recommendations.map(rec => `
        <article class="tip-card">
            <h4>${rec.title}</h4>
            <p>This tip is generated based on your profile data indicating a need for ${rec.source.includes('Mental') ? 'mental balance' : 'physical activity/rest'}. Focus on incorporating this today.</p>
            <span class="tip-source">${rec.source}</span>
        </article>
    `).join('');

    if (MOCK_USER_DATA.recommendations.length === 0) {
        tipContainer.innerHTML = '<p style="color: var(--color-text-muted);">No new AI tips available. Check back later!</p>';
    }
}

function renderProductList() {
    const productList = document.getElementById('productList');
    if (!productList) return;

    productList.innerHTML = MOCK_PRODUCTS.map(product => `
        <div class="product-card" data-id="${product.id}">
            <img src="${product.img}" alt="${product.name}">
            <h4>${product.name}</h4>
            <p class="price">KSh ${product.price.toLocaleString()}</p>
            <p class="description">${product.desc}</p>
            <button class="buy-button" data-product-id="${product.id}" data-product-name="${product.name}" data-product-price="${product.price}">Purchase via Mpesa</button>
        </div>
    `).join('');
}

function setupMpesaModal() {
    const modal = document.getElementById('mpesaModal');
    const closeBtn = document.querySelector('.close-button');
    const buyButtons = document.querySelectorAll('.buy-button');
    const confirmBtn = document.getElementById('confirmMpesaPayment');
    const phoneInput = document.getElementById('mpesaPhone');
    const statusEl = document.getElementById('paymentStatus');
    
    let currentProductId = null;

    // Open Modal
    buyButtons.forEach(button => {
        button.addEventListener('click', function() {
            currentProductId = this.dataset.productId;
            const name = this.dataset.productName;
            const price = this.dataset.productPrice;

            document.getElementById('modalProductName').textContent = name;
            document.getElementById('modalPrice').textContent = `KSh ${parseInt(price).toLocaleString()}`;
            phoneInput.value = '';
            statusEl.textContent = '';
            modal.style.display = 'block';
        });
    });

    // Close Modal
    closeBtn.onclick = () => modal.style.display = 'none';
    window.onclick = (event) => {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    };

    // Handle Payment
    confirmBtn.addEventListener('click', () => {
        const phone = phoneInput.value.trim();
        
        if (!/^0[71][0-9]{8}$/.test(phone)) { // Basic Kenyan mobile number check
            statusEl.textContent = 'Please enter a valid 10-digit Mpesa phone number starting with 07 or 01.';
            statusEl.style.backgroundColor = 'rgba(220, 53, 69, 0.2)';
            statusEl.style.color = 'var(--color-error)';
            return;
        }

        statusEl.textContent = 'Sending payment request via Mpesa API...';
        statusEl.style.backgroundColor = 'rgba(255, 140, 0, 0.2)';
        statusEl.style.color = '#ff8c00';

        // --- Mock API Call ---
        setTimeout(() => {
            // Success Simulation
            const productName = document.getElementById('modalProductName').textContent;
            statusEl.textContent = `Successfully initiated Mpesa payment for ${productName}. Check your phone for confirmation.`;
            statusEl.style.backgroundColor = 'rgba(40, 167, 69, 0.2)';
            statusEl.style.color = 'var(--color-success)';
            phoneInput.value = '';
            
            // Close after success message display
            setTimeout(() => { modal.style.display = 'none'; }, 3000);

        }, 2000);
    });
}

// --- Admin Logic ---
function initializeAdminPanel() {
    // Mock population for admin view
    populateAdminUserList();
    
    // Setup form listeners
    document.getElementById('broadcastForm').addEventListener('submit', handleBroadcastSubmit);
    document.getElementById('productForm').addEventListener('submit', handleProductSubmit);
}

function populateAdminUserList() {
    const userListEl = document.getElementById('userList');
    if (!userListEl) return;
    
    // Mock users (simulating data retrieved from a DB)
    const mockAdmins = [
        { name: 'John Smith', email: 'john@mail.com', status: 'Active' },
        { name: 'Alice Johnson', email: 'alice@mail.com', status: 'Inactive' },
        { name: 'Robert Brown', email: 'rob@mail.com', status: 'Active' },
        { name: 'Emily Davis', email: 'emily@mail.com', status: 'Active' }
    ];

    userListEl.innerHTML = mockAdmins.map(user => `
        <li class="user-item">
            <span>${user.name} (${user.email})</span>
            <span class="user-status ${user.status.toLowerCase()}">${user.status}</span>
        </li>
    `).join('');
}

function handleBroadcastSubmit(e) {
    e.preventDefault();
    const type = document.getElementById('broadcastType').value;
    const title = document.getElementById('broadcastTitle').value;
    const content = document.getElementById('broadcastContent').value;
    
    // Simulate sending to backend/notification service
    console.log(`Admin Broadcast: Type=${type}, Title=${title}, Content=${content}`);

    showMessage('broadcastMessage', `Successfully queued ${type} broadcast: "${title}"`, false);
    document.getElementById('broadcastForm').reset();
}

function handleProductSubmit(e) {
    e.preventDefault();
    const name = document.getElementById('productName').value;
    const price = parseInt(document.getElementById('productPrice').value);
    const desc = document.getElementById('productDesc').value;
    const image = document.getElementById('productImage').value;

    // Mock adding new product
    const newProduct = {
        id: 'P' + (1000 + MOCK_PRODUCTS.length),
        name: name,
        price: price,
        desc: desc,
        img: image
    };
    MOCK_PRODUCTS.push(newProduct);

    console.log('New Product Added:', newProduct);
    showMessage('productMessage', `Product "${name}" added successfully! It is now available for recommendation.`, false);
    document.getElementById('productForm').reset();

    // If navigated to tips page, re-render product list (Though this is complex without routing, we log it)
    if (getActivePage() === 'tips') {
        renderProductList();
    }
}

// --- APK Compilation Instructions --- 
// The request asks for APK instructions, which cannot be executed in a web environment. 
// Providing instructions as a console log/comment is the best simulation.

console.log("\n--- MOCK APK Compilation Instructions for Android Project ---\n");
console.log("NOTE: This code structure represents the frontend (HTML/CSS/JS) mock-up. A real Android application requires a native framework (like React Native, Flutter, or native Android/Java/Kotlin) to handle push notifications, Mpesa integration, and true APK compilation.\n");
console.log("If this were a standard Android Studio project (Java/Kotlin):");
console.log("1. Ensure Android SDK and NDK are installed in Android Studio.");
console.log("2. Open the project in Android Studio.");
console.log("3. Go to Build > Generate Signed Bundle / APK.");
console.log("4. Select APK and follow the wizard to create a Keystore if you don't have one.");
console.log("5. Choose 'release' build variant.");
console.log("6. Click Finish. The signed APK will be generated in the 'app/release' directory.");