/* ============================================================
   L'angelot — Leather name-plate on braided cord + Customizer
   exports: LeatherTag, Customizer  (to window)
   ============================================================ */
const { useState: lt_useState } = React;

/* ---- The physical product: braided cord + leather name plate ---- */
function LeatherTag({ leather, cord1, cord2, crystal, face, name, surname, phone, t }) {
  const style = {
    "--lt-base": leather.base,
    "--lt-light": leather.light,
    "--lt-dark": leather.dark,
    "--lt-engrave": leather.engrave,
    "--lt-stitch": leather.stitch,
    "--cord1": cord1,
    "--cord2": cord2,
  };
  const displayName = (name && name.trim()) ? name : t.namePh.trim();
  const displaySurname = (surname && surname.trim()) ? surname : t.backName;
  const displayPhone = (phone && phone.trim()) ? phone : t.phonePh;
  const showClear = crystal === "clear" || crystal === "both";
  const showAb = crystal === "ab" || crystal === "both";

  return (
    <div className="band" style={style}>
      <div className="braid"></div>
      <div className="clasp"><span className="ring"></span><span className="hook"></span></div>
      <div className={`nameplate ${face === "back" ? "back" : ""}`}>
        {showClear && <span className="crystal clear c-tl"></span>}
        {showAb && <span className="crystal ab c-br"></span>}
        {face === "front" ? (
          <div className="plate-name">{displayName}</div>
        ) : (
          <div className="plate-back">
            <div className="plate-name">{displaySurname}</div>
            <div className="plate-sub">{displayPhone}</div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---- Swatch ---- */
function Swatch({ color, active, label, onClick, cordStyle }) {
  return (
    <button
      className={`swatch ${cordStyle ? "cord-style" : ""}`}
      style={{ background: color }}
      aria-pressed={active}
      title={label}
      onClick={onClick}
    ></button>
  );
}

/* ---- Customizer section ---- */
function Customizer({ t, lang, state, set }) {
  const LEATHERS = window.LANGELOT_LEATHERS;
  const CORDS = window.LANGELOT_CORDS;
  const CRYSTALS = window.LANGELOT_CRYSTALS;
  const c = t.customizer;
  const [face, setFace] = lt_useState("front");

  const leather = LEATHERS.find((l) => l.id === state.leather) || LEATHERS[1];

  return (
    <section className="section" id="customizer">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">{c.eyebrow}</span>
          <h2 className="sec-title">{c.title}</h2>
          <p className="sec-lead">{c.lead}</p>
        </div>

        <div className="customizer">
          {/* preview */}
          <div className="cz-preview reveal">
            <div className="cz-flip">
              <button className={face === "front" ? "active" : ""} onClick={() => setFace("front")}>{c.front}</button>
              <button className={face === "back" ? "active" : ""} onClick={() => setFace("back")}>{c.back}</button>
            </div>
            <div className="tag-stage">
              <LeatherTag
                leather={leather}
                cord1={state.cord1}
                cord2={state.cord2}
                crystal={state.crystal}
                face={face}
                name={state.name}
                surname={state.surname}
                phone={state.phone}
                t={c}
              />
            </div>
            <div className="cz-note">{c.note}</div>
          </div>

          {/* controls */}
          <div className="cz-controls reveal">
            {/* name */}
            <div>
              <div className="field-label">
                <span className="num">01</span>
                <span className="txt">{c.nameLabel}</span>
                <span className="en">Front</span>
              </div>
              <input
                className="cz-input"
                type="text"
                maxLength={12}
                placeholder={c.namePh.trim()}
                value={state.name}
                onChange={(e) => { set("name", e.target.value); }}
                onFocus={() => setFace("front")}
              />
            </div>

            {/* back fields */}
            <div>
              <div className="field-label">
                <span className="num">02</span>
                <span className="txt">{c.surnameLabel} ・ {c.phoneLabel}</span>
                <span className="en">Back</span>
              </div>
              <div className="cz-input-row">
                <input
                  className="cz-input"
                  type="text"
                  maxLength={10}
                  placeholder={c.surnamePh}
                  value={state.surname}
                  onChange={(e) => set("surname", e.target.value)}
                  onFocus={() => setFace("back")}
                />
                <input
                  className="cz-input"
                  type="text"
                  maxLength={16}
                  placeholder={c.phonePh}
                  value={state.phone}
                  onChange={(e) => set("phone", e.target.value)}
                  onFocus={() => setFace("back")}
                />
              </div>
            </div>

            {/* leather color */}
            <div>
              <div className="field-label">
                <span className="num">03</span>
                <span className="txt">{c.leatherLabel}</span>
                <span className="en">{lang === "jp" ? leather.jp : leather.en}</span>
              </div>
              <div className="swatches">
                {LEATHERS.map((l) => (
                  <Swatch
                    key={l.id}
                    color={l.base}
                    active={state.leather === l.id}
                    label={lang === "jp" ? l.jp : l.en}
                    onClick={() => set("leather", l.id)}
                  />
                ))}
              </div>
            </div>

            {/* cords */}
            <div>
              <div className="field-label">
                <span className="num">04</span>
                <span className="txt">{c.cordLabel}</span>
              </div>
              <div className="swatch-group">
                <div>
                  <div className="sg-label" style={{ marginBottom: "8px" }}>{c.cord1}</div>
                  <div className="swatches">
                    {CORDS.map((cd) => (
                      <Swatch key={cd.id} color={cd.color} cordStyle active={state.cord1 === cd.color} label={cd.jp} onClick={() => set("cord1", cd.color)} />
                    ))}
                  </div>
                </div>
                <div>
                  <div className="sg-label" style={{ marginBottom: "8px" }}>{c.cord2}</div>
                  <div className="swatches">
                    {CORDS.map((cd) => (
                      <Swatch key={cd.id} color={cd.color} cordStyle active={state.cord2 === cd.color} label={cd.jp} onClick={() => set("cord2", cd.color)} />
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* crystals */}
            <div>
              <div className="field-label">
                <span className="num">05</span>
                <span className="txt">{c.crystalLabel}</span>
                <span className="en">Crystal</span>
              </div>
              <div className="cz-flip" style={{ flexWrap: "wrap" }}>
                {CRYSTALS.map((cr) => (
                  <button
                    key={cr.id}
                    className={state.crystal === cr.id ? "active" : ""}
                    onClick={() => set("crystal", cr.id)}
                  >{lang === "jp" ? cr.jp : cr.en}</button>
                ))}
              </div>
            </div>

            <a href="#contact" className="btn btn-primary btn-arrow" style={{ alignSelf: "flex-start", marginTop: "6px" }}>
              {c.cta}
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LeatherTag, Customizer, Swatch });