{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Service Monitor Settings" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Service Monitor Settings" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Configure automatic health checks and recovery for critical server services." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto"><a href="{% url 'monitor_status' %}"
           class="btn btn-outline-secondary btn-sm text-nowrap"><i data-lucide="activity"></i>{% translate "View Service Status" %}</a></div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "System" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'monitor_settings' %}">{% translate "Service Monitor" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Settings" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <form method="post"
          id="monitorSettingsForm"
          class="eenos-form"
          data-parsley-validate>
        {% csrf_token %}
        <input type="hidden" name="savesettings" value="yes">
        <input type="hidden"
               name="status"
               id="monitorStatus"
               value="{% if settings.status == 'on' %}on{% else %}off{% endif %}">
        <div class="row g-4 align-items-stretch">
            <div class="col-12 col-xl-4">
                <div class="eenos-card h-100">
                    <div class="d-flex align-items-start justify-content-between gap-3 mb-4">
                        <div class="eenos-modal-info-icon">
                            <i data-lucide="shield-check"></i>
                        </div>
                        {% if settings.status == "on" %}
                            <span class="eenos-status text-success"><i data-lucide="circle-check"></i><span>{% translate "Active" %}</span></span>
                        {% else %}
                            <span class="eenos-status text-muted"><i data-lucide="circle-x"></i><span>{% translate "Inactive" %}</span></span>
                        {% endif %}
                    </div>
                    <div class="eenos-panel-title">{% translate "Automatic Monitoring" %}</div>
                    <div class="eenos-panel-subtitle mb-4">{% translate "Continuously check selected services and attempt recovery when a service becomes unavailable." %}</div>
                    <div class="d-flex align-items-center justify-content-between gap-3 border-top pt-4">
                        <div>
                            <label class="fw-semibold d-block" for="monitorEnabled">{% translate "Monitor services" %}</label>
                            <span class="small text-muted" id="monitorStateText">
                                {% if settings.status == 'on' %}
                                    {% translate "Monitoring is enabled" %}
                                {% else %}
                                    {% translate "Monitoring is disabled" %}
                                {% endif %}
                            </span>
                        </div>
                        <div class="form-check form-switch m-0">
                            <input class="form-check-input mt-0 align-middle"
                                   type="checkbox"
                                   role="switch"
                                   id="monitorEnabled"
                                   aria-describedby="monitorStateText"
                                   {% if settings.status == 'on' %}checked{% endif %}>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-8">
                <div class="eenos-card h-100">
                    <div class="d-flex align-items-start gap-3 mb-4">
                        <div class="eenos-modal-info-icon flex-shrink-0">
                            <i data-lucide="timer-reset"></i>
                        </div>
                        <div>
                            <div class="eenos-panel-title">{% translate "Health Check Policy" %}</div>
                            <div class="eenos-panel-subtitle">{% translate "Control how often checks run and how aggressively Eenos attempts service recovery." %}</div>
                        </div>
                    </div>
                    <div class="row g-4">
                        <div class="col-12 col-lg-6">
                            <label for="monitorInterval" class="form-label">{% translate "Check Interval" %}</label>
                            <div class="input-group">
                                <input class="form-control"
                                       autocomplete="off"
                                       type="number"
                                       min="30"
                                       required
                                       value="{{ settings.time|default:60 }}"
                                       id="monitorInterval"
                                       name="time"
                                       data-parsley-required-message="{% translate 'Enter the monitoring interval.' %}"
                                       data-parsley-min-message="{% translate 'The monitoring interval must be at least 30 seconds.' %}">
                                <span class="input-group-text">{% translate "seconds" %}</span>
                            </div>
                            <div class="form-text">{% translate "Minimum interval: 30 seconds." %}</div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <label for="restartAttempts" class="form-label">{% translate "Recovery Attempts" %}</label>
                            <div class="input-group">
                                <input class="form-control"
                                       autocomplete="off"
                                       type="number"
                                       min="1"
                                       required
                                       value="{{ settings.restart|default:3 }}"
                                       id="restartAttempts"
                                       name="restart"
                                       data-parsley-required-message="{% translate 'Enter the number of restart attempts.' %}"
                                       data-parsley-min-message="{% translate 'At least one restart attempt is required.' %}">
                                <span class="input-group-text">{% translate "attempts" %}</span>
                            </div>
                            <div class="form-text">{% translate "Number of restart attempts following a failed check." %}</div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-info mt-4">
                        <div class="eenos-notice-icon">
                            <i data-lucide="info"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-text">{% translate "Policy changes apply to every service enabled in the monitored-services list below." %}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-start mt-4">
            <button type="button" class="btn btn-primary" id="saveMonitorSettings"><i data-lucide="save"></i>{% translate "Save Monitoring Policy" %}</button>
        </div>
    </form>
    <div class="eenos-card mt-4">
        <div class="mb-3">
            <div class="eenos-panel-title">{% translate "Monitored Services" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Choose which services Eenos should monitor and recover automatically." %}</div>
        </div>
        <div class="d-flex flex-wrap gap-2 mb-4">
            <button type="button"
                    class="btn btn-sm btn-outline-success bulk-monitor-action"
                    data-action="enable"><i data-lucide="circle-check"></i>{% translate "Enable Selected" %}</button>
            <button type="button"
                    class="btn btn-sm btn-outline-danger bulk-monitor-action"
                    data-action="disable"><i data-lucide="circle-x"></i>{% translate "Disable Selected" %}</button>
        </div>
        <table id="monitorSettingsTable"
               class="table table-hover align-middle w-100 mb-0">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox"
                               class="form-check-input mt-0 align-middle"
                               id="selectAllServices"
                               aria-label="{% translate 'Select all services' %}">
                    </th>
                    <th>{% translate "Service" %}</th>
                    <th>{% translate "Description" %}</th>
                    <th>{% translate "Monitoring Status" %}</th>
                    <th class="text-end">{% translate "Action" %}</th>
                </tr>
            </thead>
        </table>
    </div>
    <form method="post" id="bulkMonitorForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="servicelist" id="bulkServiceList"><input type="hidden" name="bulkaction" value="yes"><input type="hidden" name="action" id="bulkMonitorAction">
    </form>
    <form method="post" id="singleMonitorForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="service" id="singleService"><input type="hidden" name="action" id="singleMonitorAction"><input type="hidden" name="singleaction" value="yes">
    </form>
    <div class="modal fade"
         id="monitorConfirmModal"
         tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="monitorConfirmTitle"></h2>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-notice eenos-notice-warning">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title" id="monitorConfirmHeading"></div>
                            <div class="eenos-notice-text" id="monitorConfirmText"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" class="btn btn-primary" id="confirmMonitorAction"></button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){const esc=v=>$('<div>').text(v==null?'':v).html(),selected=new Set(),modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('monitorConfirmModal'));let pending=null;$('#monitorEnabled').on('change',function(){const enabled=this.checked;$('#monitorStatus').val(enabled?'on':'off');$('#monitorStateText').text(enabled?"{% translate 'Monitoring will be enabled after saving' %}":"{% translate 'Monitoring will be disabled after saving' %}");});const table=$('#monitorSettingsTable').DataTable({responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},processing:true,language:{processing:'{% translate "Loading..." %}'},pageLength:25,ajax:{url:"{% url 'monitor_settings_data' %}",dataSrc:'data'},order:[[1,'asc']],columns:[{data:'service_key',orderable:false,searchable:false,width:'60px',className:'text-nowrap align-middle',responsivePriority:1,render:(d,t)=>t==='display'?'<input type="checkbox" class="form-check-input monitor-row-select mt-0 align-middle" value="'+esc(d)+'" '+(selected.has(String(d))?'checked':'')+' aria-label="{% translate "Select service" %}">':''},{data:'name',responsivePriority:1,render:(d,t,r)=>t==='display'?'<div class="fw-semibold">'+esc(d)+'</div><div class="small text-muted font-monospace">'+esc(r.systemd_service)+'</div>':d},{data:'description',responsivePriority:4,render:(d,t)=>t==='display'?esc(d||'—'):d},{data:'enabled',width:'150px',className:'text-nowrap',responsivePriority:2,render:(d,t)=>t!=='display'?d:(d?'<span class="eenos-status text-success d-inline-flex align-items-center gap-2"><i data-lucide="circle-check"></i><span>{% translate "Enabled" %}</span></span>':'<span class="eenos-status text-muted d-inline-flex align-items-center gap-2"><i data-lucide="circle-x"></i><span>{% translate "Disabled" %}</span></span>')},{data:null,orderable:false,searchable:false,width:'70px',className:'text-end',responsivePriority:1,render:(d,t,r)=>t!=='display'?'':'<div class="eenos-dt-actions d-flex justify-content-end"><button type="button" class="btn btn-sm '+(r.enabled?'btn-outline-danger':'btn-outline-success')+' single-monitor-action" data-service="'+esc(r.service_key)+'" data-name="'+esc(r.name)+'" data-action="'+(r.enabled?'disable':'enable')+'" title="'+(r.enabled?'{% translate "Disable monitoring" %}':'{% translate "Enable monitoring" %}')+'"><i data-lucide="'+(r.enabled?'circle-x':'circle-check')+'"></i></button></div>'}],drawCallback:function(){if(typeof lucide!=='undefined')lucide.createIcons();$('.monitor-row-select').each(function(){$(this).prop('checked',selected.has(String(this.value)))});}});table.on('responsive-display',()=>lucide.createIcons());$(document).on('change','.monitor-row-select',function(){this.checked?selected.add(String(this.value)):selected.delete(String(this.value));});$('#selectAllServices').on('change',function(){const checked=this.checked;table.rows({search:'applied'}).data().each(r=>checked?selected.add(String(r.service_key)):selected.delete(String(r.service_key)));table.draw(false);});function openConfirm(type,action,service,name){pending={type,action,service};const enable=action==='enable';$('#monitorConfirmTitle').text(enable?"{% translate 'Enable Monitoring' %}":"{% translate 'Disable Monitoring' %}");$('#monitorConfirmHeading').text(name||((selected.size)+" {% translate 'selected services' %}"));$('#monitorConfirmText').text(enable?"{% translate 'Eenos will begin monitoring the selected service or services and attempt automatic recovery when necessary.' %}":"{% translate 'Eenos will stop monitoring the selected service or services.' %}");$('#confirmMonitorAction').text(enable?"{% translate 'Enable Monitoring' %}":"{% translate 'Disable Monitoring' %}").toggleClass('btn-success',enable).toggleClass('btn-danger',!enable).removeClass('btn-primary');modal.show();}$('.bulk-monitor-action').on('click',function(){if(!selected.size){pending=null;$('#monitorConfirmTitle').text("{% translate 'Select Services' %}");$('#monitorConfirmHeading').text("{% translate 'No services selected' %}");$('#monitorConfirmText').text("{% translate 'Select at least one service before applying a bulk monitoring action.' %}");$('#confirmMonitorAction').hide();modal.show();return}$('#confirmMonitorAction').show();openConfirm('bulk',$(this).data('action'),'','');});$(document).on('click','.single-monitor-action',function(){$('#confirmMonitorAction').show();openConfirm('single',$(this).data('action'),$(this).data('service'),$(this).data('name'));});$('#saveMonitorSettings').on('click',function(){const parsley=$('#monitorSettingsForm').parsley();if(!parsley.validate())return;pending={type:'settings'};$('#confirmMonitorAction').show().removeClass('btn-danger btn-success').addClass('btn-primary').text("{% translate 'Save Settings' %}");$('#monitorConfirmTitle').text("{% translate 'Save Monitoring Settings' %}");$('#monitorConfirmHeading').text("{% translate 'Apply monitoring configuration' %}");$('#monitorConfirmText').text("{% translate 'The global monitoring interval and recovery policy will be updated.' %}");modal.show();});$('#confirmMonitorAction').on('click',function(){if(!pending)return;if(pending.type==='settings')document.getElementById('monitorSettingsForm').submit();else if(pending.type==='bulk'){$('#bulkServiceList').val(Array.from(selected).join(','));$('#bulkMonitorAction').val(pending.action);document.getElementById('bulkMonitorForm').submit();}else{$('#singleService').val(pending.service);$('#singleMonitorAction').val(pending.action);document.getElementById('singleMonitorForm').submit();}});});
    </script>
    <script>
$(function(){const form=document.getElementById('bulkMonitorForm'),nativeSubmit=form.submit.bind(form);form.submit=function(){const action=$('#bulkMonitorAction').val(),selected=new Set(String($('#bulkServiceList').val()||'').split(',').filter(Boolean)),rows=$('#monitorSettingsTable').DataTable().rows().data().toArray(),eligible=rows.filter(row=>selected.has(String(row.service_key))&&(action==='enable'?!row.enabled:row.enabled)).map(row=>String(row.service_key));if(!eligible.length){$('#monitorConfirmTitle').text(action==='enable'?"{% translate 'Monitoring Already Enabled' %}":"{% translate 'Monitoring Already Disabled' %}");$('#monitorConfirmHeading').text("{% translate 'No applicable services' %}");$('#monitorConfirmText').text(action==='enable'?"{% translate 'Every selected service already has monitoring enabled.' %}":"{% translate 'Every selected service already has monitoring disabled.' %}");$('#confirmMonitorAction').hide();return;}$('#bulkServiceList').val(eligible.join(','));nativeSubmit();};});
    </script>
{% endblock %}