/* =============================================================
   Eget skjema for KI-rådgivning. Samme flyt som kontaktskjemaet,
   men spørsmålene handler om hvor de står og hva de vil løse.
   ============================================================= */

const KI_MODENHET = [
  "Vi har ikke begynt",
  "Vi prøver oss fram",
  "Noen bruker det, men usystematisk",
  "Vi har satt noe i drift",
];

const KI_BEHOV = [
  "Rydde i dokumenter og data",
  "Automatisere rutinearbeid",
  "Kundedialog og support",
  "Analyse og rapportering",
  "Vet ikke ennå — trenger sparring",
];

function apneKiSkjema() {
  window.dispatchEvent(new CustomEvent("sl:apne-ki"));
}

function KiSkjema() {
  const [apen, setApen]   = useState(false);
  const [steg, setSteg]   = useState(0);
  const [sendt, setSendt] = useState(false);
  const [feil, setFeil]   = useState("");
  const [data, setData]   = useState({
    navn:"", epost:"", firma:"", modenhet:"", behov:"", melding:"", nyhetsbrev:false,
  });

  const panelRef   = useRef(null);
  const forsteRef  = useRef(null);
  const utloserRef = useRef(null);

  const sett = (k, v) => setData(d => ({ ...d, [k]: v }));

  useEffect(() => {
    const paaApne = () => {
      utloserRef.current = document.activeElement;
      setApen(true); setSteg(0); setSendt(false); setFeil("");
    };
    window.addEventListener("sl:apne-ki", paaApne);
    return () => window.removeEventListener("sl:apne-ki", paaApne);
  }, []);

  useEffect(() => {
    document.body.style.overflow = apen ? "hidden" : "";
    if (!apen && utloserRef.current) utloserRef.current.focus();
    return () => { document.body.style.overflow = ""; };
  }, [apen]);

  useEffect(() => {
    if (apen && forsteRef.current) {
      const t = setTimeout(() => forsteRef.current && forsteRef.current.focus(), 280);
      return () => clearTimeout(t);
    }
  }, [apen, steg, sendt]);

  useEffect(() => {
    if (!apen) return;
    const tast = (e) => {
      if (e.key === "Escape") { setApen(false); return; }
      if (e.key !== "Tab" || !panelRef.current) return;
      const f = panelRef.current.querySelectorAll("button:not([disabled]), input, textarea, [href]");
      if (!f.length) return;
      const forste = f[0], siste = f[f.length - 1];
      if (e.shiftKey && document.activeElement === forste) { e.preventDefault(); siste.focus(); }
      else if (!e.shiftKey && document.activeElement === siste) { e.preventDefault(); forste.focus(); }
    };
    document.addEventListener("keydown", tast);
    return () => document.removeEventListener("keydown", tast);
  }, [apen]);

  const gyldigEpost = v => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v.trim());

  const validerSteg = () => {
    if (steg === 2 && data.melding.trim().length < 5) return "Skriv noen ord om hva det gjelder.";
    if (steg === 3 && data.navn.trim().length < 2)    return "Skriv inn navnet ditt.";
    if (steg === 4 && !gyldigEpost(data.epost))       return "Sjekk e-postadressen.";
    return "";
  };

  const neste = () => {
    const f = validerSteg();
    if (f) { setFeil(f); return; }
    setFeil("");
    if (steg < 4) setSteg(steg + 1); else send();
  };

  const send = async () => {
    const f = validerSteg();
    if (f) { setFeil(f); return; }
    const nyttelast = { ...data, kilde: "ki-radgivning" };
    if (typeof SKJEMA_ENDEPUNKT !== "undefined" && SKJEMA_ENDEPUNKT) {
      try {
        const r = await fetch(SKJEMA_ENDEPUNKT, {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify(nyttelast),
        });
        if (!r.ok) throw new Error();
        setSendt(true);
      } catch {
        setFeil("Noe gikk galt. Send oss gjerne en e-post: " + MOTTAKER);
      }
      return;
    }
    const brodtekst =
      "KI-RÅDGIVNING\n\nNavn: " + data.navn +
      "\nE-post: " + data.epost +
      (data.firma ? "\nFirma: " + data.firma : "") +
      (data.modenhet ? "\nStår i dag: " + data.modenhet : "") +
      (data.behov ? "\nØnsker hjelp til: " + data.behov : "") +
      "\nNyhetsbrev: " + (data.nyhetsbrev ? "ja, samtykker" : "nei") +
      "\n\n" + data.melding;
    window.location.href = "mailto:" + MOTTAKER +
      "?subject=" + encodeURIComponent("KI-rådgivning — " + data.navn) +
      "&body=" + encodeURIComponent(brodtekst);
    setSendt(true);
  };

  const paaTast = (e) => {
    if (e.key === "Enter" && !e.shiftKey && e.target.tagName !== "TEXTAREA") {
      e.preventDefault(); neste();
    }
  };

  if (!apen) return null;

  const STEG = [
    { sp:"Hvor står dere med KI i dag?",   hj:"Ærlig svar gir bedre råd. Det er helt greit å ikke ha begynt." },
    { sp:"Hva ville hjulpet mest?",        hj:"Velg det som ligner mest — vi finner det nøyaktige sammen." },
    { sp:"Fortell oss om hva det gjelder", hj:"Noen setninger holder — vi kommer til å spørre deg om mer informasjon senere." },
    { sp:"Hvem er du?",                    hj:"Nå vet vi hva det gjelder. Da mangler vi bare hvem vi svarer." },
    { sp:"Hvor får vi tak i deg?",         hj:"Vi svarer innen én arbeidsdag." },
  ];

  return (
    <div className="sl-modal" role="presentation">
      <div className="sl-modal__backdrop" onClick={() => setApen(false)}></div>
      <div className="sl-modal__panel" role="dialog" aria-modal="true"
           aria-labelledby="sl-ki-tittel" ref={panelRef}>
        <button className="sl-modal__lukk" onClick={() => setApen(false)} aria-label="Lukk skjema">×</button>

        {!sendt && (
          <div className="sl-modal__fremdrift" aria-hidden="true">
            <span style={{ width: ((steg + 1) / 5 * 100) + "%" }}></span>
          </div>
        )}

        {sendt ? (
          <div className="sl-modal__ferdig">
            <div className="sl-modal__hake" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
                   strokeLinecap="round" strokeLinejoin="round"><path d="m4 12.5 5.2 5.2L20 7"/></svg>
            </div>
            <h2 id="sl-ki-tittel" className="sl-modal__sporsmaal">Takk, {data.navn.split(" ")[0]}.</h2>
            <p className="sl-modal__hjelp">
              Vi ser på hva du har skrevet og tar kontakt innen én arbeidsdag med et konkret
              forslag til hvor det er verdt å begynne.
              {data.nyhetsbrev && " Du er også påmeldt nyhetsbrevet."}
            </p>
            <div className="sl-modal__knapper">
              <button className="sl-btn sl-btn--primary" ref={forsteRef} onClick={() => setApen(false)}>Lukk</button>
            </div>
          </div>
        ) : (
          <div className="sl-modal__innhold">
            <span className="sl-slash sl-modal__teller">/ ki-rådgivning · {String(steg + 1).padStart(2,"0")} av 05</span>
            <h2 id="sl-ki-tittel" className="sl-modal__sporsmaal">{STEG[steg].sp}</h2>
            <p className="sl-modal__hjelp">{STEG[steg].hj}</p>

            <div className="sl-modal__felt">
              {steg === 0 && (
                <div className="sl-valg">
                  {KI_MODENHET.map((t, i) => (
                    <button key={t} ref={i === 0 ? forsteRef : null}
                            className={"sl-valg__knapp" + (data.modenhet === t ? " sl-valg__knapp--valgt" : "")}
                            onClick={() => { sett("modenhet", t); setTimeout(() => setSteg(1), 180); }}>
                      <span className="sl-valg__bokstav">{String.fromCharCode(65 + i)}</span>{t}
                    </button>
                  ))}
                </div>
              )}

              {steg === 1 && (
                <div className="sl-valg">
                  {KI_BEHOV.map((t, i) => (
                    <button key={t} ref={i === 0 ? forsteRef : null}
                            className={"sl-valg__knapp" + (data.behov === t ? " sl-valg__knapp--valgt" : "")}
                            onClick={() => { sett("behov", t); setTimeout(() => setSteg(2), 180); }}>
                      <span className="sl-valg__bokstav">{String.fromCharCode(65 + i)}</span>{t}
                    </button>
                  ))}
                </div>
              )}

              {steg === 2 && (
                <textarea ref={forsteRef} className="sl-felt sl-felt--stor" rows="4" value={data.melding}
                          onChange={e => sett("melding", e.target.value)}
                          placeholder="Kort om hva du har på hjertet, eller hva du ønsker at vi skal se på"
                          aria-label="Melding"/>
              )}

              {steg === 3 && (
                <input ref={forsteRef} className="sl-felt" type="text" value={data.navn}
                       onChange={e => sett("navn", e.target.value)} onKeyDown={paaTast}
                       placeholder="Fornavn og etternavn" autoComplete="name" aria-label="Navn"/>
              )}

              {steg === 4 && (
                <>
                  <input ref={forsteRef} className="sl-felt" type="email" value={data.epost}
                         onChange={e => sett("epost", e.target.value)} onKeyDown={paaTast}
                         placeholder="din@firma.no" autoComplete="email" aria-label="E-post"/>
                  <input className="sl-felt sl-felt--valgfritt" type="text" value={data.firma}
                         onChange={e => sett("firma", e.target.value)} onKeyDown={paaTast}
                         placeholder="Firma (valgfritt)" autoComplete="organization" aria-label="Firma, valgfritt"/>
                  <label className="sl-avkrys">
                    <input type="checkbox" checked={data.nyhetsbrev}
                           onChange={e => sett("nyhetsbrev", e.target.checked)}/>
                    <span className="sl-avkrys__boks" aria-hidden="true">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"
                           strokeLinecap="round" strokeLinejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>
                    </span>
                    <span className="sl-avkrys__tekst">
                      Ønsker du tilgang på vårt nyhetsbrev?
                      <span className="sl-avkrys__note">Noen ganger i året. Meld deg av når som helst.</span>
                    </span>
                  </label>
                </>
              )}
            </div>

            {feil && <p className="sl-modal__feil" role="alert">{feil}</p>}

            <div className="sl-modal__knapper">
              {steg > 0 && <button className="sl-btn sl-btn--ghost" onClick={() => { setFeil(""); setSteg(steg - 1); }}>← Tilbake</button>}
              {steg > 1 && (
                <button className="sl-btn sl-btn--primary" onClick={neste}>
                  {steg === 4 ? "Send →" : "Neste →"}
                </button>
              )}
              {steg > 1 && <span className="sl-modal__hint">eller trykk <kbd>Enter</kbd></span>}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}