/* ============================================================
   CryptoPrice.co — App primitives
   Imported by both UI kits.
   ============================================================ */

const { useState, useMemo, useEffect, useRef } = React;

/* ---------- Icons (Lucide-style, hand-rolled subset for offline) ---------- */
const Icon = ({ d, size = 16, fill = "none", strokeWidth = 1.5, ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill}
       stroke="currentColor" strokeWidth={strokeWidth}
       strokeLinecap="round" strokeLinejoin="round" {...rest}>
    {Array.isArray(d) ? d.map((p, i) => <path key={i} d={p} />) : <path d={d} />}
  </svg>
);
const Icons = {
  trend:    (p) => <Icon d={["m3 17 6-6 4 4 8-8","M14 7h7v7"]} {...p} />,
  star:     (p) => <Icon d="m12 2 2.5 7h7l-5.5 4 2 7-6-4-6 4 2-7-5.5-4h7z" {...p} />,
  starFill: (p) => <Icon d="m12 2 2.5 7h7l-5.5 4 2 7-6-4-6 4 2-7-5.5-4h7z" fill="currentColor" {...p} />,
  wallet:   (p) => <Icon d={["M19 7H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2","M16 14h2","M3 9V7a2 2 0 0 1 2-2h12"]} {...p} />,
  bell:     (p) => <Icon d={["M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9","M10 21a2 2 0 0 0 4 0"]} {...p} />,
  search:   (p) => <Icon d={["M11 4a7 7 0 1 1 0 14 7 7 0 0 1 0-14z","m20 20-3.5-3.5"]} {...p} />,
  settings: (p) => <Icon d={["M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z","M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 9a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"]} {...p} />,
  plus:     (p) => <Icon d={["M12 5v14","M5 12h14"]} {...p} />,
  x:        (p) => <Icon d={["M18 6 6 18","m6 6 12 12"]} {...p} />,
  arrow:    (p) => <Icon d={["M5 12h14","m12 5 7 7-7 7"]} {...p} />,
  sun:      (p) => <Icon d={["M12 5v0M12 19v0M5 12h0M19 12h0M7 7l0 0M17 17l0 0M7 17l0 0M17 7l0 0","M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z"]} {...p} />,
  moon:     (p) => <Icon d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" {...p} />,
  chart:    (p) => <Icon d={["M3 3v18h18","m7 14 4-4 4 3 5-6"]} {...p} />,
  grid:     (p) => <Icon d={["M3 3h7v7H3z","M14 3h7v7h-7z","M3 14h7v7H3z","M14 14h7v7h-7z"]} {...p} />,
  download: (p) => <Icon d={["M12 3v12","m7 10 5 5 5-5","M3 21h18"]} {...p} />,
  filter:   (p) => <Icon d="M3 4h18l-7 9v6l-4 2v-8z" {...p} />,
  dot:      (p) => <Icon d="M12 12h0" strokeWidth={6} strokeLinecap="round" {...p} />,
};

/* ---------- Coin logos (deterministic placeholders) ---------- */
const COIN_COLORS = {
  BTC: "#F7931A", ETH: "#627EEA", SOL: "linear-gradient(135deg,#9945FF,#14F195)",
  USDT: "#26A17B", BNB: "#F3BA2F", XRP: "#23292F", DOGE: "#C2A633", ADA: "#0033AD",
  AVAX: "#E84142", MATIC: "#8247E5", DOT: "#E6007A", LINK: "#2A5ADA", LTC: "#345D9D",
  TON: "#0098EA", TRX: "#FF060A", ATOM: "#2E3148", NEAR: "#000", ARB: "#28A0F0",
};
const CoinLogo = ({ symbol, size = 24 }) => {
  const bg = COIN_COLORS[symbol] || "#2A313B";
  const isGrad = bg.startsWith("linear");
  return (
    <div style={{
      width: size, height: size, borderRadius: "999px",
      background: bg, color: "#fff",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      fontFamily: "var(--font-mono)", fontWeight: 600,
      fontSize: size * 0.4, flexShrink: 0,
      backgroundImage: isGrad ? bg : undefined,
      backgroundColor: isGrad ? undefined : bg,
    }}>{symbol[0]}</div>
  );
};

/* ---------- Button ---------- */
const Button = ({ variant = "secondary", size = "md", icon, children, onClick, style = {} }) => {
  const base = {
    display: "inline-flex", alignItems: "center", gap: 8,
    fontFamily: "var(--font-sans)", fontWeight: 500,
    border: "1px solid transparent", borderRadius: 8,
    cursor: "pointer", transition: "all 120ms var(--ease-out)",
    height: size === "sm" ? 28 : size === "lg" ? 40 : 36,
    padding: size === "sm" ? "0 10px" : size === "lg" ? "0 18px" : "0 14px",
    fontSize: size === "sm" ? 12 : 14,
    whiteSpace: "nowrap",
  };
  const variants = {
    primary:   { background: "var(--brand-lime)", color: "var(--brand-ink)" },
    secondary: { background: "var(--bg-2)", color: "var(--fg-0)", borderColor: "var(--line-2)" },
    ghost:     { background: "transparent", color: "var(--fg-1)" },
    danger:    { background: "transparent", color: "var(--down)", borderColor: "rgba(255,90,95,0.3)" },
  };
  return (
    <button onClick={onClick} style={{ ...base, ...variants[variant], ...style }}
      onMouseEnter={(e) => { if (variant === "primary") e.currentTarget.style.boxShadow = "var(--shadow-glow-lime)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.boxShadow = ""; }}>
      {icon}{children}
    </button>
  );
};

/* ---------- Delta badge ---------- */
const DeltaBadge = ({ value, size = "md" }) => {
  const up = value >= 0;
  const fontSize = size === "sm" ? 11 : 12;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums",
      fontSize, fontWeight: 500,
      padding: "2px 6px", borderRadius: 4,
      background: up ? "var(--up-soft)" : "var(--down-soft)",
      color: up ? "var(--up)" : "var(--down)",
    }}>
      {up ? "▲" : "▼"} {up ? "+" : "−"}{Math.abs(value).toFixed(2)}%
    </span>
  );
};

/* ---------- Sparkline ---------- */
const Sparkline = ({ data, width = 80, height = 28, up = true, fill = false }) => {
  const min = Math.min(...data), max = Math.max(...data);
  const range = max - min || 1;
  const points = data.map((d, i) => [
    (i / (data.length - 1)) * width,
    height - ((d - min) / range) * (height - 2) - 1,
  ]);
  const path = "M" + points.map(p => p.join(" ")).join(" L ");
  const color = up ? "var(--up)" : "var(--down)";
  const id = `sg-${Math.random().toString(36).slice(2, 7)}`;
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ display: "block" }}>
      {fill && (
        <>
          <defs>
            <linearGradient id={id} x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor={up ? "#00C896" : "#FF5A5F"} stopOpacity="0.4" />
              <stop offset="100%" stopColor={up ? "#00C896" : "#FF5A5F"} stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d={`${path} L ${width} ${height} L 0 ${height} Z`} fill={`url(#${id})`} />
        </>
      )}
      <path d={path} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
};

/* ---------- Helpers ---------- */
const fmtPrice = (n) => {
  if (n >= 1) return "$" + n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  return "$" + n.toLocaleString("en-US", { minimumFractionDigits: 4, maximumFractionDigits: 6 });
};
const fmtBig = (n) => {
  if (n >= 1e12) return "$" + (n / 1e12).toFixed(2) + "T";
  if (n >= 1e9)  return "$" + (n / 1e9).toFixed(2) + "B";
  if (n >= 1e6)  return "$" + (n / 1e6).toFixed(1) + "M";
  return "$" + n.toLocaleString();
};
const genSpark = (seed, up = true) => {
  let v = 50;
  return Array.from({ length: 24 }, (_, i) => {
    v += Math.sin(seed + i * 0.7) * 4 + (up ? 0.6 : -0.6) + (Math.random() - 0.5) * 2;
    return v;
  });
};

Object.assign(window, { Icons, CoinLogo, Button, DeltaBadge, Sparkline, fmtPrice, fmtBig, genSpark });