// Shared UI primitives
const { useState, useEffect, useRef, useCallback, useMemo } = React;

// Number with locale-aware thousand separator + 2 decimals — drop-in for .toFixed(2).
// es → "12.345,67", en → "12,345.67". Currency symbol is added by the caller.
window.formatAmount = function formatAmount(n) {
  const lang = (window.__TWEAK_DEFAULTS?.language) || "es";
  const locale = lang === "es" ? "es-ES" : "en-US";
  const v = Number.isFinite(n) ? n : 0;
  return new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(v);
};

window.Avatar = function Avatar({ initials, size = "md" }) {
  return <div className={`avatar ${size === "lg" ? "lg" : size === "xl" ? "xl" : size === "sm" ? "sm" : ""}`}>{initials}</div>;
};

window.Badge = function Badge({ tone = "neutral", children, dot = true }) {
  return (
    <span className={`badge ${tone}`}>
      {dot && <span className="dot" />}
      {children}
    </span>
  );
};

window.Btn = function Btn({ variant, children, onClick, icon: Icon, ...rest }) {
  return (
    <button className={`btn ${variant || ""}`} onClick={onClick} {...rest}>
      {Icon && <Icon />}
      {children}
    </button>
  );
};

window.Sparkline = function Sparkline({ values, color = "var(--text-muted)", style = {} }) {
  const path = window.makeSpark(values, 200, 40);
  return (
    <svg className="spark" viewBox="0 0 200 40" preserveAspectRatio="none" style={style}>
      <path d={path} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
};

window.Stat = function Stat({ label, value, delta, deltaDir, icon: Icon, tone = "neutral", spark, sparkColor, t }) {
  return (
    <div className="stat" data-tone={tone}>
      <div className="stat-label">
        {Icon && <Icon />}
        {label}
      </div>
      <div className="stat-value">{value}</div>
      <div className="stat-meta">
        {delta && (
          <span className={deltaDir === "up" ? "delta-up" : deltaDir === "down" ? "delta-down" : ""}>
            {deltaDir === "up" ? "↑" : deltaDir === "down" ? "↓" : ""} {delta}
          </span>
        )}
        <span>{t ? t("vs_last") : "vs last month"}</span>
      </div>
      {spark && <Sparkline values={spark} color={sparkColor || "var(--text-muted)"} />}
    </div>
  );
};

window.StatusBadge = function StatusBadge({ status, t }) {
  const map = {
    paid: { tone: "success", label: t ? t("paid") : "Paid" },
    pending: { tone: "warning", label: t ? t("pending") : "Pending" },
    overdue: { tone: "danger", label: t ? t("overdue") : "Overdue" },
    draft: { tone: "neutral", label: t ? t("draft") : "Draft" },
    active: { tone: "success", label: "Active" },
    inactive: { tone: "neutral", label: "Inactive" },
    connected: { tone: "success", label: "Connected" },
    available: { tone: "neutral", label: "Available" },
  };
  const m = map[status] || { tone: "neutral", label: status };
  return <Badge tone={m.tone}>{m.label}</Badge>;
};

window.PageHeader = function PageHeader({ title, subtitle, actions }) {
  return (
    <div className="page-header">
      <div>
        <h1 className="page-title">{title}</h1>
        {subtitle && <div className="page-subtitle">{subtitle}</div>}
      </div>
      {actions && <div className="page-actions">{actions}</div>}
    </div>
  );
};

window.Toolbar = function Toolbar({ children }) {
  return <div className="toolbar">{children}</div>;
};

window.Switch = function Switch({ on, onChange }) {
  return <div className={`switch ${on ? "on" : ""}`} onClick={() => onChange(!on)} role="switch" aria-checked={on} />;
};

Object.assign(window, { Avatar: window.Avatar, Badge: window.Badge, Btn: window.Btn, Stat: window.Stat, StatusBadge: window.StatusBadge, PageHeader: window.PageHeader, Toolbar: window.Toolbar, Switch: window.Switch, Sparkline: window.Sparkline });