// RemotePass UI components — self-contained, shippable bundle (window.RP).
// Generated from the RemotePass Design System components. Load via <script type="text/babel" src>.
const React = window.React;

// ===== core/Icon.jsx =====
// Icon — renders a Lucide line icon from the global `lucide` UMD build.
// RemotePass uses a single rounded ~2px line-icon set; Lucide is the closest CDN match.
// Pass a PascalCase Lucide name (e.g. "Users", "DollarSign", "WandSparkles").

function Icon({ name, size = 20, stroke = 2, color = "currentColor", style, ...rest }) {
  const lib = typeof window !== "undefined" ? window.lucide : null;
  const node = lib ? (lib.icons?.[name] || lib[name]) : null;
  if (!node) {
    // graceful fallback: empty square so layout doesn't jump
    return React.createElement("svg", {
      width: size, height: size, viewBox: "0 0 24 24", style, ...rest
    });
  }
  // Lucide UMD shape: ["svg", svgAttrs, [ ["path", {...}], ["circle", {...}], ... ]]
  const kids = Array.isArray(node) && Array.isArray(node[2]) ? node[2] : [];
  const children = kids.map((c, i) => React.createElement(c[0], { key: i, ...c[1] }));
  return React.createElement("svg", {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: color,
    strokeWidth: stroke,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    style: { display: "block", flex: "none", ...style },
    ...rest
  }, children);
}


// ===== core/Flag.jsx =====
// Flag — circular country flag via flagcdn.com (matches the product's inline circular flags).

function Flag({ code, size = 20, title, style, ...rest }) {
  const cc = (code || "").toLowerCase();
  return (
    <span
      title={title || code}
      style={{
        display: "inline-block", width: size, height: size,
        borderRadius: "50%", overflow: "hidden", flex: "none",
        background: "var(--rp-border)",
        boxShadow: "inset 0 0 0 1px rgba(15,16,53,.08)",
        ...style,
      }}
      {...rest}
    >
      <img
        src={(typeof window !== "undefined" && window.__resources && window.__resources["flag_" + cc]) || `https://flagcdn.com/w80/${cc}.png`}
        alt={code}
        style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
      />
    </span>
  );
}


// ===== core/Avatar.jsx =====
// Avatar — circular user avatar with optional country-flag badge and status ring.

function Avatar({
  src,
  name = "",
  size = 40,
  flag,            // ISO country code -> small flag badge bottom-right
  ring = false,    // blue selection ring
  style,
  ...rest
}) {
  const initials = name.split(" ").map(w => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
  return (
    <span style={{ position: "relative", display: "inline-block", width: size, height: size, ...style }} {...rest}>
      <span style={{
        width: size, height: size, borderRadius: "50%", overflow: "hidden",
        display: "grid", placeItems: "center",
        background: "var(--rp-blue-soft)", color: "var(--rp-blue)",
        fontWeight: 700, fontSize: size * 0.36,
        boxShadow: ring ? "0 0 0 2px #fff, 0 0 0 4px var(--rp-blue)" : "none",
      }}>
        {src
          ? <img src={src} alt={name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          : initials}
      </span>
      {flag && (
        <span style={{ position: "absolute", right: -2, bottom: -2, border: "2px solid #fff", borderRadius: "50%", lineHeight: 0 }}>
          <Flag code={flag} size={Math.max(14, size * 0.42)} />
        </span>
      )}
    </span>
  );
}


// ===== core/Badge.jsx =====
// Badge — small count chip used on tabs and nav ("Payroll 75", "Contracts 25").

function Badge({ children, active = false, style, ...rest }) {
  return (
    <span
      style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        minWidth: 20, height: 20, padding: "0 6px",
        fontSize: 12, fontWeight: 700,
        borderRadius: "var(--rp-radius-pill)",
        background: active ? "var(--rp-blue)" : "#F1F1F3",
        color: active ? "#fff" : "var(--rp-muted)",
        fontVariantNumeric: "tabular-nums",
        ...style,
      }}
      {...rest}
    >
      {children}
    </span>
  );
}


// ===== core/Button.jsx =====
// Button — RemotePass action button. Solid blue primary by default.

const SIZES = {
  sm: { fontSize: 13, padding: "7px 12px", gap: 6, icon: 16 },
  md: { fontSize: 14, padding: "10px 16px", gap: 8, icon: 18 },
  lg: { fontSize: 15, padding: "13px 22px", gap: 8, icon: 20 },
};

function Button({
  children,
  variant = "primary",   // primary | secondary | ghost | success | danger | ai
  size = "md",
  icon,                  // Lucide name shown before the label
  iconRight,
  block = false,
  disabled = false,
  style,
  ...rest
}) {
  const s = SIZES[size] || SIZES.md;

  const base = {
    display: block ? "flex" : "inline-flex",
    width: block ? "100%" : undefined,
    alignItems: "center",
    justifyContent: "center",
    gap: s.gap,
    fontFamily: "var(--font-sans)",
    fontWeight: 700,
    fontSize: s.fontSize,
    lineHeight: 1.2,
    padding: s.padding,
    borderRadius: "var(--rp-radius-sm)",
    border: "1px solid transparent",
    cursor: disabled ? "not-allowed" : "pointer",
    opacity: disabled ? 0.55 : 1,
    transition: "background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)",
    whiteSpace: "nowrap",
  };

  const variants = {
    primary:   { background: "var(--rp-blue)", color: "#fff", borderColor: "var(--rp-blue)" },
    secondary: { background: "#fff", color: "var(--rp-ink)", borderColor: "var(--rp-border-strong)" },
    ghost:     { background: "transparent", color: "var(--rp-muted)", borderColor: "transparent" },
    success:   { background: "var(--rp-success)", color: "#fff", borderColor: "var(--rp-success)" },
    danger:    { background: "var(--rp-danger)", color: "#fff", borderColor: "var(--rp-danger)" },
    // AI / agent action: white pill-ish with purple border + purple label (e.g. "Run Payroll Agent")
    ai:        { background: "#fff", color: "var(--rp-ai-indigo)", borderColor: "var(--rp-ai-purple)" },
  };

  return (
    <button
      type="button"
      disabled={disabled}
      style={{ ...base, ...variants[variant], ...style }}
      {...rest}
    >
      {icon && <Icon name={icon} size={s.icon} stroke={2.2} />}
      {children}
      {iconRight && <Icon name={iconRight} size={s.icon} stroke={2.2} />}
    </button>
  );
}


// ===== core/Card.jsx =====
// Card — white surface, 8px radius, whisper-soft shadow. The base container of the product.

function Card({ children, padding = 20, interactive = false, selected = false, style, ...rest }) {
  return (
    <div
      style={{
        background: "var(--rp-surface)",
        borderRadius: "var(--rp-radius-md)",
        boxShadow: "var(--rp-shadow-card)",
        border: selected ? "2px solid var(--rp-blue)" : "1px solid transparent",
        padding,
        transition: "box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard)",
        cursor: interactive ? "pointer" : "default",
        ...style,
      }}
      {...rest}
    >
      {children}
    </div>
  );
}


// ===== core/Chip.jsx =====
// Chip — pill filter / item chip with optional leading icon and count (Review Center category chips).

function Chip({ children, icon, count, active = false, style, ...rest }) {
  return (
    <button
      type="button"
      style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        background: active ? "var(--rp-blue-soft)" : "#fff",
        border: `1px solid ${active ? "var(--rp-blue)" : "var(--rp-border-strong)"}`,
        color: active ? "var(--rp-blue)" : "var(--rp-ink)",
        fontWeight: 700, fontSize: 13,
        padding: "8px 14px", borderRadius: "var(--rp-radius-pill)",
        cursor: "pointer", whiteSpace: "nowrap",
        transition: "background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard)",
        ...style,
      }}
      {...rest}
    >
      {icon && <Icon name={icon} size={16} stroke={2} color={active ? "var(--rp-blue)" : "var(--rp-muted)"} />}
      {children}
      {count != null && (
        <span style={{ color: active ? "var(--rp-blue)" : "var(--rp-muted)", fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>{count}</span>
      )}
    </button>
  );
}


// ===== core/IconButton.jsx =====
// IconButton — square/circular icon-only control used in the top bar and toolbars.

function IconButton({
  name,
  size = 20,
  variant = "bare",   // bare | well | circle
  label,              // accessible label
  badge = false,      // small red dot (notifications)
  style,
  ...rest
}) {
  const box = size + 18;
  const variants = {
    bare:   { background: "transparent", border: "1px solid transparent", color: "var(--rp-muted)" },
    well:   { background: "var(--rp-blue-soft)", border: "1px solid transparent", color: "var(--rp-blue)" },
    circle: { background: "#fff", border: "1px solid var(--rp-border)", color: "var(--rp-muted)" },
  };
  return (
    <button
      type="button"
      aria-label={label}
      style={{
        position: "relative",
        width: box, height: box,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        borderRadius: variant === "circle" || variant === "well" ? "50%" : "var(--rp-radius-sm)",
        cursor: "pointer",
        transition: "background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)",
        ...variants[variant],
        ...style,
      }}
      {...rest}
    >
      <Icon name={name} size={size} />
      {badge && (
        <span style={{
          position: "absolute", top: 8, right: 9, width: 7, height: 7,
          borderRadius: "50%", background: "var(--rp-danger)", border: "1.5px solid #fff",
        }} />
      )}
    </button>
  );
}


// ===== core/Tag.jsx =====
// Tag — small uppercase status pill (REQUIRED, PENDING INVITE, PENDING VALIDATION…).

const TONES = {
  neutral: { bg: "#F1F1F3", fg: "var(--rp-muted)" },
  blue:    { bg: "var(--rp-blue-soft)", fg: "var(--rp-blue)" },
  success: { bg: "var(--rp-success-soft)", fg: "var(--rp-success)" },
  danger:  { bg: "var(--rp-danger-soft)", fg: "var(--rp-danger)" },
  warning: { bg: "var(--rp-warning-soft)", fg: "#9A7400" },
  info:    { bg: "var(--rp-info-soft)", fg: "var(--rp-info)" },
  ai:      { bg: "var(--rp-ai-soft)", fg: "var(--rp-ai-indigo)" },
};

function Tag({ children, tone = "neutral", dot = false, style, ...rest }) {
  const t = TONES[tone] || TONES.neutral;
  return (
    <span
      style={{
        display: "inline-flex", alignItems: "center", gap: 5,
        background: t.bg, color: t.fg,
        fontSize: 11, fontWeight: 700, letterSpacing: "0.04em",
        textTransform: "uppercase",
        padding: "3px 9px", borderRadius: "var(--rp-radius-pill)",
        lineHeight: 1.4, whiteSpace: "nowrap",
        ...style,
      }}
      {...rest}
    >
      {dot && <span style={{ width: 6, height: 6, borderRadius: "50%", background: t.fg }} />}
      {children}
    </span>
  );
}


// ===== ai/AiPill.jsx =====
// AiPill — the "Ask AI" entry pill in the top bar. White pill, purple sparkle, BETA badge.

function AiPill({ label = "Ask AI", beta = true, onClick, style, ...rest }) {
  return (
    <button
      type="button"
      onClick={onClick}
      style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        background: "#fff",
        border: "1px solid var(--rp-border-strong)",
        borderRadius: "var(--rp-radius-pill)",
        padding: "7px 12px 7px 14px",
        cursor: "pointer",
        fontFamily: "var(--font-sans)",
        boxShadow: "var(--rp-shadow-card)",
        transition: "box-shadow var(--dur-fast) var(--ease-standard)",
        ...style,
      }}
      {...rest}
    >
      <Icon name="WandSparkles" size={18} color="var(--rp-ai-indigo)" stroke={2.2} />
      <span style={{ fontSize: 14, fontWeight: 700, color: "var(--rp-ink)" }}>{label}</span>
      {beta && (
        <span style={{
          fontSize: 10, fontWeight: 800, letterSpacing: ".06em",
          color: "var(--rp-ai-indigo)", background: "var(--rp-ai-soft)",
          padding: "2px 7px", borderRadius: "var(--rp-radius-pill)",
        }}>BETA</span>
      )}
    </button>
  );
}


// ===== ai/AgentBanner.jsx =====
// AgentBanner — agent triage summary. Splits a review queue into 3 buckets with the AI accent.

const TONE = {
  auto:   { fg: "var(--rp-ai-indigo)", bg: "var(--rp-ai-soft)", icon: "Sparkles" },
  decide: { fg: "var(--rp-blue)",      bg: "var(--rp-blue-soft)", icon: "Gavel" },
  clarify:{ fg: "#9A7400",             bg: "var(--rp-warning-soft)", icon: "MessageCircleQuestion" },
};

function AgentBanner({
  title = "Payroll Agent reviewed your queue",
  subtitle = "Here's how 132 items were triaged.",
  buckets = [
    { key: "auto", tone: "auto", count: 86, label: "Auto-handled", hint: "ready to undo" },
    { key: "decide", tone: "decide", count: 38, label: "Needs your decision", hint: "review now" },
    { key: "clarify", tone: "clarify", count: 8, label: "Needs clarification", hint: "info missing" },
  ],
  active,
  onPick,
  style,
  ...rest
}) {
  return (
    <div
      style={{
        background: "var(--rp-surface)", borderRadius: "var(--rp-radius-md)",
        boxShadow: "var(--rp-shadow-card)", overflow: "hidden",
        border: "1px solid var(--rp-border)",
        ...style,
      }}
      {...rest}
    >
      {/* gradient hairline = AI layer signal */}
      <div style={{ height: 3, background: "var(--rp-ai-gradient)" }} />
      <div style={{ padding: "16px 20px", display: "flex", alignItems: "center", gap: 14 }}>
        <div style={{
          width: 40, height: 40, borderRadius: "50%", flex: "none",
          background: "var(--rp-ai-gradient)", display: "grid", placeItems: "center",
          boxShadow: "var(--rp-shadow-ai)",
        }}>
          <Icon name="WandSparkles" size={20} color="#fff" stroke={2.2} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 16, fontWeight: 700, color: "var(--rp-ink)" }}>{title}</div>
          <div style={{ fontSize: 13, color: "var(--rp-muted)" }}>{subtitle}</div>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${buckets.length}, 1fr)`, borderTop: "1px solid var(--rp-border)" }}>
        {buckets.map((b, i) => {
          const t = TONE[b.tone] || TONE.decide;
          const on = b.key === active;
          return (
            <button
              key={b.key}
              type="button"
              onClick={() => onPick && onPick(b.key)}
              style={{
                textAlign: "left", border: "none", cursor: "pointer",
                borderLeft: i === 0 ? "none" : "1px solid var(--rp-border)",
                background: on ? t.bg : "#fff",
                padding: "16px 20px", display: "flex", flexDirection: "column", gap: 6,
                transition: "background var(--dur-fast) var(--ease-standard)",
              }}
            >
              <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                <span style={{ width: 26, height: 26, borderRadius: "50%", background: t.bg, display: "grid", placeItems: "center" }}>
                  <Icon name={t.icon} size={15} color={t.fg} stroke={2.2} />
                </span>
                <span style={{ fontSize: 26, fontWeight: 800, color: "var(--rp-ink)", fontVariantNumeric: "tabular-nums", lineHeight: 1 }}>{b.count}</span>
              </span>
              <span style={{ fontSize: 14, fontWeight: 700, color: "var(--rp-ink)" }}>{b.label}</span>
              <span style={{ fontSize: 12, color: t.fg, fontWeight: 700 }}>{b.hint}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}


// ===== ai/AiChip.jsx =====
// AiChip — lavender suggested-prompt chip (purple sparkle + question text).

function AiChip({ children, icon = "WandSparkles", onClick, style, ...rest }) {
  return (
    <button
      type="button"
      onClick={onClick}
      style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        background: "var(--rp-ai-soft)",
        border: "1px solid transparent",
        borderRadius: "var(--rp-radius-pill)",
        padding: "8px 15px",
        cursor: "pointer",
        fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600,
        color: "var(--rp-ai-indigo)",
        whiteSpace: "nowrap",
        transition: "border-color var(--dur-fast) var(--ease-standard)",
        ...style,
      }}
      {...rest}
    >
      <Icon name={icon} size={16} color="var(--rp-ai-indigo)" stroke={2.2} />
      {children}
    </button>
  );
}


// ===== ai/Recommendation.jsx =====
// Recommendation — AI recommended action + cited evidence + Apply / Send / Dismiss.

function Recommendation({
  recommendation = "Approve this payment",
  rationale = "",
  evidence = [],
  applyLabel = "Apply",
  onApply,
  onSend,
  onDismiss,
  style,
  ...rest
}) {
  return (
    <div
      style={{
        background: "var(--rp-ai-soft)",
        border: "1px solid #E3D8FA",
        borderRadius: "var(--rp-radius-md)",
        padding: 16,
        ...style,
      }}
      {...rest}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 10 }}>
        <span style={{ width: 24, height: 24, borderRadius: "50%", background: "var(--rp-ai-gradient)", display: "grid", placeItems: "center" }}>
          <Icon name="WandSparkles" size={14} color="#fff" stroke={2.2} />
        </span>
        <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: ".04em", textTransform: "uppercase", color: "var(--rp-ai-indigo)" }}>
          RemotePass AI recommends
        </span>
      </div>

      <div style={{ fontSize: 16, fontWeight: 700, color: "var(--rp-ink)" }}>{recommendation}</div>
      {rationale && <div style={{ fontSize: 13, color: "var(--rp-muted)", marginTop: 4, lineHeight: 1.5 }}>{rationale}</div>}

      {evidence.length > 0 && (
        <div style={{ marginTop: 12, background: "#fff", borderRadius: "var(--rp-radius-sm)", padding: "6px 4px" }}>
          {evidence.map((e, i) => (
            <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 8, padding: "7px 10px" }}>
              <Icon name="CircleCheck" size={16} color="var(--rp-success)" stroke={2.2} style={{ marginTop: 1 }} />
              <span style={{ fontSize: 13, color: "var(--rp-ink)", lineHeight: 1.45 }}>{e}</span>
            </div>
          ))}
        </div>
      )}

      <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
        <Button variant="ai" icon="Check" size="sm" onClick={onApply}>{applyLabel}</Button>
        {onSend && <Button variant="secondary" icon="Send" size="sm" onClick={onSend}>Ask for info</Button>}
        {onDismiss && <Button variant="ghost" size="sm" onClick={onDismiss}>Dismiss</Button>}
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 12, color: "var(--rp-muted)" }}>
        <Icon name="Info" size={13} color="var(--rp-muted)" />
        <span style={{ fontSize: 11.5 }}>AI can make mistakes — double-check results before applying.</span>
      </div>
    </div>
  );
}


// ===== ai/TrustLevel.jsx =====
// TrustLevel — per-category autonomy dial: Ask · Suggest · Auto (with undo).

const LEVELS = [
  { key: "ask", label: "Ask", hint: "Do nothing until I say so" },
  { key: "suggest", label: "Suggest", hint: "Recommend, I approve" },
  { key: "auto", label: "Auto", hint: "Act for me, with undo" },
];

function TrustLevel({ category, icon, value = "suggest", onChange, levels = LEVELS, style, ...rest }) {
  const current = levels.find((l) => l.key === value) || levels[1];
  return (
    <div
      style={{
        display: "flex", alignItems: "center", gap: 16,
        padding: "14px 16px", background: "#fff",
        borderRadius: "var(--rp-radius-md)", border: "1px solid var(--rp-border)",
        ...style,
      }}
      {...rest}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 10, flex: 1, minWidth: 0 }}>
        {icon && (
          <span style={{ width: 32, height: 32, borderRadius: 8, background: "var(--rp-blue-soft)", display: "grid", placeItems: "center", flex: "none" }}>
            <Icon name={icon} size={17} color="var(--rp-blue)" />
          </span>
        )}
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: "var(--rp-ink)" }}>{category}</div>
          <div style={{ fontSize: 12, color: "var(--rp-muted)" }}>{current.hint}</div>
        </div>
      </div>

      <div style={{ display: "inline-flex", background: "#F1F1F3", borderRadius: "var(--rp-radius-pill)", padding: 3, flex: "none" }}>
        {levels.map((l) => {
          const on = l.key === value;
          const isAuto = l.key === "auto";
          return (
            <button
              key={l.key}
              type="button"
              onClick={() => onChange && onChange(l.key)}
              style={{
                border: "none", cursor: "pointer",
                padding: "6px 14px", borderRadius: "var(--rp-radius-pill)",
                fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 700,
                background: on ? (isAuto ? "var(--rp-ai-gradient)" : "#fff") : "transparent",
                color: on ? (isAuto ? "#fff" : "var(--rp-blue)") : "var(--rp-muted)",
                boxShadow: on && !isAuto ? "var(--rp-shadow-card)" : "none",
                display: "inline-flex", alignItems: "center", gap: 6,
                transition: "background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)",
              }}
            >
              {isAuto && <Icon name="WandSparkles" size={14} color={on ? "#fff" : "var(--rp-muted)"} stroke={2.2} />}
              {l.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}


// ===== feedback/EmptyState.jsx =====
// EmptyState — centered icon + message + optional action.

function EmptyState({ icon = "Inbox", title, message, action, ai = false, style, ...rest }) {
  return (
    <div
      style={{
        display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center",
        gap: 8, padding: "48px 24px",
        ...style,
      }}
      {...rest}
    >
      <span style={{
        width: 56, height: 56, borderRadius: "50%", marginBottom: 4,
        background: ai ? "var(--rp-ai-soft)" : "var(--rp-blue-soft)",
        display: "grid", placeItems: "center",
      }}>
        <Icon name={icon} size={26} color={ai ? "var(--rp-ai-indigo)" : "var(--rp-blue)"} />
      </span>
      {title && <div style={{ fontSize: 17, fontWeight: 700, color: "var(--rp-ink)" }}>{title}</div>}
      {message && <div style={{ fontSize: 14, color: "var(--rp-muted)", maxWidth: 320, lineHeight: 1.5 }}>{message}</div>}
      {action && <div style={{ marginTop: 10 }}><Button variant={ai ? "ai" : "primary"} icon={action.icon} onClick={action.onClick}>{action.label}</Button></div>}
    </div>
  );
}


// ===== feedback/StatTile.jsx =====
// StatTile — dashboard widget: icon + title + action link, big number, optional subtext.

function StatTile({
  icon,
  title,
  action,           // { label, onClick }
  value,
  sub,              // secondary line (e.g. overdue)
  subTone = "muted", // muted | danger | success
  style,
  ...rest
}) {
  const subColor = subTone === "danger" ? "var(--rp-danger)"
    : subTone === "success" ? "var(--rp-success)" : "var(--rp-muted)";
  return (
    <div
      style={{
        background: "#fff", borderRadius: "var(--rp-radius-md)",
        boxShadow: "var(--rp-shadow-card)", padding: 20,
        display: "flex", flexDirection: "column", gap: 18,
        ...style,
      }}
      {...rest}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        {icon && (
          <span style={{ width: 30, height: 30, borderRadius: 8, background: "var(--rp-blue-soft)", display: "grid", placeItems: "center", flex: "none" }}>
            <Icon name={icon} size={17} color="var(--rp-blue)" />
          </span>
        )}
        <span style={{ fontSize: 15, fontWeight: 700, color: "var(--rp-ink)", flex: 1 }}>{title}</span>
        {action && (
          <button type="button" onClick={action.onClick} style={{
            background: "none", border: "none", cursor: "pointer",
            display: "inline-flex", alignItems: "center", gap: 2,
            color: "var(--rp-blue)", fontWeight: 700, fontSize: 14, fontFamily: "var(--font-sans)",
          }}>
            {action.label}<Icon name="ChevronRight" size={16} color="var(--rp-blue)" />
          </button>
        )}
      </div>
      <div>
        <div style={{ fontSize: 26, fontWeight: 700, color: "var(--rp-ink)", fontVariantNumeric: "tabular-nums", letterSpacing: "-0.01em" }}>{value}</div>
        {sub && <div style={{ fontSize: 14, color: subColor, fontWeight: subTone === "muted" ? 400 : 700, marginTop: 4, fontVariantNumeric: "tabular-nums" }}>{sub}</div>}
      </div>
    </div>
  );
}


// ===== forms/Checkbox.jsx =====
// Checkbox — square check used in "Select" multi-select and forms.

function Checkbox({ checked = false, onChange, label, disabled = false, style, ...rest }) {
  return (
    <label style={{ display: "inline-flex", alignItems: "center", gap: 9, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1, ...style }} {...rest}>
      <span
        onClick={() => !disabled && onChange && onChange(!checked)}
        style={{
          width: 18, height: 18, borderRadius: 4, flex: "none",
          display: "grid", placeItems: "center",
          background: checked ? "var(--rp-blue)" : "#fff",
          border: `1.5px solid ${checked ? "var(--rp-blue)" : "var(--rp-border-strong)"}`,
          transition: "background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard)",
        }}
      >
        {checked && <Icon name="Check" size={13} color="#fff" stroke={3} />}
      </span>
      {label && <span style={{ fontSize: 14, color: "var(--rp-ink)" }}>{label}</span>}
    </label>
  );
}


// ===== forms/Input.jsx =====
// Input — text field with optional leading icon and ⌘K-style trailing hint.

function Input({
  icon,
  hint,            // small trailing hint, e.g. "⌘K"
  invalid = false,
  style,
  inputStyle,
  ...rest
}) {
  return (
    <div
      style={{
        display: "flex", alignItems: "center", gap: 8,
        background: "#fff",
        border: `1px solid ${invalid ? "var(--rp-danger)" : "var(--rp-border-strong)"}`,
        borderRadius: "var(--rp-radius-sm)",
        padding: "0 12px", height: 42,
        transition: "border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard)",
        ...style,
      }}
    >
      {icon && <Icon name={icon} size={18} color="var(--rp-faint)" />}
      <input
        style={{
          flex: 1, minWidth: 0, border: "none", outline: "none", background: "transparent",
          fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--rp-ink)",
          ...inputStyle,
        }}
        {...rest}
      />
      {hint && (
        <span style={{
          fontSize: 12, fontWeight: 700, color: "var(--rp-faint)",
          border: "1px solid var(--rp-border)", borderRadius: 4, padding: "2px 6px",
        }}>{hint}</span>
      )}
    </div>
  );
}


// ===== forms/Select.jsx =====
// Select — a dropdown-style trigger (cosmetic). Matches the filter pills (Status ▾, Country ▾).

function Select({ icon, value, placeholder = "Select", style, ...rest }) {
  return (
    <button
      type="button"
      style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        background: "#fff",
        border: "1px solid var(--rp-border-strong)",
        borderRadius: "var(--rp-radius-sm)",
        padding: "0 12px", height: 42,
        fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600,
        color: value ? "var(--rp-ink)" : "var(--rp-muted)",
        cursor: "pointer",
        ...style,
      }}
      {...rest}
    >
      {icon && <Icon name={icon} size={18} color="var(--rp-faint)" />}
      <span style={{ flex: 1, textAlign: "left" }}>{value || placeholder}</span>
      <Icon name="ChevronDown" size={18} color="var(--rp-muted)" />
    </button>
  );
}


// ===== forms/Switch.jsx =====
// Switch — toggle. Used for "Show All Months" and in Trust Levels.

function Switch({ checked = false, onChange, disabled = false, style, ...rest }) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      disabled={disabled}
      onClick={() => !disabled && onChange && onChange(!checked)}
      style={{
        width: 40, height: 22, borderRadius: 9999, border: "none", padding: 2,
        background: checked ? "var(--rp-blue)" : "#D7D7DE",
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.5 : 1,
        transition: "background var(--dur-base) var(--ease-standard)",
        display: "inline-flex", alignItems: "center",
        ...style,
      }}
      {...rest}
    >
      <span style={{
        width: 18, height: 18, borderRadius: "50%", background: "#fff",
        boxShadow: "0 1px 2px rgba(15,16,53,.25)",
        transform: checked ? "translateX(18px)" : "translateX(0)",
        transition: "transform var(--dur-base) var(--ease-standard)",
      }} />
    </button>
  );
}


// ===== navigation/Sidebar.jsx =====
// Sidebar — the slim left icon rail: blue "+" FAB at top, icon+label nav items, app-switcher at bottom.

const DEFAULT_ITEMS = [
  { key: "activity", label: "Activity", icon: "House" },
  { key: "people", label: "People", icon: "Users" },
  { key: "payroll", label: "Payroll", icon: "DollarSign" },
  { key: "documents", label: "Documents", icon: "Paperclip" },
  { key: "time", label: "Time Tracking", icon: "Timer" },
  { key: "spendcards", label: "SpendCards", icon: "CreditCard" },
  { key: "reports", label: "Reports", icon: "ChartPie" },
  { key: "invoices", label: "Invoices", icon: "ReceiptText" },
  { key: "transactions", label: "Transactions", icon: "ArrowLeftRight" },
  { key: "billpay", label: "Bill pay", icon: "ScrollText" },
];

function Sidebar({ items = DEFAULT_ITEMS, active = "activity", onSelect, onAdd, style, ...rest }) {
  return (
    <nav
      style={{
        width: "var(--rp-sidebar-w)", flex: "none",
        background: "#fff", borderRight: "1px solid var(--rp-border)",
        height: "100%", display: "flex", flexDirection: "column", alignItems: "center",
        padding: "16px 0", gap: 4, overflow: "hidden",
        ...style,
      }}
      {...rest}
    >
      <button
        type="button"
        onClick={onAdd}
        aria-label="Add new"
        style={{
          width: 44, height: 44, borderRadius: "50%", border: "none",
          background: "var(--rp-blue)", color: "#fff", cursor: "pointer",
          display: "grid", placeItems: "center", marginBottom: 12,
          boxShadow: "0 2px 6px rgba(17,78,247,.35)",
        }}
      >
        <Icon name="Plus" size={22} stroke={2.4} />
      </button>

      <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 2, width: "100%", alignItems: "center", overflowY: "auto" }}>
        {items.map((it) => {
          const on = it.key === active;
          return (
            <button
              key={it.key}
              type="button"
              onClick={() => onSelect && onSelect(it.key)}
              style={{
                width: 72, border: "none", cursor: "pointer",
                background: on ? "var(--rp-blue-soft)" : "transparent",
                borderRadius: 10, padding: "9px 4px",
                display: "flex", flexDirection: "column", alignItems: "center", gap: 5,
                color: on ? "var(--rp-blue)" : "var(--rp-muted)",
                transition: "background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)",
              }}
            >
              <Icon name={it.icon} size={21} stroke={on ? 2.2 : 1.9} />
              <span style={{ fontSize: 10.5, fontWeight: on ? 700 : 600, lineHeight: 1.15, textAlign: "center" }}>{it.label}</span>
            </button>
          );
        })}
      </div>

      <div style={{
        width: 28, height: 28, marginTop: 8, borderRadius: 7,
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2,
      }}>
        <span style={{ background: "#DC3545", borderRadius: "3px 0 0 0" }} />
        <span style={{ background: "#28A745", borderRadius: "0 3px 0 0" }} />
        <span style={{ background: "#114EF7", borderRadius: "0 0 0 3px" }} />
        <span style={{ background: "#FFC107", borderRadius: "0 0 3px 0" }} />
      </div>
    </nav>
  );
}


// ===== navigation/Tabs.jsx =====
// Tabs — underline tab bar with optional count badges (Review Center categories, Payroll cycles).

function Tabs({ tabs = [], value, onChange, style, ...rest }) {
  return (
    <div style={{ display: "flex", gap: 4, borderBottom: "1px solid var(--rp-border)", ...style }} {...rest}>
      {tabs.map((t) => {
        const active = t.key === value;
        return (
          <button
            key={t.key}
            type="button"
            onClick={() => onChange && onChange(t.key)}
            style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              background: "transparent", border: "none", cursor: "pointer",
              padding: "12px 14px",
              fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 700,
              color: active ? "var(--rp-blue)" : "var(--rp-muted)",
              borderBottom: `2px solid ${active ? "var(--rp-blue)" : "transparent"}`,
              marginBottom: -1,
              transition: "color var(--dur-fast) var(--ease-standard)",
            }}
          >
            {t.icon && <Icon name={t.icon} size={18} color={active ? "var(--rp-blue)" : "var(--rp-muted)"} />}
            {t.label}
            {t.count != null && <Badge active={active}>{t.count}</Badge>}
          </button>
        );
      })}
    </div>
  );
}


// ===== navigation/TopBar.jsx =====
// TopBar — product top chrome: logo left; Ask AI + search + calendar + help + bell + avatar right.

function TopBar({ logo, user = {}, onAskAi, style, ...rest }) {
  return (
    <header
      style={{
        height: "var(--rp-topbar-h)", flex: "none",
        background: "#fff", borderBottom: "1px solid var(--rp-border)",
        display: "flex", alignItems: "center", gap: 16,
        padding: "0 24px",
        ...style,
      }}
      {...rest}
    >
      <div style={{ display: "flex", alignItems: "center" }}>
        {logo || <span style={{ fontSize: 20, fontWeight: 800, color: "var(--rp-ink)" }}>RemotePass</span>}
      </div>

      <div style={{ flex: 1 }} />

      <AiPill onClick={onAskAi} />

      <button type="button" aria-label="Search" style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        background: "#F4F5F7", border: "1px solid transparent", borderRadius: "var(--rp-radius-pill)",
        padding: "8px 12px", cursor: "pointer", color: "var(--rp-muted)",
      }}>
        <Icon name="Search" size={17} color="var(--rp-muted)" />
        <span style={{ fontSize: 13, fontWeight: 700 }}>⌘K</span>
      </button>

      <IconButton name="Calendar" label="Calendar" />
      <IconButton name="CircleHelp" label="Help" />
      <IconButton name="Bell" label="Notifications" badge />

      <Avatar src={user.avatar} name={user.name || "User"} size={40} />
    </header>
  );
}


window.RP = { Icon, Flag, Avatar, Badge, Button, Card, Chip, IconButton, Tag, AiPill, AgentBanner, AiChip, Recommendation, TrustLevel, EmptyState, StatTile, Checkbox, Input, Select, Switch, Sidebar, Tabs, TopBar };