{% extends "base.html" %}

{% block title %}发现 - YRTV{% endblock %}

{% block content %}
{% set tone_styles = {
    'positive': 'border-emerald-200 bg-emerald-50 dark:border-emerald-900/50 dark:bg-emerald-950/20',
    'negative': 'border-rose-200 bg-rose-50 dark:border-rose-900/50 dark:bg-rose-950/20',
    'fun': 'border-cyan-200 bg-cyan-50 dark:border-cyan-900/50 dark:bg-cyan-950/20'
} %}
{% set tone_badges = {
    'positive': 'bg-emerald-100 text-emerald-700',
    'negative': 'bg-rose-100 text-rose-700',
    'fun': 'bg-cyan-100 text-cyan-700'
} %}
{% set medal_styles = {
    'gold': 'from-amber-300 to-yellow-500 text-amber-950',
    'silver': 'from-slate-200 to-slate-400 text-slate-800',
    'bronze': 'from-orange-300 to-amber-700 text-orange-950'
} %}
<div class="space-y-10 px-4 sm:px-0">
    <section class="overflow-hidden rounded-3xl bg-gradient-to-br from-slate-950 via-cyan-950 to-yrtv-950 p-8 text-white shadow-2xl">
        <div class="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <div class="text-xs font-black uppercase tracking-[0.3em] text-cyan-300">{{ brand.primary }} · Data Discovery</div>
                <h1 class="mt-3 text-4xl font-black">有趣的数据，不只展示好的一面</h1>
                <p class="mt-3 max-w-2xl text-sm leading-7 text-slate-300">从 885 条 roster 比赛记录中自动发现高光、低谷、反差和个人习惯。每张卡片都有统计证据。</p>
            </div>
            <div class="grid grid-cols-3 gap-3 text-center">
                {% for label, value in [('发现', insights|length), ('勋章维度', medals|length), ('获奖队员', leaderboard|length)] %}
                <div class="rounded-2xl bg-white/10 px-5 py-3"><div class="text-2xl font-black">{{ value }}</div><div class="text-[10px] uppercase text-slate-400">{{ label }}</div></div>
                {% endfor %}
            </div>
        </div>
    </section>

    <section id="insights" class="space-y-5">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h2 class="text-2xl font-black text-slate-900 dark:text-white">趣味发现</h2>
                <p class="text-sm text-slate-500">正面、负面和纯粹有趣的数据都保留。</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ url_for('discover.index', dimension=dimension) }}#insights" class="rounded-full px-4 py-2 text-sm font-bold {% if not tone %}bg-slate-900 text-white dark:bg-white dark:text-slate-900{% else %}bg-white text-slate-500 dark:bg-slate-800{% endif %}">全部</a>
                {% for key, label in tone_labels.items() %}
                <a href="{{ url_for('discover.index', tone=key, dimension=dimension) }}#insights" class="rounded-full px-4 py-2 text-sm font-bold {% if tone == key %}{{ tone_badges[key] }}{% else %}bg-white text-slate-500 dark:bg-slate-800{% endif %}">{{ label }}</a>
                {% endfor %}
            </div>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
            {% for insight in insights %}
            <article class="rounded-2xl border p-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md {{ tone_styles[insight.tone] }}">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <span class="rounded-full px-2.5 py-1 text-[10px] font-black uppercase {{ tone_badges[insight.tone] }}">{{ insight.tone_label }} · {{ insight.category }}</span>
                        <h3 class="mt-3 text-xl font-black text-slate-900 dark:text-white">{{ insight.title }}</h3>
                    </div>
                    <div class="text-right">
                        <div class="text-3xl font-black text-slate-900 dark:text-white">
                            {% if insight.metric_unit == '%' %}{{ '%.0f'|format(insight.metric_value) }}{% elif insight.metric_value == insight.metric_value|int %}{{ insight.metric_value|int }}{% else %}{{ '%.2f'|format(insight.metric_value) }}{% endif %}<span class="text-sm">{{ insight.metric_unit }}</span>
                        </div>
                        <div class="text-[10px] uppercase text-slate-400">{{ insight.metric_label }}</div>
                    </div>
                </div>
                <p class="mt-4 text-sm leading-6 text-slate-600 dark:text-slate-300">{{ insight.description }}</p>
                <div class="mt-4 flex items-center justify-between border-t border-black/5 pt-3 dark:border-white/10">
                    <a href="{{ url_for('players.detail', steam_id=insight.steam_id_64) }}" class="font-bold text-slate-800 hover:text-yrtv-600 dark:text-white">{{ insight.identity.username or insight.steam_id_64 }}</a>
                    <span class="text-xs text-slate-400">
                        {% if insight.evidence.matches %}{{ insight.evidence.matches }} 场样本{% endif %}
                        {% if insight.evidence.map %} · {{ insight.evidence.map }}{% endif %}
                    </span>
                </div>
            </article>
            {% else %}
            <div class="col-span-full rounded-2xl bg-white py-16 text-center text-slate-400 dark:bg-slate-800">当前筛选暂无发现</div>
            {% endfor %}
        </div>
    </section>

    <section id="medals" class="space-y-5">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h2 class="text-2xl font-black text-slate-900 dark:text-white">表现勋章墙</h2>
                <p class="text-sm text-slate-500">每张地图、每个 ELO 分段按 Rating 评选金银铜，最低 5 场。</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ url_for('discover.index', tone=tone) }}#medals" class="rounded-full px-4 py-2 text-sm font-bold {% if not dimension %}bg-slate-900 text-white dark:bg-white dark:text-slate-900{% else %}bg-white text-slate-500 dark:bg-slate-800{% endif %}">全部</a>
                <a href="{{ url_for('discover.index', tone=tone, dimension='map') }}#medals" class="rounded-full px-4 py-2 text-sm font-bold {% if dimension == 'map' %}bg-yrtv-600 text-white{% else %}bg-white text-slate-500 dark:bg-slate-800{% endif %}">分地图</a>
                <a href="{{ url_for('discover.index', tone=tone, dimension='elo') }}#medals" class="rounded-full px-4 py-2 text-sm font-bold {% if dimension == 'elo' %}bg-yrtv-600 text-white{% else %}bg-white text-slate-500 dark:bg-slate-800{% endif %}">分 ELO</a>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
            {% for group in medals %}
            <article class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
                <div class="flex items-center justify-between border-b border-slate-100 px-5 py-4 dark:border-slate-800">
                    <div>
                        <div class="text-[10px] font-black uppercase tracking-wider text-slate-400">{{ 'Map Medal' if group.dimension_type == 'map' else 'ELO Medal' }}</div>
                        <h3 class="text-lg font-black text-slate-900 dark:text-white">{{ group.dimension_label }}</h3>
                    </div>
                    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-500 dark:bg-slate-800">{{ group.medals|length }} medals</span>
                </div>
                <div class="divide-y divide-slate-100 dark:divide-slate-800">
                    {% for medal in group.medals %}
                    <a href="{{ url_for('players.detail', steam_id=medal.steam_id_64) }}" class="flex items-center gap-4 px-5 py-4 hover:bg-slate-50 dark:hover:bg-slate-800/40">
                        <div class="flex h-11 w-11 flex-none items-center justify-center rounded-full bg-gradient-to-br text-lg font-black shadow {{ medal_styles[medal.medal_tier] }}">{{ medal.medal_rank }}</div>
                        <div class="min-w-0 flex-1">
                            <div class="truncate font-black text-slate-900 dark:text-white">{{ medal.identity.username or medal.steam_id_64 }}</div>
                            <div class="text-xs text-slate-400">{{ medal.matches }} 场 · K/D {{ '%.2f'|format(medal.avg_kd) }} · ADR {{ '%.1f'|format(medal.avg_adr) }}</div>
                        </div>
                        <div class="text-right">
                            <div class="text-xl font-black text-yrtv-600">{{ '%.2f'|format(medal.avg_rating) }}</div>
                            <div class="text-[10px] uppercase text-slate-400">{{ '%.0f%%'|format(medal.win_rate * 100) }} win</div>
                        </div>
                    </a>
                    {% endfor %}
                </div>
            </article>
            {% endfor %}
        </div>
    </section>

    <section class="rounded-2xl bg-gradient-to-r from-amber-500 to-orange-600 p-6 text-white shadow-xl">
        <h2 class="text-xl font-black">勋章总榜</h2>
        <div class="mt-5 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {% for player in leaderboard %}
            <a href="{{ url_for('players.detail', steam_id=player.steam_id_64) }}" class="flex items-center justify-between rounded-xl bg-white/10 p-4 hover:bg-white/20">
                <div><div class="font-black">{{ loop.index }}. {{ player.identity.username or player.steam_id_64 }}</div><div class="mt-1 text-xs text-amber-100">🥇 {{ player.gold }} · 🥈 {{ player.silver }} · 🥉 {{ player.bronze }}</div></div>
                <div class="text-3xl font-black">{{ player.medals }}</div>
            </a>
            {% endfor %}
        </div>
    </section>
</div>
{% endblock %}