/* ===================== Ajanvarauslomake (booking modal) =====================
   Avautuu laskurin "Varaa aika" -napista. Kerää asiakkaan tiedot + laskurin
   ikkunavalinnat, lähettää ne window.klTrack:n kautta backendiin (Resend +
   Google Sheets) ja näyttää kiitossivun, jolta voi myös soittaa suoraan.
   ============================================================================ */

const fmtEur = (n) =>
  (Math.round(n * 100) / 100).toLocaleString("fi-FI", { minimumFractionDigits: 0, maximumFractionDigits: 2 }) + " €";

function BookingModal({ open, onClose, ctx }) {
  const [form, setForm] = useState({
    name: "", phone: "", email: "", street: "", zipCode: "",
    service: D.services[0].title, message: "",
  });
  const [screen, setScreen] = useState("ask");
  const [isReturning, setIsReturning] = useState(false);
  const [sending, setSending] = useState(false);
  const [err, setErr] = useState("");

  // Sync service + pre-fill address from calculator when modal opens
  useEffect(() => {
    if (!open) return;
    setScreen("ask");
    setIsReturning(false);
    setForm((f) => ({
      ...f,
      service: ctx.service || D.services[0].title,
      street: ctx.addrInput || f.street,
    }));
  }, [open, ctx.service, ctx.addrInput]);

  // Lock scroll + Esc key
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = prev; window.removeEventListener("keydown", onKey); };
  }, [open, onClose]);

  if (!open) return null;

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    setErr("");
    if (!form.name.trim() || !form.phone.trim()) {
      setErr("Täytä vähintään nimi ja puhelinnumero.");
      return;
    }
    setSending(true);
    window.klTrack({
      type: "varaus",
      source: "ajanvarauslomake",
      name: form.name.trim(),
      phone: form.phone.trim(),
      email: form.email.trim(),
      address: form.street.trim(),
      service: form.service,
      message: form.message.trim(),
      zip: form.zipCode.trim() || "",
      isReturning,
      count: ctx.count,
      gross: ctx.gross,
      deduction: ctx.deduction,
      afterDeduction: ctx.afterDeduction,
      travelFee: ctx.travelFee || 0,
      travelKm: ctx.geoKm,
      lines: ctx.lines,
      calc: ctx.qty,
    });
    setTimeout(() => { setSending(false); setScreen("done"); }, 650);
  };

  return (
    <div className="bkm" role="dialog" aria-modal="true" aria-label="Ajanvaraus">
      <button className="bkm__scrim" aria-label="Sulje" onClick={onClose}/>
      <div className="bkm__panel">
        <button className="bkm__close" aria-label="Sulje" onClick={onClose}>✕</button>

        {screen === "ask" && (
          <div className="bkm__head">
            <span className="bkm__badge">
              <Ic.cal style={{width:18,height:18,color:"var(--brand)"}}/> Ajanvaraus
            </span>
            <h2>Oletko palaava asiakas?</h2>
            <p className="bkm__sub">Se auttaa meitä palvelemaan sinua paremmin.</p>
            <div style={{display:"flex",flexDirection:"column",gap:10,marginTop:28}}>
              <button className="btn btn--primary btn--block btn--lg" type="button"
                onClick={() => { setIsReturning(false); setScreen("form"); }}>
                Ei, olen uusi asiakas
              </button>
              <button className="btn btn--ghost btn--block" type="button"
                onClick={() => { setIsReturning(true); setScreen("form"); }}>
                Kyllä, olen jo asiakkaanne
              </button>
            </div>
          </div>
        )}

        {screen === "form" && (
          <>
            <div className="bkm__head">
              <span className="bkm__badge">
                <Ic.cal style={{width:18,height:18,color:"var(--brand)"}}/> Ajanvaraus
              </span>
              <h2>Varaa ikkunanpesu</h2>
              <p className="bkm__sub">
                Jätä yhteystietosi — Henri tai Severi on sinuun yhteydessä ja sovitaan sopiva aika.
                Voit myös soittaa suoraan lähetyksen jälkeen.
              </p>
            </div>

            {/* Summary of calculator selections */}
            <div className="bkm__summary">
              <div className="bkm__sumHead">Valintasi</div>
              {ctx.lines.length > 0 ? (
                <ul className="bkm__lines">
                  {ctx.lines.map((l) => (
                    <li key={l.id}><span>{l.name} × {l.qty}</span><b>{fmtEur(l.total)}</b></li>
                  ))}
                </ul>
              ) : (
                <p className="bkm__empty">
                  Et ole vielä valinnut ikkunoita laskurista — voit silti jättää varauksen
                  ja tarkennetaan puhelimessa.
                </p>
              )}
              <div className="bkm__sumTotals">
                <div className="bkm__row"><span>Hinta yhteensä</span><b>{fmtEur(ctx.gross)}</b></div>
                {(ctx.travelFee || 0) > 0 && (
                  <div className="bkm__row">
                    <span>Matkustuskulut ({ctx.geoKm} km)</span>
                    <b>+{fmtEur(ctx.travelFee)}</b>
                  </div>
                )}
                <div className="bkm__row">
                  <span>Kotitalousvähennys 35 %</span><b>−{fmtEur(ctx.deduction)}</b>
                </div>
                <div className="bkm__row bkm__row--accent">
                  <span>Vähennyksen jälkeen (arvio)</span><b>{fmtEur(ctx.afterDeduction)}</b>
                </div>
              </div>
            </div>

            <form className="bkm__form" onSubmit={submit}>
              <label className="bkm__field">
                <span>Nimi *</span>
                <input value={form.name} onChange={set("name")} placeholder="Etu- ja sukunimi" required/>
              </label>
              <div className="bkm__grid2">
                <label className="bkm__field">
                  <span>Puhelin *</span>
                  <input type="tel" value={form.phone} onChange={set("phone")} placeholder="040 123 4567" required/>
                </label>
                <label className="bkm__field">
                  <span>Sähköposti</span>
                  <input type="email" value={form.email} onChange={set("email")} placeholder="nimi@esimerkki.fi"/>
                </label>
              </div>
              <div className="bkm__grid2 bkm__grid2--73">
                <label className="bkm__field">
                  <span>Katuosoite</span>
                  <input value={form.street} onChange={set("street")} placeholder="Esim. Esimerkkikatu 12 A 3"/>
                </label>
                <label className="bkm__field">
                  <span>Postinumero</span>
                  <input inputMode="numeric" maxLength="5" value={form.zipCode}
                    onChange={set("zipCode")} placeholder="90100"/>
                </label>
              </div>
              <label className="bkm__field">
                <span>Pesutapa</span>
                <select value={form.service} onChange={set("service")}>
                  {D.services.map((s) => <option key={s.id} value={s.title}>{s.title}</option>)}
                </select>
              </label>
              <label className="bkm__field">
                <span>Toive ajankohdasta / lisätiedot</span>
                <textarea rows={3} value={form.message} onChange={set("message")}
                  placeholder="Esim. arkisin klo 16 jälkeen, korkeita ikkunoita, jne."/>
              </label>

              {err && <div className="bkm__err">{err}</div>}

              <button className="btn btn--primary btn--block btn--lg" type="submit" disabled={sending}>
                {sending ? "Lähetetään…" : <><Ic.cal style={{width:19,height:19}}/> Lähetä varaus</>}
              </button>
              <p className="bkm__fineprint">
                Varaus ei sido sinua — voit perua milloin tahansa puhelimitse tai sähköpostilla.
              </p>
              <p className="bkm__fineprint bkm__fineprint--pay">
                <Ic.wallet style={{width:13,height:13,verticalAlign:"middle",marginRight:4}}/>
                {D.payment.methods.join(" · ")} · {D.payment.business}
              </p>
              <div className="bkm__contacts">
                {D.people.map((p) => (
                  <a key={p.email} href={`mailto:${p.email}`} className="bkm__contactLink">
                    <Ic.mail style={{width:15,height:15}}/> {p.email}
                  </a>
                ))}
              </div>
            </form>
          </>
        )}

        {screen === "done" && (
          <div className="bkm__done">
            <div className="bkm__doneIc"><Ic.check style={{width:34,height:34}}/></div>
            <h2>Kiitos varauksesta!</h2>
            <p className="bkm__sub">
              Varauksesi on vastaanotettu. Henri tai Severi on sinuun pian yhteydessä
              ja sovitaan sopiva aika. Haluatko nopeuttaa? Soita suoraan:
            </p>
            <div className="bkm__callRow">
              {D.people.map((p) => (
                <a key={p.email} className="btn btn--primary bkm__callBtn" href={p.phoneHref}
                   data-name={p.name} data-source="kiitossivu">
                  <Ic.phone style={{width:18,height:18}}/> {p.name.split(" ")[0]} · {p.phone}
                </a>
              ))}
            </div>
            <div className="bkm__contacts" style={{marginTop:16}}>
              {D.people.map((p) => (
                <a key={p.email} href={`mailto:${p.email}`} className="bkm__contactLink">
                  <Ic.mail style={{width:15,height:15}}/> {p.email}
                </a>
              ))}
            </div>
            <button className="btn btn--ghost btn--block" onClick={onClose} style={{marginTop:14}}>Sulje</button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { BookingModal });