{% extends 'base.html' %}

{% block title %}Graph - {{ target.name }}{% endblock %}

{% block extra_css %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block content %}
<h1>📊 {{ target.name }} - Data Usage</h1>

<div class="card">
    <div style="margin-bottom: 15px;">
        <a href="/graph/{{ target.id }}?hours=6" class="btn btn-success">6h</a>
        <a href="/graph/{{ target.id }}?hours=24" class="btn btn-success">24h</a>
        <a href="/graph/{{ target.id }}?hours=168" class="btn btn-success">7d</a>
        <a href="/" class="btn btn-primary">← Back</a>
    </div>
    
    <canvas id="usageChart" style="max-height: 400px;"></canvas>
</div>

<div class="card">
    <h3 style="margin-bottom: 15px; color: #00d9ff;">Device Info</h3>
    <p><strong>Name:</strong> {{ target.name }}</p>
    <p><strong>Modem Type:</strong> {{ target.modem_type or 'rv50' }}</p>
    <p><strong>IP:</strong> {{ target.ip_address }}:{{ target.port }}</p>
    <p><strong>Community:</strong> {{ target.community }}</p>
    <p><strong>Poll Period:</strong> {{ target.period_minutes }} minutes</p>
</div>
{% endblock %}

{% block extra_js %}
<script>
const labels = {{ labels | tojson }};
const sentData = {{ sent_data | tojson }};
const recvData = {{ recv_data | tojson }};

// Convert to KB for readability
const sentKB = sentData.map(v => v ? (v / 1024).toFixed(2) : 0);
const recvKB = recvData.map(v => v ? (v / 1024).toFixed(2) : 0);

new Chart(document.getElementById('usageChart'), {
    type: 'line',
    data: {
        labels: labels,
        datasets: [
            {
                label: 'Bytes Sent (KB)',
                data: sentKB,
                borderColor: '#00d9ff',
                backgroundColor: 'rgba(0, 217, 255, 0.1)',
                fill: true,
                tension: 0.4
            },
            {
                label: 'Bytes Received (KB)',
                data: recvKB,
                borderColor: '#4ade80',
                backgroundColor: 'rgba(74, 222, 128, 0.1)',
                fill: true,
                tension: 0.4
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
        plugins: {
            legend: { labels: { color: '#eee' } }
        },
        scales: {
            x: { ticks: { color: '#888' }, grid: { color: '#0f3460' } },
            y: { ticks: { color: '#888' }, grid: { color: '#0f3460' } }
        }
    }
});
</script>
{% endblock %}