{% extends "base.html" %}

{% block title %}Communication Config Editor - RTU Portal{% endblock %}

{% block extra_head %}
<style>
    .editor-container {
        max-width: 900px;
        margin: 0 auto;
    }

    .config-section {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        cursor: pointer;
    }

    .section-header:hover {
        background: var(--bg-primary);
    }

    .section-title {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .section-title .icon {
        font-size: 20px;
    }

    .section-title h3 {
        font-size: 15px;
        font-weight: 600;
    }

    .section-toggle {
        font-size: 18px;
        color: var(--text-muted);
        transition: transform 0.2s;
    }

    .section-toggle.collapsed {
        transform: rotate(-90deg);
    }

    .section-body {
        padding: 20px;
    }

    .section-body.collapsed {
        display: none;
    }

    /* Form styles */
    .form-group {
        margin-bottom: 16px;
    }

    .form-group label {
        display: block;
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 6px;
        color: var(--text-secondary);
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-primary);
        color: var(--text-primary);
        font-size: 13px;
        font-family: inherit;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--accent);
    }

    .form-group .hint {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 4px;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .form-row-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
    }

    /* Endpoint cards */
    .endpoint-card {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
    }

    .endpoint-card h4 {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 12px;
        text-transform: capitalize;
    }

    /* Toggle switch */
    .toggle-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .toggle-row:last-child {
        border-bottom: none;
    }

    .toggle-label {
        font-size: 13px;
    }

    .toggle-label small {
        display: block;
        color: var(--text-muted);
        font-size: 11px;
        margin-top: 2px;
    }

    .toggle-switch {
        position: relative;
        width: 44px;
        height: 24px;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 24px;
        transition: 0.3s;
    }

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background: white;
        border-radius: 50%;
        transition: 0.3s;
    }

    .toggle-switch input:checked + .toggle-slider {
        background: var(--accent);
        border-color: var(--accent);
    }

    .toggle-switch input:checked + .toggle-slider:before {
        transform: translateX(20px);
    }

    /* Buttons */
    .btn {
        padding: 10px 16px;
        font-size: 13px;
        font-weight: 500;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1px solid var(--border-color);
        background: var(--bg-card);
        color: var(--text-primary);
    }

    .btn:hover {
        background: var(--bg-secondary);
    }

    .btn-primary {
        background: var(--accent);
        border-color: var(--accent);
        color: white;
    }

    .btn-primary:hover {
        background: #1a8cd8;
    }

    /* Actions bar */
    .actions-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

    .save-indicator {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: var(--text-muted);
    }

    .save-indicator.unsaved {
        color: var(--warning);
    }

    /* Array input */
    .array-input {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-primary);
        min-height: 44px;
    }

    .array-tag {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        background: var(--bg-secondary);
        border-radius: 4px;
        font-size: 12px;
    }

    .array-tag button {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 14px;
        padding: 0;
    }

    .array-input input {
        border: none;
        background: transparent;
        flex: 1;
        min-width: 100px;
        padding: 4px;
    }

    .array-input input:focus {
        outline: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="page-title-group">
        <h1>Communication Configuration</h1>
        <p class="page-subtitle">{{ config_file }} - API endpoints, MQTT, and service settings</p>
    </div>
    <div style="display: flex; gap: 12px;">
        <a href="/config?file={{ config_file }}&dir={{ config_dir }}" class="btn">
            📝 Edit Raw YAML
        </a>
        <button class="btn btn-primary" onclick="saveConfig()" id="save-btn" disabled>
            💾 Save Changes
        </button>
    </div>
</div>

<div class="editor-container">
    <div class="actions-bar">
        <div class="save-indicator" id="save-indicator">
            <span>●</span> All changes saved
        </div>
    </div>

    <!-- Device Identity Section -->
    <div class="config-section">
        <div class="section-header" onclick="toggleSection(this)">
            <div class="section-title">
                <span class="icon">🏷️</span>
                <h3>Device Identity</h3>
            </div>
            <span class="section-toggle">▼</span>
        </div>
        <div class="section-body">
            <div class="form-group">
                <label>Device ID</label>
                <input type="text" id="device-id" placeholder="e.g., iitjmu-ess1" onchange="markUnsaved()">
                <p class="hint">Unique identifier for this RTU device. Used for config publishing and display.</p>
            </div>
        </div>
    </div>

    <!-- API Endpoints Section -->
    <div class="config-section">
        <div class="section-header" onclick="toggleSection(this)">
            <div class="section-title">
                <span class="icon">🌐</span>
                <h3>API Endpoints</h3>
            </div>
            <span class="section-toggle">▼</span>
        </div>
        <div class="section-body">
            <div class="endpoint-card">
                <h4>Electrical Measurements</h4>
                <div class="form-group">
                    <label>URL</label>
                    <input type="url" id="api-electrical-measurements-url" onchange="markUnsaved()">
                </div>
            </div>
            <div class="endpoint-card">
                <h4>Electrical Alerts</h4>
                <div class="form-group">
                    <label>URL</label>
                    <input type="url" id="api-electrical-alerts-url" onchange="markUnsaved()">
                </div>
            </div>
            <div class="endpoint-card">
                <h4>Water Measurements</h4>
                <div class="form-group">
                    <label>URL</label>
                    <input type="url" id="api-water-measurements-url" onchange="markUnsaved()">
                </div>
            </div>
            <div class="endpoint-card">
                <h4>Water Alerts</h4>
                <div class="form-group">
                    <label>URL</label>
                    <input type="url" id="api-water-alerts-url" onchange="markUnsaved()">
                </div>
            </div>
        </div>
    </div>

    <!-- MQTT Configuration Section -->
    <div class="config-section">
        <div class="section-header" onclick="toggleSection(this)">
            <div class="section-title">
                <span class="icon">📡</span>
                <h3>MQTT Configuration</h3>
            </div>
            <span class="section-toggle">▼</span>
        </div>
        <div class="section-body">
            <div class="form-row">
                <div class="form-group">
                    <label>Broker Host</label>
                    <input type="text" id="mqtt-host" placeholder="mqtt.example.com" onchange="markUnsaved()">
                </div>
                <div class="form-group">
                    <label>Port</label>
                    <input type="number" id="mqtt-port" placeholder="1883" onchange="markUnsaved()">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Username</label>
                    <input type="text" id="mqtt-username" onchange="markUnsaved()">
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input type="password" id="mqtt-password" onchange="markUnsaved()">
                    <p class="hint">Leave empty to keep existing password</p>
                </div>
            </div>
            <h4 style="margin-top: 20px; margin-bottom: 12px; font-size: 13px;">Topics</h4>
            <div class="form-row">
                <div class="form-group">
                    <label>Electrical Measurements</label>
                    <input type="text" id="mqtt-topic-electrical-measurements" onchange="markUnsaved()">
                </div>
                <div class="form-group">
                    <label>Electrical Alerts</label>
                    <input type="text" id="mqtt-topic-electrical-alerts" onchange="markUnsaved()">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Water Measurements</label>
                    <input type="text" id="mqtt-topic-water-measurements" onchange="markUnsaved()">
                </div>
                <div class="form-group">
                    <label>Water Alerts</label>
                    <input type="text" id="mqtt-topic-water-alerts" onchange="markUnsaved()">
                </div>
            </div>
        </div>
    </div>

    <!-- Aggregation Config Section -->
    <div class="config-section">
        <div class="section-header" onclick="toggleSection(this)">
            <div class="section-title">
                <span class="icon">📊</span>
                <h3>Data Aggregation</h3>
            </div>
            <span class="section-toggle">▼</span>
        </div>
        <div class="section-body">
            <div class="toggle-row">
                <div class="toggle-label">
                    Enable Aggregation
                    <small>Aggregate data over time windows</small>
                </div>
                <label class="toggle-switch">
                    <input type="checkbox" id="aggregation-enabled" onchange="markUnsaved()">
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <div class="form-row" style="margin-top: 16px;">
                <div class="form-group">
                    <label>Windows (seconds, comma-separated)</label>
                    <input type="text" id="aggregation-windows" placeholder="60, 300, 900, 3600" onchange="markUnsaved()">
                    <p class="hint">e.g., 60=1min, 300=5min, 900=15min, 3600=1hour</p>
                </div>
                <div class="form-group">
                    <label>Report Interval (seconds)</label>
                    <input type="number" id="aggregation-report-interval" onchange="markUnsaved()">
                </div>
            </div>
        </div>
    </div>

    <!-- Performance Monitoring Section -->
    <div class="config-section">
        <div class="section-header" onclick="toggleSection(this)">
            <div class="section-title">
                <span class="icon">⚡</span>
                <h3>Performance Monitoring</h3>
            </div>
            <span class="section-toggle">▼</span>
        </div>
        <div class="section-body">
            <div class="toggle-row">
                <div class="toggle-label">
                    Enable Monitoring
                    <small>Track CPU, memory, and disk usage</small>
                </div>
                <label class="toggle-switch">
                    <input type="checkbox" id="performance-enabled" onchange="markUnsaved()">
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <div class="form-row-3" style="margin-top: 16px;">
                <div class="form-group">
                    <label>CPU Threshold (%)</label>
                    <input type="number" id="performance-cpu" min="0" max="100" onchange="markUnsaved()">
                </div>
                <div class="form-group">
                    <label>Memory Threshold (%)</label>
                    <input type="number" id="performance-memory" min="0" max="100" onchange="markUnsaved()">
                </div>
                <div class="form-group">
                    <label>Disk Threshold (%)</label>
                    <input type="number" id="performance-disk" min="0" max="100" onchange="markUnsaved()">
                </div>
            </div>
        </div>
    </div>

    <!-- Modbus TCP Gateway Section -->
    <div class="config-section">
        <div class="section-header" onclick="toggleSection(this)">
            <div class="section-title">
                <span class="icon">🔌</span>
                <h3>Modbus TCP Gateway</h3>
            </div>
            <span class="section-toggle">▼</span>
        </div>
        <div class="section-body">
            <div class="toggle-row">
                <div class="toggle-label">
                    Enable Gateway
                    <small>Expose cached meter readings via Modbus TCP</small>
                </div>
                <label class="toggle-switch">
                    <input type="checkbox" id="gateway-enabled" onchange="markUnsaved()">
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <div class="form-row" style="margin-top: 16px;">
                <div class="form-group">
                    <label>Listen Host</label>
                    <input type="text" id="gateway-host" placeholder="0.0.0.0" onchange="markUnsaved()">
                </div>
                <div class="form-group">
                    <label>Port</label>
                    <input type="number" id="gateway-port" placeholder="4196" onchange="markUnsaved()">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Cache TTL (seconds)</label>
                    <input type="number" id="gateway-cache-ttl" onchange="markUnsaved()">
                </div>
                <div class="form-group">
                    <label>Max Batch Size</label>
                    <input type="number" id="gateway-batch-size" onchange="markUnsaved()">
                </div>
            </div>
        </div>
    </div>

    <!-- Other Settings Section -->
    <div class="config-section">
        <div class="section-header" onclick="toggleSection(this)">
            <div class="section-title">
                <span class="icon">⚙️</span>
                <h3>Other Settings</h3>
            </div>
            <span class="section-toggle">▼</span>
        </div>
        <div class="section-body">
            <div class="form-row">
                <div class="form-group">
                    <label>Cache TTL (seconds)</label>
                    <input type="number" id="cache-ttl" onchange="markUnsaved()">
                    <p class="hint">Register cache TTL for MQTT/HTTP consolidation</p>
                </div>
                <div class="form-group">
                    <label>Retry Interval (seconds)</label>
                    <input type="number" id="retry-interval" onchange="markUnsaved()">
                </div>
            </div>
            <div class="form-group">
                <label>Discord Webhook URL (for alerts)</label>
                <input type="url" id="discord-webhook" onchange="markUnsaved()">
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    let configData = null;
    let originalPassword = '';
    let hasChanges = false;
    const configFile = "{{ config_file }}";
    const configDir = "{{ config_dir }}";

    document.addEventListener('DOMContentLoaded', loadConfig);

    async function loadConfig() {
        try {
            const response = await fetch(`/api/config${configDir}/${encodeURIComponent(configFile)}?parsed=true`);
            const data = await response.json();
            configData = data.parsed;
            populateForm();
        } catch (error) {
            RTUPortal.showNotification('Error loading config: ' + error.message, 'error');
        }
    }

    function populateForm() {
        // Data is directly in configData, not nested under 'communication'
        const api = configData.api_endpoints || {};
        const mqtt = configData.mqtt_config || {};
        const agg = configData.aggregation_config || {};
        const perf = configData.performance_config || {};
        const gateway = configData.modbus_tcp_gateway || {};
        const retry = configData.retry_config || {};

        // Device Identity
        setValue('device-id', configData.device_id);

        // API Endpoints
        setValue('api-electrical-measurements-url', api.electrical?.measurements?.url);
        setValue('api-electrical-alerts-url', api.electrical?.alerts?.url);
        setValue('api-water-measurements-url', api.water?.measurements?.url);
        setValue('api-water-alerts-url', api.water?.alerts?.url);

        // MQTT
        setValue('mqtt-host', mqtt.host);
        setValue('mqtt-port', mqtt.port);
        setValue('mqtt-username', mqtt.username);
        originalPassword = mqtt.password || '';
        setValue('mqtt-topic-electrical-measurements', mqtt.topics?.electrical?.measurements);
        setValue('mqtt-topic-electrical-alerts', mqtt.topics?.electrical?.alerts);
        setValue('mqtt-topic-water-measurements', mqtt.topics?.water?.measurements);
        setValue('mqtt-topic-water-alerts', mqtt.topics?.water?.alerts);

        // Aggregation
        setChecked('aggregation-enabled', agg.enabled);
        setValue('aggregation-windows', (agg.windows || []).join(', '));
        setValue('aggregation-report-interval', agg.report_interval);

        // Performance
        setChecked('performance-enabled', perf.enabled);
        setValue('performance-cpu', perf.cpu_threshold);
        setValue('performance-memory', perf.memory_threshold);
        setValue('performance-disk', perf.disk_threshold);

        // Gateway
        setChecked('gateway-enabled', gateway.enabled);
        setValue('gateway-host', gateway.host);
        setValue('gateway-port', gateway.port);
        setValue('gateway-cache-ttl', gateway.cache_ttl);
        setValue('gateway-batch-size', gateway.max_batch_size);

        // Other
        setValue('cache-ttl', configData.cache_ttl);
        setValue('retry-interval', retry.interval);
        setValue('discord-webhook', configData.discord_webhook_url);
    }

    function setValue(id, value) {
        const el = document.getElementById(id);
        if (el && value !== undefined && value !== null) {
            el.value = value;
        }
    }

    function setChecked(id, value) {
        const el = document.getElementById(id);
        if (el) {
            el.checked = !!value;
        }
    }

    function getValue(id) {
        const el = document.getElementById(id);
        return el ? el.value : '';
    }

    function getChecked(id) {
        const el = document.getElementById(id);
        return el ? el.checked : false;
    }

    function toggleSection(header) {
        const body = header.nextElementSibling;
        const toggle = header.querySelector('.section-toggle');
        body.classList.toggle('collapsed');
        toggle.classList.toggle('collapsed');
    }

    function markUnsaved() {
        hasChanges = true;
        document.getElementById('save-btn').disabled = false;
        document.getElementById('save-indicator').className = 'save-indicator unsaved';
        document.getElementById('save-indicator').innerHTML = '<span>●</span> Unsaved changes';
    }

    async function saveConfig() {
        if (!hasChanges) return;

        try {
            const yamlContent = buildYamlContent();

            const response = await fetch(`/api/config${configDir}/${encodeURIComponent(configFile)}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    filename: configFile,
                    content: yamlContent,
                    config_dir: configDir
                })
            });

            const result = await response.json();

            if (result.success) {
                hasChanges = false;
                document.getElementById('save-btn').disabled = true;
                document.getElementById('save-indicator').className = 'save-indicator';
                document.getElementById('save-indicator').innerHTML = '<span>●</span> All changes saved';
                RTUPortal.showNotification('Configuration saved successfully', 'success');

                if (confirm('Configuration saved. Restart service to apply changes?')) {
                    await restartService();
                }
            } else {
                throw new Error(result.detail || 'Save failed');
            }
        } catch (error) {
            RTUPortal.showNotification('Error saving: ' + error.message, 'error');
        }
    }

    function buildYamlContent() {
        const password = getValue('mqtt-password') || originalPassword;
        const windowsStr = getValue('aggregation-windows');
        const windows = windowsStr ? windowsStr.split(',').map(w => parseInt(w.trim())).filter(w => !isNaN(w)) : [60, 300, 900, 3600];
        const deviceId = getValue('device-id');

        const lines = [];

        // Add device_id if set
        if (deviceId) {
            lines.push('# Device identifier - used for config publishing and display');
            lines.push(`device_id: "${deviceId}"`);
            lines.push('');
        }

        lines.push(
            'communication:',
            '  api_endpoints:',
            '    electrical:',
            '      measurements:',
            `        url: "${getValue('api-electrical-measurements-url')}"`,
            '        headers:',
            '          Content-Type: "application/json"',
            '      alerts:',
            `        url: "${getValue('api-electrical-alerts-url')}"`,
            '        headers:',
            '          Content-Type: "application/json"',
            '    water:',
            '      measurements:',
            `        url: "${getValue('api-water-measurements-url')}"`,
            '        headers:',
            '          Content-Type: "application/json"',
            '      alerts:',
            `        url: "${getValue('api-water-alerts-url')}"`,
            '        headers:',
            '          Content-Type: "application/json"',
            '',
            '  mqtt_config:',
            `    host: "${getValue('mqtt-host')}"`,
            `    port: ${getValue('mqtt-port') || 1883}`,
            `    username: "${getValue('mqtt-username')}"`,
            `    password: "${password}"`,
            '    topics:',
            '      electrical:',
            `        measurements: "${getValue('mqtt-topic-electrical-measurements')}"`,
            `        alerts: "${getValue('mqtt-topic-electrical-alerts')}"`,
            '      water:',
            `        measurements: "${getValue('mqtt-topic-water-measurements')}"`,
            `        alerts: "${getValue('mqtt-topic-water-alerts')}"`,
            '      relay:',
            '        measurements: "sensors/relay/measurements"',
            '        alerts: "sensors/relay/alerts"',
            '',
            '  aggregation_config:',
            `    enabled: ${getChecked('aggregation-enabled')}`,
            `    windows: [${windows.join(', ')}]`,
            `    report_interval: ${getValue('aggregation-report-interval') || 60}`,
            '    max_buffer_size: 3600',
            '',
            '  performance_config:',
            `    enabled: ${getChecked('performance-enabled')}`,
            '    monitor_interval: 60',
            `    cpu_threshold: ${getValue('performance-cpu') || 80.0}`,
            `    memory_threshold: ${getValue('performance-memory') || 80.0}`,
            `    disk_threshold: ${getValue('performance-disk') || 90.0}`,
            '',
            '  watchdog_config:',
            '    enabled: true',
            '    health_check_interval: 30',
            '    unhealthy_threshold: 3',
            '',
            '  modbus_tcp_gateway:',
            `    enabled: ${getChecked('gateway-enabled')}`,
            `    host: "${getValue('gateway-host') || '0.0.0.0'}"`,
            `    port: ${getValue('gateway-port') || 4196}`,
            `    cache_ttl: ${getValue('gateway-cache-ttl') || 180}`,
            `    max_batch_size: ${getValue('gateway-batch-size') || 125}`,
            '    max_gap_size: 10',
            '',
            `  cache_ttl: ${getValue('cache-ttl') || 120}`,
            '',
            '  retry_config:',
            `    interval: ${getValue('retry-interval') || 5}`,
            '    max_retries: 3',
            '',
            `discord_webhook_url: "${getValue('discord-webhook')}"`,
        ];

        return lines.join('\n');
    }

    async function restartService() {
        try {
            RTUPortal.showNotification('Restarting service...', 'info');
            const response = await fetch('/api/service/restart', { method: 'POST' });
            if (response.ok) {
                RTUPortal.showNotification('Service restart initiated', 'success');
            }
        } catch (error) {
            RTUPortal.showNotification('Restart failed: ' + error.message, 'error');
        }
    }

    window.addEventListener('beforeunload', (e) => {
        if (hasChanges) {
            e.preventDefault();
            e.returnValue = '';
        }
    });
</script>
{% endblock %}