// Steps — Vendoo Design System  (Step · StepsVertical · StepsHorizontal)
// ─────────────────────────────────────────────────────────────────────────────
// The REAL component bodies, lifted verbatim from the design-system source
//   steps/step/Step.jsx · steps/vertical/StepsVertical.jsx · steps/horizontal/StepsHorizontal.jsx
// The published _ds_bundle.js predates these three components and does not export
// them, so — exactly like Navigation.jsx — this file registers them on
// window.VendooDesignSystem_a81b7b instead of using a top-level ESM `export`
// (the in-browser Babel transform rejects `export`). The Step playground renders
// these straight from the namespace; nothing is reimplemented.
// Requires tokens.css + assets/icons.js. React is global.
// ─────────────────────────────────────────────────────────────────────────────
(function () {
  const React = window.React;
  const ns = (window.VendooDesignSystem_a81b7b = window.VendooDesignSystem_a81b7b || {});

  function vdsInjectCss(id, css) {
    if (typeof document === "undefined" || document.getElementById(id)) return;
    const s = document.createElement("style");
    s.id = id;
    s.textContent = css;
    document.head.appendChild(s);
  }

  /* ── Step ─────────────────────────────────────────────────────────────── */
  const VDS_STEP_CSS = `
.vds-step{ display:inline-flex; align-items:center; gap:12px; box-sizing:border-box;
  font-family:"Lexend",system-ui,sans-serif; }
.vds-step--stacked{ flex-direction:column; gap:6px; text-align:center; }
.vds-step--selected{ gap:12px; padding:8px 12px; border-radius:var(--radius-full,999px);
  background:var(--sys-primary-fixed); }

.vds-step__badge{ width:30px; height:30px; flex:none; border-radius:var(--radius-full,999px);
  display:grid; place-items:center; box-sizing:border-box; color:#fff;
  font-weight:500; font-size:14px; line-height:20px; letter-spacing:0.1px; }
.vds-step__badge v-icon{ width:18px; height:18px; display:block; }

.vds-step--current   .vds-step__badge{ background:var(--sys-primary); }
.vds-step--completed .vds-step__badge{ background:var(--sys-primary); }
.vds-step--upcoming  .vds-step__badge{ background:var(--sys-outline-variant); }

.vds-step__label{ font-weight:500; font-size:14px; line-height:20px; letter-spacing:0.1px;
  color:var(--sys-on-surface); white-space:nowrap; }
.vds-step--upcoming .vds-step__label{ color:var(--sys-on-surface-variant); }
`;

  function Step({ number = 1, label, state = "current", selected = false, layout = "inline" }) {
    vdsInjectCss("vds-step-css", VDS_STEP_CSS);
    const cls =
      "vds-step vds-step--" + state +
      (layout === "stacked" ? " vds-step--stacked" : "") +
      (selected ? " vds-step--selected" : "");
    return (
      <div className={cls}>
        <span className="vds-step__badge">
          {state === "completed" ? <v-icon name="check"></v-icon> : number}
        </span>
        {label != null && label !== "" ? <span className="vds-step__label">{label}</span> : null}
      </div>
    );
  }

  /* ── Steps Vertical ───────────────────────────────────────────────────── */
  const VDS_STEPS_V_CSS = `
.vds-steps-v{ display:inline-flex; flex-direction:column; align-items:flex-start;
  font-family:"Lexend",system-ui,sans-serif; }
.vds-steps-v__rail{ width:2px; height:24px; margin:2px 0 2px 14px; flex:none;
  background:var(--sys-outline-variant); border-radius:1px; }
`;

  function vdsStepState(item, i, current) {
    if (item && typeof item === "object" && item.state) return item.state;
    if (i < current) return "completed";
    if (i === current) return "current";
    return "upcoming";
  }

  const VDS_V_DEFAULT = ["Photos", "Marketplaces", "Title & description", "Item details", "Pricing", "Shipping"];

  function StepsVertical({ steps = VDS_V_DEFAULT, current = 0 }) {
    vdsInjectCss("vds-steps-v-css", VDS_STEPS_V_CSS);
    const Step = ns.Step;
    return (
      <div className="vds-steps-v">
        {steps.map((item, i) => {
          const label = typeof item === "string" ? item : item.label;
          const state = vdsStepState(item, i, current);
          return (
            <React.Fragment key={i}>
              <Step number={i + 1} label={label} state={state} layout="inline" />
              {i < steps.length - 1 ? <span className="vds-steps-v__rail"></span> : null}
            </React.Fragment>
          );
        })}
      </div>
    );
  }

  /* ── Steps Horizontal ─────────────────────────────────────────────────── */
  const VDS_STEPS_H_CSS = `
.vds-steps-h{ display:flex; align-items:flex-start; font-family:"Lexend",system-ui,sans-serif; }
.vds-steps-h__step{ flex:none; }
.vds-steps-h__track{ flex:1 1 auto; min-width:32px; height:2px; margin:14px 8px 0;
  background:var(--sys-outline-variant); border-radius:1px; }
`;

  const VDS_H_DEFAULT = ["Step 1", "Step 2", "Step 3"];

  function StepsHorizontal({ steps = VDS_H_DEFAULT, current = 0 }) {
    vdsInjectCss("vds-steps-h-css", VDS_STEPS_H_CSS);
    const Step = ns.Step;
    return (
      <div className="vds-steps-h">
        {steps.map((item, i) => {
          const label = typeof item === "string" ? item : item.label;
          const state = vdsStepState(item, i, current);
          return (
            <React.Fragment key={i}>
              <div className="vds-steps-h__step">
                <Step number={i + 1} label={label} state={state} layout="stacked" />
              </div>
              {i < steps.length - 1 ? <span className="vds-steps-h__track"></span> : null}
            </React.Fragment>
          );
        })}
      </div>
    );
  }

  ns.Step = Step;
  ns.StepsVertical = StepsVertical;
  ns.StepsHorizontal = StepsHorizontal;
})();