{% extends "base.html" %}

{% block title %}Dashboard - Dataskipper Boat{% endblock %}

{% block content %}
<div class="page-header">
    <div class="page-title-group">
        <h1>System Overview</h1>
        <span class="page-subtitle">{{ metrics.hostname }}</span>
    </div>
    <div class="header-actions">
        <span class="last-refresh" id="last-refresh">Updated just now</span>
        <button class="btn btn-sm btn-secondary" onclick="refreshAll()">
            <span class="btn-icon">↻</span> Refresh
        </button>
    </div>
</div>

<!-- Quick Status Summary -->
<div class="quick-status-bar">
    <div class="quick-stat quick-stat-services">
        <div class="quick-stat-icon">⚡</div>
        <div class="quick-stat-content">
            <span class="quick-stat-value" id="services-running">{{ metrics.services|selectattr('status', 'equalto', 'running')|list|length if metrics.services else 0 }}</span>
            <span class="quick-stat-label">Services Running</span>
        </div>
    </div>
    <div class="quick-stat quick-stat-cpu">
        <div class="quick-stat-icon">⚙</div>
        <div class="quick-stat-content">
            <span class="quick-stat-value" id="cpu-usage">{{ metrics.cpu_percent }}%</span>
            <span class="quick-stat-label">CPU Usage</span>
        </div>
    </div>
    <div class="quick-stat quick-stat-memory">
        <div class="quick-stat-icon">📊</div>
        <div class="quick-stat-content">
            <span class="quick-stat-value" id="memory-usage">{{ metrics.memory_percent }}%</span>
            <span class="quick-stat-label">Memory</span>
        </div>
    </div>
    <div class="quick-stat quick-stat-uptime">
        <div class="quick-stat-icon">⏱</div>
        <div class="quick-stat-content">
            <span class="quick-stat-value" id="uptime">{{ metrics.uptime }}</span>
            <span class="quick-stat-label">Uptime</span>
        </div>
    </div>
</div>

<div class="dashboard-grid">
    <!-- Services Panel - Main Focus -->
    <div class="dashboard-panel panel-services">
        <div class="panel-header">
            <h2>Services</h2>
            <span class="panel-badge">{{ metrics.services|length if metrics.services else 0 }}</span>
        </div>
        <div class="panel-body">
            {% if metrics.services %}
            <div class="services-list" id="services-list">
                {% for service in metrics.services %}
                <div class="service-item" data-service="{{ service.name }}">
                    <div class="service-status-indicator {% if service.status == 'running' %}status-running{% elif service.status == 'stopped' %}status-stopped{% else %}status-unknown{% endif %}">
                        <span class="pulse-dot"></span>
                    </div>
                    <div class="service-info">
                        <div class="service-name">{{ service.name|replace('dataskipper-boat-', '')|upper if 'dataskipper-boat-' in service.name else service.name }}</div>
                        <div class="service-detail">{{ service.description if service.description else service.config_dir }}</div>
                    </div>
                    <div class="service-actions">
                        <button class="action-btn action-start" onclick="serviceControl('{{ service.name }}', 'start')" title="Start">▶</button>
                        <button class="action-btn action-restart" onclick="serviceControl('{{ service.name }}', 'restart')" title="Restart">↻</button>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-panel">
                <p>No services configured</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- System Resources Panel -->
    <div class="dashboard-panel panel-resources">
        <div class="panel-header">
            <h2>System Resources</h2>
        </div>
        <div class="panel-body">
            <div class="resource-meters">
                <div class="resource-meter">
                    <div class="meter-header">
                        <span class="meter-label">CPU</span>
                        <span class="meter-value" id="cpu-percent">{{ metrics.cpu_percent }}%</span>
                    </div>
                    <div class="meter-bar">
                        <div class="meter-fill" id="cpu-bar" style="width: {{ metrics.cpu_percent }}%"></div>
                    </div>
                </div>
                <div class="resource-meter">
                    <div class="meter-header">
                        <span class="meter-label">Memory</span>
                        <span class="meter-value" id="memory-percent">{{ metrics.memory_used_mb }}/{{ metrics.memory_total_mb }} MB</span>
                    </div>
                    <div class="meter-bar">
                        <div class="meter-fill" id="memory-bar" style="width: {{ metrics.memory_percent }}%"></div>
                    </div>
                </div>
                <div class="resource-meter">
                    <div class="meter-header">
                        <span class="meter-label">Disk</span>
                        <span class="meter-value" id="disk-percent">{{ metrics.disk_used_gb }}/{{ metrics.disk_total_gb }} GB</span>
                    </div>
                    <div class="meter-bar">
                        <div class="meter-fill" id="disk-bar" style="width: {{ metrics.disk_percent }}%"></div>
                    </div>
                </div>
            </div>
            <div class="system-info-grid">
                <div class="info-item">
                    <span class="info-label">Platform</span>
                    <span class="info-value">{{ metrics.platform }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Architecture</span>
                    <span class="info-value">{{ metrics.architecture }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Python</span>
                    <span class="info-value">{{ metrics.python_version }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Boot Time</span>
                    <span class="info-value">{{ metrics.boot_time[:19] if metrics.boot_time else '--' }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Network Interfaces Panel -->
    <div class="dashboard-panel panel-connections">
        <div class="panel-header">
            <h2>Network Interfaces</h2>
            <span class="panel-badge" id="interfaces-count">-</span>
        </div>
        <div class="panel-body">
            <div id="interfaces-list" class="connections-list">
                <p class="text-muted">Loading network interfaces...</p>
            </div>
        </div>
    </div>

    <!-- Quick Actions Panel -->
    <div class="dashboard-panel panel-actions">
        <div class="panel-header">
            <h2>Quick Actions</h2>
        </div>
        <div class="panel-body">
            <div class="quick-actions-grid">
                <a href="/devices" class="quick-action-card">
                    <span class="quick-action-icon">📡</span>
                    <span class="quick-action-label">Device Health</span>
                    <span class="quick-action-desc">Monitor connected devices</span>
                </a>
                <a href="/config" class="quick-action-card">
                    <span class="quick-action-icon">⚙</span>
                    <span class="quick-action-label">Configuration</span>
                    <span class="quick-action-desc">Edit system settings</span>
                </a>
                <a href="/logs" class="quick-action-card">
                    <span class="quick-action-icon">📋</span>
                    <span class="quick-action-label">View Logs</span>
                    <span class="quick-action-desc">System logs and events</span>
                </a>
                <a href="/alerts" class="quick-action-card">
                    <span class="quick-action-icon">🔔</span>
                    <span class="quick-action-label">Alerts</span>
                    <span class="quick-action-desc">Configure notifications</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Recent Logs Panel -->
    <div class="dashboard-panel panel-logs">
        <div class="panel-header">
            <h2>Recent Activity</h2>
            <a href="/logs" class="panel-link">View All →</a>
        </div>
        <div class="panel-body">
            <div id="log-preview" class="log-preview-container">
                <p class="text-muted">Loading logs...</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_head %}
<style>
/* Quick Status Bar */
.quick-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.quick-stat {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.2s;
}

.quick-stat:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.quick-stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 12px;
    background: var(--bg-secondary);
}

.quick-stat-services .quick-stat-icon { background: rgba(0, 186, 124, 0.2); }
.quick-stat-cpu .quick-stat-icon { background: rgba(29, 155, 240, 0.2); }
.quick-stat-memory .quick-stat-icon { background: rgba(255, 173, 31, 0.2); }
.quick-stat-uptime .quick-stat-icon { background: rgba(139, 92, 246, 0.2); }

.quick-stat-content {
    display: flex;
    flex-direction: column;
}

.quick-stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.quick-stat-label {
    font-size: 13px;
    color: var(--text-muted);
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}

/* Panels */
.dashboard-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.panel-services {
    grid-row: span 2;
}

.panel-logs {
    grid-column: span 2;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.panel-header h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.panel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    background: var(--accent);
    color: white;
    border-radius: 12px;
}

.panel-link {
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
}

.panel-link:hover {
    text-decoration: underline;
}

.panel-body {
    padding: 20px;
}

/* Services List */
.services-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
    transition: all 0.2s;
}

.service-item:hover {
    background: var(--border-color);
}

.service-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.service-status-indicator.status-running {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}

.service-status-indicator.status-running .pulse-dot {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 2s ease-in-out infinite;
}

.service-status-indicator.status-stopped {
    background: var(--text-muted);
}

.service-status-indicator.status-unknown {
    background: var(--danger);
}

.service-info {
    flex: 1;
    min-width: 0;
}

.service-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.service-detail {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-actions {
    display: flex;
    gap: 6px;
}

.action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover {
    background: var(--bg-card);
}

.action-start:hover {
    background: rgba(0, 186, 124, 0.2);
    border-color: var(--success);
    color: var(--success);
}

.action-restart:hover {
    background: rgba(255, 173, 31, 0.2);
    border-color: var(--warning);
    color: var(--warning);
}

/* Resource Meters */
.resource-meters {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.resource-meter {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.meter-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.meter-value {
    font-size: 13px;
    font-weight: 500;
}

.meter-bar {
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.3s, background-color 0.3s;
}

.meter-fill.warning {
    background: var(--warning);
}

.meter-fill.danger {
    background: var(--danger);
}

/* System Info Grid */
.system-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 13px;
    font-weight: 500;
}

/* Quick Actions Grid */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.quick-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.quick-action-card:hover {
    background: var(--border-color);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.quick-action-icon {
    font-size: 28px;
}

.quick-action-label {
    font-size: 14px;
    font-weight: 600;
}

.quick-action-desc {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

/* Log Preview */
.log-preview-container {
    max-height: 200px;
    overflow-y: auto;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 12px;
    line-height: 1.6;
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 12px;
}

.log-entry {
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 2px;
}

.log-entry:hover {
    background: var(--bg-secondary);
}

.log-entry.log-error {
    color: var(--danger);
}

.log-entry.log-warning {
    color: var(--warning);
}

.log-entry.log-info {
    color: var(--text-primary);
}

.log-entry.log-debug {
    color: var(--text-muted);
}

/* Empty Panel */
.empty-panel {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Connections Panel */
.connections-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.connection-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    transition: all 0.2s;
}

.connection-item:hover {
    background: var(--border-color);
}

.connection-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 8px;
    flex-shrink: 0;
}

.connection-icon.tcp { background: rgba(33, 150, 243, 0.2); }
.connection-icon.serial { background: rgba(156, 39, 176, 0.2); }

.connection-info {
    flex: 1;
    min-width: 0;
}

.connection-label {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.connection-address {
    font-family: "Monaco", "Menlo", monospace;
    font-size: 12px;
    color: var(--accent);
}

.connection-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.connection-type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.connection-clients {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 1024px) {
    .quick-status-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .panel-services {
        grid-row: auto;
    }

    .panel-logs {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .quick-status-bar {
        grid-template-columns: 1fr;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr;
    }

    .system-info-grid {
        grid-template-columns: 1fr;
    }
}
</style>
{% endblock %}

{% block extra_scripts %}
<script>
    // Auto-refresh every 10 seconds
    let refreshInterval = setInterval(refreshAll, 10000);

    // Load initial data
    loadRecentLogs();

    async function refreshAll() {
        try {
            const response = await fetch('/api/metrics');
            const data = await response.json();

            // Update quick stats
            updateElement('services-running', countRunningServices(data.services));
            updateElement('cpu-usage', data.cpu_percent + '%');
            updateElement('memory-usage', data.memory_percent + '%');
            updateElement('uptime', data.uptime);

            // Update resource meters
            updateMeter('cpu', data.cpu_percent);
            updateMeter('memory', data.memory_percent);
            updateMeter('disk', data.disk_percent);

            // Update memory value display
            updateElement('memory-percent', `${data.memory_used_mb}/${data.memory_total_mb} MB`);
            updateElement('disk-percent', `${data.disk_used_gb}/${data.disk_total_gb} GB`);

            // Update service statuses
            if (data.services) {
                updateServiceStatuses(data.services);
            }

            // Update network interfaces
            if (data.network_interfaces) {
                updateNetworkInterfaces(data.network_interfaces);
            }

            // Update last refresh time
            updateElement('last-refresh', 'Updated just now');
            updateLastRefresh();

        } catch (error) {
            console.error('Error refreshing metrics:', error);
            updateElement('last-refresh', 'Update failed');
        }
    }

    function updateElement(id, value) {
        const el = document.getElementById(id);
        if (el) el.textContent = value;
    }

    function updateMeter(type, percent) {
        const bar = document.getElementById(type + '-bar');
        const value = document.getElementById(type + '-percent');

        if (bar) {
            bar.style.width = percent + '%';
            bar.className = 'meter-fill';
            if (percent > 90) bar.classList.add('danger');
            else if (percent > 80) bar.classList.add('warning');
        }
    }

    function countRunningServices(services) {
        if (!services) return 0;
        return services.filter(s => s.status === 'running').length;
    }

    function updateServiceStatuses(services) {
        services.forEach(service => {
            const item = document.querySelector(`.service-item[data-service="${service.name}"]`);
            if (!item) return;

            const indicator = item.querySelector('.service-status-indicator');
            indicator.className = 'service-status-indicator';

            if (service.status === 'running') {
                indicator.classList.add('status-running');
            } else if (service.status === 'stopped') {
                indicator.classList.add('status-stopped');
            } else {
                indicator.classList.add('status-unknown');
            }
        });
    }

    async function loadRecentLogs() {
        try {
            const response = await fetch('/api/logs?lines=15');
            const data = await response.json();

            const container = document.getElementById('log-preview');
            if (data.logs && data.logs.length > 0) {
                container.innerHTML = data.logs.map(log => {
                    let level = 'info';
                    if (log.includes('ERROR')) level = 'error';
                    else if (log.includes('WARNING')) level = 'warning';
                    else if (log.includes('DEBUG')) level = 'debug';
                    return `<div class="log-entry log-${level}">${escapeHtml(log)}</div>`;
                }).join('');
            } else {
                container.innerHTML = '<p class="text-muted">No recent logs</p>';
            }
        } catch (error) {
            console.error('Error loading logs:', error);
        }
    }

    async function serviceControl(serviceName, action) {
        if (!confirm(`Are you sure you want to ${action} ${serviceName}?`)) return;

        try {
            const response = await fetch(`/api/service/${serviceName}/${action}`, { method: 'POST' });
            const data = await response.json();

            if (data.success) {
                showNotification(`Service ${action} successful`, 'success');
                setTimeout(refreshAll, 2000);
            } else {
                showNotification(`Service ${action} failed: ${data.error || data.output}`, 'error');
            }
        } catch (error) {
            showNotification(`Error: ${error.message}`, 'error');
        }
    }

    function updateNetworkInterfaces(interfaces) {
        const container = document.getElementById('interfaces-list');
        const countBadge = document.getElementById('interfaces-count');

        if (interfaces && interfaces.length > 0) {
            countBadge.textContent = interfaces.length;
            container.innerHTML = interfaces.map(iface => {
                return `
                    <div class="connection-item">
                        <div class="connection-icon tcp">🌐</div>
                        <div class="connection-info">
                            <div class="connection-label">${iface.interface}</div>
                            <div class="connection-address">${iface.ip}</div>
                        </div>
                        <div class="connection-meta">
                            <span class="connection-type">IPv4</span>
                            <span class="connection-clients">${iface.netmask || ''}</span>
                        </div>
                    </div>
                `;
            }).join('');
        } else {
            countBadge.textContent = '0';
            container.innerHTML = '<p class="text-muted">No network interfaces detected</p>';
        }
    }

    // Initial refresh
    refreshAll();

    // Refresh logs periodically
    setInterval(loadRecentLogs, 30000);
</script>
{% endblock %}