// ─── kiki — Kommentarsystem (Rechtsklick in allen Views) ─────
// Globaler Listener auf [data-kiki-id]-Elemente. Lokal gespeichert.

const KIKI_KEY = 'deeping_crm_kiki_v1';
const KIKI_CATS = ['Kunde', 'Wettbewerb', 'Technik', 'Preis', 'Risiko', 'Chance', 'Sonstiges'];

function kikiLoad() { try { return JSON.parse(localStorage.getItem(KIKI_KEY) || '[]'); } catch (e) { return []; } }
function kikiPersist(l) { try { localStorage.setItem(KIKI_KEY, JSON.stringify(l)); } catch (e) {} }

const KikiStore = {
  list: kikiLoad(), subs: new Set(),
  sub(fn) { this.subs.add(fn); return () => this.subs.delete(fn); },
  emit() { this.subs.forEach(fn => fn()); },
  add(c) { this.list = [{ id: 'k' + Date.now() + Math.floor(Math.random() * 999), ts: new Date().toISOString(), ...c }, ...this.list]; kikiPersist(this.list); this.emit(); },
  remove(id) { this.list = this.list.filter(c => c.id !== id); kikiPersist(this.list); this.emit(); },
  forRef(refId) { return this.list.filter(c => c.refId === refId); }
};
window.KikiStore = KikiStore;

function useKiki() {
  const [, f] = useS(0);
  useE(() => KikiStore.sub(() => f(n => n + 1)), []);
}

// Layer: context menu + dialog. Mounted once in the app.
function KikiLayer() {
  const [menu, setMenu] = useS(null);
  const [dialog, setDialog] = useS(null);
  useE(() => {
    const onCtx = (e) => {
      const el = e.target.closest && e.target.closest('[data-kiki-id]');
      if (!el) return;
      e.preventDefault();
      setMenu({ x: e.clientX, y: e.clientY, target: { id: el.dataset.kikiId, label: el.dataset.kikiLabel || el.dataset.kikiId, kind: el.dataset.kikiKind || 'Datensatz' } });
    };
    const onClick = () => setMenu(null);
    window.addEventListener('contextmenu', onCtx);
    window.addEventListener('click', onClick);
    return () => { window.removeEventListener('contextmenu', onCtx); window.removeEventListener('click', onClick); };
  }, []);
  return (
    <>
      {menu && (
        <div className="kiki-menu" style={{ left: Math.min(menu.x, window.innerWidth - 200), top: Math.min(menu.y, window.innerHeight - 110) }} onClick={e => e.stopPropagation()}>
          <div className="kiki-menu-hd">{menu.target.kind} · {menu.target.label}</div>
          <button className="kiki-menu-item" onClick={() => { setDialog({ target: menu.target }); setMenu(null); }}>
            <span className="kiki-badge-sm">ki</span> kiki — Kommentar hinzufügen
          </button>
          {KikiStore.forRef(menu.target.id).length > 0 && (
            <div className="kiki-menu-note">{KikiStore.forRef(menu.target.id).length} vorhandene{KikiStore.forRef(menu.target.id).length === 1 ? 'r' : ''} Kommentar{KikiStore.forRef(menu.target.id).length === 1 ? '' : 'e'}</div>
          )}
        </div>
      )}
      {dialog && <KikiDialog target={dialog.target} onClose={() => setDialog(null)} />}
    </>
  );
}

function KikiDialog({ target, onClose }) {
  const [cat, setCat] = useS(KIKI_CATS[0]);
  const [text, setText] = useS('');
  const [listening, setListening] = useS(false);
  const [err, setErr] = useS(null);
  const recRef = React.useRef(null);
  const existing = KikiStore.forRef(target.id);

  useE(() => { const h = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, []);

  const toggleVoice = () => {
    const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SR) { setErr('Spracheingabe wird vom Browser nicht unterstützt.'); return; }
    if (listening) { recRef.current && recRef.current.stop(); setListening(false); return; }
    const rec = new SR(); rec.lang = 'de-DE'; rec.continuous = true; rec.interimResults = true;
    const base = text ? text + ' ' : '';
    rec.onresult = (ev) => { let s = ''; for (let i = ev.resultIndex; i < ev.results.length; i++) s += ev.results[i][0].transcript; setText(base + s); };
    rec.onerror = (ev) => { setErr('Sprachfehler: ' + ev.error); setListening(false); };
    rec.onend = () => setListening(false);
    recRef.current = rec; rec.start(); setListening(true); setErr(null);
  };

  const save = () => {
    if (!text.trim()) { setErr('Bitte einen Kommentar eingeben.'); return; }
    if (recRef.current) recRef.current.stop();
    KikiStore.add({ refId: target.id, refLabel: target.label, kind: target.kind, cat, text: text.trim(), author: 'Julia Schmidt' });
    toast('kiki-Kommentar gespeichert');
    onClose();
  };

  return (
    <>
      <div className="drawer-scrim open" onClick={onClose}></div>
      <aside className="drawer open" style={{ width: 440 }}>
        <div className="drawer-hd">
          <span className="av" style={{ background: 'var(--accent)', fontFamily: 'var(--font-mono)' }}>ki</span>
          <span className="t"><b>kiki — Kommentar</b><span>{target.kind} · {target.label}</span></span>
          <button className="x" onClick={onClose}>✕</button>
        </div>
        <div className="drawer-body">
          <div className="kiki-field-label">Kategorie</div>
          <div className="kiki-cats">
            {KIKI_CATS.map(c => <button key={c} className={"kiki-cat" + (cat === c ? ' on' : '')} onClick={() => setCat(c)}>{c}</button>)}
          </div>
          <div className="kiki-field-row">
            <span className="kiki-field-label">Kommentar</span>
            <button className={"kiki-voice" + (listening ? ' on' : '')} onClick={toggleVoice}>
              {Icons.mic || '🎙'} {listening ? 'Aufnahme … stoppen' : 'Spracheingabe'}
            </button>
          </div>
          <textarea className="form-textarea" style={{ minHeight: 140 }} value={text} onChange={e => setText(e.target.value)} placeholder="Kommentar eingeben oder diktieren …" />
          {listening && <div className="kiki-listening"><span className="dot"></span> hört zu …</div>}
          {err && <div className="kiki-err">{err}</div>}

          {existing.length > 0 && (
            <div className="kiki-existing">
              <div className="kiki-field-label" style={{ marginBottom: 8 }}>Bisherige Kommentare · {existing.length}</div>
              {existing.map(c => (
                <div key={c.id} className="kiki-ex-item">
                  <div className="kiki-ex-hd"><span className="src-tag">{c.cat}</span><span className="kiki-ex-ts">{fmtKikiTs(c.ts)}</span></div>
                  <p>{c.text}</p>
                  <button className="kiki-ex-del" onClick={() => KikiStore.remove(c.id)}>Löschen</button>
                </div>
              ))}
            </div>
          )}
        </div>
        <div className="drawer-foot">
          <span className="right">
            <button className="btn ghost" onClick={onClose}>Abbrechen</button>
            <button className="btn" onClick={save}>Speichern</button>
          </span>
        </div>
      </aside>
    </>
  );
}

function fmtKikiTs(ts) {
  const d = new Date(ts);
  return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit' }) + ' ' + d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
}
window.fmtKikiTs = fmtKikiTs;