{% extends "base.html" %}

{% block title %}Settings - FastRep{% endblock %}

{% block content %}
<div class="settings-page">
    <div class="card">
        <h2>⚙️ Settings</h2>

        <div class="settings-section">
            <h3>Appearance</h3>
            <p class="info-text">
                Choose your preferred theme.
            </p>
            <div class="theme-toggle">
                <button onclick="setTheme('light')" class="btn btn-secondary">☀️ Light</button>
                <button onclick="setTheme('dark')" class="btn btn-secondary">🌙 Dark</button>
                <button onclick="setTheme('system')" class="btn btn-secondary">💻 System</button>
            </div>
            <p id="current-theme-text" class="info-text">Current theme: System</p>
        </div>

        <div class="settings-section">
            <h3>AI Summarization</h3>
            <p class="info-text">
                Automatically summarize project logs in monthly reports using Cline CLI.
            </p>
            
            <div id="ai-status" class="status-indicator">
                Checking availability...
            </div>
            
            <div class="toggle-container" style="margin-top: 1rem;">
                <label class="switch">
                    <input type="checkbox" id="ai-toggle" onchange="toggleAiSummary()">
                    <span class="slider round"></span>
                </label>
                <span id="ai-toggle-label">Enable Monthly Summaries</span>
            </div>
            
            <div class="form-group" style="margin-top: 1rem;">
                <label for="ai-points">Number of Summary Points</label>
                <input type="text" id="ai-points" placeholder="e.g. 3-5" onchange="updateAiSettings()" style="width: 200px;">
                <p class="info-text" style="margin-top: 0.25rem;">Specify a range (e.g. "3-5") or a fixed number (e.g. "5").</p>
            </div>

            <div class="form-group" style="margin-top: 1rem;">
                <label for="ai-timeout">Timeout (seconds)</label>
                <input type="number" id="ai-timeout" placeholder="120" onchange="updateAiSettings()" style="width: 200px;">
                <p class="info-text" style="margin-top: 0.25rem;">Maximum time to wait for AI response per project.</p>
            </div>
        </div>

        <div class="settings-section">
            <h3>Preferences</h3>
            
            <div class="form-group">
                <label for="recent-limit">Recent Logs Limit</label>
                <input type="number" id="recent-limit" placeholder="20" onchange="updatePreferences()" style="width: 200px;">
                <p class="info-text" style="margin-top: 0.25rem;">Number of recent logs to display on dashboard.</p>
            </div>
            
            <div class="toggle-container">
                <label class="switch">
                    <input type="checkbox" id="auto-browser" onchange="updatePreferences()">
                    <span class="slider round"></span>
                </label>
                <span>Auto-open Browser on Startup</span>
            </div>
        </div>
        
        <div class="settings-section">
            <h3>Database Management</h3>
            <p class="info-text">
                ⚠️ Warning: Clearing the database will permanently delete all log entries. This action cannot be undone.
            </p>
            
            <button onclick="clearDatabase()" class="btn btn-danger">Clear All Data</button>
        </div>
        
        <div class="settings-section">
            <h3>Database Location</h3>
            <p class="info-text">
                Your logs are stored in: <code>~/.fastrep/fastrep.db</code>
            </p>
        </div>
        
        <div class="settings-section">
            <h3>CLI Access</h3>
            <p class="info-text">
                You can also manage your logs using the command line:
            </p>
            <pre><code>fastrep log -p "Project Name" -d "Description"
fastrep view --mode weekly
fastrep list
fastrep delete --id 1</code></pre>
        </div>
        
        <div class="settings-section">
            <h3>About</h3>
            <p class="info-text">
                FastRep v2.0.2<br>
                A simple work log manager for tracking daily activities and generating reports.<br>
                <a href="https://github.com/hissain/fastrep" target="_blank">GitHub Repository</a>
            </p>
        </div>
    </div>
    
    <div class="card">
        <a href="{{ url_for('index') }}" class="btn btn-secondary">← Back to Home</a>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Theme settings
function updateThemeText() {
    const theme = localStorage.getItem('theme') || 'system';
    const text = theme.charAt(0).toUpperCase() + theme.slice(1);
    document.getElementById('current-theme-text').textContent = `Current theme: ${text}`;
}

function setTheme(theme) {
    if (theme === 'system') {
        localStorage.removeItem('theme');
        delete document.documentElement.dataset.theme;
        // Re-apply system preference check if needed, but removing dataset.theme usually falls back to default CSS
        // However, if we want to support system preference in CSS, we need media queries or JS detection.
        // My CSS uses [data-theme="dark"], so removing it reverts to light.
        // To support system dark mode properly, I should check window.matchMedia.
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
             document.documentElement.dataset.theme = 'dark';
        }
    } else {
        localStorage.setItem('theme', theme);
        document.documentElement.dataset.theme = theme;
    }
    updateThemeText();
}

// Initialize text
updateThemeText();

// AI Settings
async function loadAiSettings() {
    try {
        const response = await fetch('/api/settings');
        const settings = await response.json();
        
        const statusDiv = document.getElementById('ai-status');
        const toggle = document.getElementById('ai-toggle');
        
        if (settings.cline_available) {
            statusDiv.innerHTML = '✅ Cline CLI detected';
            statusDiv.className = 'status-indicator success';
            toggle.disabled = false;
        } else {
            statusDiv.innerHTML = '❌ Cline CLI not found';
            statusDiv.className = 'status-indicator error';
            toggle.disabled = true;
        }
        
        toggle.checked = settings.ai_summary_enabled;
        if (settings.ai_summary_points) {
            document.getElementById('ai-points').value = settings.ai_summary_points;
        }
        if (settings.ai_timeout) {
            document.getElementById('ai-timeout').value = settings.ai_timeout;
        }
        
        // Preferences
        if (settings.recent_logs_limit) {
            document.getElementById('recent-limit').value = settings.recent_logs_limit;
        }
        document.getElementById('auto-browser').checked = settings.auto_open_browser;
        
    } catch (error) {
        console.error('Error loading settings:', error);
    }
}

async function updatePreferences() {
    const limit = document.getElementById('recent-limit').value;
    const autoBrowser = document.getElementById('auto-browser').checked;
    
    try {
        await fetch('/api/settings', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ 
                recent_logs_limit: limit,
                auto_open_browser: autoBrowser
            })
        });
    } catch (error) {
        console.error('Error updating preferences:', error);
    }
}

async function toggleAiSummary() {
    const toggle = document.getElementById('ai-toggle');
    try {
        await fetch('/api/settings', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ ai_summary_enabled: toggle.checked })
        });
    } catch (error) {
        console.error('Error updating settings:', error);
        toggle.checked = !toggle.checked; // Revert on error
    }
}

async function updateAiSettings() {
    const points = document.getElementById('ai-points').value;
    const timeout = document.getElementById('ai-timeout').value;
    try {
        await fetch('/api/settings', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ 
                ai_summary_points: points,
                ai_timeout: timeout 
            })
        });
    } catch (error) {
        console.error('Error updating settings:', error);
    }
}

// Load settings on page load
loadAiSettings();

async function clearDatabase() {
    const confirmed = confirm(
        '⚠️ Are you absolutely sure you want to delete ALL log entries?\n\n' +
        'This action cannot be undone!'
    );
    
    if (!confirmed) {
        return;
    }
    
    const doubleCheck = confirm(
        'This is your last chance!\n\n' +
        'Click OK to permanently delete all data.'
    );
    
    if (!doubleCheck) {
        return;
    }
    
    try {
        const response = await fetch('/clear_all', {
            method: 'POST'
        });
        
        const result = await response.json();
        
        if (result.success) {
            alert('✓ All data has been cleared successfully.');
            window.location.href = '/';
        } else {
            alert('✗ Error clearing database');
        }
    } catch (error) {
        alert('✗ Error clearing database');
    }
}
</script>
{% endblock %}