{% extends "base.html" %}
{% from "_macros.html" import field %}

{% block title %}Neue Anfrage{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/inquiries" class="hover:underline">Anfragen</a> / Neu</p>{% endblock %}
{% block heading %}Neue Anfrage{% endblock %}

{% block content %}

<div class="card max-w-3xl mb-3" style="background:rgba(43,92,230,0.04);border-color:rgba(43,92,230,0.18);">
  <div class="p-4 flex items-center gap-3 flex-wrap">
    <span class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">📋 Vorlagen</span>
    <select id="tpl-picker" class="select" style="font-size:13px;min-width:240px;">
      <option value="">— Vorlage wählen —</option>
    </select>
    <button type="button" id="tpl-apply" class="btn btn-sm btn-secondary">Übernehmen</button>
    <span class="text-neutral-400">·</span>
    <button type="button" id="tpl-save" class="btn btn-sm btn-secondary">Aktuelle Eingabe als Vorlage speichern</button>
  </div>
</div>

<form method="post" action="/inquiries/new" class="card max-w-3xl" data-autosave="inquiry_new">
  <div class="card-header"><div>
    <h2>Anfrage erfassen</h2>
    <p class="sub">Erfasse eingehende Anfragen — per E-Mail, Telefon, Webformular oder Messe</p>
  </div></div>
  <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">

    <div class="col-span-2">
      {{ field("Betreff", "subject", "", required=true, placeholder="z.B. Anfrage Sonderdrehteile Stahl C45", attrs='data-suggest="inquiry_subject"') }}
    </div>

    {# v1.12.0: Quelle + Bearbeiter sind optional — eingeklappt #}
    <details class="form-advanced col-span-2" style="margin-top: 8px;">
      <summary>Quelle und Bearbeiter anpassen</summary>
      <div class="form-advanced-body">
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Quelle</label>
          <select name="source" class="select mt-1 w-full">
            {% for code, label in SOURCE_LABELS.items() %}
            <option value="{{ code }}" {% if code == 'email' %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bearbeiter</label>
          <select name="assigned_to" class="select mt-1 w-full">
            <option value="">— niemand —</option>
            {% for u in users %}
            <option value="{{ u.id }}">{{ u.first_name }} {{ u.last_name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </details>

    <div class="col-span-2 pt-3 border-t" style="border-color: var(--card-border-2);">
      <p class="text-[11px] uppercase tracking-wider text-neutral-500 font-semibold mb-2">Absender</p>
    </div>

    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bestehender Kunde (optional)</label>
      <select name="customer_id" class="select mt-1 w-full">
        <option value="">— neuer / unbekannter Absender —</option>
        {% for c in customers %}
        <option value="{{ c.id }}">{{ c.name }}{% if c.country_iso %} ({{ c.country_iso }}){% endif %}</option>
        {% endfor %}
      </select>
      <p class="text-[10px] text-neutral-500 mt-1">Lass leer, wenn der Absender (noch) kein Kunde im System ist</p>
    </div>

    {{ field("Name", "customer_name_text", "", placeholder="z.B. Max Mustermann") }}
    {{ field("E-Mail", "customer_email_text", "", type="email", placeholder="anfrage@firma.de") }}
    <div class="col-span-2">
      {{ field("Telefon", "customer_phone_text", "") }}
    </div>

    <div class="col-span-2 pt-3 border-t" style="border-color: var(--card-border-2);">
      <p class="text-[11px] uppercase tracking-wider text-neutral-500 font-semibold mb-2">Inhalt</p>
    </div>
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Anfrage-Text</label>
      <textarea name="body" class="input mt-1 w-full" rows="8" placeholder="Was wird angefragt? Welche Mengen, Toleranzen, Werkstoffe, Termine?"></textarea>
      <!-- v1.7.0: KI-Klassifikations-Vorschläge (heuristisch, lokal) -->
      <div id="classify-hints" style="display:none;margin-top:8px;padding:10px 12px;
                                       background:#f0f9ff;border:1px solid #bae6fd;border-radius:6px;
                                       font-size:12px;line-height:1.5;color:#0c4a6e;">
        <div style="font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;
                    color:#0369a1;margin-bottom:4px;">
          <span style="margin-right:6px;">🤖</span>Erkannt im Text
          <span id="classify-conf" style="float:right;color:#075985;font-weight:400;text-transform:none;
                                            letter-spacing:0;"></span>
        </div>
        <div id="classify-hints-content"></div>
      </div>
    </div>
  </div>
  <div class="px-5 py-4 border-t flex items-center justify-between" style="border-color: var(--card-border-2);">
    <a class="btn btn-secondary" href="/inquiries">Abbrechen</a>
    <button class="btn btn-primary" type="submit">Anfrage speichern</button>
  </div>
</form>

<script>
(function () {
  // ---- Templates / Textbausteine ----
  const picker = document.getElementById('tpl-picker');
  const applyBtn = document.getElementById('tpl-apply');
  const saveBtn  = document.getElementById('tpl-save');
  const subj = document.querySelector('input[name="subject"]');
  const body = document.querySelector('textarea[name="body"]');

  function getCookie(n) { return document.cookie.split('; ').find(r => r.startsWith(n + '='))?.split('=')[1] || ''; }

  function loadTemplates() {
    fetch('/api/templates/inquiry')
      .then(r => r.json())
      .then(d => {
        if (!picker) return;
        // Reset
        [...picker.querySelectorAll('option')].slice(1).forEach(o => o.remove());
        (d.templates || []).forEach(t => {
          const o = document.createElement('option');
          o.value = t.id; o.textContent = t.name;
          picker.appendChild(o);
        });
      });
  }
  loadTemplates();

  if (applyBtn) applyBtn.addEventListener('click', () => {
    const id = picker.value; if (!id) return;
    fetch('/api/templates/inquiry/' + id)
      .then(r => r.json())
      .then(d => {
        if (!d.ok) { if (window.toast) toast(d.error || 'Vorlage-Fehler', 'error'); return; }
        const t = d.template;
        if (subj) subj.value = t.subject || '';
        if (body) body.value = t.body || '';
        if (window.toast) toast('Vorlage „' + t.name + '" übernommen', 'success', { ttl: 1800 });
      });
  });

  if (saveBtn) saveBtn.addEventListener('click', () => {
    const name = prompt('Name für diese Vorlage:', '');
    if (!name) return;
    const csrf = getCookie('csrf_token');
    fetch('/api/templates/inquiry', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
      body: JSON.stringify({
        name,
        subject: subj?.value || '',
        body:    body?.value || '',
        csrf_token: csrf,
      }),
    })
    .then(r => r.json())
    .then(d => {
      if (d.ok) { if (window.toast) toast('Vorlage gespeichert', 'success', { ttl: 1800 }); loadTemplates(); }
      else if (window.toast) toast(d.error || 'Speichern fehlgeschlagen', 'error');
    });
  });

  // Remember last-used Bearbeiter + Quelle for next "Neue Anfrage"
  const KEY_ASSIGN = 'takoma_last_inquiry_assignee';
  const KEY_SOURCE = 'takoma_last_inquiry_source';
  const sel = document.querySelector('select[name="assigned_to"]');
  const src = document.querySelector('select[name="source"]');
  const form = document.querySelector('form[action="/inquiries/new"]');
  if (!form) return;

  // Pre-fill from localStorage
  try {
    const last = localStorage.getItem(KEY_ASSIGN);
    if (sel && last && !sel.value) {
      [...sel.options].forEach(o => { if (o.value === last) o.selected = true; });
    }
    const lastSrc = localStorage.getItem(KEY_SOURCE);
    if (src && lastSrc) {
      [...src.options].forEach(o => { if (o.value === lastSrc) o.selected = true; });
    }
  } catch(e) {}

  // Save on submit
  form.addEventListener('submit', () => {
    try {
      if (sel && sel.value) localStorage.setItem(KEY_ASSIGN, sel.value);
      if (src && src.value) localStorage.setItem(KEY_SOURCE, src.value);
    } catch(e) {}
  });
})();
</script>

<!-- v1.7.0: Heuristische KI-Klassifikation — debounced Live-Suggestion beim Tippen -->
<script>
(function() {
  'use strict';
  const subj    = document.querySelector('input[name="subject"]');
  const body    = document.querySelector('textarea[name="body"]');
  const hints   = document.getElementById('classify-hints');
  const content = document.getElementById('classify-hints-content');
  const conf    = document.getElementById('classify-conf');
  if (!body || !hints || !content) return;

  let debounce = null;

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

  function pill(label, color) {
    return '<span style="display:inline-block;background:'+color+';color:#fff;font-size:10px;'
         + 'padding:2px 8px;border-radius:10px;margin:2px;font-weight:500;">'+escapeHtml(label)+'</span>';
  }

  function render(r) {
    if (!r || (!r.materials.length && !r.processes.length && !r.quantities.length
               && !r.dimensions.length && !r.deadline)) {
      hints.style.display = 'none';
      return;
    }
    let html = '';
    if (r.materials.length) {
      html += '<div><strong>Material:</strong> ' +
        r.materials.map(m => pill(m.name, m.confidence > 0.7 ? '#0284c7' : '#94a3b8')).join('') +
        '</div>';
    }
    if (r.processes.length) {
      html += '<div><strong>Verfahren:</strong> ' +
        r.processes.map(p => pill(p.name, '#7c3aed')).join('') +
        '</div>';
    }
    if (r.quantities.length) {
      html += '<div><strong>Stückzahl:</strong> ' +
        r.quantities.map(q => pill(q + ' Stk', '#059669')).join('') +
        '</div>';
    }
    if (r.dimensions.length) {
      html += '<div><strong>Maße:</strong> ' +
        r.dimensions.map(d => pill(d, '#d97706')).join('') +
        '</div>';
    }
    if (r.deadline) {
      html += '<div><strong>Termin:</strong> ' + pill(r.deadline, '#dc2626') + '</div>';
    }
    content.innerHTML = html;
    conf.textContent = 'Sicherheit ' + Math.round(r.confidence * 100) + '%';
    hints.style.display = 'block';
  }

  function classify() {
    const txt = (body.value || '').trim();
    const subjTxt = (subj && subj.value || '').trim();
    if (txt.length < 20 && subjTxt.length < 20) {
      hints.style.display = 'none';
      return;
    }
    fetch('/api/inquiries/classify', {
      method:  'POST',
      headers: { 'Content-Type': 'application/json' },
      body:    JSON.stringify({ body: txt, subject: subjTxt }),
    }).then(r => r.ok ? r.json() : null)
      .then(render)
      .catch(() => {});
  }

  function debounced() {
    clearTimeout(debounce);
    debounce = setTimeout(classify, 400);
  }

  body.addEventListener('input', debounced);
  if (subj) subj.addEventListener('input', debounced);
  // Initial-Run wenn schon Text drin (z.B. von autosave restore)
  setTimeout(classify, 200);
})();
</script>
{% endblock %}