// ---------- ART SYSTEM ----------
// All visuals for MarketBrawl as inline SVG React components.
// Define globals so app.jsx can use them (since Babel standalone shares scope).

// Shared gradient defs — rendered once per SVG that uses them.
function ChartGradient({ id = "mb-grad" }) {
  return (
    <defs>
      <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="#4ade80" />
        <stop offset="100%" stopColor="#60a5fa" />
      </linearGradient>
      <linearGradient id={id + "-warm"} x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="#fbbf24" />
        <stop offset="100%" stopColor="#f87171" />
      </linearGradient>
    </defs>
  );
}

// Primary brand mark: shield containing a rising chart line.
function LogoMark({ size = 48 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
      <ChartGradient id="lm" />
      <path
        d="M32 3 L59 13 L59 34 C59 50 47 58 32 62 C17 58 5 50 5 34 L5 13 Z"
        fill="#0b0f14"
        stroke="url(#lm)"
        strokeWidth="2.5"
      />
      <polyline
        points="13,42 22,32 29,36 37,20 45,27 53,17"
        fill="none"
        stroke="url(#lm)"
        strokeWidth="3.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <circle cx="53" cy="17" r="3.5" fill="#4ade80" />
      <circle cx="37" cy="20" r="2.5" fill="#60a5fa" />
    </svg>
  );
}

// Full horizontal lockup: mark + wordmark. Used in the header and login hero.
function LogoFull({ size = 40 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: "0.65rem" }}>
      <LogoMark size={size} />
      <div style={{ lineHeight: 1 }}>
        <div
          style={{
            fontSize: size * 0.5,
            fontWeight: 900,
            letterSpacing: "0.08em",
            background: "linear-gradient(90deg, #4ade80, #60a5fa)",
            WebkitBackgroundClip: "text",
            WebkitTextFillColor: "transparent",
            backgroundClip: "text",
          }}
        >
          MARKETBRAWL
        </div>
        <div
          style={{
            fontSize: size * 0.22,
            color: "#8b9aaf",
            letterSpacing: "0.4em",
            marginTop: "0.25rem",
            textTransform: "uppercase",
          }}
        >
          Predict · Wager · Win
        </div>
      </div>
    </div>
  );
}

// Large decorative hero for the login screen: layered chart lines, floating
// candlesticks, and the logo mark centered on a grid.
function HeroArt() {
  const candles = [
    { x: 40, y: 140, w: 10, h: 60, color: "#4ade80" },
    { x: 70, y: 120, w: 10, h: 80, color: "#f87171" },
    { x: 100, y: 100, w: 10, h: 90, color: "#4ade80" },
    { x: 130, y: 130, w: 10, h: 55, color: "#f87171" },
    { x: 250, y: 115, w: 10, h: 75, color: "#4ade80" },
    { x: 280, y: 95, w: 10, h: 95, color: "#4ade80" },
    { x: 310, y: 130, w: 10, h: 60, color: "#f87171" },
    { x: 340, y: 110, w: 10, h: 80, color: "#4ade80" },
  ];
  return (
    <svg viewBox="0 0 400 260" width="100%" style={{ maxWidth: 480, margin: "0 auto", display: "block" }}>
      <ChartGradient id="hero" />
      {/* Grid */}
      {[...Array(9)].map((_, i) => (
        <line key={"v" + i} x1={i * 50} y1="0" x2={i * 50} y2="260" stroke="#1a242f" strokeWidth="1" />
      ))}
      {[...Array(6)].map((_, i) => (
        <line key={"h" + i} x1="0" y1={i * 50} x2="400" y2={i * 50} stroke="#1a242f" strokeWidth="1" />
      ))}
      {/* Candlesticks */}
      {candles.map((c, i) => (
        <g key={i} opacity="0.45">
          <line x1={c.x + c.w / 2} y1={c.y - 8} x2={c.x + c.w / 2} y2={c.y + c.h + 8} stroke={c.color} strokeWidth="1.5" />
          <rect x={c.x} y={c.y} width={c.w} height={c.h} fill={c.color} opacity="0.7" rx="1" />
        </g>
      ))}
      {/* Central chart zigzag */}
      <polyline
        points="10,200 60,170 100,185 150,130 200,155 250,95 300,120 350,70 395,90"
        fill="none"
        stroke="url(#hero)"
        strokeWidth="3"
        strokeLinecap="round"
        strokeLinejoin="round"
        opacity="0.85"
      />
      {/* Logo center */}
      <g transform="translate(168,90)">
        <path
          d="M32 3 L59 13 L59 34 C59 50 47 58 32 62 C17 58 5 50 5 34 L5 13 Z"
          fill="#0b0f14"
          stroke="url(#hero)"
          strokeWidth="2.5"
        />
        <polyline
          points="13,42 22,32 29,36 37,20 45,27 53,17"
          fill="none"
          stroke="url(#hero)"
          strokeWidth="3.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <circle cx="53" cy="17" r="3.5" fill="#4ade80" />
      </g>
    </svg>
  );
}

// Market category pictograms (24x24)
function MarketIcon({ category, size = 22 }) {
  const stroke = "#60a5fa";
  if (category === "commodity") {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
        <ellipse cx="12" cy="5" rx="7" ry="2.5" stroke={stroke} strokeWidth="1.5" />
        <path d="M5 5 V19 C5 20.5 8 22 12 22 C16 22 19 20.5 19 19 V5" stroke={stroke} strokeWidth="1.5" />
        <ellipse cx="12" cy="12" rx="7" ry="2.5" stroke={stroke} strokeWidth="1.2" opacity="0.6" />
        <ellipse cx="12" cy="17" rx="7" ry="2.5" stroke={stroke} strokeWidth="1.2" opacity="0.4" />
      </svg>
    );
  }
  if (category === "stock_index") {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
        <rect x="3" y="14" width="4" height="7" fill={stroke} opacity="0.6" />
        <rect x="10" y="9" width="4" height="12" fill={stroke} opacity="0.85" />
        <rect x="17" y="4" width="4" height="17" fill={stroke} />
        <polyline points="4,14 12,8 20,3" stroke="#4ade80" strokeWidth="1.5" fill="none" strokeLinecap="round" />
      </svg>
    );
  }
  if (category === "crypto") {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
        <polygon points="12,2 21,7 21,17 12,22 3,17 3,7" stroke={stroke} strokeWidth="1.5" fill="none" />
        <text x="12" y="16" textAnchor="middle" fontSize="11" fontWeight="900" fill={stroke}>฿</text>
      </svg>
    );
  }
  // fallback
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="9" stroke={stroke} strokeWidth="1.5" />
    </svg>
  );
}

// Direction badges — OVER (green up) / UNDER (red down)
function DirectionBadge({ direction, size = 18 }) {
  const up = direction === "over";
  const color = up ? "#4ade80" : "#f87171";
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="11" fill={color} opacity="0.15" />
      {up ? (
        <polyline points="7,14 12,9 17,14" stroke={color} strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      ) : (
        <polyline points="7,10 12,15 17,10" stroke={color} strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      )}
    </svg>
  );
}

// ---------- BOT PERSONA AVATARS ----------
// Each 48x48 tile, unique geometric identity hinting at the persona's strategy.

function PersonaFrame({ bg, stroke, children }) {
  return (
    <svg width="48" height="48" viewBox="0 0 48 48">
      <rect x="1" y="1" width="46" height="46" rx="12" fill={bg} stroke={stroke} strokeWidth="1.5" />
      {children}
    </svg>
  );
}

const PERSONA_ART = {
  // Mo Mentum — rocket trending up
  momentum: (
    <PersonaFrame bg="#1a2a1f" stroke="#4ade80">
      <polyline points="10,36 18,28 24,30 30,20 38,12" stroke="#4ade80" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      <polygon points="38,12 32,14 36,18" fill="#4ade80" />
      <circle cx="10" cy="36" r="2.5" fill="#4ade80" />
    </PersonaFrame>
  ),
  // Connie Trarian — mirrored / inverted duality
  contrarian: (
    <PersonaFrame bg="#2a1f2a" stroke="#c084fc">
      <polyline points="10,14 18,20 24,16 30,24 38,18" stroke="#c084fc" strokeWidth="2" fill="none" strokeLinecap="round" />
      <polyline points="10,34 18,28 24,32 30,24 38,30" stroke="#8b9aaf" strokeWidth="2" fill="none" strokeLinecap="round" />
      <line x1="5" y1="24" x2="43" y2="24" stroke="#c084fc" strokeWidth="0.8" strokeDasharray="2,2" />
    </PersonaFrame>
  ),
  // Goldie Sacks — stack of gold bars
  commodity_bull: (
    <PersonaFrame bg="#2a2410" stroke="#fbbf24">
      <rect x="12" y="28" width="24" height="8" fill="#fbbf24" rx="1" />
      <rect x="14" y="20" width="20" height="8" fill="#fbbf24" opacity="0.8" rx="1" />
      <rect x="16" y="12" width="16" height="8" fill="#fbbf24" opacity="0.6" rx="1" />
    </PersonaFrame>
  ),
  // Bear Stearns Jr. — bear face
  index_bear: (
    <PersonaFrame bg="#2a1515" stroke="#f87171">
      <circle cx="16" cy="16" r="4" fill="#f87171" />
      <circle cx="32" cy="16" r="4" fill="#f87171" />
      <circle cx="24" cy="26" r="10" fill="#f87171" opacity="0.6" />
      <circle cx="20" cy="25" r="1.2" fill="#0b0f14" />
      <circle cx="28" cy="25" r="1.2" fill="#0b0f14" />
      <path d="M20 31 Q24 33 28 31" stroke="#0b0f14" strokeWidth="1.5" fill="none" />
    </PersonaFrame>
  ),
  // Diver Sifty — pie chart / diversification
  diversifier: (
    <PersonaFrame bg="#15202a" stroke="#60a5fa">
      <circle cx="24" cy="24" r="11" fill="none" stroke="#60a5fa" strokeWidth="1.5" />
      <path d="M24 24 L24 13 A11 11 0 0 1 33.5 29.5 Z" fill="#60a5fa" opacity="0.6" />
      <path d="M24 24 L33.5 29.5 A11 11 0 0 1 14.5 29.5 Z" fill="#4ade80" opacity="0.6" />
      <path d="M24 24 L14.5 29.5 A11 11 0 0 1 24 13 Z" fill="#fbbf24" opacity="0.6" />
      <circle cx="24" cy="24" r="2.5" fill="#0b0f14" />
    </PersonaFrame>
  ),
  // YOLO McBetface — flaming dice
  yolo: (
    <PersonaFrame bg="#2a1e10" stroke="#fb923c">
      <rect x="14" y="14" width="20" height="20" rx="3" fill="#fb923c" transform="rotate(12 24 24)" />
      <circle cx="20" cy="20" r="1.8" fill="#0b0f14" transform="rotate(12 24 24)" />
      <circle cx="28" cy="28" r="1.8" fill="#0b0f14" transform="rotate(12 24 24)" />
      <circle cx="20" cy="28" r="1.8" fill="#0b0f14" transform="rotate(12 24 24)" />
      <circle cx="28" cy="20" r="1.8" fill="#0b0f14" transform="rotate(12 24 24)" />
      <circle cx="24" cy="24" r="1.8" fill="#0b0f14" transform="rotate(12 24 24)" />
      <path d="M10 36 Q12 30 16 32 Q14 26 20 28" stroke="#fbbf24" strokeWidth="2" fill="none" opacity="0.7" />
    </PersonaFrame>
  ),
};

function PersonaAvatar({ persona, size }) {
  const art = PERSONA_ART[persona];
  if (!art) {
    // Human / unknown — generic silhouette
    return (
      <svg width={size || 48} height={size || 48} viewBox="0 0 48 48">
        <rect x="1" y="1" width="46" height="46" rx="12" fill="#131a22" stroke="#263241" strokeWidth="1.5" />
        <circle cx="24" cy="19" r="7" fill="#60a5fa" opacity="0.6" />
        <path d="M10 40 C10 30 38 30 38 40" fill="#60a5fa" opacity="0.6" />
      </svg>
    );
  }
  if (size) {
    return React.cloneElement(art, { width: size, height: size });
  }
  return art;
}
