{#
  This file is part of g0v/OpenTransLive.
  Copyright (c) 2025 Sean Gau <rrtw0627@gmail.com>
  Licensed under the GNU AGPL v3.0
  See LICENSE for details.
-#}
{% extends "base.html" %}
{% block title %}GT Live 廣田資訊 - Admin Dashboard{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-900 text-gray-100 font-sans">

  <!-- Top bar -->
  <header class="bg-gray-800 border-b border-gray-700 px-6 py-3 flex items-center justify-between">
    <span class="font-bold text-gray-100 tracking-tight">Admin Dashboard</span>
    <div class="flex items-center gap-4">
      <span class="text-xs text-gray-500">{{ current_email }}</span>
      <a href="/user-dashboard" class="nav-link">My Sessions</a>
      <a href="/logout" class="nav-link">Logout</a>
    </div>
  </header>

  <main class="container py-8">

    <div class="mb-6 p-6 dark-card">
      <h3 class="text-md font-semibold text-gray-100 mb-3">Create Account</h3>
      <p class="text-sm text-gray-500 mb-4">Pre-create an account for an email so it exists before the user's first
        login. Optionally grant realtime access immediately.</p>
      <form id="create-user-form" class="flex flex-col sm:flex-row gap-3 sm:items-center">
        <input type="email" id="new-user-email" required placeholder="user@example.com"
          class="flex-grow px-4 py-2 rounded bg-gray-900 border border-gray-700 text-gray-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
        <label class="flex items-center gap-2 text-xs text-gray-400 whitespace-nowrap">
          <input type="checkbox" id="new-user-realtime" class="accent-indigo-600"> Realtime access
        </label>
        <button type="submit"
          class="px-6 py-2 bg-indigo-700 hover:bg-indigo-600 text-indigo-100 font-semibold rounded transition-colors text-sm whitespace-nowrap">
          Create
        </button>
      </form>
    </div>

    <div class="mb-6">
      <h2 class="text-lg font-semibold text-gray-100">User Settings</h2>
      <p class="mt-1 text-sm text-gray-500">
        Toggle realtime transcription access and per-account overrides for AI provider, partial
        interval and max languages per session. Leave provider as <span class="text-gray-400">Default</span> or
        interval blank to use the server config. Provider changes apply to running sessions right away; interval
        applies to newly started transcription.
        Max languages <span class="text-gray-400">0</span> means unlimited; a limit applies immediately to the
        account's open panels and translations (extra languages beyond the first N are ignored).
        Click an email to open that account's daily / monthly usage report.
        Users must log in via <a href="/login" class="underline text-gray-400 hover:text-gray-200">/login</a> before
        they appear here.
      </p>
    </div>

    {% if users %}
    <div class="dark-card overflow-x-auto">
      <table class="w-full text-sm">
        <thead>
          <tr class="border-b border-gray-700 text-left text-xs text-gray-500 uppercase tracking-wider">
            <th class="px-2 py-1 font-semibold">Email</th>
            <th class="px-2 py-1 font-semibold">Last active</th>
            <th class="px-2 py-1 font-semibold">Transcribed</th>
            <th class="px-2 py-1 font-semibold">Sessions</th>
            <th class="px-2 py-1 font-semibold">AI provider</th>
            <th class="px-2 py-1 font-semibold">Interval (s)</th>
            <th class="px-2 py-1 font-semibold" title="Max translate languages per session (0 = unlimited)">Max langs</th>
            <th class="px-2 py-1 font-semibold text-right">Realtime access</th>
          </tr>
        </thead>
        <tbody id="user-table-body">
          {% for user in users %}
          <tr class="border-b border-gray-700 last:border-0" data-email="{{ user.email }}">
            <td class="px-2 py-1 font-mono text-xs break-keep">
              <a href="/dashboard/users/{{ user.email | urlencode }}"
                class="text-indigo-300 underline decoration-gray-600 hover:text-indigo-200"
                title="Open usage report for {{ user.email }}">{{ user.email }}</a>
            </td>
            <td class="px-2 py-1 text-xs text-gray-500">
              {% if user.last_active_at %}
              {{ user.last_active_at[:19].replace('T', ' ') }} UTC
              {% else %}
              —
              {% endif %}
            </td>
            <td class="px-2 py-1 text-xs whitespace-nowrap">
              <a href="/dashboard/users/{{ user.email | urlencode }}"
                class="text-gray-300 hover:text-indigo-200">{{ user.audio_display }}</a>
            </td>
            <td class="px-2 py-1 text-xs text-gray-300">{{ user.session_count }}</td>
            <td class="px-2 py-1">
              <select
                class="provider-select bg-gray-900 border border-gray-700 rounded px-2 py-1 text-xs text-gray-200"
                data-email="{{ user.email }}">
                <option value="" {% if not user.ai_provider %}selected{% endif %}>Default</option>
                {% for p in providers %}
                <option value="{{ p }}" {% if user.ai_provider == p %}selected{% endif %}>{{ p }}</option>
                {% endfor %}
                {% if user.ai_provider and user.ai_provider not in providers %}
                <option value="{{ user.ai_provider }}" disabled selected>{{ user.ai_provider }} (no API key)</option>
                {% endif %}
              </select>
            </td>
            <td class="px-2 py-1">
              <input
                type="number" step="0.1" min="0.1" max="10" placeholder="default"
                value="{{ user.partial_interval if user.partial_interval is not none else '' }}"
                class="interval-input bg-gray-900 border border-gray-700 rounded px-2 py-1 w-20 text-xs text-gray-200"
                data-email="{{ user.email }}">
            </td>
            <td class="px-2 py-1">
              <input
                type="number" step="1" min="0" max="32" placeholder="0"
                value="{{ user.max_languages or 0 }}"
                title="Max translate languages per session (0 = unlimited)"
                class="max-langs-input bg-gray-900 border border-gray-700 rounded px-2 py-1 w-16 text-xs text-gray-200"
                data-email="{{ user.email }}">
            </td>
            <td class="px-2 py-1 text-right">
              <button
                class="realtime-toggle px-3 py-1 rounded text-xs font-semibold transition-colors {% if user.realtime_enabled %}bg-green-700 hover:bg-green-600 text-green-100{% else %}bg-gray-700 hover:bg-gray-600 text-gray-300{% endif %}"
                data-email="{{ user.email }}" data-enabled="{{ 'true' if user.realtime_enabled else 'false' }}">
                {% if user.realtime_enabled %}Enabled{% else %}Disabled{% endif %}
              </button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="dark-card px-6 py-10 text-center text-sm text-gray-500">
      No users yet. Users appear here after logging in at <a href="/login"
        class="underline hover:text-gray-300">/login</a>.
    </div>
    {% endif %}

    <div id="action-status" class="mt-4 text-xs text-gray-500 min-h-4"></div>
  </main>
</div>
{% endblock %}

{% block scripts %}
<script>
  const statusEl = document.getElementById('action-status')

  function setStatus(msg, isError) {
    statusEl.textContent = msg
    statusEl.style.color = isError ? '#f87171' : '#6b7280'
  }

  async function postJson(email, path, payload) {
    const res = await fetch(`/api/users/${encodeURIComponent(email)}/${path}`, {
      method: 'POST',
      credentials: 'same-origin',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    })
    const data = await res.json().catch(() => ({}))
    return { ok: res.ok, data }
  }

  const createUserForm = document.getElementById('create-user-form')
  if (createUserForm) {
    createUserForm.addEventListener('submit', async (e) => {
      e.preventDefault()
      const email = document.getElementById('new-user-email').value.trim()
      const realtime = document.getElementById('new-user-realtime').checked
      if (!email) return
      try {
        const res = await fetch('/api/users', {
          method: 'POST',
          credentials: 'same-origin',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email, realtime_enabled: realtime })
        })
        const data = await res.json().catch(() => ({}))
        if (!res.ok) { setStatus(data.detail || 'Error creating account.', true); return }
        setStatus(data.created ? `Created ${data.email}.` : `${data.email} already exists.`, false)
        if (data.created) setTimeout(() => location.reload(), 800)
      } catch (e) {
        setStatus('Network error.', true)
      }
    })
  }

  document.querySelectorAll('.realtime-toggle').forEach(btn => {
    btn.addEventListener('click', async () => {
      const email = btn.dataset.email
      const currentEnabled = btn.dataset.enabled === 'true'
      const newEnabled = !currentEnabled

      btn.disabled = true
      const prev = btn.textContent
      btn.textContent = '...'

      try {
        const { ok, data } = await postJson(email, 'realtime', { enabled: newEnabled })
        if (!ok) {
          setStatus(data.detail || 'Error updating user.', true)
          btn.textContent = prev
          return
        }
        btn.dataset.enabled = data.realtime_enabled ? 'true' : 'false'
        btn.textContent = data.realtime_enabled ? 'Enabled' : 'Disabled'
        if (data.realtime_enabled) {
          btn.className = 'realtime-toggle px-3 py-1 rounded text-xs font-semibold transition-colors bg-green-700 hover:bg-green-600 text-green-100'
        } else {
          btn.className = 'realtime-toggle px-3 py-1 rounded text-xs font-semibold transition-colors bg-gray-700 hover:bg-gray-600 text-gray-300'
        }
        setStatus(`Updated ${email}.`, false)
      } catch (e) {
        setStatus('Network error.', true)
        btn.textContent = prev
      } finally {
        btn.disabled = false
      }
    })
  })

  async function saveSettings(email, payload, el) {
    el.disabled = true
    try {
      const { ok, data } = await postJson(email, 'settings', payload)
      if (!ok) {
        setStatus(data.detail || 'Error updating user.', true)
        return false
      }
      setStatus(`Updated ${email}.`, false)
      return true
    } catch (e) {
      setStatus('Network error.', true)
      return false
    } finally {
      el.disabled = false
    }
  }

  document.querySelectorAll('.provider-select').forEach(sel => {
    sel.addEventListener('change', () => {
      saveSettings(sel.dataset.email, { ai_provider: sel.value }, sel)
    })
  })

  function debounce(fn, wait) {
    let t
    return (...args) => {
      clearTimeout(t)
      t = setTimeout(() => fn(...args), wait)
    }
  }

  document.querySelectorAll('.interval-input').forEach(input => {
    const save = debounce(() => {
      const raw = input.value.trim()
      saveSettings(input.dataset.email, { partial_interval: raw === '' ? null : raw }, input)
    }, 600)
    input.addEventListener('input', save)
  })

  document.querySelectorAll('.max-langs-input').forEach(input => {
    const save = debounce(async () => {
      // A number input reports '' for unparseable text ('-', '1e'); only a
      // truly empty field means 0 = unlimited.
      if (input.validity.badInput) return
      const raw = input.value.trim()
      const ok = await saveSettings(input.dataset.email, { max_languages: raw === '' ? 0 : raw }, input)
      if (ok && raw === '') input.value = '0'
    }, 600)
    input.addEventListener('input', save)
  })
</script>
{% endblock %}