{% extends "base.html" %}
{% block title %}Dashboard · ABA PayWay Stream Alert{% endblock %}
{% block body %}
<div class="shell">
  <aside class="sidebar">
    <div class="brand">
      <div class="brand-mark">A</div>
      <div class="brand-text">ABA Stream Alert<small>DONATION OVERLAYS</small></div>
    </div>
    <nav class="nav">
      <a href="#connection" class="active">◆ Connection</a>
      <a href="#timing">◆ Alert Timing</a>
      <a href="#overlays">◆ Overlays</a>
      <a href="#voice">◆ Voice &amp; Sound</a>
      <a href="#leaderboard">◆ Leaderboard</a>
      <a href="#recent">◆ Recent</a>
      <a href="#log">◆ Activity Log</a>
    </nav>
    <div class="side-status">
      <div class="dot-row"><span class="dot {{ 'on' if status in ['logged_in','listening'] else '' }}" id="sideDot"></span>
        <span class="lbl" id="sideStatusLbl">{{ status | replace('_',' ') | title }}</span></div>
      <div class="sub">{{ me or 'Not logged in' }}</div>
    </div>
  </aside>

  <div class="main">
    <div class="ticker">
      <div class="ticker-label"><span class="pulse"></span> LIVE</div>
      <div class="ticker-track" id="tickerTrack">
        <span>Waiting for the first donation…</span>
        <span>Waiting for the first donation…</span>
      </div>
    </div>

    <div class="content">
      <div class="page-head">
        <div><h1>Dashboard</h1><p>Connect Telegram, pick a group, and wire up your OBS overlays.</p></div>
        <span class="badge {{ 'on' if status=='listening' else ('off' if status not in ['logged_in','listening'] else '') }}" id="statusBadge">{{ status | replace('_',' ') | title }}</span>
      </div>

      <div class="grid">
        <!-- CONNECTION -->
        <div class="col-8 card" id="connection">
          <h2>TELEGRAM CONNECTION</h2>
          <p class="desc">Read-only login — this account never sends, forwards, or reacts to anything.</p>

          {% if status in ['logged_in','listening'] %}
            <div class="row wrap" style="margin-bottom:14px;">
              <span class="badge on">✓ Logged in as {{ me }}</span>
              <span class="spacer"></span>
              <button class="btn danger small" onclick="logout()">Log out</button>
            </div>

            <div class="field">
              <label>Group to watch</label>
              <div class="row wrap">
                <select id="groupSelect" style="flex:1;">
                  {% if cfg.group_id %}<option value="{{ cfg.group_id }}" selected>{{ cfg.group_title or cfg.group_id }}</option>{% endif %}
                </select>
                <button class="btn small" onclick="loadGroups()">🔄 Load my groups</button>
              </div>
              <div class="help-text" style="margin-top:6px;">Or paste a numeric group ID directly:</div>
              <input type="text" id="groupIdManual" placeholder="-100xxxxxxxxxx" value="{{ cfg.group_id }}" style="margin-top:6px;">
            </div>

            <div class="field">
              <label>Only alert on messages from this username (leave blank for any sender)</label>
              <input type="text" id="sourceUsername" value="{{ cfg.source_username }}" placeholder="PayWayByABA_bot">
            </div>

            <div class="row wrap">
              <label class="row" style="gap:6px; font-size:12px; color:var(--muted);">
                <input type="checkbox" id="debugMode" {{ 'checked' if cfg.debug else '' }} style="width:auto;"> Debug mode (log every message)
              </label>
              <span class="spacer"></span>
              <input type="number" id="khrRate" value="{{ cfg.khr_rate }}" style="width:100px;" title="KHR → USD rate">
              <span style="font-size:11px;color:var(--muted);">KHR→USD rate</span>
            </div>

            <div class="row" style="margin-top:14px;">
              <button class="btn primary" id="startBtn" onclick="startListener()" {{ 'disabled' if status=='listening' else '' }}>▶ Start Listener</button>
              <button class="btn danger" id="stopBtn" onclick="stopListener()" {{ '' if status=='listening' else 'disabled' }}>■ Stop</button>
            </div>
          {% else %}
            <p style="margin-bottom:14px;">Not connected yet.</p>
            <a class="btn primary" href="/login">Log in with Telegram →</a>
          {% endif %}
        </div>

        <div class="col-4 card">
          <h2>QUICK ACTIONS</h2>
          <p class="desc">Fire a fake donation to test your overlay without waiting for a real one.</p>
          <div class="field"><label>Sender name</label><input type="text" id="testSender" value="MEN SOKRAYUK"></div>
          <div class="field"><label>Amount</label><input type="text" id="testAmount" value="$1.00"></div>
          <label class="row" style="gap:6px; font-size:12px; color:var(--muted); margin-bottom:12px;">
            <input type="checkbox" id="testIsTop" style="width:auto;"> Mark as #1 donor (crown)
          </label>
          <button class="btn primary" style="width:100%;" onclick="sendTestAlert()">🧪 Send Test Alert</button>
        </div>

        <!-- TIMING -->
        <div class="col-6 card" id="timing">
          <h2>ALERT TIMING</h2>
          <p class="desc">Delay = wait before an alert appears. Duration = how long it stays up. Donations always queue and play one at a time.</p>
          <div class="row">
            <div class="field" style="flex:1;">
              <label>Delay (seconds)</label>
              <input type="number" id="alertDelay" min="0" max="120" step="0.5" value="{{ cfg.alert_delay }}">
            </div>
            <div class="field" style="flex:1;">
              <label>Duration (seconds)</label>
              <input type="number" id="alertDuration" min="2" max="60" step="0.5" value="{{ cfg.alert_duration }}">
            </div>
          </div>
          <button class="btn" onclick="saveTiming()">Save timing</button>
        </div>

        <div class="col-6 card">
          <h2>ALERT LOGO</h2>
          <p class="desc">Shown above the donor name on the alert overlay.</p>
          <div class="row wrap">
            <input type="file" id="logoFile" accept="image/*">
            <button class="btn small" onclick="uploadLogo()">Upload</button>
          </div>
          {% if cfg.logo_file %}<div class="help-text" style="margin-top:8px;">Current: /static/uploads/{{ cfg.logo_file }}</div>{% endif %}
        </div>

        <!-- OVERLAYS -->
        <div class="col-12 card" id="overlays">
          <h2>DONATION ALERT — CHOOSE A THEME</h2>
          <p class="desc">Add the URL below as a Browser Source in OBS (not "Local file").</p>
          <div class="theme-grid">
            {% for t in alert_themes %}
            <div class="theme-card {{ 'selected' if cfg.alert_theme==t.id else '' }}" data-alert-theme="{{ t.id }}">
              <div class="swatch {{ t.id }}"></div>
              <h3>{{ t.name }}</h3>
              <p>{{ t.blurb }}</p>
              <div class="row wrap" style="gap:6px;">
                <a class="btn small" href="/overlay/alert/{{ t.id }}" target="_blank">Preview</a>
                <button class="btn small" onclick="selectAlertTheme('{{ t.id }}')">Use this</button>
              </div>
            </div>
            {% endfor %}
          </div>
          <div class="url-box" style="margin-top:14px;">
            <code id="alertUrl">{{ host_url }}/overlay/alert/{{ cfg.alert_theme }}</code>
            <button class="btn small" onclick="copyText('alertUrl')">Copy</button>
          </div>

          <h2 style="margin-top:22px;">LEADERBOARD — CHOOSE A THEME</h2>
          <p class="desc">Top donors, ranked, updates live.</p>
          <div class="theme-grid">
            {% for t in leaderboard_themes %}
            <div class="theme-card {{ 'selected' if cfg.leaderboard_theme==t.id else '' }}" data-lb-theme="{{ t.id }}">
              <div class="swatch {{ t.id }}"></div>
              <h3>{{ t.name }}</h3>
              <p>{{ t.blurb }}</p>
              <div class="row wrap" style="gap:6px;">
                <a class="btn small" href="/overlay/leaderboard/{{ t.id }}" target="_blank">Preview</a>
                <button class="btn small" onclick="selectLbTheme('{{ t.id }}')">Use this</button>
              </div>
            </div>
            {% endfor %}
          </div>
          <div class="url-box" style="margin-top:14px;">
            <code id="lbUrl">{{ host_url }}/overlay/leaderboard/{{ cfg.leaderboard_theme }}</code>
            <button class="btn small" onclick="copyText('lbUrl')">Copy</button>
          </div>
        </div>

        <!-- VOICE -->
        <div class="col-8 card" id="voice">
          <h2>AI VOICE (MICROSOFT EDGE NEURAL TTS)</h2>
          <p class="desc">
            {% if edge_tts_available %}✅ edge-tts is installed — 300+ neural voices, including Khmer.
            {% else %}⚠️ Install <code>edge-tts</code> on the server to enable voice.{% endif %}
          </p>
          <label class="row" style="gap:6px; font-size:12px; color:var(--muted); margin-bottom:12px;">
            <input type="checkbox" id="ttsEnabled" {{ 'checked' if cfg.tts_enabled else '' }} style="width:auto;"> Read donations aloud
          </label>
          <div class="field">
            <label>Voice</label>
            <select id="voiceSelect">
              {% for code, label in voices %}
              <option value="{{ code }}" {{ 'selected' if cfg.tts_voice==code else '' }}>{{ label }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="field"><label>Announcement format</label>
            <input type="text" id="ttsFormat" value="{{ cfg.tts_format }}">
            <div class="help-text" style="margin-top:4px;">Use {name}, {amount}, {provider}</div>
          </div>
          <div class="row" style="gap:18px; margin-bottom:12px;">
            <div style="flex:1;"><label class="help-text">Speed <span id="rateVal">{{ cfg.tts_rate }}%</span></label>
              <input type="range" id="ttsRate" min="-50" max="50" value="{{ cfg.tts_rate }}"></div>
            <div style="flex:1;"><label class="help-text">Volume <span id="volVal">{{ cfg.tts_volume }}%</span></label>
              <input type="range" id="ttsVolume" min="-50" max="50" value="{{ cfg.tts_volume }}"></div>
            <div style="flex:1;"><label class="help-text">Pitch <span id="pitchVal">{{ cfg.tts_pitch }}Hz</span></label>
              <input type="range" id="ttsPitch" min="-50" max="50" value="{{ cfg.tts_pitch }}"></div>
          </div>
          <div class="row wrap">
            <input type="text" id="previewText" style="flex:1;" value="Thank you for your donation of five dollars!">
            <button class="btn small" onclick="previewTts()">▶ Preview</button>
            <button class="btn primary small" onclick="saveVoice()">Save voice settings</button>
          </div>
          <audio id="previewAudio" style="display:none;"></audio>
        </div>

        <div class="col-4 card">
          <h2>FALLBACK SOUND</h2>
          <p class="desc">Plays alongside/instead of TTS.</p>
          <div class="row wrap">
            <input type="file" id="soundFile" accept="audio/*">
            <button class="btn small" onclick="uploadSound()">Upload</button>
          </div>
          <div class="field" style="margin-top:12px;">
            <label>Volume ({{ cfg.sound_volume }})</label>
            <input type="range" id="soundVolume" min="0" max="1" step="0.05" value="{{ cfg.sound_volume }}" onchange="saveSoundVolume()">
          </div>
        </div>

        <!-- LEADERBOARD -->
        <div class="col-8 card" id="leaderboard">
          <h2>TOP DONORS</h2>
          <div class="row" style="margin-bottom:10px;">
            <span class="spacer"></span>
            <button class="btn small danger" onclick="resetLeaderboard()">Reset leaderboard</button>
          </div>
          <table>
            <thead><tr><th>#</th><th>Name</th><th>Total</th><th>Payments</th></tr></thead>
            <tbody id="leaderboardBody">
              {% for d in donors %}
              <tr>
                <td><span class="rank-pill {{ 'r1' if d.rank==1 else ('r2' if d.rank==2 else ('r3' if d.rank==3 else 'rn')) }}">{{ d.rank }}</span></td>
                <td>{{ d.name }}</td><td>{{ d.total_display }}</td><td>{{ d.count }}</td>
              </tr>
              {% else %}
              <tr><td colspan="4" style="color:var(--muted); font-family:var(--font-body);">No donations yet…</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        <!-- RECENT -->
        <div class="col-4 card" id="recent">
          <h2>RECENT ALERTS</h2>
          <table>
            <tbody id="recentBody">
              {% for r in recent %}
              <tr><td>{{ r.sender }}</td><td>{{ r.amount }}</td></tr>
              {% else %}
              <tr><td style="color:var(--muted); font-family:var(--font-body);">Nothing yet…</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        <!-- LOG -->
        <div class="col-12 card" id="log">
          <h2>ACTIVITY LOG</h2>
          <div class="log-box" id="logBox"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script>window.CFG = {{ cfg | tojson }};</script>
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
{% endblock %}