// ============================================
// MAIN MENU — Arcade / Online / Profile / Shop / Settings / Leaderboard
// ============================================

function MenuCard({ title, desc, icon, onClick, accent, size = "md", chipBadge }) {
    return (
        <button className="menu-card" onClick={onClick} data-size={size}>
            <div className="menu-card-glow"/>
            <div className="menu-card-inner">
                <div className="menu-card-icon" style={accent ? { color: accent } : {}}>
                    <span dangerouslySetInnerHTML={{ __html: icon }}/>
                </div>
                <div style={{ flex: 1, minWidth: 0, textAlign: "left" }}>
                    <div className="menu-card-title">{title}</div>
                    <div className="menu-card-desc">{desc}</div>
                </div>
                {chipBadge && <div className="menu-card-chip">{chipBadge}</div>}
                <div className="menu-card-arrow" dangerouslySetInnerHTML={{ __html: window.Icon.chevronRight(20) }}/>
            </div>
        </button>
    );
}

function MainMenu({ navigate }) {
    const PLAYER = window.MastershotAuth.getPlayer();
    return (
        <div className="screen active" style={{ opacity: 1 }}>
            <AmbientBackdrop/>
            <Particles count={20}/>
            <TopBar navigate={navigate}/>

            <div style={{
                position: "relative", zIndex: 5,
                height: "100%", padding: "100px 48px 40px",
                display: "grid",
                gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
                gridTemplateRows: "auto 1fr",
                gap: 24,
                maxWidth: 1400, margin: "0 auto",
            }}>
                {/* Header strip */}
                <div style={{ gridColumn: "1 / -1", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 20 }}>
                    <div>
                        <div style={{ fontSize: 13, color: "var(--gold-500)", letterSpacing: "0.24em", textTransform: "uppercase", marginBottom: 6 }}>
                            Bem-vindo, {PLAYER.title}
                        </div>
                        <div style={{ fontFamily: "var(--font-display)", fontSize: 44, color: "var(--ink-100)", letterSpacing: "0.04em", fontWeight: 600 }}>
                            {PLAYER.nick}
                        </div>
                    </div>
                    <DailyQuestStrip/>
                </div>

                {/* Primary CTAs */}
                <MenuCard
                    title="Modo Arcade"
                    desc="Jogue solo contra IA ou com amigos localmente"
                    icon={window.Icon.cue(32)}
                    accent="var(--gold-400)"
                    size="lg"
                    onClick={() => navigate("arcade")}
                />
                <MenuCard
                    title="Modo Online"
                    desc="Salas públicas, ranked e torneios com apostas"
                    icon={window.Icon.globe(32)}
                    accent="var(--win-bright)"
                    size="lg"
                    chipBadge={<span className="chip chip-win">{(28451).toLocaleString()} online</span>}
                    onClick={() => navigate("online")}
                />

                {/* Secondary grid */}
                <div style={{ gridColumn: "1 / -1", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
                    <MenuCard title="Perfil" desc="Stats, conquistas, histórico" icon={window.Icon.user(28)} onClick={() => navigate("profile")}/>
                    <MenuCard title="Ranking" desc="Leaderboard global e por modo" icon={window.Icon.trophy(28)} onClick={() => navigate("leaderboard")}/>
                    <MenuCard title="Loja" desc="Tacos, mesas, cosméticos" icon={window.Icon.shop(28)} onClick={() => navigate("shop")}/>
                    <MenuCard title="Configurações" desc="Áudio, gráficos, controles" icon={window.Icon.cog(28)} onClick={() => navigate("settings")}/>
                </div>
            </div>

            <style>{`
                .menu-card {
                    position: relative;
                    background: linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%);
                    border: 1px solid var(--ink-700);
                    border-radius: var(--r-lg);
                    padding: 0;
                    overflow: hidden;
                    transition: all var(--t-med) var(--ease-out);
                    cursor: pointer;
                    width: 100%;
                    text-align: left;
                    animation: card-in 0.6s var(--ease-out) both;
                }
                .menu-card[data-size="lg"] { min-height: 180px; }
                .menu-card[data-size="md"] { min-height: 110px; }
                .menu-card::before {
                    content: "";
                    position: absolute; top: 0; left: 0; right: 0; height: 1px;
                    background: linear-gradient(90deg, transparent, var(--gold-700), transparent);
                    opacity: 0.5;
                }
                .menu-card:hover {
                    border-color: var(--gold-700);
                    transform: translateY(-3px);
                    box-shadow: var(--sh-xl), 0 0 32px rgba(232,185,73,0.15);
                }
                .menu-card:hover .menu-card-glow { opacity: 1; }
                .menu-card:hover .menu-card-arrow { transform: translateX(4px); color: var(--gold-400); }
                .menu-card:hover .menu-card-icon { transform: scale(1.08); }
                .menu-card-glow {
                    position: absolute;
                    inset: -2px;
                    border-radius: inherit;
                    background: radial-gradient(ellipse at 20% 50%, rgba(232,185,73,0.15), transparent 60%);
                    opacity: 0;
                    pointer-events: none;
                    transition: opacity var(--t-med);
                }
                .menu-card-inner {
                    position: relative;
                    display: flex; align-items: center; gap: 20px;
                    padding: 22px 24px;
                    height: 100%;
                }
                .menu-card[data-size="lg"] .menu-card-inner { padding: 32px 30px; gap: 24px; }
                .menu-card-icon {
                    width: 64px; height: 64px;
                    display: flex; align-items: center; justify-content: center;
                    background: linear-gradient(145deg, var(--ink-700), var(--ink-900));
                    border: 1px solid var(--ink-600);
                    border-radius: var(--r-md);
                    color: var(--ink-200);
                    flex-shrink: 0;
                    box-shadow: var(--sh-inset), var(--sh-md);
                    transition: transform var(--t-med) var(--ease-bounce);
                }
                .menu-card[data-size="md"] .menu-card-icon { width: 48px; height: 48px; }
                .menu-card-title {
                    font-family: var(--font-display);
                    font-size: 22px;
                    font-weight: 600;
                    color: var(--ink-100);
                    letter-spacing: 0.04em;
                    margin-bottom: 4px;
                }
                .menu-card[data-size="md"] .menu-card-title { font-size: 16px; }
                .menu-card-desc {
                    font-size: 13px;
                    color: var(--ink-300);
                    line-height: 1.5;
                }
                .menu-card[data-size="md"] .menu-card-desc { font-size: 12px; }
                .menu-card-arrow {
                    color: var(--ink-400);
                    transition: all var(--t-fast);
                    flex-shrink: 0;
                }
                .menu-card-chip { flex-shrink: 0; }
                @keyframes card-in {
                    from { opacity: 0; transform: translateY(20px); }
                    to { opacity: 1; transform: translateY(0); }
                }
                .menu-card:nth-child(1) { animation-delay: 0.1s; }
                .menu-card:nth-child(2) { animation-delay: 0.2s; }
            `}</style>
        </div>
    );
}

// === DAILY QUEST ===
function DailyQuestStrip() {
    return (
        <div style={{
            display: "flex", alignItems: "center", gap: 16,
            padding: "12px 20px",
            background: "linear-gradient(90deg, rgba(232,185,73,0.12), rgba(0,0,0,0.4))",
            border: "1px solid var(--gold-800)",
            borderRadius: "var(--r-md)",
            backdropFilter: "blur(8px)",
        }}>
            <div style={{
                width: 40, height: 40, borderRadius: "50%",
                background: "var(--g-gold-shiny)",
                display: "flex", alignItems: "center", justifyContent: "center",
                color: "var(--ink-900)",
                boxShadow: "inset 0 1px 0 rgba(255,255,255,0.5)",
            }} dangerouslySetInnerHTML={{ __html: window.Icon.trophy(22) }}/>
            <div>
                <div style={{ fontSize: 11, color: "var(--gold-400)", letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 600 }}>
                    Missão Diária
                </div>
                <div style={{ fontSize: 14, color: "var(--ink-100)", marginTop: 2 }}>
                    Vença 3 partidas ranked · <span style={{ color: "var(--gold-300)" }}>2/3</span>
                </div>
            </div>
            <div style={{ width: 100, height: 6, background: "var(--ink-800)", borderRadius: 3, overflow: "hidden" }}>
                <div style={{ width: "66%", height: "100%", background: "var(--g-gold)", borderRadius: 3 }}/>
            </div>
            <div className="currency currency-coin" style={{ padding: "4px 10px 4px 6px", fontSize: 12 }}>
                <span className="currency-icon coin" style={{ width: 18, height: 18, fontSize: 9 }}>$</span>
                +2500
            </div>
        </div>
    );
}

// === TOP BAR (persistent in logged-in screens) ===
function TopBar({ navigate, hideNav }) {
    const PLAYER = window.MastershotAuth.getPlayer();
    const handleLogout = async () => {
        await window.MastershotAuth.logout();
        navigate("login");
    };
    return (
        <header className="topbar">
            <div className="topbar-left">
                <div className="logo-mark" onClick={() => navigate("menu")}>
                    <MastershotLogo size={36} compact/>
                    <span className="logo-text">MASTERSHOT</span>
                </div>
            </div>
            <div className="topbar-right">
                <Currency type="coin" amount={PLAYER.coins}/>
                <Currency type="chip" amount={PLAYER.chips}/>
                <div style={{ width: 1, height: 28, background: "var(--ink-700)" }}/>
                <button className="btn-icon" onClick={() => navigate("settings")} dangerouslySetInnerHTML={{ __html: window.Icon.cog(18) }}/>
                <button className="btn-icon" onClick={handleLogout} title="Sair"
                    dangerouslySetInnerHTML={{ __html: window.Icon.logout ? window.Icon.logout(18) : '↩' }}/>
                <div onClick={() => navigate("profile")} style={{ cursor: "pointer" }}>
                    <Avatar initials={PLAYER.avatar} level={PLAYER.level} size="sm"/>
                </div>
            </div>
        </header>
    );
}

Object.assign(window, { MainMenu, TopBar, MenuCard });