{% extends "op_zz_frame.html" %}
{% block centercontent %}

<main class="ct-docs-content-col" role="main">
  <style>
    .docs {
      --firmware-page-bg: #f8fafc;
      --firmware-card-bg: #ffffff;
      --firmware-card-border: rgba(226, 232, 240, 0.9);
      --firmware-card-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
      --firmware-text-primary: #0f172a;
      --firmware-text-muted: rgba(71, 85, 105, 0.9);
      --firmware-divider: rgba(226, 232, 240, 0.9);
      --firmware-badge-bg: rgba(59, 130, 246, 0.08);
      --firmware-badge-color: #1d4ed8;
      --firmware-select-bg: #ffffff;
      --firmware-select-border: rgba(148, 163, 184, 0.6);
      --firmware-select-color: #0f172a;
      --firmware-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%230f172a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      --firmware-input-bg: #ffffff;
      --firmware-input-border: rgba(148, 163, 184, 0.6);
      --firmware-table-header-bg: rgba(241, 245, 249, 0.95);
      --firmware-table-row-hover: rgba(59, 130, 246, 0.08);
      --firmware-code-bg: rgba(226, 232, 240, 0.7);
    }

    .docs.dark-edition {
      --firmware-page-bg: rgba(15, 23, 42, 0.95);
      --firmware-card-bg: rgba(15, 23, 42, 0.92);
      --firmware-card-border: rgba(30, 41, 59, 0.9);
      --firmware-card-shadow: 0 22px 45px rgba(2, 6, 23, 0.65);
      --firmware-text-primary: rgba(226, 232, 240, 0.98);
      --firmware-text-muted: rgba(148, 163, 184, 0.8);
      --firmware-divider: rgba(51, 65, 85, 0.8);
      --firmware-badge-bg: rgba(59, 130, 246, 0.16);
      --firmware-badge-color: rgba(191, 219, 254, 0.95);
      --firmware-select-bg: rgba(30, 41, 59, 0.9);
      --firmware-select-border: rgba(100, 116, 139, 0.7);
      --firmware-select-color: rgba(226, 232, 240, 0.95);
      --firmware-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23e2e8f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      --firmware-input-bg: rgba(30, 41, 59, 0.9);
      --firmware-input-border: rgba(71, 85, 105, 0.7);
      --firmware-table-header-bg: rgba(30, 41, 59, 0.85);
      --firmware-table-row-hover: rgba(59, 130, 246, 0.18);
      --firmware-code-bg: rgba(15, 23, 42, 0.65);
    }

    .firmware-page {
      display: flex;
      flex-direction: column;
      gap: 28px;
      margin-top: 12px;
      color: var(--firmware-text-primary);
    }

    .firmware-page__header {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
    }

    .firmware-page__subtitle {
      margin: 4px 0 0;
      font-size: 0.95rem;
      color: var(--firmware-text-muted);
    }

    .firmware-card {
      background: var(--firmware-card-bg);
      border-radius: 16px;
      box-shadow: var(--firmware-card-shadow);
      border: 1px solid var(--firmware-card-border);
      padding: 24px;
      position: relative;
      overflow: hidden;
    }

    .firmware-card h2 {
      font-size: 1.1rem;
      margin-bottom: 4px;
      color: var(--firmware-text-primary);
    }

    .firmware-section-header {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      margin-bottom: 18px;
    }

    .firmware-section-header p {
      margin: 2px 0 0;
      color: var(--firmware-text-muted);
      font-size: 0.9rem;
    }

    .firmware-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 14px;
      border-radius: 999px;
      background: var(--firmware-badge-bg);
      color: var(--firmware-badge-color);
      font-weight: 600;
      font-size: 0.8rem;
      letter-spacing: 0.02em;
    }

    .firmware-path {
      margin-top: 4px;
      font-size: 0.85rem;
      color: var(--firmware-text-muted);
    }

    .firmware-path code {
      background: var(--firmware-code-bg);
      border-radius: 6px;
      padding: 3px 6px;
      font-size: 0.8rem;
    }

    .firmware-table-wrapper {
      border-radius: 12px;
      border: 1px solid var(--firmware-divider);
      overflow: hidden;
    }

    .firmware-table {
      width: 100%;
      margin-bottom: 0;
      border-collapse: collapse;
      color: var(--firmware-text-primary);
    }

    .firmware-table thead {
      background: var(--firmware-table-header-bg);
    }

    .firmware-table th,
    .firmware-table td {
      padding: 14px 18px;
      font-size: 0.9rem;
      border-bottom: 1px solid var(--firmware-divider);
    }

    .firmware-table tbody tr:hover {
      background: var(--firmware-table-row-hover);
      transition: background 0.2s ease;
    }

    .firmware-table a {
      font-weight: 600;
      color: inherit;
      text-decoration: none;
    }

    .firmware-table a:hover,
    .firmware-table a:focus {
      text-decoration: underline;
    }

    .firmware-empty-state {
      padding: 24px;
      border-radius: 12px;
      border: 1px dashed var(--firmware-divider);
      color: var(--firmware-text-muted);
      background: rgba(148, 163, 184, 0.06);
      font-size: 0.95rem;
    }

    .firmware-form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 24px;
    }

    .firmware-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .firmware-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .firmware-label {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--firmware-text-muted);
    }

    .firmware-select,
    .firmware-input {
      background: var(--firmware-input-bg);
      border: 1px solid var(--firmware-input-border);
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 0.95rem;
      color: var(--firmware-text-primary);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .firmware-select {
      appearance: none;
      background: var(--firmware-select-bg) var(--firmware-select-arrow) no-repeat right 14px center;
      background-size: 16px 16px;
      color: var(--firmware-select-color);
      padding-right: 42px;
      cursor: pointer;
    }

    .firmware-select:focus,
    .firmware-input:focus {
      outline: none;
      border-color: rgba(59, 130, 246, 0.6);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

    .firmware-input[type="file"] {
      padding: 10px 14px;
    }

    .firmware-helper {
      font-size: 0.82rem;
      color: var(--firmware-text-muted);
      margin-top: -8px;
    }

    .firmware-form__actions {
      margin-top: 8px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .pipelet-btn {
      margin-top: 0;
      border: none;
      color: #0b0d10;
      font-weight: 600;
      padding: 12px 20px;
      border-radius: 12px;
      min-width: 180px;
      transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    }

    .pipelet-btn:hover,
    .pipelet-btn:focus {
      transform: translateY(-1px);
      box-shadow: 0 12px 22px rgba(234, 88, 12, 0.24);
      color: #0b0d10;
    }

    .pipelet-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      box-shadow: none;
    }

    .firmware-delete-btn {
      min-width: auto;
      padding: 10px 18px;
      background-image: none;
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(248, 113, 113, 0.9));
      color: #fff;
    }

    .firmware-delete-btn:hover,
    .firmware-delete-btn:focus {
      box-shadow: 0 12px 24px rgba(239, 68, 68, 0.35);
      color: #fff;
    }

    @media (max-width: 768px) {
      .firmware-section-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .pipelet-btn {
        width: 100%;
      }
    }
  </style>

  <div class="firmware-page">
    <div class="firmware-page__header">
      <div>
        <h1 class="ct-docs-page-h1-title" id="content">{{ _('Firmware Management') }}</h1>
        <p class="firmware-page__subtitle">{{ _('Manage available firmware files and distribute updates to your wallboxes.') }}</p>
      </div>
    </div>

    <section class="firmware-card firmware-card--table">
      <div class="firmware-section-header">
        <div>
          <h2>{{ _('Available firmware') }}</h2>
          <p class="firmware-path">{{ _('Firmware files are loaded from {path}.', path='<code>' ~ firmware_directory ~ '</code>')|safe }}</p>
        </div>
        <span class="firmware-badge">
          {{ firmwares|length }} {{ _('file') if firmwares|length == 1 else _('files') }}
        </span>
      </div>

      {% if firmwares %}
        <div class="firmware-table-wrapper">
          <table class="firmware-table">
            <thead>
              <tr>
                <th scope="col">{{ _('Filename') }}</th>
                <th scope="col">{{ _('Size') }}</th>
                <th scope="col">{{ _('Last modified') }}</th>
                <th scope="col">{{ _('Actions') }}</th>
              </tr>
            </thead>
            <tbody>
              {% for f in firmwares %}
              <tr data-filename="{{ f.name }}">
                <td>
                  <a href="{{ url_for('static', filename='firmware/' ~ f.name) }}" target="_blank" rel="noopener">
                    {{ f.name }}
                  </a>
                </td>
                <td title="{{ f.size }} bytes">{{ f.size_human }}</td>
                <td title="{{ f.modified_iso }}">{{ f.modified }}</td>
                <td>
                  <button type="button" class="pipelet-btn firmware-delete-btn" onclick="deleteFW({{ f.name|tojson }}, this)">
                    {{ _('Delete') }}
                  </button>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <div class="firmware-empty-state">
          <p>{{ _('No firmware files (≥100 KB) available.') }}</p>
        </div>
      {% endif %}
    </section>

    <div class="firmware-form-grid">
      <section class="firmware-card">
        <div class="firmware-section-header">
          <div>
            <h2>{{ _('Upload new firmware') }}</h2>
            <p>{{ _('Provide new firmware packages for your fleet.') }}</p>
          </div>
        </div>
        <form method="post" action="{{ url_for('firmware_upload') }}" enctype="multipart/form-data" class="firmware-form">
          <div class="firmware-field">
            <label for="firmware_file" class="firmware-label">{{ _('Firmware file') }}</label>
            <input type="file" name="firmware_file" id="firmware_file" class="firmware-input" required>
          </div>
          <p class="firmware-helper">{{ _('Only files of at least 100 KB appear in the list above.') }}</p>
          <div class="firmware-form__actions">
            <button type="submit" class="pipelet-btn">{{ _('Upload firmware') }}</button>
          </div>
        </form>
      </section>

      <section class="firmware-card">
        <div class="firmware-section-header">
          <div>
            <h2>{{ _('Send firmware to a wallbox') }}</h2>
            <p>{{ _('Choose firmware, target wallbox, and delivery method.') }}</p>
          </div>
        </div>
        <form id="sendForm" class="firmware-form">
          <div class="firmware-field">
            <label for="fw_select" class="firmware-label">{{ _('Firmware file') }}</label>
            <select id="fw_select" class="firmware-select" {% if not firmwares %}disabled{% endif %}>
              {% for f in firmwares %}
                <option value="{{ f.name }}">{{ f.name }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="firmware-field">
            <label for="station_select" class="firmware-label">{{ _('Wallbox') }}</label>
            <select id="station_select" class="firmware-select">
              {% for s in stations %}
                <option value="{{ s.id }}">{{ s.label }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="firmware-field">
            <label for="fw_protocol" class="firmware-label">{{ _('Download protocol') }}</label>
            <select id="fw_protocol" class="firmware-select">
              {% for option in protocol_options %}
                <option value="{{ option.value }}" {% if option.value == default_protocol %}selected{% endif %}>
                  {{ option.label }}
                </option>
              {% endfor %}
            </select>
          </div>

          <div class="firmware-field">
            <label for="fw_target" class="firmware-label">{{ _('Send via') }}</label>
            <select id="fw_target" class="firmware-select">
              {% for option in delivery_options %}
                <option value="{{ option.value }}" {% if option.value == default_delivery %}selected{% endif %}>
                  {{ option.label }}
                </option>
              {% endfor %}
            </select>
          </div>

          <div class="firmware-form__actions">
            <button type="button" onclick="sendFW()" class="pipelet-btn" {% if not firmwares %}disabled{% endif %}>
              {{ _('Send firmware') }}
            </button>
          </div>
        </form>
      </section>
    </div>
  </div>

  <script>
  const deleteFirmwareTemplate = {{ _('Delete firmware \"{filename}\"?', filename='{filename}')|tojson }};
  const deleteFirmwareSuccessTemplate = {{ _('Deleted firmware {filename}', filename='{filename}')|tojson }};
  const deleteFirmwareErrorTemplate = {{ _('Deleting firmware failed: {error}', error='{error}')|tojson }};
  const deleteNetworkError = {{ _('Network error while deleting firmware.')|tojson }};
  const sendChooseFirmware = {{ _('Please choose a firmware file.')|tojson }};
  const sendChooseWallbox = {{ _('Please choose a wallbox.')|tojson }};
  const sendSuccessTemplate = {{ _('Firmware {filename} sent to {station}', filename='{filename}', station='{station}')|tojson }};
  const sendErrorTemplate = {{ _('Sending firmware failed: {error}', error='{error}')|tojson }};
  const sendNetworkError = {{ _('Network error while sending firmware.')|tojson }};

  function deleteFW(filename, button) {
    const confirmText = deleteFirmwareTemplate.replace('{filename}', filename);
    if (!confirm(confirmText)) {
      return;
    }
    fetch("{{ url_for('firmware_delete') }}", {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ filename: filename })
    })
    .then(r => r.json().then(d => ({ s: r.status, d })))
    .then(o => {
      if (o.s === 200) {
        const successText = deleteFirmwareSuccessTemplate.replace('{filename}', filename);
        toastr.success(successText);
        const row = button.closest('tr');
        if (row) {
          row.remove();
        }
        updateFirmwareSelect();
      } else {
        const errorText = deleteFirmwareErrorTemplate.replace('{error}', o.d.error || '');
        toastr.error(errorText);
      }
    })
    .catch(() => toastr.error(deleteNetworkError));
  }

  function updateFirmwareSelect() {
    const select = document.getElementById('fw_select');
    if (!select) {
      return;
    }
    const rows = document.querySelectorAll('tr[data-filename]');
    const previouslySelected = select.value;
    select.innerHTML = '';
    rows.forEach(row => {
      const value = row.getAttribute('data-filename');
      const option = document.createElement('option');
      option.value = value;
      option.textContent = value;
      select.appendChild(option);
    });
    if (select.options.length === 0) {
      select.disabled = true;
      document.querySelector('#sendForm button[type="button"]').disabled = true;
    } else {
      select.disabled = false;
      document.querySelector('#sendForm button[type="button"]').disabled = false;
      const optionToSelect = Array.from(select.options).find(opt => opt.value === previouslySelected);
      if (optionToSelect) {
        optionToSelect.selected = true;
      }
    }
  }

  function sendFW() {
    const firmwareSelect = document.getElementById('fw_select');
    const stationSelect = document.getElementById('station_select');
    const targetSelect = document.getElementById('fw_target');
    const protocolSelect = document.getElementById('fw_protocol');
    const filename = firmwareSelect ? firmwareSelect.value : '';
    const stationId = stationSelect ? stationSelect.value : '';
    const target = targetSelect ? targetSelect.value : '{{ default_delivery|default("broker") }}';
    const protocol = protocolSelect ? protocolSelect.value : '{{ default_protocol|default("https") }}';
    if (!filename) {
      toastr.error(sendChooseFirmware);
      return;
    }
    if (!stationId) {
      toastr.error(sendChooseWallbox);
      return;
    }
    fetch("{{ url_for('firmware_send') }}", {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ filename: filename, station_id: stationId, target: target, protocol: protocol })
    })
    .then(r => r.json().then(d => ({ s: r.status, d })))
    .then(o => {
      if (o.s === 200) {
        const successText = sendSuccessTemplate
          .replace('{filename}', filename)
          .replace('{station}', o.d.station);
        toastr.success(successText);
      } else {
        const errorText = sendErrorTemplate.replace('{error}', o.d.error || '');
        toastr.error(errorText);
      }
    })
    .catch(() => toastr.error(sendNetworkError));
  }
  </script>

</main>
{% endblock %}