/* =============================================================
   Jens — KI-assistenten, kopiert fra no.jsx pa solidlab.no.
   Snakker med /api/chat, som varsler teamet via Slack, SMS og
   e-post nar noen ber om a fa snakke med et menneske.

   Teksten hans ligger i INNHOLD.jens i innhold.js.
   ============================================================= */

const APNINGSREPLIKK = INNHOLD.jens.apningsreplikk;
const FORSLAG = INNHOLD.jens.forslag;

function Jens() {
  const [apen, setApen]       = useState(false);
  const [meldinger, setMeld]  = useState([{ rolle: "jens", tekst: APNINGSREPLIKK }]);
  const [tekst, setTekst]     = useState("");
  const [venter, setVenter]   = useState(false);
  const [ulest, setUlest]     = useState(false);
  const [paaMorkt, setMorkt]  = useState(false);

  const logRef   = useRef(null);
  const feltRef  = useRef(null);
  const knappRef = useRef(null);

  useEffect(() => {
    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
  }, [meldinger, venter]);

  useEffect(() => {
    if (apen) {
      setUlest(false);
      const t = setTimeout(() => feltRef.current && feltRef.current.focus(), 240);
      return () => clearTimeout(t);
    }
  }, [apen]);

  /* Bytter knappen til lys når den svever over kontaktfeltet eller footeren,
     som begge er svarte. Uten dette forsvinner den i bakgrunnen. */
  useEffect(() => {
    let ventende = false;
    const sjekk = () => {
      ventende = false;
      const k = knappRef.current;
      if (!k) return;
      const boks = k.getBoundingClientRect();
      const midt = boks.top + boks.height / 2;
      let over = false;
      document.querySelectorAll(".sl-contact, .sl-footer").forEach(felt => {
        const f = felt.getBoundingClientRect();
        if (midt >= f.top && midt <= f.bottom) over = true;
      });
      setMorkt(over);
    };
    const paaScroll = () => {
      if (ventende) return;
      ventende = true;
      requestAnimationFrame(sjekk);
    };
    sjekk();
    window.addEventListener("scroll", paaScroll, { passive: true });
    window.addEventListener("resize", paaScroll);
    return () => {
      window.removeEventListener("scroll", paaScroll);
      window.removeEventListener("resize", paaScroll);
    };
  }, []);

  /* Liten pling første gang, så folk oppdager at han er der */
  useEffect(() => {
    const t = setTimeout(() => { if (!apen) setUlest(true); }, 9000);
    return () => clearTimeout(t);
  }, []);

  useEffect(() => {
    if (!apen) return;
    const tast = (e) => { if (e.key === "Escape") setApen(false); };
    document.addEventListener("keydown", tast);
    return () => document.removeEventListener("keydown", tast);
  }, [apen]);

  const send = async (innhold) => {
    const melding = (innhold != null ? innhold : tekst).trim();
    if (!melding || venter) return;
    setTekst("");
    const nye = [...meldinger, { rolle: "du", tekst: melding }];
    setMeld(nye);
    setVenter(true);
    try {
      const r = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          messages: nye
            .filter(m => m.tekst !== APNINGSREPLIKK)
            .map(m => ({ role: m.rolle === "du" ? "user" : "assistant", content: m.tekst })),
        }),
      });
      const data = await r.json();
      const raatekst = data.svar || data.feil || INNHOLD.jens.feil_svar;
      /* Jens kan avslutte med markøren [[SKJEMA]] for å tilby skjema-knappen.
         Vi fjerner markøren fra teksten og setter et flagg i stedet. */
      const vilSkjema = /\[\[\s*SKJEMA\s*\]\]/i.test(raatekst);
      const renTekst = raatekst.replace(/\[\[\s*SKJEMA\s*\]\]/ig, "").replace(/\n{3,}/g, "\n\n").trim();
      setMeld(m => [...m, {
        rolle: "jens",
        tekst: renTekst,
        skjema: vilSkjema,
      }]);
    } catch {
      setMeld(m => [...m, {
        rolle: "jens",
        tekst: INNHOLD.jens.feil_kontakt,
      }]);
    } finally {
      setVenter(false);
      setTimeout(() => feltRef.current && feltRef.current.focus(), 60);
    }
  };

  return (
    <>
      <button ref={knappRef}
              className={"sl-jens-knapp" + (apen ? " sl-jens-knapp--apen" : "")
                         + (paaMorkt && !apen ? " sl-jens-knapp--lys" : "")}
              onClick={() => setApen(!apen)}
              aria-expanded={apen} aria-controls="sl-jens-panel"
              aria-label={apen ? "Lukk chat med Jens" : "Åpne chat med Jens"}>
        {apen ? (
          <span className="sl-jens-knapp__x" aria-hidden="true">×</span>
        ) : (
          <>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
                 strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M20 15a2 2 0 0 1-2 2H8l-4 4V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z"/>
            </svg>
            <span className="sl-jens-knapp__navn">{INNHOLD.jens.knapp}</span>
            {ulest && <span className="sl-jens-knapp__prikk" aria-hidden="true"></span>}
          </>
        )}
      </button>

      {apen && (
        <div className="sl-jens" id="sl-jens-panel" role="dialog" aria-label="Chat med Jens">
          <div className="sl-jens__topp">
            <div className="sl-jens__ident">
              <span className="sl-jens__merke" aria-hidden="true">J</span>
              <span>
                <strong>Jens</strong>
                <span className="sl-jens__rolle">{INNHOLD.jens.rolle}</span>
              </span>
            </div>
            <button className="sl-jens__lukk" onClick={() => setApen(false)} aria-label="Lukk">×</button>
          </div>

          <div className="sl-jens__log" ref={logRef} role="log" aria-live="polite">
            {meldinger.map((m, i) => (
              <React.Fragment key={i}>
                <div className={"sl-jens__melding sl-jens__melding--" + m.rolle}>{m.tekst}</div>
                {m.skjema && (
                  <button className="sl-jens__handling"
                          onClick={() => { setApen(false); apneKiSkjema(); }}>
                    Send oss en melding →
                  </button>
                )}
              </React.Fragment>
            ))}
            {venter && (
              <div className="sl-jens__melding sl-jens__melding--jens sl-jens__skriver" aria-label="Jens skriver">
                <span></span><span></span><span></span>
              </div>
            )}
            {meldinger.length === 1 && !venter && (
              <div className="sl-jens__forslag">
                {FORSLAG.map(f => (
                  <button key={f} onClick={() => send(f)}>{f}</button>
                ))}
              </div>
            )}
          </div>

          <div className="sl-jens__bunn">
            <input ref={feltRef} className="sl-jens__felt" value={tekst}
                   onChange={e => setTekst(e.target.value)}
                   onKeyDown={e => { if (e.key === "Enter") { e.preventDefault(); send(); } }}
                   placeholder={INNHOLD.jens.placeholder} aria-label="Melding til Jens" maxLength={1000}/>
            <button className="sl-jens__send" onClick={() => send()}
                    disabled={venter || !tekst.trim()} aria-label="Send melding">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"
                   strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M5 12h13M12 5l7 7-7 7"/>
              </svg>
            </button>
          </div>
          <p className="sl-jens__fot">{INNHOLD.jens.fot}</p>
        </div>
      )}
    </>
  );
}