// Rezervačný formulár — nahradzuje checkout / košík v chovnom prototype.
(function () {
  if (typeof React === "undefined") return;
  var DS = window.VElaStvNajmanDesignSystem_bc3fc2;
  var Button = DS.Button;
  var Input = DS.Input;
  var Icon = window.VNIcon;

  function Err({ msg }) {
    if (!msg) return null;
    return (
      <span className="vn-field__error" style={{ display: "block", color: "var(--chyba)", fontSize: "var(--text-xs)", marginTop: 4 }}>
        {msg}
      </span>
    );
  }

  function Rezervace({ go, preset, presetQty }) {
    var initial = preset && typeof preset === "object" ? preset : null;
    var initTyp = initial && initial._typ ? initial._typ : initial && initial.cat === "oddelky" ? "oddelek" : "matka";
    var initSlug = initial && (initial._slug || initial.id) ? (initial._slug || initial.id) : "";

    var _s = React.useState({
      jmeno: "",
      email: "",
      telefon: "",
      typ: initTyp || "",
      polozkaSlug: initSlug,
      pocetKusu: String(presetQty || 1),
      preferovanyTermin: "",
      poznamka: "",
      gdprSouhlas: false,
    });
    var form = _s[0];
    var setForm = _s[1];
    var _e = React.useState({});
    var errors = _e[0];
    var setErrors = _e[1];
    var _st = React.useState("idle");
    var status = _st[0];
    var setStatus = _st[1];
    var _m = React.useState("");
    var successMsg = _m[0];
    var setSuccessMsg = _m[1];

    var shop = window.SHOP_DATA || {};
    var open = shop.rezervaceOtevrena !== false;

    function productsForTyp(typ) {
      return (shop.products || []).filter(function (p) {
        if (!typ) return false;
        return p._typ === typ && p.stock !== "out";
      });
    }

    function setField(key, value) {
      setForm(function (prev) {
        var next = Object.assign({}, prev, {});
        next[key] = value;
        if (key === "typ") next.polozkaSlug = "";
        return next;
      });
      setErrors(function (prev) {
        if (!prev[key]) return prev;
        var n = Object.assign({}, prev);
        delete n[key];
        return n;
      });
    }

    function onSubmit(e) {
      e.preventDefault();
      setErrors({});
      var parsed = window.__validateRezervace(form);
      if (!parsed.ok) {
        setErrors(parsed.errors);
        setStatus("error");
        return;
      }
      setStatus("loading");
      fetch("/api/cms/rezervace", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(parsed.data),
      })
        .then(function (res) {
          return res.json().then(function (data) {
            return { res: res, data: data };
          });
        })
        .then(function (_ref) {
          var res = _ref.res;
          var data = _ref.data;
          if (!res.ok) {
            setErrors(data.errors || { form: data.error || "Rezervaci se nepodařilo odeslat." });
            setStatus("error");
            return;
          }
          setSuccessMsg(data.message || "Rezervace byla přijata. Ozveme se vám s potvrzením.");
          setStatus("success");
        })
        .catch(function () {
          setErrors({ form: "Nepodařilo se spojit se serverem. Zkuste to prosím později." });
          setStatus("error");
        });
    }

    if (!open) {
      return (
        <main className="kit">
          <div className="kit-shell" style={{ padding: "var(--section-y)" }}>
            <h1>Rezervace</h1>
            <p>Příjem rezervací je momentálně uzavřen.</p>
            <Button variant="secondary" onClick={function () { go("contact"); }}>Kontaktujte nás</Button>
          </div>
        </main>
      );
    }

    if (status === "success") {
      return (
        <main className="kit">
          <div className="kit-shell" style={{ maxWidth: 720, margin: "0 auto", padding: "var(--section-y)", textAlign: "center" }}>
            <div style={{ padding: 32, background: "var(--surface-card)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-soft)" }}>
              <Icon name="check" size={36} />
              <h1 style={{ marginTop: 16, marginBottom: 8 }}>Rezervace odeslána</h1>
              <p style={{ color: "var(--text-muted)", marginBottom: 24 }}>{successMsg}</p>
              <Button variant="primary" onClick={function () { go("category"); }}>Zpět na nabídku</Button>
            </div>
          </div>
        </main>
      );
    }

    var produkty = productsForTyp(form.typ);

    return (
      <main className="kit">
        <div className="kit-shell kit-cathead">
          <nav className="kit-breadcrumb">
            <a href="#" onClick={function (e) { e.preventDefault(); go("home"); }}>Domů</a>
            <Icon name="chevronRight" size={13} /> <span>Rezervace</span>
          </nav>
          <h1>Rezervace matky nebo oddělku</h1>
          <p>Vyplňte formulář pro předběžnou rezervaci. Ozveme se vám s potvrzením a dalšími informacemi k převzetí.</p>
        </div>
        <div className="kit-shell" style={{ maxWidth: 720, paddingBottom: "var(--section-y)" }}>
          <form className="kit-contact__form" onSubmit={onSubmit} noValidate aria-busy={status === "loading"}>
            {errors.form && (
              <p role="alert" style={{ color: "var(--chyba)", marginBottom: 16 }}>{errors.form}</p>
            )}
            <div className="kit-contact__row">
              <div className="vn-field">
                <Input label="Vaše jméno" value={form.jmeno} onChange={function (e) { setField("jmeno", e.target.value); }} disabled={status === "loading"} />
                <Err msg={errors.jmeno} />
              </div>
              <div className="vn-field">
                <Input label="E-mail" type="email" value={form.email} onChange={function (e) { setField("email", e.target.value); }} disabled={status === "loading"} />
                <Err msg={errors.email} />
              </div>
            </div>
            <div className="vn-field">
              <Input label="Telefon (nepovinné)" type="tel" value={form.telefon} onChange={function (e) { setField("telefon", e.target.value); }} placeholder="+420 …" disabled={status === "loading"} />
              <Err msg={errors.telefon} />
            </div>
            <div className="vn-field">
              <label className="vn-field__label" style={{ display: "block", marginBottom: 6 }}>Typ rezervace</label>
              <select className="vn-input" value={form.typ} onChange={function (e) { setField("typ", e.target.value); }} disabled={status === "loading"} style={{ width: "100%" }}>
                <option value="" disabled>Vyberte…</option>
                <option value="matka">Chovná matka</option>
                <option value="oddelek">Oddělek</option>
              </select>
              <Err msg={errors.typ} />
            </div>
            <div className="vn-field">
              <label className="vn-field__label" style={{ display: "block", marginBottom: 6 }}>Produkt</label>
              <select className="vn-input" value={form.polozkaSlug} onChange={function (e) { setField("polozkaSlug", e.target.value); }} disabled={!form.typ || status === "loading"} style={{ width: "100%" }}>
                <option value="" disabled>{form.typ ? "Vyberte…" : "Nejdříve vyberte typ"}</option>
                {produkty.map(function (p) {
                  return <option key={p.id} value={p._slug || p.id}>{p.name}</option>;
                })}
              </select>
              <Err msg={errors.polozkaSlug} />
            </div>
            <div className="vn-field">
              <Input label="Počet kusů" type="number" value={form.pocetKusu} onChange={function (e) { setField("pocetKusu", e.target.value); }} disabled={status === "loading"} />
              <Err msg={errors.pocetKusu} />
            </div>
            <div className="vn-field">
              <Input label="Preferovaný termín" value={form.preferovanyTermin} onChange={function (e) { setField("preferovanyTermin", e.target.value); }} placeholder="např. květen 2026, víkend …" disabled={status === "loading"} />
              <Err msg={errors.preferovanyTermin} />
            </div>
            <div className="vn-field">
              <label className="vn-field__label" style={{ display: "block", marginBottom: 6 }}>Poznámka</label>
              <textarea className="vn-input" rows={4} value={form.poznamka} onChange={function (e) { setField("poznamka", e.target.value); }} placeholder="Volitelná poznámka…" style={{ width: "100%", resize: "vertical", fontFamily: "var(--font-body)" }} disabled={status === "loading"} />
              <Err msg={errors.poznamka} />
            </div>
            <label style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: "var(--text-sm)", cursor: "pointer" }}>
              <input type="checkbox" checked={form.gdprSouhlas} onChange={function (e) { setField("gdprSouhlas", e.target.checked); }} disabled={status === "loading"} style={{ marginTop: 3 }} />
              <span>Souhlasím se zpracováním osobních údajů za účelem vyřízení rezervace.</span>
            </label>
            <Err msg={errors.gdprSouhlas} />
            <div style={{ marginTop: 20 }}>
              <Button variant="primary" block size="lg" type="submit" disabled={status === "loading"} iconStart={status === "loading" ? undefined : <Icon name="check" size={18} />}>
                {status === "loading" ? "Odesílám…" : "Odeslat rezervaci"}
              </Button>
            </div>
          </form>
        </div>
      </main>
    );
  }

  window.VNRezervace = Rezervace;
})();