{% extends "base.html" %}

{% block content %}
<!-- Loading Overlay -->
<div id="loading-overlay" class="loading-overlay">
    <div class="loading-content">
        <div class="spinner"></div>
        <h3>Generating Report...</h3>
        <p>AI summarization may take a few moments.</p>
    </div>
</div>

<div class="dashboard">
    <!-- Add Log Entry Form -->
    <div class="card compact-form {% if report %}collapsed{% endif %}">
        <div class="card-header" onclick="toggleCard(this)">
            <h2 id="form-title">📝 Add Work Log</h2>
            <span class="toggle-icon">▼</span>
        </div>
        <div class="card-content">
            <form id="logForm">
                <input type="hidden" id="logId" name="logId" value="">
            <div class="form-row">
                <div class="form-group col-half">
                    <label for="project">Project Name</label>
                    <input type="text" id="project" name="project" list="projectList" placeholder="Misc (Optional)">
                    <datalist id="projectList">
                        {% for proj in projects %}
                        <option value="{{ proj }}">
                        {% endfor %}
                    </datalist>
                </div>
                
                <div class="form-group col-half">
                    <label for="date">Date</label>
                    <input type="date" id="date" name="date" value="{{ today }}">
                </div>
            </div>
            
            <div class="form-group">
                <label for="description">Description *</label>
                <textarea id="description" name="description" rows="2" required></textarea>
            </div>
            
                <div class="form-actions">
                    <button type="submit" id="submitBtn" class="btn btn-primary">Add Log Entry</button>
                    <button type="button" id="cancelBtn" class="btn btn-secondary" style="display:none;" onclick="resetForm()">Cancel</button>
                </div>
            </form>
            <div id="message" class="message"></div>
        </div>
    </div>
    
    <!-- Reports Section -->
    <div class="card {% if not report %}collapsed{% endif %}">
        <div class="card-header" onclick="toggleCard(this)">
            <h2>📈 Generate Reports</h2>
            <span class="toggle-icon">▼</span>
        </div>
        <div class="card-content">
            <div class="report-buttons">
                <a href="{{ url_for('report', mode='weekly') }}" class="btn btn-secondary" onclick="showLoading()">Weekly Report</a>
                <a href="{{ url_for('report', mode='biweekly') }}" class="btn btn-secondary" onclick="showLoading()">Bi-weekly Report</a>
                <a href="{{ url_for('report', mode='monthly') }}" class="btn btn-secondary" onclick="showLoading()">Monthly Report</a>
            </div>
            
            {% if report %}
            <div class="report-output">
                <h3>{{ report_mode|title }} Report</h3>
                <div class="report-content">
                    {{ report|safe }}
                </div>
                {% if report_text %}
                <pre id="report-text" style="display:none;">{{ report_text }}</pre>
                <button onclick="copyReport()" class="btn btn-secondary">Copy to Clipboard</button>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
    
    <!-- Recent Logs -->
    <div class="card collapsed">
        <div class="card-header" onclick="toggleCard(this)">
            <h2>📋 Recent Logs</h2>
            <span class="toggle-icon">▼</span>
        </div>
        <div class="card-content">
            {% if logs %}
            <div class="table-responsive">
                <table class="logs-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Date</th>
                            <th>Project</th>
                            <th>Description</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for log in logs %}
                        <tr id="log-{{ log.id }}">
                        <td>{{ log.id }}</td>
                        <td>{{ log.date.strftime('%Y-%m-%d') }}</td>
                        <td><span class="badge">{{ log.project }}</span></td>
                        <td>{{ log.description }}</td>
                        <td class="actions-cell">
                            <button onclick='editLog({{ log.id }}, "{{ log.project }}", {{ log.description|tojson }}, "{{ log.date.strftime("%Y-%m-%d") }}")' class="btn-edit">Edit</button>
                            <button onclick="deleteLog({{ log.id }})" class="btn-delete">Delete</button>
                        </td>
                    </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <p class="info-text">Showing {{ logs|length }} of {{ total_logs }} total logs</p>
            {% else %}
            <p class="empty-state">No logs found. Add your first log entry above!</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function toggleCard(header) {
    const card = header.parentElement;
    card.classList.toggle('collapsed');
}

// Handle form submission
document.getElementById('logForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    const messageDiv = document.getElementById('message');
    const logId = document.getElementById('logId').value;
    
    const url = logId ? `/update_log/${logId}` : '/add_log';
    
    try {
        const response = await fetch(url, {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            messageDiv.className = 'message success';
            messageDiv.textContent = '✓ ' + result.message;
            if (!logId) {
                e.target.reset();
                // Reset date to today if it was cleared
                if (!document.getElementById('date').value) {
                     document.getElementById('date').valueAsDate = new Date();
                }
            } else {
                resetForm();
            }
            
            // Reload page after 1 second
            setTimeout(() => location.reload(), 1000);
        } else {
            messageDiv.className = 'message error';
            messageDiv.textContent = '✗ ' + result.error;
        }
    } catch (error) {
        messageDiv.className = 'message error';
        messageDiv.textContent = '✗ Error saving log entry';
    }
});

function editLog(id, project, description, date) {
    document.getElementById('form-title').textContent = '✏️ Edit Work Log';
    document.getElementById('logId').value = id;
    document.getElementById('project').value = project;
    document.getElementById('description').value = description;
    document.getElementById('date').value = date;
    
    document.getElementById('submitBtn').textContent = 'Update Log Entry';
    document.getElementById('cancelBtn').style.display = 'inline-block';
    
    // Scroll to top
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

function resetForm() {
    document.getElementById('logForm').reset();
    document.getElementById('form-title').textContent = '📝 Add Work Log';
    document.getElementById('logId').value = '';
    document.getElementById('submitBtn').textContent = 'Add Log Entry';
    document.getElementById('cancelBtn').style.display = 'none';
    
    // Set date to today
    const today = new Date();
    const formattedDate = today.toISOString().split('T')[0];
    document.getElementById('date').value = formattedDate;
}

// Delete log function
async function deleteLog(logId) {
    if (!confirm('Are you sure you want to delete this log entry?')) {
        return;
    }
    
    try {
        const response = await fetch(`/delete_log/${logId}`, {
            method: 'POST'
        });
        
        const result = await response.json();
        
        if (result.success) {
            document.getElementById(`log-${logId}`).remove();
        } else {
            alert('Error deleting log entry');
        }
    } catch (error) {
        alert('Error deleting log entry');
    }
}

// Copy report to clipboard
function copyReport() {
    const reportText = document.getElementById('report-text').textContent;
    
    navigator.clipboard.writeText(reportText).then(() => {
        alert('Report copied to clipboard!');
    }).catch(err => {
        console.error('Failed to copy:', err);
    });
}

function showLoading() {
    const overlay = document.getElementById('loading-overlay');
    overlay.style.display = 'flex';
    
    // Timeout after 300 seconds (5 minutes) to allow for parallel AI processing
    setTimeout(() => {
        if (overlay.style.display === 'flex') {
            overlay.style.display = 'none';
            alert('Report generation timed out. The process may have taken too long. Please check the logs.');
        }
    }, 300000);
}
</script>
{% endblock %}