{#
  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 廣田資訊 - My Sessions{% 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">My Sessions</span>
    <div class="flex items-center gap-4">
      <span class="text-xs text-gray-500">{{ current_email }}</span>
      <a href="/logout" class="nav-link">Logout</a>
    </div>
  </header>

  {% if not is_realtime_enabled %}
  <div class="bg-amber-950 border-b border-amber-800 px-6 py-3 text-sm text-amber-300">
    Your account does not have realtime transcription access. To use the microphone in a panel session, contact an
    administrator to enable it.
  </div>
  {% endif %}

  <main class="container py-8">

    {% include "partials/usage_chart.html" %}

    <!-- API Key & Permissions -->
    <div class="mb-8 p-6 dark-card">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-md font-semibold text-gray-100">API Key &amp; Permissions</h3>
      </div>

      <div class="mb-5">
        <p class="text-xs text-gray-500 uppercase tracking-wider mb-2">Your permissions</p>
        <div class="flex flex-wrap gap-2">
          {% for perm in permissions %}
          <span class="perm-badge px-2 py-1 rounded bg-gray-700 text-gray-200 text-[11px] font-medium" data-perm="{{ perm }}">{{ perm }}</span>
          {% else %}
          <span class="text-xs text-gray-500">No permissions</span>
          {% endfor %}
        </div>
      </div>

      <div>
        <p class="text-xs text-gray-500 uppercase tracking-wider mb-2">API key</p>
        <p class="text-xs text-gray-500 mb-3">One key per account. Use it as <span class="font-mono text-gray-400">Authorization: Bearer &lt;key&gt;</span> for the API, or as the client's <span class="font-mono text-gray-400">API_KEY</span>. The full key is shown only once when generated.</p>

        <div id="apikey-status" class="flex items-center gap-3 mb-3">
          {% if api_key_prefix %}
          <span class="font-mono text-sm text-gray-300">{{ api_key_prefix }}…</span>
          <span class="text-xs text-emerald-400">active</span>
          {% else %}
          <span class="text-sm text-gray-500">No key generated</span>
          {% endif %}
        </div>

        <div id="apikey-reveal" class="hidden mb-3 p-3 rounded bg-gray-900 border border-indigo-700">
          <p class="text-[11px] text-amber-300 mb-2">Copy this now — it won't be shown again.</p>
          <div class="flex items-center gap-2">
            <code id="apikey-plaintext" class="flex-grow font-mono text-xs text-emerald-300 break-all"></code>
            <button type="button" onclick="copyApiKey()" class="px-2 py-1 rounded text-xs bg-gray-700 hover:bg-gray-600 text-gray-200">Copy</button>
          </div>
        </div>

        <div class="flex gap-2">
          <button type="button" id="apikey-generate" onclick="generateApiKey()"
            class="px-4 py-1.5 rounded text-xs font-semibold bg-indigo-700 hover:bg-indigo-600 text-indigo-100 transition-colors">
            {% if api_key_prefix %}Rotate key{% else %}Generate key{% endif %}
          </button>
          {% if api_key_prefix %}
          <button type="button" id="apikey-revoke" onclick="revokeApiKey()"
            class="px-4 py-1.5 rounded text-xs font-semibold bg-red-900 hover:bg-red-800 text-red-200 transition-colors">
            Revoke
          </button>
          {% endif %}
        </div>
      </div>
    </div>

    <h1 class="text-gray-100 mb-8">Session Rooms</h1>
    <div class="mb-8 p-6 dark-card">
      <h3 class="text-md font-semibold text-gray-100 mb-4">Start New Session</h3>
      <form id="create-form" class="flex flex-col sm:flex-row gap-3">
        <div class="flex-grow">
          <input type="text" id="session-id" name="sid"
            class="w-full px-4 py-2 rounded bg-gray-900 border border-gray-700 text-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200 outline-none text-sm"
            placeholder="Session ID" required pattern="[a-zA-Z0-9_-]{4,64}"
            title="Use only letters, numbers, hyphens, and underscores (4-64 characters)">
          <p id="session-id-error" class="mt-1 text-xs text-red-400 hidden"></p>
        </div>
        <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">
          Start Session
        </button>
      </form>
    </div>

    {% if rooms %}
    <div class="dark-card">
      {% for room in rooms %}
      <div class="session-row grid grid-cols-1 md:grid-cols-[minmax(0,1fr)_180px_140px_auto] md:items-center gap-2 md:gap-4 px-4 py-3 border-b border-gray-700 last:border-0">
        <div class="font-mono text-xs text-gray-200 break-all">
          {{ room.sid }}
          {% if room.is_co_owner %}
          <span class="ml-2 inline-block px-1.5 py-0.5 rounded bg-gray-700 text-gray-300 text-[10px] font-sans uppercase tracking-wider align-middle" title="You are a co-owner of this session">Co-owner</span>
          {% endif %}
        </div>
        <div class="text-xs text-gray-500">
          <span class="md:hidden text-gray-600 uppercase tracking-wider mr-2">Created:</span>
          {% if room.created_at %}
          {{ room.created_at[:19].replace('T', ' ') }} UTC
          {% else %}
          &mdash;
          {% endif %}
        </div>
        <div class="flex items-center gap-2">
          <span class="md:hidden text-xs text-gray-600 uppercase tracking-wider mr-1">Audio:</span>
          {% set dur = room.audio_duration_secs or 0 %}
          {% if dur > 0 %}
          <div class="w-6 bg-gray-700 rounded h-1 flex-shrink-0">
            <div class="bg-blue-500 h-1 rounded" style="width: {{ room.audio_pct }}%"></div>
          </div>
          <span class="text-xs text-gray-400 font-mono">{{ (dur // 60)|int }}:{{ '%02d' % ((dur % 60)|int) }}</span>
          {% else %}
          <span class="text-xs text-gray-600">&mdash;</span>
          {% endif %}
        </div>
        <div class="flex items-center justify-start md:justify-end gap-2 flex-wrap mt-1 md:mt-0">
          <a href="/panel/{{ room.sid }}"
            class="px-3 py-1 rounded text-xs font-semibold bg-indigo-700 hover:bg-indigo-600 text-indigo-100 transition-colors">
            Panel
          </a>
          <a href="/edit/{{ room.sid }}"
            class="px-3 py-1 rounded text-xs font-semibold bg-gray-700 hover:bg-gray-600 text-gray-300 transition-colors">
            Edit
          </a>
          {% if not room.is_co_owner %}
          <button onclick="deleteSession('{{ room.sid }}', this)"
            class="px-3 py-1 rounded text-xs font-semibold bg-red-900 hover:bg-red-800 text-red-200 transition-colors">
            Delete
          </button>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="dark-card px-6 py-10 text-center text-sm text-gray-500">
      No sessions yet. Go to <a href="/" class="underline hover:text-gray-300">the homepage</a> to start a session.
    </div>
    {% endif %}

  </main>
</div>
{% endblock %}

{% block scripts %}
<script>
  // Human-readable labels for permission slugs shown as badges.
  const PERM_LABELS = {
    'admin:users': 'Admin · manage users',
    'admin:accounts': 'Admin · create accounts',
    'admin:settings': 'Admin · user settings',
    'room:create': 'Create rooms',
    'room:manage': 'Manage room settings',
    'audio:push': 'Send audio',
    'subtitle:push': 'Send subtitles',
    'room:list': 'List rooms',
  }
  document.querySelectorAll('.perm-badge').forEach(el => {
    const label = PERM_LABELS[el.dataset.perm]
    if (label) el.textContent = label
  })

  async function generateApiKey() {
    const btn = document.getElementById('apikey-generate')
    const existing = btn.textContent.trim().startsWith('Rotate')
    if (existing && !confirm('Rotate your API key? The current key will stop working immediately.')) return
    btn.disabled = true
    try {
      const resp = await fetch('/api/apikey', { method: 'POST' })
      const data = await resp.json().catch(() => ({}))
      if (!resp.ok) { alert('Failed: ' + (data.detail || resp.statusText)); btn.disabled = false; return }
      const reveal = document.getElementById('apikey-reveal')
      document.getElementById('apikey-plaintext').textContent = data.api_key
      reveal.classList.remove('hidden')
      document.getElementById('apikey-status').innerHTML =
        '<span class="font-mono text-sm text-gray-300">' + data.prefix + '…</span>' +
        '<span class="text-xs text-emerald-400 ml-3">active</span>'
      btn.textContent = 'Rotate key'
      btn.disabled = false
    } catch (e) {
      alert('Request failed: ' + e.message)
      btn.disabled = false
    }
  }

  async function revokeApiKey() {
    if (!confirm('Revoke your API key? Any client using it will stop working.')) return
    const btn = document.getElementById('apikey-revoke')
    btn.disabled = true
    try {
      const resp = await fetch('/api/apikey', { method: 'DELETE' })
      if (resp.ok) { location.reload() }
      else { alert('Failed to revoke'); btn.disabled = false }
    } catch (e) { alert('Request failed: ' + e.message); btn.disabled = false }
  }

  function copyApiKey() {
    const text = document.getElementById('apikey-plaintext').textContent
    navigator.clipboard.writeText(text).then(() => {}, () => {})
  }

  async function deleteSession(sid, btn) {
    if (!confirm('Remove "' + sid + '" from My Sessions? Others will be able to claim this room.')) return
    btn.disabled = true
    btn.textContent = 'Deleting...'
    try {
      const resp = await fetch('/api/sessions/' + encodeURIComponent(sid), { method: 'DELETE' })
      if (resp.ok) {
        btn.closest('.session-row').remove()
      } else {
        const data = await resp.json().catch(() => ({}))
        alert('Failed to delete: ' + (data.detail || resp.statusText))
        btn.disabled = false
        btn.textContent = 'Delete'
      }
    } catch (e) {
      alert('Request failed: ' + e.message)
      btn.disabled = false
      btn.textContent = 'Delete'
    }
  }

  const sessionIdInput = document.getElementById('session-id')
  const errorDisplay = document.getElementById('session-id-error')

  const techTerms = [
    "Abstraction", "Agile", "Algorithm", "Apache", "API", "Argument", "Array", "Artifact",
    "Asynchronous", "Authentication", "Authorization", "Back-end", "Backlog", "Bash",
    "Beta", "Binary", "Bitbucket", "Boilerplate", "Boolean", "Branch", "Bug", "Build",
    "Cache", "Callback", "Class", "CLI", "Client", "Closure", "Cloud", "Codebase",
    "Commit", "Compiler", "Concurrency", "Conditional", "Container", "Contributor",
    "CORS", "CRUD", "CSS", "Daemon", "Data-Structure", "Database", "Debugging",
    "Dependency", "Deployment", "DevOps", "Documentation", "DOM", "DRY", "Endpoint",
    "Environment", "Exception", "Expression", "Framework", "Front-end", "Function",
    "Garbage-Collection", "Git", "GitHub", "GitLab", "GPL", "GUI", "Hash", "Headless",
    "Hook", "HTML", "HTTP", "IDE", "Immutable", "Inheritance", "Instance", "Integration",
    "Interface", "Iteration", "JSON", "Kernel", "Library", "License", "Linux", "Linting",
    "Loop", "Maintenance", "Markdown", "Merge-Request", "Middleware", "Minification",
    "Mock", "Module", "Node", "NPM", "Object", "Open-Source", "Package", "Parameter",
    "Patch", "Pipeline", "Pointer", "Production", "Pull-Request", "Query", "Readme",
    "Recursion", "Refactoring", "Regex", "Repository", "REST", "Runtime", "Schema",
    "Script", "Server", "Source-Code", "Sprint", "SQL", "Stack-Overflow", "Syntax",
    "Terminal", "Unit-Test", "Variable", "Version-Control", "Virtual-Machine", "Webhooks"
  ];

  function generateRandomSessionId() {
    const selected = []
    for (let i = 0; i < 3; i++) {
      const randomIndex = Math.floor(Math.random() * techTerms.length)
      selected.push(techTerms[randomIndex])
    }
    return selected.join('-').toLowerCase() + '-' + String(Math.floor(Date.now() / 1000))
  }

  window.addEventListener('DOMContentLoaded', () => {
    if (sessionIdInput && !sessionIdInput.value) {
      sessionIdInput.value = generateRandomSessionId()
    }
  })

  function validateSessionId(sid) {
    if (!errorDisplay || !sessionIdInput) return { valid: true }
    errorDisplay.textContent = ''
    errorDisplay.classList.add('hidden')
    sessionIdInput.classList.remove('border-red-500')

    sid = sid.trim()
    if (!sid) return { valid: false, error: 'Session ID is required' }
    if (sid.length < 4) return { valid: false, error: 'Session ID must be at least 4 characters' }
    if (sid.length > 64) return { valid: false, error: 'Session ID must be 64 characters or less' }

    const validPattern = /^[a-zA-Z0-9_-]+$/
    if (!validPattern.test(sid)) {
      return { valid: false, error: 'Session ID can only contain letters, numbers, hyphens (-), and underscores (_)' }
    }
    return { valid: true }
  }

  if (sessionIdInput) {
    sessionIdInput.addEventListener('input', function () {
      const sid = this.value.trim()
      if (sid) {
        const result = validateSessionId(sid)
        if (!result.valid) {
          errorDisplay.textContent = result.error
          errorDisplay.classList.remove('hidden')
          sessionIdInput.classList.add('border-red-500')
        } else {
          errorDisplay.classList.add('hidden')
          sessionIdInput.classList.remove('border-red-500')
        }
      }
    })
  }

  const createForm = document.getElementById('create-form')
  if (createForm) {
    createForm.addEventListener('submit', function (e) {
      e.preventDefault()
      const sid = sessionIdInput.value.trim()
      const result = validateSessionId(sid)

      if (!result.valid) {
        if (errorDisplay && sessionIdInput) {
          errorDisplay.textContent = result.error
          errorDisplay.classList.remove('hidden')
          sessionIdInput.classList.add('border-red-500')
          sessionIdInput.focus()
        }
        return
      }
      window.location.href = `/panel/${encodeURIComponent(sid)}`
    })
  }
</script>
{% endblock %}