{% extends "base.html" %}

{% block title %}Dashboard - Status Monitor{% endblock %}

{% block content %}
<h2>Services</h2>

<form id="add-service-form" class="add-form">
    <input type="text" name="name" placeholder="Service name" required>
    <input type="text" name="target" placeholder="URL or host:port" required>
    <select name="protocol">
        <option value="https">HTTPS</option>
        <option value="http">HTTP</option>
        <option value="tcp">TCP</option>
    </select>
    <input type="number" name="interval_seconds" value="60" min="10" max="3600" title="Check interval (seconds)">
    <button type="submit">Add Service</button>
</form>
<script>
document.getElementById('add-service-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const payload = {
        name: form.name.value.trim(),
        target: form.target.value.trim(),
        protocol: form.protocol.value,
        interval_seconds: parseInt(form.interval_seconds.value, 10) || 60
    };
    const res = await fetch('{{ url_for("api_add_service") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify(payload)
    });
    if (res.ok) {
        window.location.reload();
    } else {
        const err = await res.json().catch(() => ({}));
        alert(err.error || 'Failed to add service');
    }
});
document.addEventListener('click', async (e) => {
    const btn = e.target.closest('.btn-delete');
    if (!btn) return;
    e.preventDefault();
    if (!confirm('Delete "' + btn.dataset.name + '"?')) return;
    const res = await fetch('/api/services/' + btn.dataset.id, { method: 'DELETE' });
    if (res.ok) window.location.reload();
    else alert('Failed to delete');
});
</script>

<table class="services-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Target</th>
            <th>Protocol</th>
            <th>Status</th>
            <th>Uptime</th>
            <th>Last Check</th>
            <th>Response</th>
            <th>Report</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {% for s in services %}
        <tr>
            <td>{{ s.name }}</td>
            <td><code>{{ s.target }}</code></td>
            <td>{{ s.protocol | upper }}</td>
            <td>
                {% if s.last_success is none %}
                <span class="badge badge-pending">Pending</span>
                {% elif s.last_success %}
                <span class="badge badge-up">Up</span>
                {% else %}
                <span class="badge badge-down">Down</span>
                {% endif %}
            </td>
            <td>
                {% if s.uptime_pct is not none %}
                <a href="{{ url_for('report', service_id=s.id) }}">{{ s.uptime_pct }}%</a>
                {% else %}
                -
                {% endif %}
            </td>
            <td>{{ s.last_check[:19] if s.last_check else '-' }}</td>
            <td>
                {% if s.last_response_ms is not none %}
                {{ (s.last_response_ms | round(0) | int) }} ms
                {% else %}
                -
                {% endif %}
            </td>
            <td>
                <a href="{{ url_for('report', service_id=s.id) }}">Report</a>
                <a href="{{ url_for('edit_service', service_id=s.id) }}" style="margin-left: 0.5rem;">Edit</a>
            </td>
            <td>
                <button type="button" class="btn-delete" data-id="{{ s.id }}" data-name="{{ s.name }}" title="Delete">Delete</button>
            </td>
        </tr>
        {% else %}
        <tr>
            <td colspan="9">No services yet. Add one above.</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}