{% extends "base.html" %}

{% block title %}Anfragen{% endblock %}
{% block heading %}Anfragen{% endblock %}
{% block topbar_actions %}
  <div class="tabs">
    <a class="tab {% if not status_filter %}is-active{% endif %}" href="/inquiries">Alle</a>
    {% for code, label in STATUS_LABELS.items() %}
      <a class="tab {% if status_filter==code %}is-active{% endif %}" href="/inquiries?status={{ code }}">{{ label }}</a>
    {% endfor %}
  </div>
  <div class="tabs" style="margin-left:8px;">
    <a class="tab {% if view != 'inbox' %}is-active{% endif %}" href="/inquiries{% if status_filter %}?status={{ status_filter }}{% endif %}" title="Listenansicht">📋 Liste</a>
    <a class="tab {% if view == 'inbox' %}is-active{% endif %}" href="/inquiries?view=inbox{% if status_filter %}&status={{ status_filter }}{% endif %}" title="Inbox-Ansicht">✉ Inbox</a>
  </div>
  <a class="btn btn-primary" href="/inquiries/new">+ Neue Anfrage</a>
{% endblock %}

{% block content %}
{% if view == 'inbox' %}
<style>
  /* v1.18.0: Glass-Theme statt hardgecodete weiße Box.
     Vorher waren Farben (#1a1a1a, #737373, white) im Dark-Mode unleserlich /
     außerhalb des Brand-Looks. */
  .inbox-layout {
    display: grid; grid-template-columns: 340px 1fr; gap: 0;
    height: calc(100vh - 200px); min-height: 520px;
    border: 1px solid var(--card-border);
    border-radius: 14px; overflow: hidden;
    background: var(--card-bg);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow: var(--card-shadow);
  }
  .inbox-list {
    border-right: 1px solid var(--card-border-2);
    overflow-y: auto;
    background: rgba(0,0,0,0.12);
  }
  .inbox-row {
    padding: 11px 14px;
    border-bottom: 1px solid var(--card-border-2);
    cursor: pointer; transition: background 80ms, border-color 80ms;
  }
  .inbox-row:hover { background: rgba(242, 88, 27, 0.08); }
  .inbox-row.is-active {
    background: rgba(242, 88, 27, 0.14);
    border-left: 3px solid var(--brand-orange, #f2581b);
    padding-left: 11px;
  }
  .inbox-row .inb-h {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
  }
  .inbox-row .inb-from {
    font-weight: 600; font-size: 13px;
    color: var(--card-text);
  }
  .inbox-row .inb-date {
    font-size: 10px;
    color: var(--card-text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .inbox-row .inb-subj {
    font-size: 12px;
    color: var(--card-text);
    opacity: 0.85;
    margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .inbox-row .inb-snip {
    font-size: 11px;
    color: var(--card-text-muted);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .inbox-detail {
    padding: 28px 32px; overflow-y: auto;
    color: var(--card-text);
  }
  .inbox-detail .inb-d-h {
    border-bottom: 1px solid var(--card-border-2);
    padding-bottom: 14px; margin-bottom: 18px;
  }
  .inbox-detail .inb-d-h h2 {
    font-size: 17px; line-height: 1.3;
    color: var(--card-text); margin: 0;
  }
  .inbox-detail .inb-d-meta {
    font-size: 12px;
    color: var(--card-text-muted);
    margin-top: 6px;
  }
  .inbox-detail .inb-d-meta strong { color: var(--card-text); font-weight: 600; }
  .inbox-detail .inb-d-body {
    white-space: pre-wrap; word-wrap: break-word;
    font-size: 13px; line-height: 1.6;
    color: var(--card-text); opacity: 0.92;
  }
  .inbox-detail .inb-d-foot {
    margin-top: 24px; padding-top: 14px;
    border-top: 1px solid var(--card-border-2);
    font-size: 11px;
    color: var(--card-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
  }
  .inbox-detail .inb-d-foot strong { color: var(--card-text); }
  .inbox-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%;
    color: var(--card-text-muted);
    font-size: 13px;
  }
</style>

<div class="inbox-layout">
  <div class="inbox-list" id="inbox-list">
    {% for i in items %}
    <div class="inbox-row {% if loop.first %}is-active{% endif %}"
         data-inb-id="{{ i.id }}"
         data-inb-from="{{ i.customer_name or i.customer_name_text or 'Unbekannt' }}"
         data-inb-subject="{{ i.subject }}"
         data-inb-body="{{ i.body or '' }}"
         data-inb-date="{{ i.created_at[:16] }}"
         data-inb-status="{{ i.status }}"
         data-inb-no="{{ i.inquiry_no or '' }}"
         data-inb-source="{{ SOURCE_LABELS.get(i.source, i.source) }}">
      <div class="inb-h">
        <span class="inb-from">{{ i.customer_name or i.customer_name_text or '— Unbekannt —' }}</span>
        <span class="inb-date" data-ts="{{ i.created_at }}">{{ i.created_at[:16] }}</span>
      </div>
      <div class="inb-subj">{{ i.subject }}</div>
      <div class="inb-snip">{{ (i.body or '')[:120] }}{% if i.body and i.body|length > 120 %}…{% endif %}</div>
    </div>
    {% endfor %}
    {% if not items %}
    <div class="inbox-empty">Keine Anfragen</div>
    {% endif %}
  </div>
  <div class="inbox-detail" id="inbox-detail">
    <div class="inbox-empty">Lädt …</div>
  </div>
</div>

<script>
(function () {
  const list = document.getElementById('inbox-list');
  const det  = document.getElementById('inbox-detail');
  if (!list || !det) return;

  function escHtml(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }

  function show(row) {
    [...list.querySelectorAll('.inbox-row')].forEach(r => r.classList.remove('is-active'));
    row.classList.add('is-active');
    const d = row.dataset;
    det.innerHTML = `
      <div class="inb-d-h">
        <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:14px;">
          <div style="min-width:0;flex:1 1 auto;">
            <h2>${escHtml(d.inbSubject)}</h2>
            <div class="inb-d-meta">
              <strong>${escHtml(d.inbFrom)}</strong> · ${escHtml(d.inbSource)} · ${escHtml(d.inbDate)}
            </div>
          </div>
          <a class="btn btn-sm btn-primary" href="/inquiries/${d.inbId}" style="flex-shrink:0;">Detail öffnen →</a>
        </div>
      </div>
      <div class="inb-d-body">${escHtml(d.inbBody) || '<span style="opacity:0.5;font-style:italic;">— Kein Text —</span>'}</div>
      <div class="inb-d-foot">
        ${d.inbNo ? '<strong>Anfrage-Nr:</strong> ' + escHtml(d.inbNo) + ' &nbsp;·&nbsp; ' : ''}
        <strong>Status:</strong> ${escHtml(d.inbStatus)}
      </div>
    `;
  }

  list.addEventListener('click', e => {
    const r = e.target.closest('.inbox-row');
    if (r) show(r);
  });
  // J/K navigation in inbox view
  document.addEventListener('keydown', e => {
    const tag = (e.target.tagName || '').toLowerCase();
    if (tag === 'input' || tag === 'textarea') return;
    if (e.metaKey || e.ctrlKey || e.altKey) return;
    const rows = [...list.querySelectorAll('.inbox-row')];
    const cur = list.querySelector('.inbox-row.is-active');
    let idx = rows.indexOf(cur);
    if (e.key === 'j' || e.key === 'ArrowDown') {
      e.preventDefault();
      if (idx < rows.length - 1) show(rows[idx + 1]);
    } else if (e.key === 'k' || e.key === 'ArrowUp') {
      e.preventDefault();
      if (idx > 0) show(rows[idx - 1]);
    } else if (e.key === 'Enter' && cur) {
      location.href = '/inquiries/' + cur.dataset.inbId;
    }
  });

  const first = list.querySelector('.inbox-row');
  if (first) show(first);
})();
</script>

{% else %}
<div id="recent-items" data-page-type="inquiry"></div>

{% if items %}
<div id="bulk-bar" class="card" style="display:none;background:rgba(232,93,47,0.08);border-color:rgba(232,93,47,0.30);margin-bottom:8px;">
  <div class="px-4 py-3 flex items-center gap-3 flex-wrap">
    <span class="text-sm font-semibold"><span id="bulk-count">0</span> Anfragen ausgewählt</span>
    <span class="text-neutral-400">·</span>
    <span class="text-sm">Status:</span>
    {% for code, label in STATUS_LABELS.items() %}
      <button type="button" class="btn btn-sm btn-secondary" data-bulk-status="{{ code }}">{{ label }}</button>
    {% endfor %}
    <button type="button" id="bulk-clear" class="btn btn-sm btn-secondary" style="margin-left:auto;">Leeren</button>
  </div>
</div>
{% endif %}

{% if items %}
<div class="card">
  <table class="data-table">
    <thead>
      <tr>
        <th style="width:30px"><input type="checkbox" id="bulk-toggle-all" title="Alle auswählen"></th>
        <th>Nr.</th>
        <th>Eingang</th>
        <th>Quelle</th>
        <th>Betreff</th>
        <th>Kunde</th>
        <th>Bearbeiter</th>
        <th>Status</th>
        <th>Angebot</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for i in items %}
      <tr class="cursor-pointer" data-status="{{ i.status }}" onclick="location='/inquiries/{{ i.id }}'">
        <td onclick="event.stopPropagation()" style="text-align:center;">
          <input type="checkbox" class="bulk-cb" data-id="{{ i.id }}">
        </td>
        <td class="nums font-semibold">{{ i.inquiry_no or '—' }}</td>
        <td class="text-xs nums text-neutral-600">{{ i.created_at[:10] }}</td>
        <td class="text-xs">{{ SOURCE_LABELS.get(i.source, i.source) }}</td>
        <td class="font-medium">{{ i.subject }}</td>
        <td class="text-xs">
          {% if i.customer_name %}
            <span>{{ i.customer_name }}</span>
            {% if i.customer_country_iso %}<span class="text-neutral-500 nums">· {{ i.customer_country_iso }}</span>{% endif %}
          {% elif i.customer_name_text %}
            <span>{{ i.customer_name_text }}</span>
            <span class="badge badge-neutral ml-1">extern</span>
          {% else %}—{% endif %}
        </td>
        <td class="text-xs">
          {% if i.assigned_first %}{{ i.assigned_first }} {{ i.assigned_last }}{% else %}—{% endif %}
        </td>
        <td>
          <span class="badge badge-{{ STATUS_COLOR.get(i.status, 'neutral') }}">{{ STATUS_LABELS.get(i.status, i.status) }}</span>
        </td>
        <td class="text-xs nums text-neutral-600">{% if i.created_quote_id %}#{{ i.created_quote_id }}{% else %}—{% endif %}</td>
        <td class="text-right" onclick="event.stopPropagation()">
          <a class="btn btn-sm btn-secondary" href="/inquiries/{{ i.id }}">Öffnen</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
  {% from "_macros.html" import empty_state %}
  {% if status_filter %}
    {{ empty_state(
      icon='🔍',
      title='Keine Anfragen mit Status „' ~ STATUS_LABELS.get(status_filter, status_filter) ~ '"',
      description='Mit dem aktuellen Filter sind keine Anfragen sichtbar. Setze den Filter zurück, um alle Anfragen zu sehen.',
      ctas=[
        {'label': 'Filter zurücksetzen',     'href': '/inquiries',     'primary': True},
        {'label': '+ Neue Anfrage erfassen', 'href': '/inquiries/new'},
      ],
    ) }}
  {% else %}
    {{ empty_state(
      icon='📥',
      title='Noch keine Anfragen',
      description='Hier landen alle Mail-Anfragen die per IMAP reinkommen, plus alles was du manuell erfasst. Die Anfrage ist der Startpunkt deines Vertriebs-Workflows.',
      workflow='📥 Anfrage → 💼 Angebot → 📋 Auftrag → 🏭 Werkstatt → 📦 Versand → 🧾 Rechnung',
      ctas=[
        {'label': '+ Erste Anfrage erfassen', 'href': '/inquiries/new', 'primary': True},
        {'label': '📥 IMAP einrichten',       'href': '/settings#imap'},
        {'label': '📚 Handbuch (DE)',         'href': '/handbuch/de/pdf', 'external': True},
      ],
    ) }}
  {% endif %}
{% endif %}

{% if items %}
<script>
(function () {
  const bar    = document.getElementById('bulk-bar');
  const count  = document.getElementById('bulk-count');
  const toggle = document.getElementById('bulk-toggle-all');
  const cbs    = () => document.querySelectorAll('.bulk-cb');
  const checked = () => [...cbs()].filter(cb => cb.checked);
  function update() {
    const n = checked().length;
    count.textContent = n;
    bar.style.display = n ? '' : 'none';
    if (toggle) toggle.indeterminate = n > 0 && n < cbs().length;
  }
  if (toggle) toggle.addEventListener('change', () => {
    cbs().forEach(cb => cb.checked = toggle.checked);
    update();
  });
  document.addEventListener('change', e => {
    if (e.target.classList && e.target.classList.contains('bulk-cb')) update();
  });
  document.getElementById('bulk-clear')?.addEventListener('click', () => {
    cbs().forEach(cb => cb.checked = false);
    if (toggle) toggle.checked = false;
    update();
  });
  function getCookie(n) { return document.cookie.split('; ').find(r => r.startsWith(n + '='))?.split('=')[1] || ''; }
  function postBulk(status) {
    const ids = checked().map(cb => parseInt(cb.dataset.id, 10));
    if (!ids.length) return;
    const csrf = getCookie('csrf_token');
    fetch('/api/inquiries/bulk-status', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
      body: JSON.stringify({ ids, status, csrf_token: csrf }),
    })
    .then(r => r.json())
    .then(d => {
      if (window.toast) toast(d.updated + ' Anfrage(n) aktualisiert', 'success', { ttl: 2000 });
      setTimeout(() => location.reload(), 600);
    })
    .catch(() => { if (window.toast) toast('Fehler beim Bulk-Update', 'error'); });
  }
  document.querySelectorAll('[data-bulk-status]').forEach(btn => {
    btn.addEventListener('click', () => postBulk(btn.dataset.bulkStatus));
  });
  update();
})();
</script>
{% endif %}
{% endif %}
{% endblock %}