/* =============================================================
   Plakat til kontorveggen — A4, tegnet på lerret og lastet ned
   som PNG i 300 dpi. Nærmeste innleveringssteder trykkes inn.
   ============================================================= */

const PLAKAT_TING = [
  { n:"CD, DVD og disketter", d:"EE-avfall", i:"cd",
    f:"En diskett rommer 1,4 MB — ett mobilbilde trenger tre av dem. Plasten og metallet kan gjenvinnes, men bare hvis den leveres." },
  { n:"Minnepenner", d:"EE-avfall", i:"usb",
    f:"Den første minnepennen tok 8 MB i år 2000. I dag får du 512 GB i samme lomme, og kretskortet inneholder både sølv og gull." },
  { n:"Mobiltelefoner", d:"EE-avfall", i:"mobil",
    f:"Ett tonn gamle mobiler gir mer gull enn ett tonn gullmalm. Slett data og logg ut av kontoene før du leverer." },
  { n:"PC og bærbar", d:"EE-avfall", i:"pc",
    f:"Den første bærbare veide 11 kilo i 1981. Dagens har like verdifulle metaller — slett harddisken før levering." },
  { n:"Skjermer", d:"EE-avfall", i:"skjerm",
    f:"En gammel rørskjerm har opptil 2 kilo bly i glasset. Derfor må den leveres til mottak og ikke settes bort på loftet." },
  { n:"Skrivere", d:"EE-avfall", i:"skriver",
    f:"Skriverblekk koster mer per liter enn champagne. Tomme patroner kan fylles på nytt, og det sparer både penger og plast." },
  { n:"Øretelefoner", d:"EE-avfall", i:"hodetelefon",
    f:"Trådløse ørepropper har limt batteri og null skruer. De kan ikke repareres, men de kan gjenvinnes — om de leveres." },
  { n:"Kabler og ladere", d:"EE-avfall", i:"kabel",
    f:"EU brukte 15 år på å standardisere én ladekontakt: USB-C. Én kontakt gir færre ladere, og det er sirkulærøkonomi i praksis." },
  { n:"Batterier", d:"Egen batteriboks", i:"batteri", uthev:true,
    f:"Ett lite litiumbatteri i restavfallet kan sette fyr på hele søppelbilen. Derfor skal de alltid i egen batteriboks." },
];

function tegnPlakat(ctx, S, steder, stedsnavn, selskap) {
  const B = 840, H = 1188;                       // A4 i arbeidsenheter
  const SORT = "#0A0A0A", HVIT = "#F4F1EA", OSLO = "#4A5A62",
        FOG  = "#55524A", KOBBER = "#A9683F", GRA = "#D5CFC2", FLATE = "#FBFAF6";
  const sans = (v, s) => `${v} ${s}px Geist, -apple-system, Helvetica, sans-serif`;
  const mono = (v, s) => `${v} ${s}px "Geist Mono", ui-monospace, monospace`;

  ctx.fillStyle = HVIT; ctx.fillRect(0, 0, B, H);

  /* --- Topp --- */
  ctx.fillStyle = OSLO; ctx.font = mono(600, 11);
  ctx.fillText("/ K I L D E S O R T E R I N G   A V   E E - A V F A L L", 56, 74);

  const linje1 = selskap ? "Hos " + selskap : "På denne arbeidsplassen";
  let str = 44;
  ctx.font = sans(700, str);
  while (ctx.measureText(linje1).width > B - 112 && str > 22) { str -= 2; ctx.font = sans(700, str); }
  ctx.fillStyle = SORT;
  ctx.fillText(linje1, 56, 132);
  ctx.font = sans(300, 44);
  ctx.fillText("sorterer vi e-avfall", 56, 182);

  ctx.strokeStyle = OSLO; ctx.lineWidth = 1.5;
  ctx.beginPath(); ctx.moveTo(56, 212); ctx.lineTo(B - 56, 212); ctx.stroke();

  ctx.fillStyle = FOG; ctx.font = sans(400, 14);
  ctx.fillText("Elektrisk og elektronisk avfall skal aldri i restavfallet. Her er hva som gjelder.", 56, 240);

  /* --- Rutenett med ting --- */
  const kolonner = 3, kb = (B - 112 - 24) / kolonner, kh = 118;
  PLAKAT_TING.forEach((t, i) => {
    const x = 56 + (i % kolonner) * (kb + 12);
    const y = 268 + Math.floor(i / kolonner) * (kh + 12);

    ctx.fillStyle = FLATE;
    ctx.strokeStyle = t.uthev ? KOBBER : "rgba(74,90,98,0.28)";
    ctx.lineWidth = t.uthev ? 2 : 1;
    ctx.beginPath(); ctx.roundRect(x, y, kb, kh, 8); ctx.fill(); ctx.stroke();

    ctx.save();
    ctx.translate(x + 20, y + 22);
    ctx.strokeStyle = t.uthev ? KOBBER : OSLO;
    ctx.fillStyle = t.uthev ? KOBBER : OSLO;
    ctx.lineWidth = 1.6; ctx.lineJoin = "round"; ctx.lineCap = "round";
    tegnIkon(ctx, t.i);
    ctx.restore();

    ctx.fillStyle = SORT; ctx.font = sans(600, 15);
    ctx.fillText(t.n, x + 18, y + 78);
    ctx.fillStyle = t.uthev ? KOBBER : OSLO; ctx.font = mono(600, 10.5);
    ctx.fillText(t.d.toUpperCase(), x + 18, y + 97);
    if (t.m) { ctx.fillStyle = "#8E8A80"; ctx.font = sans(400, 11); ctx.fillText(t.m, x + 18, y + 112); }
  });

  /* --- Selg det som virker --- */
  const yS = 268 + 3 * (kh + 12) + 14;
  ctx.fillStyle = GRA;
  ctx.beginPath(); ctx.roundRect(56, yS, B - 112, 92, 8); ctx.fill();
  ctx.fillStyle = OSLO; ctx.font = mono(600, 10.5);
  ctx.fillText("/ V I R K E R   D E T   F O R T S A T T ?", 78, yS + 30);
  ctx.fillStyle = SORT; ctx.font = sans(600, 17);
  ctx.fillText("Selg det heller enn å kaste det.", 78, yS + 56);
  ctx.fillStyle = FOG; ctx.font = sans(400, 13);
  ctx.fillText("Finn.no, Tise eller intern gjenbruk. Husk å slette data og logge ut av kontoer først.", 78, yS + 78);

  /* --- Nærmeste innlevering --- */
  const yL = yS + 118;
  ctx.fillStyle = OSLO; ctx.font = mono(600, 10.5);
  ctx.fillText("/ N Æ R M E S T E   I N N L E V E R I N G", 56, yL);
  if (stedsnavn) {
    ctx.fillStyle = "#8E8A80"; ctx.font = sans(400, 11.5);
    ctx.fillText("nær " + stedsnavn, 300, yL);
  }

  (steder || []).slice(0, 3).forEach((s, i) => {
    const y = yL + 22 + i * 52;
    ctx.fillStyle = FLATE; ctx.strokeStyle = "rgba(74,90,98,0.22)"; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.roundRect(56, y, B - 112, 44, 6); ctx.fill(); ctx.stroke();
    ctx.fillStyle = OSLO; ctx.fillRect(56, y, 3, 44);

    ctx.fillStyle = SORT; ctx.font = sans(600, 15);
    ctx.fillText(kapp(ctx, s.navn, 400), 76, y + 20);
    ctx.fillStyle = "#8E8A80"; ctx.font = sans(400, 11.5);
    const under = [s.type === "stasjon" ? "Gjenvinningsstasjon" : "Butikk — plikter å ta imot",
                   s.adresse, s.sted].filter(Boolean).join(" · ");
    ctx.fillText(kapp(ctx, under, 400), 76, y + 35);

    ctx.fillStyle = KOBBER; ctx.font = mono(700, 15); ctx.textAlign = "right";
    ctx.fillText(s.km < 1 ? Math.round(s.km * 1000) + " m" : s.km.toFixed(1) + " km", B - 76, y + 28);
    ctx.textAlign = "left";
  });

  if (!steder || !steder.length) {
    ctx.fillStyle = "#8E8A80"; ctx.font = sans(400, 13);
    ctx.fillText("Fyll inn nærmeste mottak selv.", 56, yL + 42);
  }

  /* --- Bunn --- */
  const yB = H - 92;
  ctx.fillStyle = SORT; ctx.fillRect(0, yB, B, 92);
  ctx.fillStyle = HVIT; ctx.font = sans(700, 22);
  ctx.fillText("solid", 56, yB + 46);
  const w1 = ctx.measureText("solid").width;
  ctx.font = sans(300, 22); ctx.fillText("lab", 56 + w1, yB + 46);
  const w2 = ctx.measureText("lab").width;
  ctx.fillStyle = "#6B8290"; ctx.font = sans(400, 22);
  ctx.fillText(".no", 56 + w1 + w2, yB + 46);

  ctx.fillStyle = "#8E9599"; ctx.font = sans(400, 12);
  ctx.fillText("Vi bygger systemer som gjør bærekraftsdata til noe folk faktisk bruker.", 56, yB + 68);

  ctx.textAlign = "right";
  ctx.fillStyle = "#8E9599"; ctx.font = mono(500, 11);
  ctx.fillText("solidlab.no", B - 56, yB + 42);
  ctx.fillText("hello@solidlab.ai", B - 56, yB + 62);
  ctx.textAlign = "left";
}

function kapp(ctx, tekst, maks) {
  if (!tekst) return "";
  if (ctx.measureText(tekst).width <= maks) return tekst;
  let t = tekst;
  while (t.length > 4 && ctx.measureText(t + "…").width > maks) t = t.slice(0, -1);
  return t + "…";
}

function tegnIkon(ctx, id) {
  const p = new Path2D();
  if (id === "cd") { ctx.beginPath(); ctx.arc(10, 10, 9.5, 0, Math.PI*2); ctx.stroke();
                     ctx.beginPath(); ctx.arc(10, 10, 3, 0, Math.PI*2); ctx.stroke(); return; }
  if (id === "usb") { p.roundRect(5, 4, 10, 16, 2); p.rect(7.5, 0, 5, 4); }
  else if (id === "mobil") { p.roundRect(4, 0, 12, 20, 2); p.moveTo(8.5, 17); p.lineTo(11.5, 17); }
  else if (id === "pc") { p.roundRect(1, 3, 18, 12, 1.5); p.moveTo(0, 18); p.lineTo(20, 18); }
  else if (id === "skjerm") { p.roundRect(0, 2, 20, 13, 1.5); p.moveTo(10, 15); p.lineTo(10, 19); p.moveTo(6, 19); p.lineTo(14, 19); }
  else if (id === "skriver") { p.rect(4, 0, 12, 5); p.roundRect(0, 5, 20, 9, 1.5); p.rect(5, 14, 10, 6); }
  else if (id === "hodetelefon") { p.moveTo(2, 14); p.lineTo(2, 10); p.arc(10, 10, 8, Math.PI, 0); p.lineTo(18, 14);
                                   p.roundRect(0, 12, 4, 8, 1.5); p.roundRect(16, 12, 4, 8, 1.5); }
  else if (id === "kabel") { p.moveTo(3, 0); p.lineTo(3, 6); p.arc(6.5, 6, 3.5, Math.PI, 0, true);
                             p.moveTo(10, 6); p.lineTo(10, 13); p.arc(13.5, 13, 3.5, Math.PI, 0);
                             p.moveTo(17, 13); p.lineTo(17, 20); }
  else if (id === "batteri") { p.roundRect(0, 5, 17, 10, 2); p.rect(17, 8, 3, 4); p.moveTo(4, 10); p.lineTo(9, 10); }
  ctx.stroke(p);
}

/* Plakaten bygges som HTML og åpnes i ny fane. Da ser kunden den
   med én gang, og "Skriv ut → Lagre som PDF" gir en ekte vektor-PDF
   uten at vi trenger et PDF-bibliotek. */

/* =============================================================
   Skjema før nedlasting — gir kunden en plakat, oss et lead.
   ============================================================= */
function PlakatSkjema({ lukk }) {
  const [steg, setSteg] = useState(0);
  const [data, setData] = useState({ selskap:"", epost:"", sted:"", nyhetsbrev:false });
  const [feil, setFeil] = useState("");
  const [jobber, setJobber] = useState("");
  const [ferdig, setFerdig] = useState(null);
  const [kanHoppe, setKanHoppe] = useState(false);
  const hoppRef = useRef(false);
  const feltRef = useRef(null), panelRef = useRef(null);

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

  useEffect(() => {
    document.body.style.overflow = "hidden";
    const t = (e) => { if (e.key === "Escape") lukk(); };
    document.addEventListener("keydown", t);
    return () => { document.removeEventListener("keydown", t); document.body.style.overflow = ""; };
  }, [lukk]);

  useEffect(() => {
    const t = setTimeout(() => feltRef.current && feltRef.current.focus(), 260);
    return () => clearTimeout(t);
  }, [steg, ferdig]);

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

  const validerSteg = () => {
    if (steg === 0 && data.selskap.trim().length < 2) return "Skriv inn navnet på selskapet.";
    if (steg === 1 && !gyldigEpost(data.epost))        return "Sjekk e-postadressen.";
    if (steg === 2 && data.sted.trim().length < 2)     return "Skriv inn poststed eller kommune.";
    return "";
  };

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

  const lag = async (hoppOverSteder) => {
    setFeil(""); hoppRef.current = false; setKanHoppe(false);
    let steder = null, stedsnavn = data.sted.trim();

    if (!hoppOverSteder) {
      /* Etter sju sekunder tilbyr vi å gå videre uten stedene, slik at
         en treg kartdatabase ikke stopper plakaten. */
      const varsel = setTimeout(() => setKanHoppe(true), 7000);
      try {
        setJobber("Finner nærmeste innlevering…");
        const p = await finnSted(stedsnavn);
        if (p && !hoppRef.current) {
          stedsnavn = p.navn;
          const funn = await finnStasjoner(p.lat, p.lon);
          if (!hoppRef.current) steder = funn;
        }
      } catch { /* plakaten lages uansett, bare uten stedsliste */ }
      clearTimeout(varsel);
      setKanHoppe(false);
      if (hoppRef.current) return;                 // brukeren valgte å hoppe over
    }

    setJobber("Setter sammen plakaten…");
    let url = "";
    try { url = plakatUrl(steder, steder ? stedsnavn : null, data.selskap.trim()); }
    catch { setJobber(""); setFeil("Klarte ikke lage plakaten. Prøv igjen."); return; }

    /* Sendes til samme endepunkt som kontaktskjemaet når det er satt opp */
    if (typeof SKJEMA_ENDEPUNKT !== "undefined" && SKJEMA_ENDEPUNKT) {
      try {
        await fetch(SKJEMA_ENDEPUNKT, {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ ...data, kilde: "plakat" }),
        });
      } catch { /* plakaten er levert uansett */ }
    }
    setJobber("");
    setFerdig({ antall: steder ? steder.length : 0, url });
  };

  const paaTast = e => { if (e.key === "Enter") { e.preventDefault(); neste(); } };

  const STEG = [
    { sp:"Hva heter selskapet?", hj:"Navnet trykkes øverst på plakaten." },
    { sp:"Hvor sender vi den?",  hj:"Du får plakaten med en gang — e-posten er så vi vet hvem som spurte." },
    { sp:"Hvor holder dere til?",hj:"Poststed, postnummer eller kommune — vi trykker de tre nærmeste innleveringsstedene rett på plakaten." },
  ];

  return (
    <div className="sl-modal" role="presentation">
      <div className="sl-modal__backdrop" onClick={lukk}></div>
      <div className="sl-modal__panel" role="dialog" aria-modal="true" ref={panelRef}
           aria-label="Bestill plakat">
        <button className="sl-modal__lukk" onClick={lukk} aria-label="Lukk">×</button>

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

        {ferdig ? (
          <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 className="sl-modal__sporsmaal">Plakaten er klar.</h2>
            <p className="sl-modal__hjelp">
              {ferdig.antall
                ? "De " + ferdig.antall + " nærmeste innleveringsstedene står nederst. Åpne den, trykk Skriv ut, og velg A4."
                : "Vi fant ingen registrerte mottak akkurat der, så det feltet må dere fylle inn selv."}
              {data.nyhetsbrev && " Du er også påmeldt nyhetsbrevet."}
            </p>
            <div className="sl-modal__knapper">
              <a className="sl-btn sl-btn--primary" ref={feltRef}
                 href={ferdig.url} target="_blank" rel="noopener noreferrer">
                Åpne plakaten ↗
              </a>
              <button className="sl-btn sl-btn--ghost" onClick={lukk}>Lukk</button>
            </div>
          </div>
        ) : (
          <div className="sl-modal__innhold">
            <span className="sl-slash sl-modal__teller">/ {String(steg + 1).padStart(2,"0")} av 03</span>
            <h2 className="sl-modal__sporsmaal">{STEG[steg].sp}</h2>
            <p className="sl-modal__hjelp">{STEG[steg].hj}</p>

            <div className="sl-modal__felt">
              {steg === 0 && (
                <input ref={feltRef} className="sl-felt" value={data.selskap} maxLength={44}
                       onChange={e => sett("selskap", e.target.value)} onKeyDown={paaTast}
                       placeholder="Selskapsnavn" autoComplete="organization" aria-label="Selskapsnavn"/>
              )}
              {steg === 1 && (
                <input ref={feltRef} 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"/>
              )}
              {steg === 2 && (
                <>
                  <input ref={feltRef} className="sl-felt" value={data.sted}
                         onChange={e => sett("sted", e.target.value)} onKeyDown={paaTast}
                         placeholder="Poststed, postnummer eller kommune" aria-label="Sted"/>
                  <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>}
            {jobber && <p className="sl-modal__jobber">{jobber}</p>}
            {kanHoppe && (
              <div className="sl-modal__treig">
                <p>Kartdatabasen er treg akkurat nå. Du kan vente litt til, eller lage plakaten
                   med et tomt felt for innleveringssted.</p>
                <button className="sl-btn sl-btn--ghost"
                        onClick={() => { hoppRef.current = true; setKanHoppe(false); lag(true); }}>
                  Lag plakaten uten stedene →
                </button>
              </div>
            )}

            <div className="sl-modal__knapper">
              {steg > 0 && !jobber &&
                <button className="sl-btn sl-btn--ghost" onClick={() => { setFeil(""); setSteg(steg - 1); }}>← Tilbake</button>}
              <button className="sl-btn sl-btn--primary" onClick={neste} disabled={!!jobber}>
                {jobber ? "Lager…" : steg === 2 ? "Lag plakaten ↓" : "Neste →"}
              </button>
              {!jobber && <span className="sl-modal__hint">eller trykk <kbd>Enter</kbd></span>}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}