{% extends "base.html" %}

{% block title %}{{ service.name }} - Report{% endblock %}

{% block content %}
<h2>{{ service.name }}</h2>
<p>
    <code>{{ service.protocol | upper }}: {{ service.target }}</code>
    <a href="{{ url_for('edit_service', service_id=service.id) }}" style="margin-left: 1rem;">Edit</a>
</p>

<div class="period-section">
    <h3>Uptime by Period</h3>
    <div class="preset-buttons">
        <a href="{{ url_for('report', service_id=service.id) }}" class="preset-btn{% if not preset %} preset-active{% endif %}">All time</a>
        <a href="{{ url_for('report', service_id=service.id, preset='24h') }}" class="preset-btn{% if preset == '24h' %} preset-active{% endif %}">Last 24h</a>
        <a href="{{ url_for('report', service_id=service.id, preset='7d') }}" class="preset-btn{% if preset == '7d' %} preset-active{% endif %}">Last 7 days</a>
        <a href="{{ url_for('report', service_id=service.id, preset='30d') }}" class="preset-btn{% if preset == '30d' %} preset-active{% endif %}">Last 30 days</a>
    </div>
    {% if period_label %}
    <p class="period-label">Showing: {{ period_label }}</p>
    {% endif %}
    <form method="get" action="{{ url_for('report', service_id=service.id) }}" class="date-range-form">
        <label>From</label>
        <input type="datetime-local" name="from" value="{{ from_date }}" placeholder="Start (optional)">
        <label>To</label>
        <input type="datetime-local" name="to" value="{{ to_date }}" placeholder="End (optional)">
        <button type="submit">Apply</button>
        {% if from_date or to_date %}
        <a href="{{ url_for('report', service_id=service.id) }}">Clear</a>
        {% endif %}
    </form>
</div>

<div class="stats-grid">
    <div class="stat-card">
        <span class="stat-label">Uptime{% if from_date or to_date %} (period){% endif %}</span>
        <span class="stat-value">{{ stats.uptime_pct }}%</span>
    </div>
    <div class="stat-card">
        <span class="stat-label">Checks</span>
        <span class="stat-value">{{ stats.total }}</span>
    </div>
    <div class="stat-card">
        <span class="stat-label">Avg Latency</span>
        <span class="stat-value">{{ stats.avg_ms or '-' }}{% if stats.avg_ms %} ms{% endif %}</span>
    </div>
    <div class="stat-card">
        <span class="stat-label">Min</span>
        <span class="stat-value">{{ (stats.min_ms | round(0) | int) if stats.min_ms is not none else '-' }}{% if stats.min_ms is not none %} ms{% endif %}</span>
    </div>
    <div class="stat-card">
        <span class="stat-label">Max</span>
        <span class="stat-value">{{ (stats.max_ms | round(0) | int) if stats.max_ms is not none else '-' }}{% if stats.max_ms is not none %} ms{% endif %}</span>
    </div>
</div>

<div class="chart-container">
    <h3>Response Time</h3>
    {% if chart_checks %}
    <div class="chart-wrapper">
        <canvas id="response-chart"></canvas>
    </div>
    {% else %}
    <p class="chart-empty">No check data yet. Checks will appear after the first run.</p>
    {% endif %}
</div>

<h3>Recent Checks</h3>
<form method="get" action="{{ url_for('report', service_id=service.id) }}" class="checks-filter-form">
    <input type="hidden" name="preset" value="{{ preset or '' }}">
    <input type="hidden" name="from" value="{{ from_date }}">
    <input type="hidden" name="to" value="{{ to_date }}">
    <select name="status">
        <option value="">All</option>
        <option value="ok" {% if status_filter == 'ok' %}selected{% endif %}>OK only</option>
        <option value="error" {% if status_filter == 'error' %}selected{% endif %}>Errors only</option>
    </select>
    <input type="text" name="search" value="{{ search }}" placeholder="Search error message...">
    <button type="submit">Filter</button>
</form>
<table class="checks-table">
    <thead>
        <tr>
            <th>Timestamp</th>
            <th>Status</th>
            <th>Response (ms)</th>
            <th>Error / Reason</th>
        </tr>
    </thead>
    <tbody>
        {% for c in checks %}
        <tr>
            <td>{{ c.timestamp[:19] }}</td>
            <td>
                {% if c.success %}
                <span class="badge badge-up">OK</span>
                {% else %}
                <span class="badge badge-down">ERROR</span>
                {% endif %}
            </td>
            <td>{{ (c.response_time_ms | round(0) | int) if c.response_time_ms is not none else '-' }}</td>
            <td class="error-cell" {% if c.error_message %}title="{{ c.error_message | e }}"{% endif %}>{{ c.error_message or '-' }}</td>
        </tr>
        {% else %}
        <tr>
            <td colspan="4">No checks yet.{% if status_filter or search %} No matches for filter.{% endif %}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<p>
    <a href="/">&larr; Back to Dashboard</a>
    <span style="margin-left: 1rem;">
        <button type="button" class="btn-delete" data-id="{{ service.id }}" data-name="{{ service.name }}">Delete Service</button>
    </span>
</p>
{% if chart_checks %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
(function() {
    const canvas = document.getElementById('response-chart');
    if (!canvas) return;
    const chartData = {{ chart_checks | tojson }};
    if (chartData.length === 0) return;
    const reversed = chartData.slice().reverse();
    const labels = reversed.map(c => c.timestamp ? c.timestamp.slice(0, 19).replace('T', ' ') : '');
    const values = reversed.map(c => c.response_time_ms != null ? c.response_time_ms : null);
    const successColors = reversed.map(c => c.success ? 'rgba(34, 197, 94, 0.8)' : 'rgba(239, 68, 68, 0.8)');
    new Chart(canvas, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Response (ms)',
                data: values,
                borderColor: 'rgba(59, 130, 246, 0.9)',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                fill: true,
                tension: 0.2,
                pointBackgroundColor: successColors,
                pointBorderColor: successColors,
                pointRadius: 3
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            },
            scales: {
                x: {
                    ticks: { maxTicksLimit: 8, maxRotation: 45 },
                    grid: { color: 'rgba(148, 163, 184, 0.2)' }
                },
                y: {
                    beginAtZero: true,
                    ticks: { callback: v => v + ' ms' },
                    grid: { color: 'rgba(148, 163, 184, 0.2)' }
                }
            }
        }
    });
})();
</script>
{% endif %}
<script>
document.querySelector('.btn-delete')?.addEventListener('click', async () => {
    if (!confirm('Delete "{{ service.name }}"?')) return;
    const res = await fetch('/api/services/{{ service.id }}', { method: 'DELETE' });
    if (res.ok) window.location.href = '/';
    else alert('Failed to delete');
});
</script>
{% endblock %}