{% extends 'admin/master.html' %}

{% block body %}
<style>
.home-hero {
  /* Minimalist hero — matches base.html's .app-hero treatment:
     title on a transparent background with a thin black hairline
     below; teal only on the build pill against black text. */
  background: transparent;
  color: #000;
  padding: 0.25rem 0 1rem;
  margin: 0.5rem 0 1.5rem;
  border-bottom: 2px solid #000;
}
.home-hero h1 {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-size: 1.9rem;
}
.home-hero p {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  color: #4a4f57;
}
.home-hero .build-pill {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  color: #000;
  background: #1acdb6;
  border-radius: 999px;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.home-card {
  background: #fff;
  border: 1px solid #e6e9ec;
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.home-card h2,
.home-card h4 {
  margin-top: 0;
  font-weight: 600;
}
.home-card h2 {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #eef0f3;
  padding-bottom: 0.5rem;
}
.home-card h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.links-list li {
  padding: 0.35rem 0;
}
.links-list a {
  color: #2c3e50;
  text-decoration: none;
  font-weight: 500;
}
.links-list a:hover {
  color: #3498db;
}

/* Filter chip row */
.filter-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #d7dbe0;
  background: #f8f9fa;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.filter-chip input {
  margin: 0;
  accent-color: currentColor;
}
.filter-chip.active-feat { color: #007bff; border-color: #bcd7f6; background: #eaf3fd; }
.filter-chip.active-fix  { color: #28a745; border-color: #bfe2c7; background: #ecf8ef; }
.filter-chip.active-inc  { color: #dc3545; border-color: #f0c2c7; background: #fcecee; }
.filter-chip.active-sec  { color: #fd7e14; border-color: #ffd6b3; background: #fff3e8; }
.filter-chip.active-oth  { color: #6c757d; border-color: #d7dbe0; background: #f8f9fa; }
.filter-chip.is-off { opacity: 0.45; }

.filter-toggle-all {
  background: #2c3e50;
  color: #fff;
  border: none;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}
.filter-toggle-all:hover { background: #1e2b38; }

/* Ensure changelog list items are properly spaced */
#changelog-content li {
  margin-bottom: 5px;
  line-height: 1.45;
}

/* Collapsible version sections: tighter layout so the page does not
   scroll forever when older versions are present. */
#changelog-content details {
  margin: 0.25rem 0 0.5rem;
  border-left: 3px solid #dee2e6;
  padding: 0.25rem 0.5rem;
}
#changelog-content details[open] {
  border-left-color: #0d6efd;
  margin-bottom: 1rem;
}
#changelog-content summary.changelog-version {
  cursor: pointer;
  list-style: none;
  padding: 0.15rem 0;
  display: block;
}
#changelog-content summary.changelog-version::-webkit-details-marker {
  display: none;
}
#changelog-content summary.changelog-version::before {
  content: "\25B8  ";
  color: #6c757d;
  font-weight: bold;
}
#changelog-content details[open] > summary.changelog-version::before {
  content: "\25BE  ";
  color: #0d6efd;
}
#changelog-content .changelog-version-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #495057;
}
#changelog-content details[open] > summary .changelog-version-title {
  color: #212529;
}
#changelog-content .changelog-body {
  display: block;
  padding: 0.25rem 0 0.25rem 1rem;
}
#changelog-content .changelog-body p { margin: 0.25rem 0; }
#changelog-content .changelog-body ul {
  margin: 0.25rem 0 0.5rem;
  padding-left: 1.25rem;
  list-style: disc;
}
#changelog-content .changelog-body li { margin: 0.1rem 0; }

.notice-box {
  background-color: #fff8e1;
  border: 1px solid #ffd54f;
  border-left: 4px solid #f9a825;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 10px;
}
.notice-box .notice-confirm {
  background: #f9a825;
  color: #212529;
  border: none;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
}
.notice-box .notice-confirm:hover { background: #e69100; }

.previous-releases a {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eef2f6;
  color: #2c3e50;
  font-size: 0.82rem;
  text-decoration: none;
}
.previous-releases a:hover { background: #dce3eb; }
</style>

<script>
function confirmNotice(noticeId) {
  if (!confirm('Have you checked and confirmed this notice?')) return;
  const confirmed = JSON.parse(localStorage.getItem('confirmed-notices') || '[]');
  if (!confirmed.includes(noticeId)) {
    confirmed.push(noticeId);
    localStorage.setItem('confirmed-notices', JSON.stringify(confirmed));
  }
  const el = document.getElementById('notice-' + noticeId);
  if (el) el.style.display = 'none';

  const remaining = document.querySelectorAll('.notice-box');
  const anyVisible = Array.from(remaining).some(n => n.style.display !== 'none');
  if (!anyVisible) {
    const section = document.getElementById('notices-section');
    if (section) section.style.display = 'none';
  }
}

function applyConfirmedNotices() {
  const confirmed = JSON.parse(localStorage.getItem('confirmed-notices') || '[]');
  confirmed.forEach(function(noticeId) {
    const el = document.getElementById('notice-' + noticeId);
    if (el) el.style.display = 'none';
  });

  const remaining = document.querySelectorAll('.notice-box');
  const anyVisible = Array.from(remaining).some(n => n.style.display !== 'none');
  if (!anyVisible) {
    const section = document.getElementById('notices-section');
    if (section) section.style.display = 'none';
  }
}

document.addEventListener('DOMContentLoaded', function() {
  applyConfirmedNotices();

  styleAndInitializeFilter();
  restoreFilterSettings();

  ['filter-feat', 'filter-fix', 'filter-incompatible', 'filter-sec', 'filter-other']
    .forEach(function(id) {
      const el = document.getElementById(id);
      if (!el) return;
      el.addEventListener('change', function() {
        saveFilterSettings();
        syncChipStates();
        filterChangelog();
      });
    });

  syncChipStates();
  filterChangelog();
});

function syncChipStates() {
  document.querySelectorAll('.filter-chip').forEach(function(chip) {
    const cb = chip.querySelector('input[type="checkbox"]');
    if (!cb) return;
    chip.classList.toggle('is-off', !cb.checked);
  });
}

function styleAndInitializeFilter() {
  const listItems = document.querySelectorAll('#changelog-content li');
  listItems.forEach(function(item) {
    const text = item.textContent.trim();
    if (text.includes('INCOMPATIBLE')) {
      item.setAttribute('data-type', 'incompatible');
      item.style.color = '#dc3545';
      item.style.fontWeight = 'bold';
    } else if (text.match(/^[^:]*FIX:/)) {
      item.setAttribute('data-type', 'fix');
      item.style.color = '#28a745';
      item.style.fontWeight = 'bold';
    } else if (text.match(/^[^:]*Feat:/i)) {
      item.setAttribute('data-type', 'feat');
      item.style.color = '#007bff';
      item.style.fontWeight = 'bold';
    } else if (text.match(/^[^:]*SEC:/i)) {
      item.setAttribute('data-type', 'sec');
      item.style.color = '#fd7e14';
      item.style.fontWeight = 'bold';
    } else {
      item.setAttribute('data-type', 'other');
      item.style.color = '#6c757d';
    }
  });
}

function saveFilterSettings() {
  const settings = {
    feat: document.getElementById('filter-feat').checked,
    fix: document.getElementById('filter-fix').checked,
    incompatible: document.getElementById('filter-incompatible').checked,
    sec: document.getElementById('filter-sec').checked,
    other: document.getElementById('filter-other').checked
  };
  localStorage.setItem('changelog-filter-settings', JSON.stringify(settings));
}

function restoreFilterSettings() {
  const savedSettings = localStorage.getItem('changelog-filter-settings');
  if (savedSettings) {
    try {
      const settings = JSON.parse(savedSettings);
      document.getElementById('filter-feat').checked = settings.feat !== undefined ? settings.feat : true;
      document.getElementById('filter-fix').checked = settings.fix !== undefined ? settings.fix : true;
      document.getElementById('filter-incompatible').checked = settings.incompatible !== undefined ? settings.incompatible : true;
      document.getElementById('filter-sec').checked = settings.sec !== undefined ? settings.sec : true;
      document.getElementById('filter-other').checked = settings.other !== undefined ? settings.other : true;
    } catch (e) {
      console.log('Failed to restore filter settings');
    }
  }
}

function filterChangelog() {
  const showFeat = document.getElementById('filter-feat').checked;
  const showFix = document.getElementById('filter-fix').checked;
  const showIncompatible = document.getElementById('filter-incompatible').checked;
  const showSec = document.getElementById('filter-sec').checked;
  const showOther = document.getElementById('filter-other').checked;

  const listItems = document.querySelectorAll('#changelog-content li');
  listItems.forEach(function(item) {
    const type = item.getAttribute('data-type');
    let show = false;
    if (type === 'feat' && showFeat) show = true;
    if (type === 'fix' && showFix) show = true;
    if (type === 'incompatible' && showIncompatible) show = true;
    if (type === 'sec' && showSec) show = true;
    if (type === 'other' && showOther) show = true;
    item.style.display = show ? 'block' : 'none';
  });
}

function toggleAllFilters() {
  const checkboxes = ['filter-feat', 'filter-fix', 'filter-incompatible', 'filter-sec', 'filter-other'];
  const anyUnchecked = checkboxes.some(id => !document.getElementById(id).checked);
  checkboxes.forEach(id => {
    document.getElementById(id).checked = anyUnchecked;
  });
  saveFilterSettings();
  syncChipStates();
  filterChangelog();
}
</script>

<div class="home-hero">
  <h1>Welcome to cmdbsyncer</h1>
  <p>Open Source — built by <strong>Kuhn &amp; Rue&szlig; GmbH</strong> in Germany.</p>
  <span class="build-pill">Build {{ config.BUILD_DATE }}</span>
</div>

<div class="row">
  <!-- Left Column: Links + Notices -->
  <div class="col-md-4">
    <div class="home-card">
      <h2>Links</h2>
      <ul class="links-list">
        <li><a href="https://cmdbsyncer.de">🏠 Homepage</a></li>
        <li><a href="https://docs.cmdbsyncer.de">📚 Documentation</a></li>
        <li><a href="https://github.com/kuhn-ruess/cmdbsyncer">⚙️ Source Code</a></li>
        <li><a href="https://kuhn-ruess.de">🏢 Kuhn &amp; Rue&szlig; GmbH</a></li>
      </ul>
    </div>

    {% if notices %}
    <div id="notices-section" class="home-card">
      <h4>Messages</h4>
      {% for notice in notices %}
      <div id="notice-{{ notice.id }}" class="notice-box">
        <div style="white-space: pre-wrap; margin-bottom: 8px;">{{ notice.content|safe }}</div>
        <button class="notice-confirm" onclick="confirmNotice('{{ notice.id }}')">Confirm</button>
      </div>
      {% endfor %}
    </div>
    {% endif %}
  </div>

  <!-- Right Column: Changelog -->
  <div class="col-md-8">
    {% if changelog_html %}
    <div class="home-card">
      <h2>Changelog</h2>

      <h4 style="font-size: 0.9rem; color: #6c757d; font-weight: 600;">Filter</h4>
      <div class="filter-chip-row" style="margin-bottom: 1rem;">
        <label class="filter-chip active-feat">
          <input type="checkbox" id="filter-feat" checked>
          <span>FEAT</span>
        </label>
        <label class="filter-chip active-fix">
          <input type="checkbox" id="filter-fix" checked>
          <span>FIX</span>
        </label>
        <label class="filter-chip active-inc">
          <input type="checkbox" id="filter-incompatible" checked>
          <span>INCOMPATIBLE</span>
        </label>
        <label class="filter-chip active-sec">
          <input type="checkbox" id="filter-sec" checked>
          <span>SEC</span>
        </label>
        <label class="filter-chip active-oth">
          <input type="checkbox" id="filter-other" checked>
          <span>OTHER</span>
        </label>
        <button class="filter-toggle-all" onclick="toggleAllFilters()">Toggle all</button>
      </div>

      <div id="changelog-content" style="background: #f8f9fa; border: 1px solid #eef0f3; border-radius: 8px; padding: 1rem;">
        {{ changelog_html|safe }}
      </div>

      {% if older_changelogs %}
      <div class="previous-releases" style="margin-top: 0.75rem;">
        <strong style="margin-right: 0.25rem;">Previous releases:</strong>
        {% for entry in older_changelogs %}
          <a href="{{ url_for('admin.changelog_archive', filename=entry) }}">{{ entry[:-3] }}</a>
        {% endfor %}
      </div>
      {% endif %}
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}