<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D20 Roll Stats - ViewrBot</title>
    <link rel="icon" type="image/png" href="images/viewrbot-icon-32.png">
    <link rel="stylesheet" href="styles.css">
    <script src="https://unpkg.com/axios@1.7.2/dist/axios.min.js"></script>
    <script defer src="https://unpkg.com/alpinejs@3.13.5/dist/cdn.min.js"></script>
</head>
<body>
    <main class="container" x-data="publicStatsData()">
        <!-- D20 Statistics -->
        <section class="section d20-section">
            <div class="section-header" style="display: flex; justify-content: space-between; align-items: center;">
                <div style="display: flex; align-items: center; gap: 0.75rem;">
                    <img src="/images/viewrbot-icon-48.png" alt="" class="section-icon">
                    <h2 style="margin: 0;">
                        🎲 #<span x-text="channel"></span> D20 ROLL TRACKER
                    </h2>
                </div>
                <div style="color: var(--text-dim); font-size: 0.85rem;">Timezone: PST (UTC-8)</div>
            </div>

            <!-- D20 Controls - Single Line -->
            <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
                <!-- Left: Filter Toggle -->
                <button
                    class="btn-small"
                    :class="showCascadingFilters ? 'btn-primary' : 'btn-secondary'"
                    @click="toggleCascadingFilters()"
                    title="Toggle Filters">
                    🔍
                </button>

                <!-- Center: Timeframe Buttons -->
                <div style="display: flex; gap: 0.5rem; flex: 1; justify-content: center; flex-wrap: wrap;">
                    <button class="btn-small" :class="[(timeframe === 'all' && !filterYear && !filterMonth && !filterWeek && !filterDay && !filterStream) ? 'btn-primary' : 'btn-secondary', { 'btn-dimmed': filterYear || filterMonth || filterWeek || filterDay || filterStream }]" @click="changeD20Timeframe('all')" title="All Time">All Time</button>
                    <button class="btn-small" :class="[(timeframe === 'year' && !filterYear && !filterMonth && !filterWeek && !filterDay && !filterStream) ? 'btn-primary' : 'btn-secondary', { 'btn-dimmed': filterYear || filterMonth || filterWeek || filterDay || filterStream }]" @click="changeD20Timeframe('year')" title="This Year">Year</button>
                    <button class="btn-small" :class="[(timeframe === 'month' && !filterYear && !filterMonth && !filterWeek && !filterDay && !filterStream) ? 'btn-primary' : 'btn-secondary', { 'btn-dimmed': filterYear || filterMonth || filterWeek || filterDay || filterStream }]" @click="changeD20Timeframe('month')" title="This Month">Month</button>
                    <button class="btn-small" :class="[(timeframe === 'week' && !filterYear && !filterMonth && !filterWeek && !filterDay && !filterStream) ? 'btn-primary' : 'btn-secondary', { 'btn-dimmed': filterYear || filterMonth || filterWeek || filterDay || filterStream }]" @click="changeD20Timeframe('week')" title="This Week">Week</button>
                    <button class="btn-small" :class="[(timeframe === 'day' && !filterYear && !filterMonth && !filterWeek && !filterDay && !filterStream) ? 'btn-primary' : 'btn-secondary', { 'btn-dimmed': filterYear || filterMonth || filterWeek || filterDay || filterStream }]" @click="changeD20Timeframe('day')" title="Today">Day</button>
                    <button class="btn-small" :class="[(timeframe === 'stream' && !filterYear && !filterMonth && !filterWeek && !filterDay && !filterStream) ? 'btn-primary' : 'btn-secondary', { 'btn-dimmed': filterYear || filterMonth || filterWeek || filterDay || filterStream }]" @click="changeD20Timeframe('stream')" :title="isStreamerLive() ? 'Current Stream' : 'Recent Stream'">
                        Stream
                        <span class="status-dot" :class="isStreamerLive() ? 'live' : 'offline'" style="margin-left: 4px;"></span>
                    </button>
                </div>

                <!-- Right: Show %, Refresh, Reset -->
                <div style="display: flex; gap: 0.5rem; align-items: center;">
                    <button
                        class="btn-small"
                        :class="showPercentages ? 'btn-primary' : 'btn-secondary'"
                        @click="showPercentages = !showPercentages"
                        title="Show Percentages">
                        %
                    </button>
                    <button class="btn-primary btn-small" @click="refreshD20Stats()" :disabled="loading" title="Refresh Stats">🔄</button>
                    <button class="btn-secondary btn-small" @click="resetFilters()" title="Reset Filters">🔁</button>
                </div>
            </div>

            <!-- Cascading Filter Dropdowns -->
            <div
                x-show="showCascadingFilters"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0 transform -translate-y-2"
                x-transition:enter-end="opacity-100 transform translate-y-0"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100 transform translate-y-0"
                x-transition:leave-end="opacity-0 transform -translate-y-2"
                style="margin-bottom: 1rem; padding: 1rem; background: var(--bg-secondary); border-radius: var(--radius); border: 1px solid var(--border);">

                <div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end;">
                    <!-- Year Dropdown -->
                    <div style="display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 120px;">
                        <label style="font-size: 0.75rem; color: var(--text-muted); font-weight: 600;">YEAR</label>
                        <select
                            x-model="filterYear"
                            @change="onFilterYearChange()"
                            :disabled="availableYears.length === 0"
                            :class="filterYear ? 'filter-dropdown-active' : 'filter-dropdown-subtle'"
                            style="padding: 0.5rem; border-radius: var(--radius); width: 100%;">
                            <option value="">All</option>
                            <template x-for="yearObj in availableYears" :key="yearObj.year">
                                <option :value="yearObj.year" x-text="yearObj.year"></option>
                            </template>
                        </select>
                    </div>

                    <!-- Month Dropdown -->
                    <div style="display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 120px;">
                        <label style="font-size: 0.75rem; color: var(--text-muted); font-weight: 600;">MONTH</label>
                        <select
                            x-model="filterMonth"
                            @change="onFilterMonthChange()"
                            :disabled="availableMonths.length === 0"
                            :class="filterMonth ? 'filter-dropdown-active' : 'filter-dropdown-subtle'"
                            style="padding: 0.5rem; border-radius: var(--radius); width: 100%;">
                            <option value="">All</option>
                            <template x-for="monthObj in availableMonths" :key="monthObj.month">
                                <option :value="monthObj.month" x-text="formatMonthLabel(monthObj.month)"></option>
                            </template>
                        </select>
                    </div>

                    <!-- Week Dropdown -->
                    <div style="display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 120px;">
                        <label style="font-size: 0.75rem; color: var(--text-muted); font-weight: 600;">WEEK</label>
                        <select
                            x-model="filterWeek"
                            @change="onFilterWeekChange()"
                            :disabled="availableWeeks.length === 0"
                            :class="filterWeek ? 'filter-dropdown-active' : 'filter-dropdown-subtle'"
                            style="padding: 0.5rem; border-radius: var(--radius); width: 100%;">
                            <option value="">All</option>
                            <template x-for="weekObj in availableWeeks" :key="`${weekObj.week_start}_${weekObj.week_end}`">
                                <option :value="`${weekObj.week_start}_${weekObj.week_end}`" x-text="formatWeekLabel(weekObj.week_start, weekObj.week_end)"></option>
                            </template>
                        </select>
                    </div>

                    <!-- Day Dropdown -->
                    <div style="display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 120px;">
                        <label style="font-size: 0.75rem; color: var(--text-muted); font-weight: 600;">DAY</label>
                        <select
                            x-model="filterDay"
                            @change="onFilterDayChange()"
                            :disabled="availableDays.length === 0"
                            :class="filterDay ? 'filter-dropdown-active' : 'filter-dropdown-subtle'"
                            style="padding: 0.5rem; border-radius: var(--radius); width: 100%;">
                            <option value="" x-text="filterStream ? '(Stream selected)' : 'All'"></option>
                            <template x-for="dayObj in availableDays" :key="dayObj.day">
                                <option :value="dayObj.day" x-text="formatDayLabel(dayObj.day)"></option>
                            </template>
                        </select>
                    </div>

                    <!-- Stream Dropdown -->
                    <div style="display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 120px;">
                        <label style="font-size: 0.75rem; color: var(--text-muted); font-weight: 600;">STREAM</label>
                        <select
                            x-model="filterStream"
                            @change="onFilterStreamChange()"
                            :disabled="availableStreams.length === 0"
                            :class="filterStream ? 'filter-dropdown-active' : 'filter-dropdown-subtle'"
                            style="padding: 0.5rem; border-radius: var(--radius); width: 100%;">
                            <option value="" x-text="filterDay ? '(Day selected)' : 'All'"></option>
                            <template x-for="(stream, idx) in availableStreams" :key="idx">
                                <option :value="`session-${idx}`" x-text="formatStreamLabel(stream.session_start, stream.roll_count)"></option>
                            </template>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Overall Stats Cards -->
            <div class="status-grid-5">
                <div class="status-card">
                    <div class="status-header"><h3>TIMEFRAME</h3></div>
                    <div class="status-content centered">
                        <div class="status-value" style=" color: var(--primary);" x-text="getTimeframeLabel()"></div>
                        <div class="status-label" x-show="getStreamTimeRange() || getTimeframeDetail()" x-text="getStreamTimeRange() || getTimeframeDetail()"></div>
                    </div>
                </div>

                <div class="status-card">
                    <div class="status-header"><h3>TOTAL ROLLS</h3></div>
                    <div class="status-content centered">
                        <div class="status-value" x-text="stats.overall.total_rolls || 0"></div>
                    </div>
                </div>

                <div class="status-card">
                    <div class="status-header"><h3>ROLLS SINCE NAT 20</h3></div>
                    <div class="status-content centered">
                        <div class="status-value" x-text="stats.rolls_since_nat20 || 0"></div>
                        <div class="status-label" x-show="stats.last_nat20">
                            Last by <span x-text="stats.last_nat20?.username"></span>
                        </div>
                    </div>
                </div>

                <div class="status-card highlight-success">
                    <div class="status-header"><h3>NAT 20s</h3></div>
                    <div class="status-content centered">
                        <div class="status-value">
                            <span x-text="stats.overall.nat_20_count || 0"></span>
                            <span x-show="showPercentages" class="stat-percent" x-text="getPercent(stats.overall.nat_20_count, stats.overall.total_rolls)"></span>
                        </div>
                    </div>
                </div>

                <div class="status-card highlight-danger">
                    <div class="status-header"><h3>NAT 1s</h3></div>
                    <div class="status-content centered">
                        <div class="status-value">
                            <span x-text="stats.overall.nat_1_count || 0"></span>
                            <span x-show="showPercentages" class="stat-percent" x-text="getPercent(stats.overall.nat_1_count, stats.overall.total_rolls)"></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Distribution Chart -->
            <div class="card">
                <h3>Roll Distribution</h3>
                <div class="d20-chart-wrapper">
                    <div class="d20-y-axis">
                        <template x-for="label in getYAxisLabels()" :key="label">
                            <div class="y-axis-label" x-text="label"></div>
                        </template>
                    </div>
                    <div class="d20-chart-content">
                        <div class="d20-distribution">
                            <template x-for="i in 20" :key="i">
                                <div class="d20-bar-container">
                                    <div
                                        class="d20-bar"
                                        :class="{ 'nat-20': i === 20, 'nat-1': i === 1, 'max-count': isMaxCount(i) }"
                                        :style="`height: ${getDistributionHeight(i)}%`">
                                        <div class="d20-bar-count-inline" x-show="hasCount(i) && !shouldCountBeOutside(i)" x-text="getDistributionCount(i)"></div>
                                        <div class="d20-bar-percent-inline" x-show="hasCount(i) && !shouldCountBeOutside(i) && showPercentages" x-text="getBarPercent(i)"></div>
                                    </div>
                                    <div class="d20-bar-count-outside" x-show="hasCount(i) && shouldCountBeOutside(i)" x-text="getDistributionCount(i)"></div>
                                    <div class="d20-bar-percent-outside" x-show="hasCount(i) && shouldCountBeOutside(i) && showPercentages" x-text="getBarPercent(i)"></div>
                                </div>
                            </template>
                        </div>
                        <div class="d20-x-axis">
                            <template x-for="i in 20" :key="i">
                                <div class="x-axis-label" x-text="i"></div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Command Output Display Box -->
            <div class="card" style="margin-top: 1.5rem;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                    <h3 style="margin: 0;">💬 Command Output</h3>
                    <div style="display: flex; gap: 0.5rem; align-items: center;">
                        <button
                            class="btn-secondary btn-small"
                            @click="copyCommandOutput()"
                            :disabled="!commandOutput"
                            title="Copy to clipboard">
                            <span x-text="copySuccess ? '✅ Copied!' : '📋 Copy'"></span>
                        </button>

                        

                        <button class="btn-secondary btn-small" @click="generateRollsSinceNat20()" title="Generate Rolls Since Nat 20 command">
                            🔢 Last Nat 20
                        </button>
                        <button class="btn-secondary btn-small" @click="generateTotalStats()" title="Generate Total Stats command">
                            📊 Total Stats
                        </button>
                        <button class="btn-secondary btn-small" @click="generateTopRoller()" title="Generate Top Roller command">
                            🏆 Top Roller
                        </button>
                        <button class="btn-secondary btn-small" @click="generateMostRolled()" title="Generate Most Rolled command">
                            🎲 Most Rolled
                        </button>
                    </div>
                </div>

                <textarea
                    x-model="commandOutput"
                    readonly
                    rows="3"
                    :disabled="!commandOutput"
                    @click="$event.target.select()"
                    placeholder="Click a button above to generate output for chosen timeframe..."
                    style="width: 100%; font-size: .75rem; resize: vertical; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-secondary); color: var(--text);"></textarea>
            </div>

            <!-- Top Rollers Leaderboard -->
            <div class="card">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                    <h3 style="margin: 0;">Top Rollers</h3>
                    <input
                        type="text"
                        x-model="usernameSearch"
                        @input="debouncedD20Search()"
                        placeholder="Search username..."
                        class="form-input"
                        style="max-width: 200px;">
                </div>
                <div class="table-scroll-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Rank</th>
                                <th>Username</th>
                                <th>Total Rolls</th>
                                <th>Nat 20s</th>
                                <th>Nat 1s</th>
                                <th>Latest Roll</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="(roller, index) in getFilteredTopRollers()" :key="roller.username">
                                <tr>
                                    <td x-text="roller.rank"></td>
                                    <td x-text="roller.username"></td>
                                    <td x-text="roller.roll_count"></td>
                                    <td class="highlight-success">
                                        <span x-text="roller.nat_20s"></span>
                                        <span x-show="showPercentages" class="stat-percent" x-text="getPercent(roller.nat_20s, roller.roll_count)"></span>
                                    </td>
                                    <td class="highlight-danger">
                                        <span x-text="roller.nat_1s"></span>
                                        <span x-show="showPercentages" class="stat-percent" x-text="getPercent(roller.nat_1s, roller.roll_count)"></span>
                                    </td>
                                    <td>
                                        <span x-text="roller.latest_roll || '-'" :class="{ 'highlight-success': roller.latest_roll === 20, 'highlight-danger': roller.latest_roll === 1 }"></span>
                                    </td>
                                    <td>
                                        <button class="btn-secondary btn-small" @click="generateUserStats(roller)">
                                            💬
                                        </button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- End D20 Statistics -->

            <!-- Hidden Game Section -->
            <div x-data="{ gameOpen: false }" class="hidden-game-section" style="margin-top: 4rem; padding-top: 2rem; border-top: 1px solid #333;">
                <button
                    @click="gameOpen = !gameOpen"
                    class="btn-secondary"
                    style="margin-bottom: 1rem; width: 100%; justify-content: space-between; display: flex; align-items: center;">
                    <span>🎮 Hidden Game: Outlast Trials Liliya hiding mechanic</span>
                    <span x-text="gameOpen ? '▼' : '►'"></span>
                </button>

                <div x-show="gameOpen" x-collapse style="width: 100%;">
                    <iframe
                        src="/game/"
                        style="width: 100%; height: 800px; border: 2px solid #444; border-radius: 8px; background: #1a1a1a;"
                        frameborder="0">
                    </iframe>
                </div>
            </div>
    </main>

    <script src="app.js"></script>
<!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "57e7c03050b4496e8e4527febaf445fa"}'></script><!-- Cloudflare Pages Analytics --></body>
</html>