{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">


  <h1 class="ct-docs-page-h1-title" id="content">Chargepoint {{ station_id }}</h1>
  {% if target %}
  <div class="card shadow-sm border mb-4">

    <div class="card-body py-3">
      <div class="table-responsive">
        <table class="table align-items-center mb-0">
          <thead>
            <tr>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Name</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">WS URL</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-xs font-weight-bold mb-0">{{ target.short_name }}</td>
              <td class="text-xs font-weight-bold mb-0">{{ target.ws_url }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  {% endif %}

  <div class="row g-3 mb-4">
    <div class="col-12 col-md-6 col-xl-4">
      <div class="card shadow-sm border h-100">
        <div class="card-body">
          <h6 class="text-sm mb-3">OCPP-Versionen</h6>
          <div class="d-flex flex-column gap-3">
            <div class="d-flex align-items-center gap-3">
              <div class="bg-primary text-white rounded-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                <i class="ni ni-send"></i>
              </div>
              <div>
                <div class="text-xxs text-secondary">OCPP Inbound</div>
                <div class="text-sm fw-semibold">{{ ocpp_versions.inbound or '–' }}</div>
              </div>
            </div>
            <div class="d-flex align-items-center gap-3">
              <div class="bg-success text-white rounded-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                <i class="ni ni-curved-next"></i>
              </div>
              <div>
                <div class="text-xxs text-secondary">OCPP Outbound</div>
                <div class="text-sm fw-semibold">{{ ocpp_versions.outbound or '–' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card shadow-sm border mb-4">
    <div class="card-header pb-0 d-flex flex-column flex-md-row align-items-md-center justify-content-md-between">
      <h6 class="mb-0 text-sm">BootNotification Info</h6>
      {% if bootnotification_info and bootnotification_info.timestamp_display %}
      <span class="text-xxs text-secondary mt-2 mt-md-0">Stand: {{ bootnotification_info.timestamp_display }}</span>
      {% endif %}
    </div>
    <div class="card-body p-0">
      {% if bootnotification_info %}
        {% if bootnotification_info.error %}
        <div class="p-4">
          <p class="text-sm mb-0">{{ bootnotification_info.error }}</p>
        </div>
        {% else %}
        <div class="table-responsive">
          <table class="table align-items-center mb-0">
            <thead>
              <tr>
                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Feld</th>
                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Wert</th>
              </tr>
            </thead>
            <tbody>
              {% for field in bootnotification_info.fields %}
              <tr>
                <td class="text-xs font-weight-bold mb-0">{{ field.label }}</td>
                <td class="text-xs">{{ field.value }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% endif %}
      {% else %}
      <div class="p-4">
        <p class="text-sm mb-0">Keine BootNotification-Informationen verfügbar.</p>
      </div>
      {% endif %}
    </div>
  </div>

  <div class="d-flex flex-column flex-lg-row align-items-lg-center gap-3 mb-4">
    <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-2">
      <button class="btn btn-sm btn-primary shadow" id="refreshConfigButton" type="button">
        <span class="spinner-border spinner-border-sm me-2 d-none" id="refreshConfigSpinner" role="status" aria-hidden="true"></span>
        <span id="refreshConfigLabel">Konfiguration aktualisieren</span>
      </button>
      <span class="text-muted text-xxs" id="configLastUpdated"></span>
    </div>
    <div class="ms-lg-auto w-100 w-lg-50">
      <label for="configSearch" class="form-label text-xs text-secondary mb-1">Konfigurationswerte durchsuchen</label>
      <div class="input-group input-group-sm shadow-sm">
        <span class="input-group-text bg-white text-body"><i class="ni ni-zoom-split-in"></i></span>
        <input type="search" class="form-control" id="configSearch" placeholder="Mindestens 3 Zeichen eingeben">
      </div>
    </div>
  </div>
  
  <div id="configEmptyState" class="alert alert-light border text-sm text-body d-none" role="status"></div>

  <div class="card shadow-sm border mb-4">
    <div class="card-header pb-0 d-flex align-items-center justify-content-between">
      <h6 class="mb-0 text-sm">Letzte Autorisierungen</h6>
      <a class="text-xs fw-semibold" href="{{ url_for('cp_authorization_log_view') }}">Alle anzeigen</a>
    </div>
    <div class="card-body p-0">
      {% if recent_auth_logs %}
      <div class="table-responsive">
        <table class="table align-items-center mb-0">
          <thead>
            <tr>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Zeitpunkt</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Quelle</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Benutzer</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Passwort</th>
            </tr>
          </thead>
          <tbody>
            {% for log in recent_auth_logs %}
            <tr>
              <td class="text-xs font-weight-bold">{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') if log.created_at else '-' }}</td>
              <td class="text-xs">{{ log.used_auth_source or '-' }}</td>
              <td class="text-xs">{{ log.incoming_auth_username or '-' }}</td>
              <td class="text-xs">{{ log.incoming_auth_password or '-' }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="p-4">
        <p class="text-sm mb-0">Für diese Wallbox liegen noch keine Autorisierungsereignisse vor.</p>
      </div>
      {% endif %}
    </div>
  </div>

  <h1 class="ct-docs-page-h1-title" id="content">Konfiguration {{ station_id }}</h1>
  <div id="configAccordion" class="accordion"></div>
</main>

<div class="modal fade" id="updateConfigModal" tabindex="-1" aria-labelledby="updateConfigModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="updateConfigModalLabel">Konfiguration bearbeiten</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="updateConfigForm">
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label text-xs text-secondary" for="configKeyInput">Schlüssel</label>
            <input type="text" class="form-control" id="configKeyInput" readonly>
          </div>
          <div class="mb-3">
            <label class="form-label text-xs text-secondary" for="configValueInput">Wert</label>
            <input type="text" class="form-control" id="configValueInput" required>
          </div>
          <div class="text-xxs text-secondary" id="configDescription"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Abbrechen</button>
          <button type="submit" class="btn btn-primary" id="updateConfigSubmit">
            <span class="spinner-border spinner-border-sm me-2 d-none" id="updateConfigSpinner" role="status" aria-hidden="true"></span>
            Speichern
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

{% set cluster_list_url = url_for('static', filename='json/getconfig_clusterlist.json') %}
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const stationId = {{ station_id|tojson }};
    const initialEntries = {{ config_entries|tojson }};
    const clusterListUrl = {{ cluster_list_url|tojson }};
    const clusterOrder = [
      'Kommunikation',
      'Authorisierung',
      'Zugang',
      'Display',
      'Sicherheit',
      'Lastmanagement',
      'Netzanschluss',
      'Monitoring',
      'Steuerung',
      'Tarif',
      'RFID',
      'Sonstiges'
    ];

    const accordionEl = document.getElementById('configAccordion');
    const emptyStateEl = document.getElementById('configEmptyState');
    const searchInput = document.getElementById('configSearch');
    const refreshBtn = document.getElementById('refreshConfigButton');
    const refreshSpinner = document.getElementById('refreshConfigSpinner');
    const refreshLabel = document.getElementById('refreshConfigLabel');
    const lastUpdatedLabel = document.getElementById('configLastUpdated');

    const modalEl = document.getElementById('updateConfigModal');
    const modal = window.bootstrap ? new window.bootstrap.Modal(modalEl) : null;
    const configKeyInput = document.getElementById('configKeyInput');
    const configValueInput = document.getElementById('configValueInput');
    const configDescription = document.getElementById('configDescription');
    const updateForm = document.getElementById('updateConfigForm');
    const updateSubmit = document.getElementById('updateConfigSubmit');
    const updateSpinner = document.getElementById('updateConfigSpinner');

    let clusterInfoMap = new Map();
    let allEntries = [];
    let activeSearchTerm = '';
    let activeSearchDisplay = '';
    let currentModalEntry = null;

    const notify = (type, message) => {
      if (window.toastr && typeof window.toastr[type] === 'function') {
        window.toastr[type](message);
        return;
      }
      if (type === 'error') {
        window.alert(message);
      } else if (type === 'warning') {
        console.warn(message);
      } else {
        console.log(message);
      }
    };

    const setLastUpdated = (date) => {
      if (!lastUpdatedLabel) {
        return;
      }
      if (!date) {
        lastUpdatedLabel.textContent = '';
        return;
      }
      try {
        lastUpdatedLabel.textContent = `Zuletzt aktualisiert: ${date.toLocaleString('de-DE')}`;
      } catch (err) {
        lastUpdatedLabel.textContent = `Zuletzt aktualisiert: ${date.toString()}`;
      }
    };

    const setRefreshLoading = (isLoading) => {
      if (refreshBtn) {
        refreshBtn.disabled = isLoading;
      }
      if (refreshSpinner) {
        refreshSpinner.classList.toggle('d-none', !isLoading);
      }
      if (refreshLabel) {
        refreshLabel.textContent = isLoading ? 'Aktualisieren…' : 'Konfiguration aktualisieren';
      }
    };

    const setUpdateLoading = (isLoading) => {
      if (updateSubmit) {
        updateSubmit.disabled = isLoading;
      }
      if (updateSpinner) {
        updateSpinner.classList.toggle('d-none', !isLoading);
      }
    };

    const matchesSearch = (entry, term) => {
      if (!term) {
        return true;
      }
      const haystack = `${entry.key} ${entry.value} ${entry.description || ''}`.toLowerCase();
      return haystack.includes(term);
    };

    const buildEntry = (rawEntry) => {
      const key = rawEntry && rawEntry.key ? String(rawEntry.key) : '';
      const rawValue = rawEntry && rawEntry.value !== undefined && rawEntry.value !== null ? rawEntry.value : '';
      const value = typeof rawValue === 'string' ? rawValue : String(rawValue);
      const info = clusterInfoMap.get(key) || {};
      const clusterName = info && typeof info.cluster === 'string' && info.cluster ? info.cluster : 'Sonstiges';
      const normalizedCluster = clusterOrder.includes(clusterName) ? clusterName : 'Sonstiges';
      const description = info && typeof info.description === 'string' ? info.description : '';
      const readonly = Boolean(info && info.readonly);
      const isStandard = Boolean(info && info.isStandard);
      return {
        key,
        value,
        description,
        cluster: normalizedCluster,
        readonly,
        isStandard,
      };
    };

    const updateEntries = (entries) => {
      if (!Array.isArray(entries)) {
        allEntries = [];
      } else {
        allEntries = entries.map(buildEntry).sort((a, b) => a.key.localeCompare(b.key, 'de', { sensitivity: 'base' }));
      }
      render();
    };

    const createCell = (tag, text, classes = '') => {
      const cell = document.createElement(tag);
      if (classes) {
        cell.className = classes;
      }
      cell.textContent = text;
      return cell;
    };

    const render = () => {
      const searchActive = Boolean(activeSearchTerm);
      const filtered = searchActive ? allEntries.filter((entry) => matchesSearch(entry, activeSearchTerm)) : allEntries.slice();

      accordionEl.innerHTML = '';

      if (!filtered.length) {
        if (emptyStateEl) {
          emptyStateEl.classList.remove('d-none');
          if (searchActive) {
            emptyStateEl.textContent = `Keine Treffer für „${activeSearchDisplay}“.`;
          } else {
            emptyStateEl.textContent = 'Keine Konfigurationsdaten vorhanden. Bitte Verbindung prüfen und aktualisieren.';
          }
        }
        return;
      }

      if (emptyStateEl) {
        emptyStateEl.classList.add('d-none');
        emptyStateEl.textContent = '';
      }

      const grouped = new Map();
      for (const entry of filtered) {
        const clusterName = entry.cluster || 'Sonstiges';
        if (!grouped.has(clusterName)) {
          grouped.set(clusterName, []);
        }
        grouped.get(clusterName).push(entry);
      }

      let index = 0;
      for (const clusterName of clusterOrder) {
        const clusterEntries = grouped.get(clusterName);
        if (!clusterEntries || !clusterEntries.length) {
          continue;
        }
        index += 1;
        const collapseId = `configCluster-${index}`;
        const headingId = `${collapseId}-heading`;
        const accordionItem = document.createElement('div');
        accordionItem.className = 'accordion-item mb-3 shadow-sm border';

        const header = document.createElement('h5');
        header.className = 'accordion-header';
        header.id = headingId;

        const button = document.createElement('button');
        button.className = 'accordion-button d-flex justify-content-between align-items-center';
        if (!searchActive) {
          button.classList.add('collapsed');
        }
        button.type = 'button';
        button.setAttribute('data-bs-toggle', 'collapse');
        button.setAttribute('data-bs-target', `#${collapseId}`);
        button.setAttribute('aria-expanded', searchActive ? 'true' : 'false');
        button.setAttribute('aria-controls', collapseId);

        const titleSpan = document.createElement('span');
        titleSpan.textContent = clusterName;
        button.appendChild(titleSpan);

        const badge = document.createElement('span');
        badge.className = 'badge bg-secondary ms-2';
        badge.textContent = String(clusterEntries.length);
        button.appendChild(badge);

        header.appendChild(button);
        accordionItem.appendChild(header);

        const collapse = document.createElement('div');
        collapse.id = collapseId;
        collapse.className = 'accordion-collapse collapse';
        if (searchActive) {
          collapse.classList.add('show');
        }
        collapse.setAttribute('aria-labelledby', headingId);

        const body = document.createElement('div');
        body.className = 'accordion-body p-0';

        const tableWrapper = document.createElement('div');
        tableWrapper.className = 'table-responsive';

        const table = document.createElement('table');
        table.className = 'table table-striped align-items-center mb-0';

        const thead = document.createElement('thead');
        const headerRow = document.createElement('tr');
        const headers = [
          'Key',
          'Wert',
          'Beschreibung',
          'Aktion'
        ];
        for (const headerText of headers) {
          const th = createCell('th', headerText, 'text-uppercase text-secondary text-xxs font-weight-bolder opacity-7');
          headerRow.appendChild(th);
        }
        thead.appendChild(headerRow);
        table.appendChild(thead);

        const tbody = document.createElement('tbody');
        for (const entry of clusterEntries) {
          const row = document.createElement('tr');
          row.className = 'align-middle';

          const keyCell = createCell('td', entry.key, 'text-xs font-weight-bold text-body');
          if (entry.isStandard) {
            const badgeStandard = document.createElement('span');
            badgeStandard.className = 'badge bg-gradient-info ms-2';
            badgeStandard.textContent = 'Standard';
            keyCell.appendChild(badgeStandard);
          }
          row.appendChild(keyCell);

          const valueCell = createCell('td', entry.value, 'text-xs text-body fw-bold');
          row.appendChild(valueCell);

          const descriptionText = entry.description || '';
          const descriptionCell = createCell('td', descriptionText, 'text-xs text-secondary');
          row.appendChild(descriptionCell);

          const actionCell = document.createElement('td');
          actionCell.className = 'text-end';
          const updateButton = document.createElement('button');
          updateButton.type = 'button';
          updateButton.className = 'btn btn-sm btn-outline-primary';
          updateButton.textContent = 'Update';
          if (entry.readonly) {
            updateButton.disabled = true;
            updateButton.classList.add('disabled');
            updateButton.title = 'Dieser Wert ist schreibgeschützt.';
          } else {
            updateButton.addEventListener('click', () => openUpdateModal(entry));
          }
          actionCell.appendChild(updateButton);
          row.appendChild(actionCell);

          tbody.appendChild(row);
        }
        table.appendChild(tbody);

        tableWrapper.appendChild(table);
        body.appendChild(tableWrapper);
        collapse.appendChild(body);
        accordionItem.appendChild(collapse);
        accordionEl.appendChild(accordionItem);
      }
    };

    const openUpdateModal = (entry) => {
      currentModalEntry = entry;
      if (configKeyInput) {
        configKeyInput.value = entry.key;
      }
      if (configValueInput) {
        configValueInput.value = entry.value;
      }
      if (configDescription) {
        configDescription.textContent = entry.description || 'Keine Beschreibung verfügbar.';
      }
      if (modal) {
        modal.show();
      }
    };

    const submitUpdate = (event) => {
      event.preventDefault();
      if (!currentModalEntry) {
        return;
      }
      const newValue = configValueInput ? configValueInput.value : '';
      setUpdateLoading(true);

      fetch('{{ url_for('cp_config_update_entry') }}', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          station_id: stationId,
          key: currentModalEntry.key,
          value: newValue
        })
      })
        .then(async (response) => {
          const data = await response.json().catch(() => ({}));
          if (!response.ok) {
            const errorMessage = data && data.error ? data.error : 'Unbekannter Fehler beim Aktualisieren.';
            throw new Error(errorMessage);
          }
          return data;
        })
        .then((data) => {
          if (data && Array.isArray(data.entries)) {
            updateEntries(data.entries);
          } else {
            const entry = allEntries.find((item) => item.key === currentModalEntry.key);
            if (entry) {
              entry.value = newValue;
              render();
            }
          }
          if (data && data.refresh_error) {
            notify('warning', `Aktualisiert, aber Neuladen der Konfiguration fehlgeschlagen: ${data.refresh_error}`);
          }
          notify('success', `Konfiguration „${currentModalEntry.key}” aktualisiert.`);
          setLastUpdated(new Date());
          if (modal) {
            modal.hide();
          }
        })
        .catch((error) => {
          notify('error', error.message || 'Aktualisierung fehlgeschlagen.');
        })
        .finally(() => {
          setUpdateLoading(false);
        });
    };

    const refreshConfiguration = () => {
      setRefreshLoading(true);
      fetch('{{ url_for('cp_config_refresh') }}', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ station_id: stationId })
      })
        .then(async (response) => {
          const data = await response.json().catch(() => ({}));
          if (!response.ok) {
            const errorMessage = data && data.error ? data.error : 'Fehler beim Aktualisieren der Konfiguration.';
            throw new Error(errorMessage);
          }
          return data;
        })
        .then((data) => {
          updateEntries(data.entries || []);
          setLastUpdated(new Date());
          notify('success', 'Konfiguration wurde neu abgefragt.');
        })
        .catch((error) => {
          notify('error', error.message || 'Die Konfiguration konnte nicht aktualisiert werden.');
        })
        .finally(() => {
          setRefreshLoading(false);
        });
    };

    const loadClusterInfo = () => {
      const url = `${clusterListUrl}?_=${Date.now()}`;
      return fetch(url, { cache: 'no-store' })
        .then((response) => {
          if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
          }
          return response.json();
        })
        .then((items) => {
          const map = new Map();
          if (Array.isArray(items)) {
            for (const item of items) {
              if (item && item.key) {
                map.set(String(item.key), item);
              }
            }
          }
          clusterInfoMap = map;
        });
    };

    searchInput.addEventListener('input', () => {
      const query = searchInput.value.trim();
      if (query.length >= 3) {
        activeSearchTerm = query.toLowerCase();
        activeSearchDisplay = query;
      } else {
        activeSearchTerm = '';
        activeSearchDisplay = '';
      }
      render();
    });

    if (refreshBtn) {
      refreshBtn.addEventListener('click', refreshConfiguration);
    }

    if (updateForm) {
      updateForm.addEventListener('submit', submitUpdate);
    }

    loadClusterInfo()
      .catch((error) => {
        console.warn('Failed to load cluster information', error);
        clusterInfoMap = new Map();
      })
      .finally(() => {
        updateEntries(initialEntries);
        setLastUpdated(new Date());
      });
  });
</script>
{% endblock %}