// Primate App Kit — shared primitives
// Logo, Icon, Btn, Badge, StatusBadge, Avatar
const { useState, useEffect, useRef } = React;

// Viewport context — App provides the effective viewport ("desktop" | "tablet" |
// "mobile") so screens can branch layout (CSS media queries can't see the device
// frame, and everything here is inline-styled).
const ViewportCtx = React.createContext("desktop");
function useViewport() { return React.useContext(ViewportCtx); }
const LOGO_PATH = "M2.38454 0.0434639C2.17593 0.162681 0.0519488 1.58983 0.028173 1.62679C0.0129985 1.65042 0.000340535 1.73027 2.48897e-06 1.80427C-0.000448239 1.90835 0.0602123 2.03162 0.267885 2.3489C0.906866 3.3251 1.24724 3.92738 1.51862 4.56189C1.74469 5.09056 1.74488 5.05563 1.51448 5.30608C0.956671 5.9125 0.570736 6.74281 0.367759 7.77333C0.296318 8.13586 0.282797 8.326 0.283435 8.95649C0.283848 9.37442 0.305633 9.84934 0.332527 10.027C0.621067 11.932 1.39966 13.6626 2.68142 15.2479C3.02393 15.6715 3.90875 16.5627 4.37518 16.954C6.64624 18.8589 9.59054 20.0146 12.7538 20.2426C15.4109 20.4342 17.9769 19.9454 19.9817 18.8659C21.2457 18.1852 22.4841 17.0568 23.26 15.8785C23.5078 15.5023 23.8584 14.8529 23.9425 14.6146L24 14.4516L23.7246 13.9013C23.4728 13.3984 23.4341 13.3418 23.2745 13.2426C23.1003 13.1344 23.0986 13.1341 22.508 13.1384C22.1824 13.1409 21.5189 13.1535 21.0334 13.1665C19.7514 13.201 18.3773 13.1141 17.3712 12.9349C14.9452 12.5029 12.9883 11.6615 11.1737 10.2703C9.70969 9.14782 8.7475 8.15205 7.45432 6.42115C6.98463 5.79242 6.51662 5.24354 6.19852 4.94828C5.7283 4.51179 5.11651 4.18095 4.65042 4.11105L4.47783 4.08518L4.27106 3.64744C3.99679 3.06676 3.48225 1.73703 3.0553 0.505347C2.98367 0.298763 2.89033 0.10018 2.84785 0.0640095C2.75939 -0.011262 2.50045 -0.0227554 2.38454 0.0434639ZM3.15671 5.34128C3.42302 6.06439 4.09779 7.48606 4.54274 8.26162C5.70246 10.2829 7.08131 11.8637 8.66246 12.9847C11.5585 15.0379 15.3859 15.8544 19.0802 15.2073C19.8167 15.0783 20.9097 14.7826 21.8199 14.466C22.3044 14.2975 22.287 14.3243 21.6751 14.6897C20.7339 15.2516 19.3236 15.7427 18.0285 15.9593C17.0937 16.1156 16.8966 16.1299 15.6622 16.1299C14.0939 16.1299 13.545 16.0648 12.2442 15.7243C10.0473 15.1493 8.19855 14.0994 6.64632 12.5454C5.65366 11.5516 5.00154 10.6101 4.21269 9.03161C3.45742 7.52032 3.19405 6.73072 3.08166 5.6403C3.01766 5.0192 3.02592 4.98622 3.15671 5.34128Z";

function Logo({ size = 24, fill = "var(--gold)" }) {
  return (
    <svg width={size} height={size * 21 / 24} viewBox="0 0 24 21" fill="none" style={{ display: "block", flexShrink: 0 }}>
      <path fillRule="evenodd" clipRule="evenodd" d={LOGO_PATH} fill={fill} />
    </svg>
  );
}

// Lucide icon. Re-renders via key so createIcons picks it up.
function Icon({ name, size = 16, color, style = {} }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = "";
      const el = document.createElement("i");
      el.setAttribute("data-lucide", name);
      ref.current.appendChild(el);
      window.lucide.createIcons({ nameAttr: "data-lucide", attrs: { width: size, height: size } });
    }
  }, [name, size]);
  return <span ref={ref} style={{ display: "inline-flex", width: size, height: size, color: color || "currentColor", flexShrink: 0, ...style }} />;
}

function Btn({ children, variant = "primary", size = "md", icon, onClick, style = {}, type = "button" }) {
  const [hover, setHover] = useState(false);
  const pad = size === "sm" ? "8px 14px" : "12px 24px";
  const base = {
    font: "var(--t-btn)", fontSize: size === "sm" ? 14 : 16, borderRadius: "var(--r-md)",
    padding: pad, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
    cursor: "pointer", border: "1px solid transparent", transition: "all .14s ease", whiteSpace: "nowrap", ...style,
  };
  const variants = {
    primary: { background: hover ? "var(--gold-bright)" : "var(--gold)", color: "var(--on-gold)" },
    secondary: { background: hover ? "rgba(255,255,255,0.06)" : "transparent", borderColor: "var(--border-subtle)", color: "var(--fg)" },
    ghost: { background: hover ? "rgba(255,255,255,0.06)" : "transparent", color: "var(--fg)" },
    danger: { background: hover ? "rgba(239,68,68,0.18)" : "var(--danger-bg)", borderColor: "var(--danger-border)", color: "var(--danger)" },
  };
  return (
    <button type={type} onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ ...base, ...variants[variant] }}>
      {icon && <Icon name={icon} size={size === "sm" ? 14 : 16} />}{children}
    </button>
  );
}

const BADGE_TONES = {
  grey: { bg: "var(--neutral-badge-bg)", bd: "var(--neutral-badge-bd)", fg: "var(--fg-faint)" },
  danger: { bg: "var(--danger-bg)", bd: "var(--danger-border)", fg: "var(--danger)" },
  success: { bg: "rgba(35,134,55,0.12)", bd: "rgba(35,134,55,0.30)", fg: "var(--success-fg)" },
  info: { bg: "rgba(59,130,246,0.12)", bd: "rgba(59,130,246,0.30)", fg: "var(--info)" },
};
function Badge({ children, tone = "grey", icon }) {
  const t = BADGE_TONES[tone];
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, borderRadius: "var(--r-pill)", padding: "4px 10px", font: "var(--t-badge)", background: t.bg, border: `1px solid ${t.bd}`, color: t.fg, whiteSpace: "nowrap" }}>
      {icon && <Icon name={icon} size={12} />}{children}
    </span>
  );
}

// status dot + label
function StatusDot({ tone = "danger", children }) {
  const color = { danger: "var(--danger)", success: "var(--success-fg)", info: "var(--info)" }[tone];
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
      <span style={{ width: 8, height: 8, borderRadius: "50%", background: color }} />
      <span style={{ font: "var(--t-body-sm)", color: "var(--fg-secondary)" }}>{children}</span>
    </span>
  );
}

// Shared table/list pagination footer. Auto-compacts on mobile (drops the
// "Showing" label and uses "1 / 15" instead of "Page 1 of 15") so it stays one
// line. Use this for every table footer going forward.
function PageSizeControl({ size = 50 }) {
  const [h, setH] = useState(false);
  return (
    <button onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "inline-flex", alignItems: "center", gap: 6, height: 30, padding: "0 10px", borderRadius: "var(--r-sm)", border: `1px solid ${h ? "var(--border-hover)" : "var(--border-subtle)"}`, background: "var(--bg-elevated)", color: "var(--fg)", font: "var(--t-body-sm)", cursor: "pointer", transition: "border-color .14s ease" }}>
      {size} <Icon name="chevron-down" size={14} color="var(--fg-faint)" />
    </button>
  );
}
function PageNavBtn({ icon, disabled }) {
  const [h, setH] = useState(false);
  return (
    <button disabled={disabled} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--r-sm)", border: `1px solid ${h && !disabled ? "var(--border-hover)" : "var(--border-subtle)"}`, background: h && !disabled ? "var(--bg-elevated-2)" : "var(--bg-elevated)", color: disabled ? "var(--fg-faint)" : "var(--fg-secondary)", cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.5 : 1, transition: "background .14s ease, border-color .14s ease" }}>
      <Icon name={icon} size={16} />
    </button>
  );
}
function PaginationFooter({ size = 50, total = "2,435", page = 1, totalPages = 15 }) {
  const mobile = useViewport() === "mobile";
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexShrink: 0, flexWrap: mobile ? "nowrap" : "wrap", gap: mobile ? 8 : 12, padding: mobile ? "10px 14px" : "14px 24px", borderTop: "1px solid var(--border)", background: "var(--bg-card)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: mobile ? 6 : 10, font: mobile ? "var(--t-caption)" : "var(--t-body-sm)", color: "var(--fg-faint)", whiteSpace: "nowrap" }}>{!mobile && "Showing"}<PageSizeControl size={size} /> of {total}</div>
      <div style={{ display: "flex", alignItems: "center", gap: mobile ? 8 : 12 }}>
        <PageNavBtn icon="chevron-left" disabled />
        <span style={{ font: mobile ? "var(--t-caption)" : "var(--t-body-sm)", color: "var(--fg-secondary)", whiteSpace: "nowrap" }}>{mobile ? `${page} / ${totalPages}` : `Page ${page} of ${totalPages}`}</span>
        <PageNavBtn icon="chevron-right" />
      </div>
    </div>
  );
}

Object.assign(window, { Logo, Icon, Btn, Badge, StatusDot, LOGO_PATH, ViewportCtx, useViewport, PaginationFooter });