/* Sweet Haven — Custom cakes order builder */

const { useState: useStateC } = React;

function CustomCakes({ onAddCustom, onNav }) {
  const [occasion, setOccasion] = useStateC(OCCASIONS[0]);
  const [size, setSize] = useStateC(SIZES[1]);
  const [flavour, setFlavour] = useStateC(FLAVOURS[0].name);
  const [finish, setFinish] = useStateC(CREAM_OPTIONS[0]);
  const [date, setDate] = useStateC("");
  const [message, setMessage] = useStateC("");

  const flavourImg = (FLAVOURS.find((f) => f.name === flavour) || FLAVOURS[0]).img;
  const minDate = (() => { const d = new Date(); d.setDate(d.getDate() + 3); return d.toISOString().slice(0, 10); })();

  const pickOccasion = (o) => {
    setOccasion(o);
    if (o === "Bento") setSize(SIZES.find((s) => s.id === "bento"));
  };

  const submit = (e) => {
    e.preventDefault();
    const p = {
      id: "custom-" + Date.now(),
      name: occasion === "Bento" ? "Bento cake" : occasion + " cake",
      cat: "Custom",
      img: flavourImg,
      tags: [],
      desc: `${flavour}, ${finish.toLowerCase()}`,
    };
    const opt = [size.label, flavour, finish, message ? `"${message}"` : null, date].filter(Boolean).join(" · ");
    onAddCustom(p, { id: "custom-" + size.id, label: size.label, price: size.price }, finish, opt);
  };

  return (
    <div className="sh-page">
      <section className="sh-custom-hero">
        <div className="sh-custom-hero-copy">
          <div className="sh-overline"><span className="sh-rule" />Made just for you</div>
          <h1 className="sh-page-title">Build your custom cake</h1>
          <p className="sh-page-lede">Tell us the occasion and the flavour and we'll hand-finish it in the shop. Three days' notice, please — we'll call to confirm the details.</p>
          <div className="sh-custom-steps">
            <span><i className="sh-step-n">1</i> Pick the occasion &amp; flavour</span>
            <span><i className="sh-step-n">2</i> We bake &amp; hand-finish</span>
            <span><i className="sh-step-n">3</i> Collect at the counter</span>
          </div>
        </div>
        <div className="sh-custom-hero-art">
          <Photo src="images/customcake.jpg" name="Custom cake" />
        </div>
      </section>

      <section className="sh-builder">
        <form className="sh-builder-form" onSubmit={submit}>
          <div className="sh-field">
            <label className="sh-option-label">The occasion</label>
            <div className="sh-chip-row">
              {OCCASIONS.map((o) => (
                <button type="button" key={o} className={"sh-chip-btn" + (occasion === o ? " is-active" : "")} onClick={() => pickOccasion(o)}>{o}</button>
              ))}
            </div>
          </div>

          <div className="sh-field">
            <label className="sh-option-label">Size</label>
            <div className="sh-size-row">
              {SIZES.map((s) => (
                <button type="button" key={s.id} className={"sh-size-card" + (size.id === s.id ? " is-active" : "")} onClick={() => setSize(s)}>
                  <span className="sh-size-label">{s.label}</span>
                  <span className="sh-size-serves">{s.serves}</span>
                  <span className="sh-size-price">{money(s.price)}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="sh-field-2col">
            <div className="sh-field">
              <label className="sh-option-label">Flavour</label>
              <div className="sh-select-wrap">
                <select className="sh-input" value={flavour} onChange={(e) => setFlavour(e.target.value)}>
                  {FLAVOURS.map((f) => <option key={f.name}>{f.name}</option>)}
                </select>
                <Icon name="chevron-down" size={18} className="sh-select-caret" />
              </div>
            </div>
            <div className="sh-field">
              <label className="sh-option-label">Finish</label>
              <div className="sh-segment full">
                {CREAM_OPTIONS.map((c) => (
                  <button type="button" key={c} className={"sh-seg-btn" + (finish === c ? " is-active" : "")} onClick={() => setFinish(c)}>{c}</button>
                ))}
              </div>
            </div>
          </div>

          <div className="sh-field-2col">
            <div className="sh-field">
              <label className="sh-option-label">Pickup date</label>
              <DatePicker value={date} min={minDate} onChange={setDate} placeholder="Choose a date" />
            </div>
            <div className="sh-field">
              <label className="sh-option-label">Message on the cake <span className="sh-optional">optional</span></label>
              <input className="sh-input" type="text" maxLength={40} placeholder="Happy birthday, Sam" value={message} onChange={(e) => setMessage(e.target.value)} />
            </div>
          </div>
        </form>

        <aside className="sh-builder-summary">
          <div className="sh-summary-photo"><Photo src={flavourImg} name="Your cake" /></div>
          <div className="sh-overline"><span className="sh-rule" />Your cake</div>
          <h3 className="sh-summary-title">{occasion === "Bento" ? "Bento cake" : occasion + " cake"}</h3>
          <ul className="sh-summary-list">
            <li><span>Size</span><span>{size.label} · {size.serves}</span></li>
            <li><span>Flavour</span><span>{flavour}</span></li>
            <li><span>Finish</span><span>{finish}</span></li>
            <li><span>Pickup</span><span>{date || "Choose a date"}</span></li>
            {message && <li><span>Message</span><span>"{message}"</span></li>}
          </ul>
          <div className="sh-summary-foot">
            <div className="sh-total"><span>From</span><span className="sh-price big">{money(size.price)}</span></div>
            <button className="sh-btn primary full" onClick={submit}>Add to box</button>
            <p className="sh-foot-note">We'll call to confirm before baking</p>
          </div>
        </aside>
      </section>
    </div>
  );
}

Object.assign(window, { CustomCakes });