// ============================================================
// FRIDA — delt chat-widget for HELE demoen (offentlig / og /app).
// 1:1 med Frida på fragta.com (.fa-* markup + CSS), men med demo-svar
// (keyword-baseret, ingen backend) og demo-relateret velkomst/startspørgsmål.
// ============================================================
const { useState, useRef, useEffect } = React;

const FRIDA_REPLIES = [
  { q: /pris|koster|betal/i, a: 'Fragta findes i to pakker: Flow fra 3.000 kr./md (op til 200 forespørgsler/dag) og Enterprise efter aftale. Vil du have en konkret beregning, så book en demo med teamet.' },
  { q: /tms|integration|truckplanner|whatsapp/i, a: 'Fragta kører selvstændigt fra dag ét. Integrationer som Truckplanner (TMS) og WhatsApp Business bygger vi i Enterprise-pakken.' },
  { q: /data|sikker|gdpr|privat/i, a: 'Al data ligger på servere i EU og krypteres hele vejen. I ejer jeres data — de bruges ikke til at træne noget for andre. (I demoen er alle data anonyme eksempler.)' },
  { q: /match|vognm|katalog|carrier/i, a: 'Prøv det her i demoen: åbn en forespørgsel i Indbakken og klik "Match vognmænd". Fragta scorer hver vognmand i Kataloget mod ruten, godset og jeres erfaringer — og foreslår de bedste.' },
  { q: /prøv|kan jeg|her|rundt|start/i, a: 'Du er i en fuld, klikbar demo med anonyme data. Start i Indbakken og åbn en forespørgsel — så ser du de tre trin: AI-analyse → match & send → tilbud & valg. Resten af menuen kan du frit udforske.' },
  { q: /hvordan|virker|fungerer/i, a: 'Fragta sidder i jeres indbakke, læser forespørgsler, matcher vognmænd fra jeres katalog og henter tilbud hjem — I godkender før noget sendes. Prøv at åbne en forespørgsel i Indbakken her i demoen!' },
];
function fridaReply(text) {
  const hit = FRIDA_REPLIES.find(r => r.q.test(text));
  return hit ? hit.a : 'Godt spørgsmål! Klik dig frit rundt i demoen — prøv Indbakken for AI-analysen, eller Katalog for vognmandsnetværket. Vil du tale med et menneske, så book en rigtig demo.';
}

const FRIDA_GREETING = 'Hej! Jeg er Frida 👋 Velkommen til Fragta-demoen. Klik dig frit rundt — og spørg mig, hvis du vil vide hvad du kigger på, hvordan vi matcher vognmænd, eller hvad det koster.';
const FRIDA_SUGS = ['Hvad kan jeg prøve her?', 'Hvordan matcher I vognmænd?', 'Hvad koster Fragta?'];

function Frida() {
  const [open, setOpen] = useState(false);
  const [messages, setMessages] = useState([]); // { role: 'user' | 'bot', content }
  const [input, setInput] = useState('');
  const [busy, setBusy] = useState(false);
  const scrollRef = useRef(null);
  const inputRef = useRef(null);
  useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, open]);

  const send = (preset) => {
    const text = String(preset || input).trim();
    if (!text || busy) return;
    setInput('');
    setMessages(m => [...m, { role: 'user', content: text }, { role: 'bot', content: '' }]);
    setBusy(true);
    setTimeout(() => {
      setMessages(m => { const c = m.slice(); c[c.length - 1] = { role: 'bot', content: fridaReply(text) }; return c; });
      setBusy(false);
    }, 950);
  };
  const onKeyDown = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } };
  const showSuggestions = !busy && !messages.some(m => m.role === 'user');

  return (
    <div className="fa-root">
      {open && (
        <div className="fa-panel" role="dialog" aria-label="Frida">
          <div className="fa-head">
            <div className="fa-id">
              <span className="fa-ava">
                <img src="/frida.svg?v=4" alt="Frida" width="40" height="40" />
                <span className="fa-online" aria-hidden="true" />
              </span>
              <div>
                <div className="fa-name">Frida</div>
                <div className="fa-role">Fragta-assistent · demo</div>
              </div>
            </div>
            <button type="button" className="fa-x" aria-label="Luk" onClick={() => setOpen(false)}>
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
            </button>
          </div>

          <div className="fa-log" ref={scrollRef}>
            <div className="fa-msg fa-bot">{FRIDA_GREETING}</div>
            {messages.map((m, i) => (
              <div key={i} className={'fa-msg ' + (m.role === 'user' ? 'fa-user' : 'fa-bot')}>
                {m.content
                  ? m.content
                  : (busy && i === messages.length - 1 ? <span className="fa-typing"><i /><i /><i /></span> : '')}
              </div>
            ))}
            {showSuggestions && (
              <div className="fa-sugs">
                {FRIDA_SUGS.map(s => <button key={s} type="button" className="fa-sug" onClick={() => send(s)}>{s}</button>)}
              </div>
            )}
          </div>

          <div className="fa-foot">
            <div className="fa-inputrow">
              <input ref={inputRef} className="fa-input" type="text" value={input} placeholder="Skriv en besked…" onChange={e => setInput(e.target.value)} onKeyDown={onKeyDown} aria-label="Skriv en besked" />
              <button type="button" className="fa-send" aria-label="Send" onClick={() => send()} disabled={busy || !input.trim()}>
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z" /></svg>
              </button>
            </div>
          </div>
        </div>
      )}

      <button type="button" className={'fa-bubble' + (open ? ' fa-bubble-open' : '')} aria-label="Chat med Frida" aria-expanded={open} onClick={() => setOpen(v => !v)}>
        {open ? (
          <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
        ) : (
          <span className="fa-ava fa-ava-lg">
            <img src="/frida.svg?v=4" alt="" width="56" height="56" />
            <span className="fa-online" aria-hidden="true" />
          </span>
        )}
      </button>
    </div>
  );
}

Object.assign(window, { Frida });