{% extends "base.html" %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body text-center">
                <h1 class="display-4">CCTV Integrity Monitor</h1>
                <p class="lead">Monitor and validate your CCTV footage with blockchain-level security</p>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="bi bi-camera-video display-4 text-primary mb-3"></i>
                <h3>Control Panel</h3>
                <p>Start and stop the file watcher, monitor system status, and view live logs.</p>
                <a href="/control" class="btn btn-primary">
                    <i class="bi bi-gear"></i> Open Control Panel
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="bi bi-list-ul display-4 text-success mb-3"></i>
                <h3>Activity Logs</h3>
                <p>View detailed logs of file events, metadata changes, and integrity checks.</p>
                <a href="/logs" class="btn btn-success">
                    <i class="bi bi-journal-text"></i> View Logs
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="bi bi-shield-check display-4 text-info mb-3"></i>
                <h3>File Validation</h3>
                <p>Upload and validate video files to ensure their integrity.</p>
                <a href="/validate" class="btn btn-info text-white">
                    <i class="bi bi-check-circle"></i> Validate Files
                </a>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">System Status</h5>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span>Watcher Status:</span>
                    <span id="watcher-status" class="badge bg-secondary">Unknown</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span>Files Monitored:</span>
                    <span id="files-count" class="badge bg-primary">0</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <span>Watch Directory:</span>
                    <code id="watch-dir" class="text-muted">/path/to/watch</code>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Recent Events</h5>
            </div>
            <div class="card-body">
                <div id="recent-events" style="height: 150px; overflow-y: auto;">
                    <div class="text-center text-muted">
                        <i class="bi bi-clock"></i> Waiting for events...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        // Update system status
        function updateStatus() {
            $.get('/api/watcher/status', function(data) {
                $('#watcher-status')
                    .removeClass('bg-success bg-danger bg-secondary')
                    .addClass(data.running ? 'bg-success' : 'bg-danger')
                    .text(data.running ? 'Running' : 'Stopped');
                $('#watch-dir').text(data.watch_directory);
            });

            $.get('/api/logs?page=1&type=all', function(data) {
                $('#files-count').text(data.total);
                
                if (data.logs && data.logs.length > 0) {
                    const recentEvents = $('#recent-events');
                    recentEvents.empty();
                    
                    data.logs.slice(0, 5).forEach(log => {
                        const eventClass = log.event_type === 'file_created' ? 'text-success' :
                                         log.event_type === 'file_modified' ? 'text-warning' :
                                         log.event_type === 'file_deleted' ? 'text-danger' : 'text-info';
                        
                        recentEvents.append(`
                            <div class="mb-2">
                                <small class="text-muted">${new Date(log.timestamp * 1000).toLocaleString()}</small>
                                <br>
                                <span class="${eventClass}">${log.event_type}</span>: ${log.filename}
                            </div>
                        `);
                    });
                }
            });
        }

        // WebSocket connection for live updates
        const socket = io();
        socket.on('log', function(data) {
            const recentEvents = $('#recent-events');
            recentEvents.prepend(`
                <div class="mb-2">
                    <small class="text-muted">${data.timestamp}</small>
                    <br>
                    <span class="text-info">${data.message}</span>
                </div>
            `);
            
            // Keep only the last 5 events
            if (recentEvents.children().length > 5) {
                recentEvents.children().last().remove();
            }
        });

        // Initial status update
        updateStatus();
        
        // Update status every 30 seconds
        setInterval(updateStatus, 30000);
    });
</script>
{% endblock %}