// components-v5.jsx — V5 additive React components (Odometer + EmptyState)
// Drop-in components designed by Claude Design (11-odometer-v5.html · 12-empty-states-v5.html)
//
// USAGE:
//   const { Odometer, EmptyState } = window.RaycastV5;
//   <Odometer value={total} format="currency" variant="hero gold" />
//   <EmptyState variant="onboarding" title="..." meta="..." actions={[...]} />
//
// Loaded via index.html after configurator-2026.jsx · attaches to window.RaycastV5.

(function () {
  const e = React.createElement;

  // ============================================================================
  // ODOMETER — animated digit columns
  // ============================================================================

  // Format value to display string (with NBSP thousands + $ suffix if currency)
  function formatValue(value, format) {
    if (value == null || isNaN(value)) return "—";
    const rounded = Math.round(value);
    const withNbsp = String(Math.abs(rounded)).replace(/\B(?=(\d{3})+(?!\d))/g, " ");
    const sign = rounded < 0 ? "-" : "";
    if (format === "currency") return sign + withNbsp + " $";
    if (format === "percent") return sign + withNbsp + " %";
    return sign + withNbsp;
  }

  function OdoDigit({ value }) {
    return e("span", { className: "r5-odo-digit" },
      e("span", {
        className: "r5-odo-digit-col",
        style: { transform: `translateY(-${value}em)` }
      },
        [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(n => e("span", { key: n }, n))
      )
    );
  }

  function Odometer({ value, format = "number", variant = "", className = "" }) {
    const formatted = formatValue(value, format);
    const chars = [...formatted];

    return e("span", { className: `r5-odo ${variant} ${className}`.trim() },
      chars.map((ch, i) => {
        if (/\d/.test(ch)) {
          return e(OdoDigit, { key: i, value: parseInt(ch, 10) });
        }
        return e("span", {
          key: i,
          className: `r5-odo-static ${ch === " " ? "thin" : ""}`
        }, ch);
      })
    );
  }

  // ============================================================================
  // EMPTY STATE — 6 variants
  // ============================================================================

  // SVG illustrations per variant
  const ILLUSTRATIONS = {
    onboarding: e("svg", { width: 48, height: 48, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" },
      e("path", { d: "M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" })
    ),
    "no-data": e("svg", { width: 48, height: 48, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" },
      e("rect", { x: 3, y: 3, width: 18, height: 18, rx: 2 }),
      e("path", { d: "M8 12h8M8 16h5" })
    ),
    search: e("svg", { width: 48, height: 48, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" },
      e("circle", { cx: 11, cy: 11, r: 8 }),
      e("path", { d: "m21 21-4.35-4.35" })
    ),
    error: e("svg", { width: 48, height: 48, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" },
      e("circle", { cx: 12, cy: 12, r: 10 }),
      e("line", { x1: 15, y1: 9, x2: 9, y2: 15 }),
      e("line", { x1: 9, y1: 9, x2: 15, y2: 15 })
    ),
    "403": e("svg", { width: 48, height: 48, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" },
      e("rect", { x: 3, y: 11, width: 18, height: 11, rx: 2 }),
      e("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
    ),
    loading: e("svg", { width: 48, height: 48, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" },
      e("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" })
    )
  };

  function EmptyState({ variant = "no-data", title, meta, actions = [], illustration }) {
    const ill = illustration || ILLUSTRATIONS[variant] || ILLUSTRATIONS["no-data"];
    return e("div", { className: `r5-empty-state ${variant}` },
      e("div", { className: "r5-empty-state-illustration" }, ill),
      title && e("h3", { className: "r5-empty-state-title", key: "title" }, title),
      meta && e("p", { className: "r5-empty-state-meta", key: "meta" }, meta),
      actions.length > 0 && e("div", { className: "r5-empty-state-actions", key: "actions" },
        actions.map((a, i) => e("button", {
          key: i,
          type: "button",
          className: `r5-btn r5-btn-${a.variant || "secondary"}`,
          onClick: a.onClick
        }, a.label))
      )
    );
  }

  // ============================================================================
  // Expose globally
  // ============================================================================
  window.RaycastV5 = window.RaycastV5 || {};
  window.RaycastV5.Odometer = Odometer;
  window.RaycastV5.EmptyState = EmptyState;
  window.RaycastV5.formatValue = formatValue;
})();