{% extends "layout.html" %}
{% block content %}
<div style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start;">

    <!-- Left Column: Log Entries -->
    <div style="flex: 1; min-width: 300px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
            <h2 style="margin: 0;">Logbook</h2>
        </div>

        <!-- Search Bar -->
        <div style="margin-bottom: 2rem;">
            <input type="text" id="logSearchInput" placeholder="Search logbook (Activity, Subcategory, Notes)..." onkeyup="filterLog()" 
                   style="background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%23999%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: 10px center; background-size: 16px; padding-left: 36px;">
        </div>

        {% if not log %}
            <p>No activities recorded yet.</p>
        {% else %}
            <div id="logbook-container">
            {% for entry in log %}
            <!-- Wrapped whole card in a link to the detail view -->
            <a href="{{ url_for('log_entry_detail', entry_id=entry._id) }}" class="log-entry-item" style="text-decoration: none; color: inherit; display: block;">
                <div class="card" style="border-left: 5px solid {{ entry.activity.color }}; transition: transform 0.1s;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <h3 style="margin: 0;" class="entry-title">
                                {{ entry.activity.name }}
                                {% if entry.subcategory %}
                                    <span class="entry-subcat" style="font-size: 0.8rem; background: #eee; padding: 2px 8px; border-radius: 10px; color: #555; vertical-align: middle;">
                                        {{ entry.subcategory }}
                                    </span>
                                {% endif %}
                            </h3>
                            <small style="color: #666;">
                                {{ entry.start_time.strftime('%Y-%m-%d %H:%M') }} - {{ entry.end_time.strftime('%H:%M') }}
                            </small>
                            {% if entry.note %}
                                <p class="entry-note" style="margin: 5px 0; font-style: italic; color: #555;">"{{ entry.note }}"</p>
                            {% else %}
                                <span class="entry-note" style="display:none;"></span>
                            {% endif %}
                        </div>
                        <div style="font-weight: bold; font-size: 1.2rem;">
                            {{ entry.duration_str }}
                        </div>
                    </div>
                    
                    {% if entry.tasks %}
                    <div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee;">
                        <strong>Tasks Completed:</strong>
                        <ul style="margin: 5px 0; padding-left: 20px;">
                            {% for task in entry.tasks %}
                                <li>{{ task.name }} <small>({{ task.completed_at.strftime('%H:%M') if task.completed_at else 'Done' }})</small></li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                </div>
            </a>
            {% endfor %}
            </div>
        {% endif %}
    </div>

    <!-- Right Column: Statistics Sidebar -->
    <div style="flex: 0 0 350px; position: sticky; top: 100px; max-width: 100%;">
        <div class="card">
            <h3 style="margin-bottom: 1rem;">Time Distribution</h3>
            
            <!-- Total Hours Display -->
            <div style="text-align: center; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-dim);">
                <div style="font-size: 3rem; font-weight: 700; color: var(--text-primary); line-height: 1;">{{ total_time_display }}</div>
                <div style="font-size: 0.85rem; color: var(--text-secondary); margin-top: 5px;">Total Tracked</div>
            </div>

            <!-- Range Selector -->
            <div style="display: flex; gap: 5px; margin-bottom: 1.5rem; justify-content: center;">
                <a href="{{ url_for('logbook', range='24h') }}" class="btn" style="padding: 4px 10px; font-size: 0.8rem; {% if current_range != '24h' %}background: transparent; color: var(--text-secondary); border: 1px solid var(--border-dim);{% endif %}">24h</a>
                <a href="{{ url_for('logbook', range='week') }}" class="btn" style="padding: 4px 10px; font-size: 0.8rem; {% if current_range != 'week' %}background: transparent; color: var(--text-secondary); border: 1px solid var(--border-dim);{% endif %}">Week</a>
                <a href="{{ url_for('logbook', range='month') }}" class="btn" style="padding: 4px 10px; font-size: 0.8rem; {% if current_range != 'month' %}background: transparent; color: var(--text-secondary); border: 1px solid var(--border-dim);{% endif %}">Month</a>
                <a href="{{ url_for('logbook', range='year') }}" class="btn" style="padding: 4px 10px; font-size: 0.8rem; {% if current_range != 'year' %}background: transparent; color: var(--text-secondary); border: 1px solid var(--border-dim);{% endif %}">Year</a>
            </div>

            {% if chart_data.chart_values|sum > 0 %}
                <canvas id="timeChart" width="300" height="300"></canvas>
            {% else %}
                <p style="text-align: center; color: var(--text-secondary); padding: 2rem 0;">No data for this period.</p>
            {% endif %}
        </div>
    </div>

</div>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Search Functionality
    function filterLog() {
        const input = document.getElementById('logSearchInput');
        const filter = input.value.toLowerCase();
        const items = document.getElementsByClassName('log-entry-item');

        for (let i = 0; i < items.length; i++) {
            const title = items[i].querySelector('.entry-title').textContent || "";
            const note = items[i].querySelector('.entry-note').textContent || "";
            const subcat = items[i].querySelector('.entry-subcat') ? items[i].querySelector('.entry-subcat').textContent : "";
            const textValue = (title + " " + note + " " + subcat).toLowerCase();
            
            if (textValue.indexOf(filter) > -1) {
                items[i].style.display = "";
            } else {
                items[i].style.display = "none";
            }
        }
    }

    // Chart.js implementation
    {% if chart_data.chart_values|sum > 0 %}
    const ctx = document.getElementById('timeChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: {{ chart_data.labels|tojson }},
            datasets: [{
                data: {{ chart_data.chart_values|tojson }},
                backgroundColor: {{ chart_data.colors|tojson }},
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        boxWidth: 12,
                        font: { size: 11 }
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.label + ': ' + context.raw + ' hours';
                        }
                    }
                }
            }
        }
    });
    {% endif %}
</script>

<style>
    /* Small hover effect to indicate clickability */
    a .card:hover {
        transform: scale(1.01);
        box box: 0 4px 8px rgba(0,0,0,0.15);
    }
</style>
{% endblock %}