// ============================================================
// LVRD Diagnostic Checkout — shared primitives
//
// Used by steps 01-04. Components are intentionally small and
// stateless — state lives in the App at /checkout-flow/app.jsx and
// is passed through props. The step modules compose these.
// ============================================================

const { useState } = React;

// ------------------------------------------------------------
// Slim header — wordmark + secure indicator.
// No marketing CTA chips. The prospect is mid-flow.
// ------------------------------------------------------------
function CheckoutHeader() {
  return (
    <header className="dx-header">
      <div className="dx-header-inner">
        <a href="/" className="wordmark">LVRD</a>
        <span className="dx-header-secure">
          <LockIcon />
          <span>Secure checkout</span>
        </span>
      </div>
    </header>
  );
}

function CheckoutFooter() {
  return (
    <footer className="dx-footer">
      <a href="/" className="wordmark">LVRD</a>
      <span className="dx-footer-meta">&copy; 2026 LVRD &nbsp;&middot;&nbsp; Encrypted via Stripe</span>
    </footer>
  );
}

// ------------------------------------------------------------
// Progress — 01 / 04 mono caption + filled progress bar.
// `step` is 1-indexed (1..4). `onBack` shows when step > 1.
// ------------------------------------------------------------
function ProgressBar({ step, totalSteps, name, onBack, wide }) {
  const pct = Math.round((step / totalSteps) * 100);
  const sn = String(step).padStart(2, "0");
  const tn = String(totalSteps).padStart(2, "0");
  return (
    <div className={"dx-progress" + (wide ? " dx-progress-wide" : "")}>
      <div className="dx-progress-meta">
        <span className="dx-progress-step">
          <span className="n">{sn} / {tn}</span>
          <span className="name">{name}</span>
        </span>
        {step > 1 && onBack && (
          <button type="button" className="dx-progress-back" onClick={onBack}>
            &larr; Back
          </button>
        )}
      </div>
      <div className="dx-progress-bar" role="progressbar" aria-valuenow={step} aria-valuemin={1} aria-valuemax={totalSteps}>
        <div className="dx-progress-fill" style={{ width: pct + "%" }} />
      </div>
    </div>
  );
}

// ------------------------------------------------------------
// Step shell — eyebrow + headline + optional lede + children.
// Width variant controls whether children render in the
// 720px reading column or the 1040px wide column (step 04).
// ------------------------------------------------------------
function StepShell({ eyebrow, headline, lede, wide, children }) {
  return (
    <main className={wide ? "dx-step-wide" : "dx-step"}>
      <div className="dx-step-eyebrow">
        <span className="breath-dot" />
        <span>{eyebrow}</span>
      </div>
      <h1 className="dx-step-headline">{headline}</h1>
      {lede && <p className="dx-step-lede">{lede}</p>}
      {children}
    </main>
  );
}

// ------------------------------------------------------------
// Labeled text input.
// ------------------------------------------------------------
function TextField({ id, label, hint, help, value, onChange, placeholder, type, autoFocus, error, autoComplete, inputMode }) {
  return (
    <div className="dx-field">
      <label className="dx-field-label" htmlFor={id}>
        <span>{label}</span>
        {hint && <span className="dx-field-hint">{hint}</span>}
      </label>
      {help && <p className="dx-field-help">{help}</p>}
      <input
        id={id}
        type={type || "text"}
        className="dx-input"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        autoFocus={autoFocus}
        autoComplete={autoComplete}
        inputMode={inputMode}
        aria-invalid={error ? "true" : "false"}
      />
      {error && <div className="dx-field-error">{error}</div>}
    </div>
  );
}

function TextareaField({ id, label, hint, help, value, onChange, placeholder, rows, error }) {
  return (
    <div className="dx-field">
      <label className="dx-field-label" htmlFor={id}>
        <span>{label}</span>
        {hint && <span className="dx-field-hint">{hint}</span>}
      </label>
      {help && <p className="dx-field-help">{help}</p>}
      <textarea
        id={id}
        className="dx-textarea"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        rows={rows || 3}
        aria-invalid={error ? "true" : "false"}
      />
      {error && <div className="dx-field-error">{error}</div>}
    </div>
  );
}

// ------------------------------------------------------------
// Chip group — single or multi select.
// `mode` defaults to "single". Pass `mode="multi"` for a
// multi-select toolset chip group.
// ------------------------------------------------------------
function ChipGroup({ label, hint, options, value, onChange, mode }) {
  const isMulti = mode === "multi";
  const selected = isMulti ? (value || []) : value;

  function toggle(optValue) {
    if (isMulti) {
      const has = (selected || []).includes(optValue);
      const next = has
        ? selected.filter((v) => v !== optValue)
        : [...(selected || []), optValue];
      onChange(next);
    } else {
      onChange(optValue);
    }
  }

  function isOn(optValue) {
    return isMulti ? (selected || []).includes(optValue) : selected === optValue;
  }

  return (
    <div className="dx-field">
      <label className="dx-field-label">
        <span>{label}</span>
        {hint && <span className="dx-field-hint">{hint}</span>}
      </label>
      <div className="dx-chips" role={isMulti ? "group" : "radiogroup"} aria-label={label}>
        {options.map((opt) => (
          <button
            key={opt.value}
            type="button"
            className="dx-chip"
            aria-pressed={isOn(opt.value) ? "true" : "false"}
            onClick={() => toggle(opt.value)}
          >
            <CheckIcon className="check" />
            <span>{opt.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

// ------------------------------------------------------------
// Icons — tiny line set, currentColor, 1.5 stroke.
// Matches the LVRD design system's icon register.
// ------------------------------------------------------------
function LockIcon({ size }) {
  const s = size || 12;
  return (
    <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="7" width="10" height="7" rx="1.5" />
      <path d="M5.5 7V4.5a2.5 2.5 0 015 0V7" />
    </svg>
  );
}
function CheckIcon({ size, className }) {
  const s = size || 12;
  return (
    <svg className={className} width={s} height={s} viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M2.5 6.5l2.5 2.5 4.5-5" />
    </svg>
  );
}

// Exports — components are loaded as separate <script> tags,
// so each file's scope is isolated. Make them globally available.
Object.assign(window, {
  CheckoutHeader,
  CheckoutFooter,
  ProgressBar,
  StepShell,
  TextField,
  TextareaField,
  ChipGroup,
  LockIcon,
  CheckIcon,
});