{% extends "base.html" %}
{% block title %}System Monitor Configuration - Hermetic Suite{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="icon" id="system_monitor">System Monitor Configuration</h1>
    <p class="subtitle">Configure which servers to monitor, alert thresholds, and collection schedule</p>
    <div class="header-actions">
        <a href="{{ url_for('system_monitor.index') }}" class="btn btn-secondary">← Back to Dashboard</a>
    </div>
</div>

<!-- Collection Schedule Card -->
<div class="card">
    <div class="card-header">
        <h2>Collection Schedule</h2>
    </div>
    <div class="card-body">
        {% if schedule_info.error %}
        <div class="alert alert-warning" style="margin-bottom: 1rem;">
            <strong>Scheduling unavailable:</strong> {{ schedule_info.error }}
        </div>
        <p class="text-muted">
            To enable scheduling, ensure the hsuite user has cron access. You can manually set up a cron job:
        </p>
        <div style="background: var(--bg-secondary); padding: 1rem; border-radius: 4px; margin: 1rem 0;">
            <code style="display: block; white-space: pre-wrap;"># Run every 15 minutes
*/15 * * * * /opt/hsuite/venv/bin/python /opt/hsuite/plugins/system_monitor/collect_all.py</code>
        </div>
        {% else %}
        <form action="{{ url_for('system_monitor.config_page') }}" method="POST">
            <input type="hidden" name="action" value="update_schedule">
            
            <div class="form-row" style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
                <div style="flex: 1; min-width: 200px;">
                    <label for="schedule" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">
                        Automatic Collection Frequency
                    </label>
                    <select name="schedule" id="schedule" class="form-control" style="width: 100%; padding: 0.5rem;">
                        {% for value, label in schedule_info.options %}
                        <option value="{{ value }}" {% if schedule_info.current == value %}selected{% endif %}>
                            {{ label }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div style="padding-top: 1.5rem;">
                    <button type="submit" class="btn btn-primary">Update Schedule</button>
                </div>
            </div>
            
            <p class="text-muted" style="margin-top: 1rem; font-size: 0.9em;">
                {% if schedule_info.current and schedule_info.current != 'disabled' %}
                <span class="badge badge-success">Active</span>
                Currently collecting metrics <strong>{{ schedule_info.current_label|lower }}</strong>.
                {% else %}
                <span class="badge badge-secondary">Inactive</span>
                Automatic collection is disabled. Use manual collection or enable a schedule.
                {% endif %}
            </p>
        </form>
        {% endif %}
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>Monitored Servers</h2>
    </div>
    <div class="card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Server</th>
                    <th>IP Address</th>
                    <th>Status</th>
                    <th>Interval</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for server in servers %}
                {% set config = configs.get(server.id) %}
                <tr>
                    <td><strong>{{ server.hostname or 'Unnamed' }}</strong></td>
                    <td><code>{{ server.ip_address }}</code></td>
                    <td>
                        {% if config and config.enabled %}
                        <span class="badge badge-success">Monitoring</span>
                        {% else %}
                        <span class="badge badge-secondary">Not Monitored</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if config and config.enabled %}
                        {{ config.collection_interval }} min
                        {% else %}
                        -
                        {% endif %}
                    </td>
                    <td>
                        {% if config and config.enabled %}
                        <form action="{{ url_for('system_monitor.config_page') }}" method="POST" style="display: inline;">
                            <input type="hidden" name="action" value="remove_server">
                            <input type="hidden" name="server_id" value="{{ server.id }}">
                            <button type="submit" class="btn btn-sm btn-danger">Remove</button>
                        </form>
                        {% else %}
                        <form action="{{ url_for('system_monitor.config_page') }}" method="POST" style="display: inline;">
                            <input type="hidden" name="action" value="add_server">
                            <input type="hidden" name="server_id" value="{{ server.id }}">
                            <button type="submit" class="btn btn-sm btn-primary">+ Add</button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        
        {% if not servers %}
        <div class="empty-state">
            <p>No servers with SSH enabled found.</p>
            <p class="text-muted">Enable SSH on servers in the Servers section to monitor them.</p>
        </div>
        {% endif %}
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>Alert Thresholds</h2>
    </div>
    <div class="card-body">
        <p class="text-muted" style="margin-bottom: 1rem;">
            Configure when alerts should be triggered. Thresholds with no server specified apply globally as defaults.
        </p>
        
        <table class="table">
            <thead>
                <tr>
                    <th>Metric</th>
                    <th>Path</th>
                    <th>Server</th>
                    <th>Warning</th>
                    <th>Critical</th>
                    <th>Enabled</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for threshold in thresholds %}
                <tr>
                    <form action="{{ url_for('system_monitor.config_page') }}" method="POST">
                        <input type="hidden" name="action" value="update_threshold">
                        <input type="hidden" name="threshold_id" value="{{ threshold.id }}">
                        <td><strong>{{ threshold.metric_type|title }}</strong></td>
                        <td><code>{{ threshold.metric_path or '*' }}</code></td>
                        <td>
                            {% if threshold.server_id %}
                            Server #{{ threshold.server_id }}
                            {% else %}
                            <span class="badge badge-info">Global Default</span>
                            {% endif %}
                        </td>
                        <td>
                            <input type="number" name="warning" value="{{ threshold.warning_threshold }}" 
                                   step="0.1" style="width: 80px;">
                            {{ '%' if threshold.metric_type in ['cpu', 'memory', 'disk'] else '' }}
                        </td>
                        <td>
                            <input type="number" name="critical" value="{{ threshold.critical_threshold }}" 
                                   step="0.1" style="width: 80px;">
                            {{ '%' if threshold.metric_type in ['cpu', 'memory', 'disk'] else '' }}
                        </td>
                        <td>
                            <input type="checkbox" name="enabled" {% if threshold.enabled %}checked{% endif %}>
                        </td>
                        <td>
                            <button type="submit" class="btn btn-sm btn-primary">Save</button>
                        </td>
                    </form>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>Alert Notifications</h2>
    </div>
    <div class="card-body">
        <p class="text-muted">
            To receive email notifications when alerts are triggered:
        </p>
        <ol style="margin: 1rem 0 0 1.5rem; padding: 0;">
            <li>Configure SMTP settings in <a href="{{ url_for('settings.settings_page') }}">Settings</a></li>
            <li>Add your email address in your <a href="{{ url_for('auth.user_profile') }}">Profile</a></li>
            <li>Alert subscriptions will be available in a future update</li>
        </ol>
    </div>
</div>
{% endblock %}