// games.jsx — Game/provider cards + grid + bottom nav

const { useState: useStateG } = React;

/* ─────────────────────────────────────────────────────────────
   Rich game illustrations (SVG)
   ──────────────────────────────────────────────────────────── */
function GameArt({ kind, theme }) {
  switch (kind) {
    case "metalslug": return <MetalSlugArt theme={theme} />;
    case "monkey":    return <MonkeyArt theme={theme} />;
    case "olympus":   return <OlympusArt theme={theme} />;
    case "trex":      return <TRexArt theme={theme} />;
    case "safari":    return <SafariArt theme={theme} />;
    case "fortune":   return <FortuneArt theme={theme} />;
    case "sweet":     return <SweetArt theme={theme} />;
    case "dragon":    return <DragonArt theme={theme} />;
    default:          return <GenericArt theme={theme} />;
  }
}

const baseGrad = (theme, kind) => {
  const palettes = {
    metalslug: theme === "neon" ? ["#FF00C8", "#3A0030"] : theme === "jade" ? ["#3a2814", "#15110D"] : ["#8B4513", "#2a1500"],
    monkey:    theme === "neon" ? ["#FFEE00", "#5e006b"] : theme === "jade" ? ["#C8102E", "#3a0810"] : ["#FF8A00", "#3a1200"],
    olympus:   theme === "neon" ? ["#00F0FF", "#0a1840"] : theme === "jade" ? ["#0F52BA", "#0A2F6E"] : ["#2E6BD8", "#0a1840"],
    trex:      theme === "neon" ? ["#39FF14", "#0a3a14"] : theme === "jade" ? ["#2E7D5B", "#0F2E1F"] : ["#2A8A6F", "#0F2E1F"],
    safari:    theme === "neon" ? ["#FF8800", "#5e1f00"] : theme === "jade" ? ["#D4AF37", "#3a2914"] : ["#E48A2A", "#3a1f00"],
    fortune:   theme === "neon" ? ["#FF00C8", "#3a0028"] : theme === "jade" ? ["#C8102E", "#3a0810"] : ["#E60012", "#3a000a"],
    sweet:     theme === "neon" ? ["#FF55AA", "#3a0028"] : theme === "jade" ? ["#9c2856", "#3a1428"] : ["#FF6FB5", "#3a1428"],
    dragon:    theme === "neon" ? ["#6B5BFF", "#1a0a3a"] : theme === "jade" ? ["#006B3F", "#0F2E1F"] : ["#7A1A1A", "#2a0a0a"],
  };
  return palettes[kind] || ["#222", "#000"];
};

function ArtFrame({ kind, theme, children }) {
  const [c1, c2] = baseGrad(theme, kind);
  return (
    <svg className="illus" viewBox="0 0 120 120" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id={`bg-${kind}`} cx=".5" cy=".4" r=".7">
          <stop offset="0" stopColor={c1}/>
          <stop offset="1" stopColor={c2}/>
        </radialGradient>
      </defs>
      <rect width="120" height="120" fill={`url(#bg-${kind})`}/>
      {/* corner glints */}
      <circle cx="20" cy="22" r="22" fill="rgba(255,255,255,.08)"/>
      {children}
    </svg>
  );
}

function MetalSlugArt({ theme }) {
  return (
    <ArtFrame kind="metalslug" theme={theme}>
      {/* tank body */}
      <rect x="20" y="60" width="80" height="28" rx="4" fill="#3a2912" stroke="#FFB800" strokeWidth="1"/>
      <rect x="32" y="48" width="44" height="18" rx="3" fill="#5a4422" stroke="#FFB800" strokeWidth="1"/>
      {/* cannon */}
      <rect x="70" y="52" width="38" height="6" fill="#222" stroke="#FFB800" strokeWidth=".8"/>
      <circle cx="108" cy="55" r="6" fill="#FFB800"/>
      {/* tracks */}
      <ellipse cx="35" cy="92" rx="14" ry="6" fill="#111"/>
      <ellipse cx="65" cy="92" rx="14" ry="6" fill="#111"/>
      <ellipse cx="95" cy="92" rx="14" ry="6" fill="#111"/>
      {/* explosion behind */}
      <circle cx="100" cy="30" r="14" fill="#FFE89A" opacity=".9"/>
      <circle cx="100" cy="30" r="9" fill="#FF8A00"/>
      <circle cx="100" cy="30" r="4" fill="#E60012"/>
      {/* logo */}
      <text x="60" y="22" textAnchor="middle" fill="#FFB800" fontSize="11" fontFamily="Oswald" fontWeight="800" letterSpacing="1.5">METAL SLUG</text>
    </ArtFrame>
  );
}

function MonkeyArt({ theme }) {
  return (
    <ArtFrame kind="monkey" theme={theme}>
      {/* staff */}
      <line x1="20" y1="20" x2="100" y2="100" stroke="#FFD24A" strokeWidth="4"/>
      {/* head */}
      <circle cx="60" cy="55" r="26" fill="#D4A574"/>
      <ellipse cx="60" cy="58" rx="18" ry="20" fill="#FFE0B2"/>
      {/* ears */}
      <circle cx="38" cy="50" r="7" fill="#D4A574"/>
      <circle cx="82" cy="50" r="7" fill="#D4A574"/>
      {/* crown band */}
      <path d="M40 40 Q60 30 80 40 L80 46 Q60 38 40 46 Z" fill="#FFB800" stroke="#8B4513" strokeWidth=".8"/>
      {/* face */}
      <circle cx="52" cy="58" r="2.5" fill="#1a0a00"/>
      <circle cx="68" cy="58" r="2.5" fill="#1a0a00"/>
      <path d="M52 68 Q60 72 68 68" stroke="#1a0a00" strokeWidth="2" fill="none"/>
      {/* logo */}
      <text x="60" y="104" textAnchor="middle" fill="#FFE89A" fontSize="10" fontFamily="Oswald" fontWeight="800" letterSpacing="1">MONKEY KING</text>
    </ArtFrame>
  );
}

function OlympusArt({ theme }) {
  return (
    <ArtFrame kind="olympus" theme={theme}>
      {/* columns */}
      <rect x="22" y="40" width="8" height="50" fill="#E8D8B0"/>
      <rect x="42" y="40" width="8" height="50" fill="#E8D8B0"/>
      <rect x="70" y="40" width="8" height="50" fill="#E8D8B0"/>
      <rect x="90" y="40" width="8" height="50" fill="#E8D8B0"/>
      <rect x="18" y="35" width="84" height="6" fill="#FFE89A"/>
      <polygon points="14,35 60,12 106,35" fill="#FFE89A" stroke="#8B6914" strokeWidth="1"/>
      {/* lightning bolt */}
      <path d="M58 18 L52 38 L62 38 L56 60 L72 32 L62 32 L68 18 Z" fill="#FFD24A" stroke="#FF8A00" strokeWidth="1"/>
      <rect x="14" y="88" width="92" height="6" fill="#8B6914"/>
      <text x="60" y="106" textAnchor="middle" fill="#FFD24A" fontSize="10" fontFamily="Oswald" fontWeight="800">OLYMPUS</text>
    </ArtFrame>
  );
}

function TRexArt({ theme }) {
  return (
    <ArtFrame kind="trex" theme={theme}>
      {/* body */}
      <path d="M25 80 Q25 50 50 45 Q60 28 78 30 Q86 32 88 42 L94 42 L92 50 L82 50 Q82 60 75 65 L80 90 L70 90 L66 75 L48 75 L46 90 L36 90 L38 70 Q30 68 25 80 Z" fill="#7A1A1A" stroke="#FFB800" strokeWidth="1.2"/>
      {/* spikes */}
      <path d="M55 40 L58 32 L61 40 M65 36 L68 28 L71 36 M75 34 L78 26 L81 34" stroke="#FFB800" strokeWidth="1.2" fill="none"/>
      {/* eye */}
      <circle cx="80" cy="40" r="2" fill="#FFE89A"/>
      <circle cx="80" cy="40" r=".8" fill="#1a0a00"/>
      {/* teeth */}
      <path d="M86 44 L88 47 M90 44 L91 47 M82 44 L83 47" stroke="#fff" strokeWidth="1"/>
      {/* fire */}
      <path d="M95 42 Q104 38 102 48 Q108 46 106 56 Q102 56 98 52 Z" fill="#FF8A00"/>
      <text x="60" y="106" textAnchor="middle" fill="#FFB800" fontSize="10" fontFamily="Oswald" fontWeight="800" letterSpacing="1">RAGE T-REX 2</text>
    </ArtFrame>
  );
}

function SafariArt({ theme }) {
  return (
    <ArtFrame kind="safari" theme={theme}>
      {/* sun */}
      <circle cx="92" cy="32" r="14" fill="#FFD24A"/>
      <circle cx="92" cy="32" r="10" fill="#FF8A00"/>
      {/* horizon */}
      <ellipse cx="60" cy="92" rx="60" ry="14" fill="#8B5A14"/>
      {/* tree trunk */}
      <rect x="20" y="50" width="6" height="40" fill="#4a2c10"/>
      {/* tree canopy */}
      <ellipse cx="23" cy="48" rx="22" ry="10" fill="#4a7a1a"/>
      <ellipse cx="23" cy="42" rx="16" ry="7" fill="#5e9c22"/>
      {/* lion silhouette */}
      <circle cx="62" cy="68" r="14" fill="#8B4513"/>
      <circle cx="62" cy="68" r="10" fill="#C97F36"/>
      <circle cx="58" cy="66" r="1.5" fill="#1a0a00"/>
      <circle cx="66" cy="66" r="1.5" fill="#1a0a00"/>
      <path d="M58 72 Q62 74 66 72" stroke="#1a0a00" strokeWidth="1.2" fill="none"/>
      <path d="M75 60 Q85 60 88 70 L80 76 Q78 70 75 70 Z" fill="#8B4513"/>
      <text x="60" y="106" textAnchor="middle" fill="#FFE89A" fontSize="10" fontFamily="Oswald" fontWeight="800" letterSpacing="1">SAFARI</text>
    </ArtFrame>
  );
}

function FortuneArt({ theme }) {
  return (
    <ArtFrame kind="fortune" theme={theme}>
      {/* gold ingot stack */}
      <polygon points="40,90 80,90 86,76 34,76" fill="#FFD24A" stroke="#8B6914"/>
      <polygon points="46,76 74,76 78,66 42,66" fill="#FFE89A" stroke="#8B6914"/>
      <polygon points="50,66 70,66 72,58 48,58" fill="#FFD24A" stroke="#8B6914"/>
      {/* red lantern */}
      <ellipse cx="60" cy="34" rx="16" ry="14" fill="#E60012" stroke="#FFB800" strokeWidth="1.5"/>
      <rect x="58" y="18" width="4" height="6" fill="#FFB800"/>
      <rect x="58" y="46" width="4" height="6" fill="#FFB800"/>
      <line x1="44" y1="34" x2="76" y2="34" stroke="#FFD24A" strokeWidth=".8" opacity=".5"/>
      <text x="60" y="38" textAnchor="middle" fill="#FFE89A" fontSize="14" fontFamily="serif" fontWeight="900">福</text>
      <text x="60" y="106" textAnchor="middle" fill="#FFE89A" fontSize="10" fontFamily="Oswald" fontWeight="800" letterSpacing="1">FORTUNE 88</text>
    </ArtFrame>
  );
}

function SweetArt({ theme }) {
  return (
    <ArtFrame kind="sweet" theme={theme}>
      {/* candies */}
      {[[35, 40, "#FF55AA"], [78, 38, "#9C5BFF"], [56, 56, "#FFD24A"], [32, 76, "#39C9FF"], [82, 78, "#FF8A00"], [58, 88, "#FFFFFF"]].map(([cx, cy, fill], i) => (
        <g key={i}>
          <circle cx={cx} cy={cy} r="11" fill={fill} stroke="#fff" strokeWidth="1"/>
          <circle cx={cx - 2} cy={cy - 3} r="3" fill="rgba(255,255,255,.6)"/>
        </g>
      ))}
      <text x="60" y="106" textAnchor="middle" fill="#fff" fontSize="10" fontFamily="Oswald" fontWeight="800" letterSpacing="1">SWEET BONANZA</text>
    </ArtFrame>
  );
}

function DragonArt({ theme }) {
  return (
    <ArtFrame kind="dragon" theme={theme}>
      {/* dragon body curl */}
      <path d="M30 80 Q30 30 80 30 Q100 30 100 50 Q100 65 85 65 Q75 65 75 55" stroke="#D4AF37" strokeWidth="6" fill="none" strokeLinecap="round"/>
      <path d="M30 80 Q30 30 80 30 Q100 30 100 50 Q100 65 85 65 Q75 65 75 55" stroke="#00A86B" strokeWidth="3" fill="none" strokeLinecap="round"/>
      {/* scales */}
      <circle cx="50" cy="40" r="3" fill="#006B3F"/>
      <circle cx="70" cy="36" r="3" fill="#006B3F"/>
      <circle cx="40" cy="60" r="3" fill="#006B3F"/>
      <circle cx="90" cy="50" r="3" fill="#006B3F"/>
      {/* head */}
      <circle cx="30" cy="78" r="10" fill="#D4AF37"/>
      <circle cx="26" cy="76" r="1.5" fill="#C8102E"/>
      {/* horns */}
      <path d="M22 70 L18 60 M28 68 L26 58" stroke="#D4AF37" strokeWidth="2"/>
      <text x="60" y="106" textAnchor="middle" fill="#D4AF37" fontSize="10" fontFamily="serif" fontWeight="700" letterSpacing="1">JADE DRAGON</text>
    </ArtFrame>
  );
}

function GenericArt({ theme }) {
  return (
    <ArtFrame kind="metalslug" theme={theme}>
      <circle cx="60" cy="60" r="30" fill="#fff" opacity=".2"/>
      <text x="60" y="65" textAnchor="middle" fill="#fff" fontSize="20" fontWeight="800">?</text>
    </ArtFrame>
  );
}

/* ─────────────────────────────────────────────────────────────
   TopHotGames — backed by `games` table (active=true)
   ──────────────────────────────────────────────────────────── */
function TopHotGames({ theme }) {
  const { data } = window.useHotGames ? window.useHotGames() : { data: [] };
  const games = Array.isArray(data) ? data : [];
  return (
    <div>
      <div className="section-hd">
        <div className="swatch">{theme === "neon" ? "⚡" : theme === "jade" ? "❖" : "🔥"}</div>
        <h2><span className="pre">TOP</span>{theme === "jade" ? " Featured Games" : "HOT GAMES"}</h2>
      </div>
      <div className="hscroll-wrap">
        <div className="hscroll">
          {games.map((g) => (
            <div key={g.id} className="gcard">
              <div className={`gcard-art ${g.is_featured ? "featured" : ""}`}>
                <GameArt kind={g.kind} theme={theme} />
                {g.is_hot && <div className="badge">{theme === "neon" ? "LIVE" : theme === "jade" ? "新" : "HOT"}</div>}
              </div>
              <div className="gcard-title">{g.title}</div>
              <div className="gcard-provider">{g.provider}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.TopHotGames = TopHotGames;

/* ─────────────────────────────────────────────────────────────
   Provider tabs + grid
   ──────────────────────────────────────────────────────────── */
// Provider tab visual config (static — drives sidebar order/icons)
const PROVIDER_TABS = [
  { id: "slot1",   label: "Slot 1:1",   icon: "slot" },
  { id: "slot100", label: "Slot 1:100", icon: "trophy" },
  { id: "live",    label: "Live Game",  icon: "live" },
  { id: "sport",   label: "Sportbook",  icon: "soccer" },
  { id: "esport",  label: "Esport",     icon: "esport" },
  { id: "fast",    label: "Fast Game",  icon: "lightning" },
];

function ProviderSection({ theme }) {
  const [active, setActive] = useStateG("slot1");
  const { data } = window.useProviders ? window.useProviders(active) : { data: [] };
  const providers = Array.isArray(data) ? data : [];

  return (
    <div className="providers">
      <div className="section-hd">
        <div className="swatch" style={{
          background: "var(--accent-grad)", color: "var(--accent-text)", fontSize: 13, fontFamily: "var(--font-display)", fontWeight: 800
        }}>S</div>
        <h2>All Provider</h2>
      </div>
      <div className="provider-body">
        <div className="provider-tabs">
          {PROVIDER_TABS.map((t) => (
            <button
              key={t.id}
              className={`ptab ${active === t.id ? "active" : ""}`}
              type="button"
              onClick={() => setActive(t.id)}
            >
              <span className="ptab-icon"><Icon name={t.icon} size={20} /></span>
              <span>{t.label}</span>
            </button>
          ))}
        </div>
        <div className="provider-grid">
          {providers.map((p) => (
            <div key={p.id} className="pcard">
              <div className="pcard-art">
                <GameArt kind={p.kind || "olympus"} theme={theme} />
                {p.tag && (
                  <div className="badge" style={{
                    position: "absolute", top: 8, left: 8,
                    background: p.tag === "LIVE" || p.tag === "NEW" ? "var(--hot)" : "var(--accent-1)",
                    color: theme === "jade" || p.tag === "LIVE" ? "#fff" : "var(--accent-text)",
                    fontFamily: "var(--font-display)", fontSize: 9, padding: "2px 6px",
                    borderRadius: 4, letterSpacing: ".06em", textTransform: "uppercase",
                    fontWeight: 700, zIndex: 2,
                  }}>{p.tag}</div>
                )}
              </div>
              <div className="pcard-name">{p.name}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.ProviderSection = ProviderSection;

/* ─────────────────────────────────────────────────────────────
   BottomNav
   ──────────────────────────────────────────────────────────── */
function BottomNav({ theme, route, navigate }) {
  const items = [
    { id: "shop",     label: "NEW",      icon: "female", route: "/new", isFemale: true },
    { id: "history",  label: "History",  icon: "history", route: "/history" },
    { id: "promo",    label: "Promo",    icon: null,      route: "/promo",   isPromo: true },
    { id: "chat",     label: "LiveChat", icon: "chat",    route: "/chat" },
    { id: "settings", label: "Setting",  icon: "settings",route: "/settings" },
  ];

  const PromoIcon = () => {
    if (theme === "neon") return <span style={{ fontSize: 22 }}>◉</span>;
    if (theme === "jade") return <span style={{ fontSize: 22, fontFamily: "serif", fontWeight: 800 }}>福</span>;
    return <Icon name="slot" size={24} />;
  };

  const go = navigate || ((path) => { window.location.hash = path; });

  return (
    <nav className="botnav">
      {items.map((it) => {
        const active = route === it.route;
        return (
          <button
            key={it.id}
            className={`bn-item ${it.isPromo ? "promo" : ""} ${it.isFemale ? "female" : ""} ${active ? "active" : ""}`}
            type="button"
            onClick={() => go(it.route)}
          >
            {it.isPromo ? (
              <div className="bn-promo"><PromoIcon /></div>
            ) : it.isFemale ? (
              <span className="bn-female" aria-hidden="true">♀</span>
            ) : (
              <span className="bn-icon"><Icon name={it.icon} size={20} /></span>
            )}
            <span>{it.label}</span>
          </button>
        );
      })}
    </nav>
  );
}
window.BottomNav = BottomNav;