{% extends "base.html" %}

{% block page_title %}Dashboard{% endblock %}

{% block content %}
<div class="dashboard-container">
    <!-- Stats Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">👥</div>
            <div class="stat-content">
                <div class="stat-label">Total Persons</div>
                <div class="stat-value" id="totalPersons">0</div>
                <div class="stat-subtitle">Registered users</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">🎭</div>
            <div class="stat-content">
                <div class="stat-label">Face Embeddings</div>
                <div class="stat-value" id="totalEmbeddings">0</div>
                <div class="stat-subtitle">Trained faces</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">✅</div>
            <div class="stat-content">
                <div class="stat-label">Present Today</div>
                <div class="stat-value" id="presentToday">0</div>
                <div class="stat-subtitle">{{ now }}</div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="quick-actions">
        <h2>Quick Actions</h2>
        <div class="actions-grid">
            <a href="/register" class="action-button action-primary">
                <span class="action-icon">➕</span>
                <span class="action-text">Add New Person</span>
            </a>
            <button class="action-button action-secondary" onclick="startAttendance()">
                <span class="action-icon">▶️</span>
                <span class="action-text">Start Attendance</span>
            </button>
            <a href="/attendance" class="action-button action-secondary">
                <span class="action-icon">📊</span>
                <span class="action-text">View Records</span>
            </a>
            <button class="action-button action-secondary" onclick="exportData()">
                <span class="action-icon">📥</span>
                <span class="action-text">Export Data</span>
            </button>
        </div>
    </div>

    <!-- Camera Feed (shown when attendance is running) -->
    <div id="cameraSection" class="section" style="display: none;">
        <div class="section-header">
            <h2>📹 Live Camera Feed</h2>
            <button class="link-text" onclick="stopAttendance()" style="color: #EF4444; cursor: pointer;">Stop
                ⏹️</button>
        </div>
        <div style="width: 100%; display: flex; justify-content: center; margin-bottom: 1.5rem;">
            <video id="webcamVideo" autoplay playsinline style="display:none;"></video>
            <canvas id="captureCanvas" style="display:none;"></canvas>
            <img id="cameraFeed" src="" alt="Camera Feed"
                style="width: 100%; max-width: 640px; border-radius: 8px; border: 2px solid #0F766E; background: #000; height: auto;">
        </div>
        <div style="text-align: center; padding: 1rem; background: #f0f9f8; border-radius: 8px;">
            <div style="color: #0F766E; font-size: 14px;">🔍 Detecting faces in real-time...</div>
            <div style="color: #666; font-size: 12px; margin-top: 0.5rem;">Recognized faces: <span
                    id="recognizedCount">0</span></div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="section">
        <div class="section-header">
            <h2>Recent Attendance</h2>
            <a href="/attendance" class="link-text">View All →</a>
        </div>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Date</th>
                        <th>Time</th>
                        <th>Distance</th>
                    </tr>
                </thead>
                <tbody id="recentAttendanceTable">
                    <tr>
                        <td colspan="4" class="text-center text-muted">Loading...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- System Info -->
    <div class="section">
        <h2>System Information</h2>
        <div class="info-grid">
            <div class="info-item">
                <div class="info-label">Camera Status</div>
                <div class="info-value">
                    <span class="badge badge-success">Connected</span>
                </div>
            </div>
            <div class="info-item">
                <div class="info-label">Model Status</div>
                <div class="info-value">
                    <span class="badge badge-success">Loaded</span>
                </div>
            </div>
            <div class="info-item">
                <div class="info-label">Database</div>
                <div class="info-value">
                    <span class="badge badge-success">Active</span>
                </div>
            </div>
            <div class="info-item">
                <div class="info-label">API Status</div>
                <div class="info-value">
                    <span class="badge badge-success">Running</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Load dashboard data on page load
    document.addEventListener('DOMContentLoaded', function () {
        loadDashboardData();
        // Refresh data every 5 seconds
        window.dashboardInterval = setInterval(loadDashboardData, 5000);
    });

    function loadDashboardData() {
        fetch('/api/stats')
            .then(response => response.json())
            .then(data => {
                document.getElementById('totalPersons').textContent = data.total_persons;
                document.getElementById('totalEmbeddings').textContent = data.total_embeddings;
                document.getElementById('presentToday').textContent = data.present_today;
                updateSystemStatus(data.system_status);

                // Show camera if attendance is running
                if (data.system_status === 'running') {
                    document.getElementById('cameraSection').style.display = 'block';
                } else {
                    document.getElementById('cameraSection').style.display = 'none';
                }
            })
            .catch(error => console.error('Error loading stats:', error));

        // Get live recognized faces count
        fetch('/api/attendance/status')
            .then(response => response.json())
            .then(data => {
                console.log('Attendance status:', data);  // Debug log
                document.getElementById('recognizedCount').textContent = data.recognized_faces || 0;
            })
            .catch(error => console.error('Error loading attendance status:', error));

        fetch('/api/recent-attendance?days=7')
            .then(response => response.json())
            .then(data => {
                const tbody = document.getElementById('recentAttendanceTable');
                if (data.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted">No records yet</td></tr>';
                    return;
                }
                tbody.innerHTML = data.map(record => `
                    <tr>
                        <td>${record.name}</td>
                        <td>${record.date}</td>
                        <td>${record.time}</td>
                        <td>${record.distance}</td>
                    </tr>
                `).join('');
            })
            .catch(error => console.error('Error loading attendance:', error));
    }

    function updateSystemStatus(status) {
        const indicator = document.getElementById('statusIndicator');
        const value = document.getElementById('statusValue');

        if (status === 'running') {
            indicator.className = 'status-indicator active';
            value.textContent = 'Running';
        } else {
            indicator.className = 'status-indicator';
            value.textContent = 'Idle';
        }
    }

    let webcamStream = null;
    let processFrameInterval = null;
    let isProcessing = false;

    async function startWebcam() {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 } });
            const video = document.getElementById('webcamVideo');
            video.srcObject = stream;
            webcamStream = stream;
            
            processFrameInterval = setInterval(processFrame, 150); // ~6.6 FPS
        } catch (err) {
            console.error("Error accessing webcam:", err);
            showToast("Could not access webcam. Please allow permissions.", "error");
            stopAttendance();
        }
    }

    function stopWebcam() {
        if (processFrameInterval) clearInterval(processFrameInterval);
        if (webcamStream) {
            webcamStream.getTracks().forEach(track => track.stop());
        }
        webcamStream = null;
        document.getElementById('cameraFeed').src = "";
        isProcessing = false;
    }

    function processFrame() {
        if (isProcessing) return;
        const video = document.getElementById('webcamVideo');
        const canvas = document.getElementById('captureCanvas');
        if (!video.videoWidth) return;
        
        isProcessing = true;
        
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        const ctx = canvas.getContext('2d');
        // Flip horizontally to match a mirror
        ctx.translate(canvas.width, 0);
        ctx.scale(-1, 1);
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        
        const base64Image = canvas.toDataURL('image/jpeg', 0.7);
        
        fetch('/api/frame/process', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ image: base64Image })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success && data.image) {
                document.getElementById('cameraFeed').src = data.image;
                document.getElementById('recognizedCount').textContent = data.recognized || 0;
            }
        })
        .catch(err => console.error("Error processing frame:", err))
        .finally(() => {
            isProcessing = false;
        });
    }

    function startAttendance() {
        if (confirm('Start attendance tracking? The system will request access to your web camera.')) {
            fetch('/api/attendance/start', { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast(data.message, 'success');
                        // Show camera feed section
                        document.getElementById('cameraSection').style.display = 'block';
                        startWebcam(); // Start the browser camera
                        loadDashboardData();
                        // Refresh data more frequently during attendance
                        if (window.dashboardInterval) clearInterval(window.dashboardInterval);
                        window.dashboardInterval = setInterval(loadDashboardData, 3000);
                    } else {
                        showToast(data.message, 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showToast('Failed to start attendance', 'error');
                });
        }
    }

    function stopAttendance() {
        if (confirm('Stop attendance tracking?')) {
            fetch('/api/attendance/stop', { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast(data.message, 'success');
                        // Hide camera feed section
                        document.getElementById('cameraSection').style.display = 'none';
                        stopWebcam(); // Stop browser camera
                        loadDashboardData();
                        // Reset to normal refresh rate
                        if (window.dashboardInterval) clearInterval(window.dashboardInterval);
                        window.dashboardInterval = setInterval(loadDashboardData, 5000);
                    } else {
                        showToast(data.message, 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showToast('Failed to stop attendance', 'error');
                });
        }
    }

    function exportData() {
        const format = prompt('Export format? (csv/json)', 'csv');
        if (format) {
            window.location.href = `/api/export/${format}`;
            showToast('Download started', 'success');
        }
    }
</script>
{% endblock %}