Deaf_Transcription_Service/bridge/admin.py

#!/usr/bin/env python3
"""
admin.py — Speaker Admin Web Server

Local web interface for managing speaker names, voice recordings,
and test recording playback.
Runs on port 8001 alongside bridge.py.

Access at: http://localhost:8001
"""

import asyncio
import json
import shutil
from pathlib import Path

from fastapi import FastAPI, HTTPException, UploadFile, File
from fastapi.responses import HTMLResponse, FileResponse
from pydantic import BaseModel
import uvicorn
import websockets

SPEAKERS_FILE       = Path(__file__).parent / "speakers.json"
RECORDINGS_DIR      = Path(__file__).parent / "recordings"
TEST_RECORDINGS_DIR = Path(__file__).parent / "test_recordings"
RECORDINGS_DIR.mkdir(exist_ok=True)
TEST_RECORDINGS_DIR.mkdir(exist_ok=True)

ALLOWED_AUDIO_EXTS = {".wav", ".mp3", ".m4a", ".ogg", ".flac", ".webm", ".aiff"}
WS_URL = "ws://localhost:8000/asr"

app = FastAPI(title="Speaker Admin")

# ── Speaker data helpers ──────────────────────────────────────────────────────

def _load() -> dict[str, str]:
    if SPEAKERS_FILE.exists():
        try:
            return json.loads(SPEAKERS_FILE.read_text(encoding="utf-8"))
        except Exception:
            pass
    return {}


def _save(data: dict[str, str]) -> None:
    SPEAKERS_FILE.write_text(
        json.dumps(data, indent=2, ensure_ascii=False), encoding="utf-8"
    )


def _recording_path(sid: str) -> Path | None:
    for ext in (".wav", ".mp3", ".m4a", ".ogg", ".webm", ".flac"):
        p = RECORDINGS_DIR / f"{sid}{ext}"
        if p.exists():
            return p
    return None


# ── Speaker API ───────────────────────────────────────────────────────────────

class NameBody(BaseModel):
    name: str

class AddBody(BaseModel):
    id: str
    name: str


@app.get("/api/speakers")
def api_list():
    speakers = _load()
    return {"speakers": [
        {"id": k, "name": v, "has_recording": _recording_path(k) is not None}
        for k, v in sorted(speakers.items())
    ]}


@app.post("/api/speakers")
def api_add(body: AddBody):
    speakers = _load()
    sid = body.id.strip()
    if not sid:
        raise HTTPException(400, "Speaker ID cannot be empty")
    if sid in speakers:
        raise HTTPException(400, f"'{sid}' already exists")
    speakers[sid] = body.name.strip()
    _save(speakers)
    return {"ok": True, "id": sid, "name": speakers[sid]}


@app.put("/api/speakers/{sid}")
def api_update(sid: str, body: NameBody):
    name = body.name.strip()
    if not name:
        raise HTTPException(400, "Name cannot be empty")
    speakers = _load()
    speakers[sid] = name
    _save(speakers)
    return {"ok": True}


@app.delete("/api/speakers/{sid}")
def api_delete(sid: str):
    speakers = _load()
    speakers.pop(sid, None)
    _save(speakers)
    rec = _recording_path(sid)
    if rec:
        rec.unlink()
    return {"ok": True}


@app.post("/api/speakers/{sid}/recording")
async def api_upload(sid: str, file: UploadFile = File(...)):
    suffix = Path(file.filename or "audio.wav").suffix.lower() or ".wav"
    rec = _recording_path(sid)
    if rec:
        rec.unlink()
    out = RECORDINGS_DIR / f"{sid}{suffix}"
    with out.open("wb") as f:
        shutil.copyfileobj(file.file, f)
    speakers = _load()
    if sid not in speakers:
        speakers[sid] = sid
        _save(speakers)
    size_kb = round(out.stat().st_size / 1024)
    return {"ok": True, "file": out.name, "kb": size_kb}


@app.get("/api/speakers/{sid}/recording")
def api_playback(sid: str):
    rec = _recording_path(sid)
    if not rec:
        raise HTTPException(404, "No recording found")
    return FileResponse(rec)


# ── Test playback state ───────────────────────────────────────────────────────

_playback_task: asyncio.Task | None = None
_playback_status: dict = {
    "state":    "idle",   # idle | loading | playing | done | error
    "file":     None,
    "progress": 0,        # 0–100
    "elapsed":  0.0,      # seconds streamed so far
    "duration": 0.0,      # total file duration in seconds
    "error":    None,
}


BRIDGE_INJECT_URL = "http://127.0.0.1:8002/inject"

async def _stream_file(filepath: Path, speed: float) -> None:
    global _playback_status
    try:
        import miniaudio
        import httpx
    except ImportError as e:
        _playback_status.update({"state": "error", "error": f"Missing package: {e}"})
        return

    try:
        _playback_status["state"] = "loading"
        info     = miniaudio.get_file_info(str(filepath))
        duration = info.duration
        _playback_status.update({
            "state": "playing", "duration": round(duration, 1),
            "elapsed": 0.0, "progress": 0,
        })

        chunk_frames = 4096
        chunk_secs   = chunk_frames / 16000
        elapsed      = 0.0

        stream = miniaudio.stream_file(
            str(filepath),
            output_format=miniaudio.SampleFormat.SIGNED16,
            nchannels=1,
            sample_rate=16000,
            frames_to_read=chunk_frames,
        )

        async with httpx.AsyncClient() as client:
            for chunk in stream:
                await client.post(BRIDGE_INJECT_URL, content=bytes(chunk))
                elapsed += chunk_secs
                _playback_status["elapsed"]  = round(elapsed, 1)
                _playback_status["progress"] = (
                    min(99, round(elapsed / duration * 100)) if duration else 0
                )
                await asyncio.sleep(chunk_secs / speed)

        _playback_status.update({
            "state": "done", "progress": 100, "elapsed": round(duration, 1),
        })
    except asyncio.CancelledError:
        _playback_status.update({
            "state": "idle", "file": None, "progress": 0, "elapsed": 0.0,
        })
    except Exception as exc:
        _playback_status.update({"state": "error", "error": str(exc), "progress": 0})
        print(f"[Playback] {exc}")
# ── Test recording API ────────────────────────────────────────────────────────

@app.post("/api/test/upload")
async def api_test_upload(file: UploadFile = File(...)):
    suffix = Path(file.filename or "recording.wav").suffix.lower()
    if suffix not in ALLOWED_AUDIO_EXTS:
        raise HTTPException(400, f"Unsupported format '{suffix}'")
    # Sanitise filename — replace spaces with underscores
    stem = Path(file.filename).stem[:80].replace(" ", "_")
    out  = TEST_RECORDINGS_DIR / f"{stem}{suffix}"
    try:
        with out.open("wb") as f:
            shutil.copyfileobj(file.file, f)
    except OSError as e:
        raise HTTPException(500, f"Could not save file: {e}")
    return {"ok": True, "filename": out.name, "mb": round(out.stat().st_size / 1024 / 1024, 1)}


@app.get("/api/test/files")
def api_test_list():
    files = []
    for p in sorted(TEST_RECORDINGS_DIR.iterdir()):
        if p.suffix.lower() in ALLOWED_AUDIO_EXTS:
            files.append({
                "filename": p.name,
                "mb": round(p.stat().st_size / 1024 / 1024, 1),
            })
    return {"files": files}


@app.delete("/api/test/files/{filename:path}")
def api_test_delete(filename: str):
    p = TEST_RECORDINGS_DIR / Path(filename).name
    try:
        if p.exists():
            p.unlink()
    except OSError as e:
        raise HTTPException(500, f"Could not delete: {e}")
    return {"ok": True}


class PlaybackBody(BaseModel):
    filename: str
    speed: float = 1.0


@app.post("/api/test/start")
async def api_test_start(body: PlaybackBody):
    global _playback_task
    if _playback_task and not _playback_task.done():
        raise HTTPException(409, "Playback already running — stop it first")
    p = TEST_RECORDINGS_DIR / Path(body.filename).name
    if not p.exists():
        raise HTTPException(404, "File not found")
    speed = max(0.25, min(8.0, body.speed))
    _playback_status.update({"state": "starting", "file": p.name, "progress": 0, "error": None})
    _playback_task = asyncio.create_task(_stream_file(p, speed))
    return {"ok": True}


@app.post("/api/test/stop")
async def api_test_stop():
    global _playback_task
    if _playback_task and not _playback_task.done():
        _playback_task.cancel()
        try:
            await _playback_task
        except asyncio.CancelledError:
            pass
    _playback_status.update({"state": "idle", "file": None, "progress": 0, "elapsed": 0.0})
    return {"ok": True}


@app.get("/api/test/status")
def api_test_status():
    return _playback_status


# ── Web UI ────────────────────────────────────────────────────────────────────

HTML = """<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meeting Transcription for the Deaf</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body { font-family: system-ui, sans-serif; background: #f0f4f8; color: #1e293b; }
  header {
    background: #1e3a5f; color: white; padding: 16px 24px;
    display: flex; align-items: center; gap: 16px;
  }
  header h1 { font-size: 1.2rem; font-weight: 600; flex: 1; }
  header small { opacity: .7; font-size: .8rem; }

  .toolbar {
    background: white; padding: 12px 24px;
    display: flex; gap: 12px; align-items: center;
    border-bottom: 1px solid #e2e8f0;
  }
  .toolbar input[type=search] {
    flex: 1; max-width: 340px; padding: 8px 12px;
    border: 1px solid #cbd5e1; border-radius: 6px; font-size: .95rem;
  }
  .count { color: #64748b; font-size: .9rem; margin-left: auto; }

  .btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 6px; border: none;
    cursor: pointer; font-size: .9rem; font-weight: 500; transition: filter .15s;
  }
  .btn:hover:not(:disabled) { filter: brightness(.92); }
  .btn:disabled { opacity: .45; cursor: not-allowed; }
  .btn-primary  { background: #2563eb; color: white; }
  .btn-danger   { background: #dc2626; color: white; }
  .btn-ghost    { background: #e2e8f0; color: #334155; }
  .btn-sm { padding: 4px 10px; font-size: .82rem; }

  table { width: 100%; border-collapse: collapse; background: white; }
  th {
    text-align: left; padding: 10px 16px; font-size: .8rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
  }
  td { padding: 10px 16px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
  tr:hover td { background: #f8fafc; }
  tr.hidden { display: none; }

  .sid { font-family: monospace; font-size: .85rem; color: #475569; }

  .name-cell { display: flex; align-items: center; gap: 8px; }
  .name-display { cursor: pointer; flex: 1; }
  .name-display:hover { text-decoration: underline; }
  .name-input {
    flex: 1; padding: 4px 8px; border: 1px solid #2563eb;
    border-radius: 4px; font-size: .95rem; outline: none;
  }

  .rec-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .75rem; padding: 2px 8px; border-radius: 999px;
    font-weight: 500;
  }
  .rec-yes { background: #dcfce7; color: #166534; }
  .rec-no  { background: #f1f5f9; color: #94a3b8; }

  .actions { display: flex; gap: 6px; }

  /* Modal */
  .modal-bg {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 100;
    align-items: center; justify-content: center;
  }
  .modal-bg.open { display: flex; }
  .modal {
    background: white; border-radius: 10px; padding: 28px;
    width: 420px; max-width: 95vw; box-shadow: 0 20px 60px rgba(0,0,0,.25);
  }
  .modal h2 { font-size: 1.1rem; margin-bottom: 16px; }
  .field { margin-bottom: 14px; }
  .field label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: 4px; }
  .field input {
    width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1;
    border-radius: 6px; font-size: .95rem;
  }
  .field input:focus { outline: 2px solid #2563eb; border-color: transparent; }
  .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

  /* Upload drop zone */
  .upload-area {
    border: 2px dashed #cbd5e1; border-radius: 8px; padding: 16px;
    text-align: center; cursor: pointer; transition: border-color .2s;
    color: #64748b; font-size: .9rem;
  }
  .upload-area.drag { border-color: #2563eb; background: #eff6ff; }
  .upload-area input[type=file] { display: none; }

  /* Audio player */
  .audio-player { width: 180px; height: 32px; }

  /* Toast */
  #toast {
    position: fixed; bottom: 24px; right: 24px;
    background: #1e293b; color: white; padding: 10px 18px;
    border-radius: 8px; font-size: .9rem; transform: translateY(80px);
    transition: transform .25s; z-index: 200; pointer-events: none;
  }
  #toast.show { transform: translateY(0); }
  #toast.error { background: #dc2626; }

  .container { max-width: 1100px; margin: 0 auto; padding: 24px; }

  audio { vertical-align: middle; }

  /* ── Test Playback card ─────────────────────────────── */
  .pb-card {
    background: white; border-radius: 8px; margin-top: 20px;
    border: 1px solid #e2e8f0; overflow: hidden;
  }
  .pb-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; cursor: pointer; font-weight: 600; font-size: 1rem;
    background: #f8fafc; border-bottom: 1px solid #e2e8f0; user-select: none;
  }
  .pb-card-header:hover { background: #f1f5f9; }
  #pb-body { padding: 20px; }
  .pb-hint { color: #64748b; font-size: .88rem; margin-bottom: 16px; line-height: 1.5; }

  .pb-layout { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
  .pb-upload  { flex: 1; min-width: 260px; }
  .pb-controls { min-width: 210px; display: flex; flex-direction: column; gap: 12px; }

  .pb-select {
    width: 100%; padding: 7px 10px; border: 1px solid #cbd5e1;
    border-radius: 6px; font-size: .9rem; background: white;
  }
  .pb-label { font-size: .85rem; font-weight: 500; display: block; margin-bottom: 4px; }

  .pb-status-bar { margin-top: 12px; }
  .pb-status-row {
    display: flex; justify-content: space-between;
    font-size: .85rem; margin-bottom: 5px; min-height: 18px;
  }
  .pb-progress-track {
    height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden;
  }
  .pb-progress-fill {
    height: 100%; background: #2563eb; border-radius: 999px;
    width: 0%; transition: width .8s linear;
  }
  .pb-note { font-size: .78rem; color: #94a3b8; margin-top: 10px; }
  .pb-error { color: #dc2626; }
</style>
</head>
<body>

<header>
  <div>
    <h1>&#127908; Speaker Admin</h1>
    <small>Meeting Transcription for the Deaf — Speaker Name &amp; Voice Library</small>
  </div>
</header>

<div class="toolbar">
  <input type="search" id="search" placeholder="Search by ID or name…" oninput="filterTable()">
  <button class="btn btn-primary" onclick="openAddModal()">&#43; Add Speaker</button>
  <span class="count" id="count"></span>
</div>

<div class="container">

  <!-- Speaker table -->
  <table id="table">
    <thead>
      <tr>
        <th>Speaker ID</th>
        <th>Friendly Name</th>
        <th>Voice Sample</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody id="tbody"></tbody>
  </table>

  <!-- Test Playback card -->
  <div class="pb-card">
    <div class="pb-card-header" onclick="togglePbCard()">
      <span>&#127911; Test Recording Playback</span>
      <span id="pb-chevron">&#9660;</span>
    </div>
    <div id="pb-body">
      <p class="pb-hint">
        Upload a full church service recording (WAV, MP3, FLAC, OGG, M4A) to test the
        transcription pipeline offline. The file streams to WhisperLiveKit exactly as a
        live microphone would — results appear on the e-ink display in real time.
      </p>

      <div class="pb-layout">
        <!-- Upload drop zone -->
        <div class="pb-upload">
          <div class="upload-area" id="test-drop"
               ondragover="pbDragOver(event)" ondragleave="pbDragLeave()"
               ondrop="pbDrop(event)"
               onclick="document.getElementById('test-file-input').click()">
            <input type="file" id="test-file-input" accept="audio/*"
                   onchange="pbUpload(this.files[0])">
            <div>&#8679; Drop a recording here, or click to browse</div>
            <div style="font-size:.78rem;margin-top:4px;color:#94a3b8">
              WAV &middot; MP3 &middot; FLAC &middot; OGG &middot; M4A
            </div>
          </div>
          <div id="test-upload-status" style="min-height:20px;font-size:.85rem;margin-top:8px"></div>
        </div>

        <!-- Playback controls -->
        <div class="pb-controls">
          <div>
            <span class="pb-label">Playback Speed</span>
            <select id="pb-speed" class="pb-select">
              <option value="0.5">0.5&times; (half speed)</option>
              <option value="1">1&times; real-time</option>
              <option value="2">2&times; faster</option>
              <option value="4" selected>4&times; quick review</option>
              <option value="8">8&times; very fast</option>
            </select>
          </div>
          <button id="pb-stop-btn" class="btn btn-danger" onclick="pbStop()" disabled>
            &#9632; Stop Playback
          </button>
        </div>
      </div>

      <!-- Uploaded test files -->
      <table id="test-table">
        <thead>
          <tr>
            <th>Recording File</th>
            <th style="width:80px">Size</th>
            <th style="width:140px">Actions</th>
          </tr>
        </thead>
        <tbody id="test-tbody">
          <tr id="test-empty-row">
            <td colspan="3" style="color:#94a3b8;padding:16px 16px">
              No recordings uploaded yet
            </td>
          </tr>
        </tbody>
      </table>

      <!-- Status bar -->
      <div class="pb-status-bar">
        <div class="pb-status-row">
          <span id="pb-status-text" style="color:#64748b">Idle</span>
          <span id="pb-time-text" style="color:#64748b"></span>
        </div>
        <div class="pb-progress-track">
          <div class="pb-progress-fill" id="pb-fill"></div>
        </div>
      </div>

      <p class="pb-note">
        While a test recording plays, the live microphone in bridge.py continues to run.
        Keep the room quiet during testing to avoid mixing live audio with the recording.
      </p>
    </div>
  </div>

</div><!-- /container -->

<!-- Add speaker modal -->
<div class="modal-bg" id="add-modal" onclick="closeAddModal(event)">
  <div class="modal">
    <h2>Add Speaker</h2>
    <div class="field">
      <label>Speaker ID
        <span style="color:#64748b;font-weight:normal;font-size:.8rem">
          (e.g. SPEAKER_00, or any unique key)
        </span>
      </label>
      <input id="new-id" placeholder="SPEAKER_00">
    </div>
    <div class="field">
      <label>Friendly Name</label>
      <input id="new-name" placeholder="Pastor John">
    </div>
    <div class="modal-actions">
      <button class="btn btn-ghost" onclick="closeAddModal()">Cancel</button>
      <button class="btn btn-primary" onclick="addSpeaker()">Add</button>
    </div>
  </div>
</div>

<!-- Voice sample upload modal -->
<div class="modal-bg" id="upload-modal" onclick="closeUploadModal(event)">
  <div class="modal">
    <h2 id="upload-title">Upload Voice Sample</h2>
    <p style="color:#64748b;font-size:.85rem;margin-bottom:12px">
      Upload a 10–60 second clear speech recording.<br>
      Supported: WAV, MP3, M4A, OGG, FLAC, WebM
    </p>
    <div class="upload-area" id="drop-zone"
         ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"
         ondrop="onDrop(event)" onclick="document.getElementById('file-input').click()">
      <input type="file" id="file-input" accept="audio/*" onchange="uploadFile(this.files[0])">
      <div>&#127926; Drag &amp; drop audio here, or click to browse</div>
    </div>
    <div id="upload-status" style="margin-top:10px;font-size:.85rem;color:#166534"></div>
    <div class="modal-actions">
      <button class="btn btn-ghost" onclick="closeUploadModal()">Close</button>
    </div>
  </div>
</div>

<div id="toast"></div>

<script>
let speakers    = [];
let uploadTarget = null;

// ── Speaker table ─────────────────────────────────────────────────────────────

async function load() {
  const res  = await fetch('/api/speakers');
  const data = await res.json();
  speakers = data.speakers;
  render();
}

function render() {
  const tbody = document.getElementById('tbody');
  tbody.innerHTML = '';
  speakers.forEach(s => tbody.appendChild(makeRow(s)));
  document.getElementById('count').textContent =
    `${speakers.length} speaker${speakers.length !== 1 ? 's' : ''}`;
  filterTable();
}

function makeRow(s) {
  const tr = document.createElement('tr');
  tr.dataset.id   = s.id;
  tr.dataset.name = s.name.toLowerCase();

  const recHtml = s.has_recording
    ? `<span class="rec-badge rec-yes">&#9654; Recorded</span>
       <audio class="audio-player" controls preload="none"
         src="/api/speakers/${encodeURIComponent(s.id)}/recording"></audio>`
    : `<span class="rec-badge rec-no">No sample</span>`;

  tr.innerHTML = `
    <td class="sid">${esc(s.id)}</td>
    <td>
      <div class="name-cell">
        <span class="name-display" onclick="startEdit(this, '${esc(s.id)}')"
              title="Click to edit">${esc(s.name)}</span>
        <input class="name-input" style="display:none"
               onblur="saveEdit(this,'${esc(s.id)}')"
               onkeydown="nameKeydown(event,this,'${esc(s.id)}')">
      </div>
    </td>
    <td>${recHtml}</td>
    <td>
      <div class="actions">
        <button class="btn btn-ghost btn-sm"
                onclick="openUploadModal('${esc(s.id)}', '${esc(s.name)}')">
          &#127926; ${s.has_recording ? 'Replace' : 'Upload'}
        </button>
        <button class="btn btn-danger btn-sm"
                onclick="deleteSpeaker('${esc(s.id)}')">&#128465;</button>
      </div>
    </td>`;
  return tr;
}

function esc(str) {
  return String(str)
    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
    .replace(/"/g,'&quot;').replace(/'/g,'&#39;');
}

function filterTable() {
  const q = document.getElementById('search').value.toLowerCase().trim();
  let visible = 0;
  document.querySelectorAll('#tbody tr').forEach(tr => {
    const match = !q || tr.dataset.id.includes(q) || tr.dataset.name.includes(q);
    tr.classList.toggle('hidden', !match);
    if (match) visible++;
  });
  document.getElementById('count').textContent =
    q ? `${visible} of ${speakers.length} speakers` : `${speakers.length} speakers`;
}

function startEdit(span, id) {
  const input = span.nextElementSibling;
  input.value = span.textContent;
  span.style.display = 'none';
  input.style.display = '';
  input.focus();
  input.select();
}

function nameKeydown(e, input, id) {
  if (e.key === 'Enter')  { input.blur(); }
  if (e.key === 'Escape') { cancelEdit(input); }
}

function cancelEdit(input) {
  const span = input.previousElementSibling;
  input.style.display = 'none';
  span.style.display = '';
}

async function saveEdit(input, id) {
  const name = input.value.trim();
  const span  = input.previousElementSibling;
  if (!name || name === span.textContent) { cancelEdit(input); return; }
  const res = await fetch(`/api/speakers/${encodeURIComponent(id)}`, {
    method: 'PUT',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({name})
  });
  if (res.ok) {
    span.textContent = name;
    const tr = input.closest('tr');
    tr.dataset.name = name.toLowerCase();
    toast('Saved');
  } else {
    toast('Save failed', true);
  }
  cancelEdit(input);
}

function openAddModal() {
  const nums = speakers
    .filter(s => /^SPEAKER_\\d+$/.test(s.id))
    .map(s => parseInt(s.id.split('_')[1]));
  const next = nums.length ? Math.max(...nums) + 1 : 0;
  document.getElementById('new-id').value   = `SPEAKER_${String(next).padStart(2,'0')}`;
  document.getElementById('new-name').value = '';
  document.getElementById('add-modal').classList.add('open');
  setTimeout(() => document.getElementById('new-name').focus(), 50);
}

function closeAddModal(e) {
  if (!e || e.target === document.getElementById('add-modal'))
    document.getElementById('add-modal').classList.remove('open');
}

async function addSpeaker() {
  const id   = document.getElementById('new-id').value.trim();
  const name = document.getElementById('new-name').value.trim();
  if (!id || !name) { toast('ID and name are required', true); return; }
  const res = await fetch('/api/speakers', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({id, name})
  });
  if (res.ok) {
    closeAddModal();
    toast(`Added ${name}`);
    await load();
  } else {
    const err = await res.json().catch(() => ({detail:'Error'}));
    toast(err.detail || 'Failed', true);
  }
}

async function deleteSpeaker(id) {
  const s = speakers.find(x => x.id === id);
  if (!confirm(`Remove "${s?.name || id}" from the speaker list?`)) return;
  const res = await fetch(`/api/speakers/${encodeURIComponent(id)}`, {method:'DELETE'});
  if (res.ok) { toast('Removed'); await load(); }
  else        { toast('Delete failed', true); }
}

function openUploadModal(id, name) {
  uploadTarget = id;
  document.getElementById('upload-title').textContent = `Voice Sample — ${name}`;
  document.getElementById('upload-status').textContent = '';
  document.getElementById('file-input').value = '';
  document.getElementById('upload-modal').classList.add('open');
}

function closeUploadModal(e) {
  if (!e || e.target === document.getElementById('upload-modal')) {
    document.getElementById('upload-modal').classList.remove('open');
    uploadTarget = null;
    load();
  }
}

function onDragOver(e)  { e.preventDefault(); document.getElementById('drop-zone').classList.add('drag'); }
function onDragLeave()  { document.getElementById('drop-zone').classList.remove('drag'); }
function onDrop(e)      { e.preventDefault(); onDragLeave(); uploadFile(e.dataTransfer.files[0]); }

async function uploadFile(file) {
  if (!file || !uploadTarget) return;
  const status = document.getElementById('upload-status');
  status.style.color = '#2563eb';
  status.textContent = `Uploading ${file.name} (${Math.round(file.size/1024)} KB)…`;
  const form = new FormData();
  form.append('file', file);
  const res = await fetch(`/api/speakers/${encodeURIComponent(uploadTarget)}/recording`, {
    method: 'POST', body: form
  });
  if (res.ok) {
    const data = await res.json();
    status.style.color = '#166534';
    status.textContent = `✓ Saved — ${data.file} (${data.kb} KB)`;
    toast('Recording saved');
  } else {
    status.style.color = '#dc2626';
    status.textContent = 'Upload failed';
    toast('Upload failed', true);
  }
}

// ── Toast ─────────────────────────────────────────────────────────────────────

let toastTimer;
function toast(msg, error = false) {
  const el = document.getElementById('toast');
  el.textContent = msg;
  el.className = 'show' + (error ? ' error' : '');
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => el.className = '', 2500);
}

// ── Test Playback ─────────────────────────────────────────────────────────────

let pbExpanded  = true;
let pbPollTimer = null;
let pbFiles     = [];

function togglePbCard() {
  pbExpanded = !pbExpanded;
  document.getElementById('pb-body').style.display    = pbExpanded ? '' : 'none';
  document.getElementById('pb-chevron').textContent   = pbExpanded ? '▼' : '▶';
}

async function loadTestFiles() {
  try {
    const res  = await fetch('/api/test/files');
    const data = await res.json();
    pbFiles = data.files;
  } catch { pbFiles = []; }
  renderTestFiles();
}

function renderTestFiles() {
  const tbody = document.getElementById('test-tbody');
  const empty = document.getElementById('test-empty-row');
  tbody.innerHTML = '';
  if (pbFiles.length === 0) {
    tbody.appendChild(empty);
    return;
  }
  pbFiles.forEach(f => tbody.appendChild(makeTestRow(f)));
}

function makeTestRow(f) {
  const tr = document.createElement('tr');
  tr.innerHTML = `
    <td style="font-family:monospace;font-size:.88rem">${esc(f.filename)}</td>
    <td style="color:#64748b;white-space:nowrap">${f.mb} MB</td>
    <td>
      <div class="actions">
        <button class="btn btn-primary btn-sm"
                onclick="pbStart('${esc(f.filename)}')">&#9654; Play</button>
        <button class="btn btn-danger btn-sm"
                onclick="pbDeleteFile('${esc(f.filename)}')">&#128465;</button>
      </div>
    </td>`;
  return tr;
}

function pbDragOver(e) {
  e.preventDefault();
  document.getElementById('test-drop').classList.add('drag');
}
function pbDragLeave() {
  document.getElementById('test-drop').classList.remove('drag');
}
function pbDrop(e) {
  e.preventDefault();
  pbDragLeave();
  pbUpload(e.dataTransfer.files[0]);
}

async function pbUpload(file) {
  if (!file) return;
  const status = document.getElementById('test-upload-status');
  status.style.color   = '#2563eb';
  status.textContent   = `Uploading ${file.name} (${(file.size/1024/1024).toFixed(1)} MB)…`;
  const form = new FormData();
  form.append('file', file);
  const res = await fetch('/api/test/upload', { method: 'POST', body: form });
  if (res.ok) {
    const d = await res.json();
    status.style.color = '#166534';
    status.textContent = `✓ ${d.filename} (${d.mb} MB)`;
    toast('Recording uploaded');
    document.getElementById('test-file-input').value = '';
    await loadTestFiles();
  } else {
    const err = await res.json().catch(() => ({detail: 'Upload failed'}));
    status.style.color = '#dc2626';
    status.textContent = err.detail || 'Upload failed';
    toast(err.detail || 'Upload failed', true);
  }
}

async function pbStart(filename) {
  const speed = parseFloat(document.getElementById('pb-speed').value);
  const res = await fetch('/api/test/start', {
    method:  'POST',
    headers: {'Content-Type': 'application/json'},
    body:    JSON.stringify({ filename, speed }),
  });
  if (res.ok) {
    document.getElementById('pb-stop-btn').disabled = false;
    toast(`Playing at ${speed}×`);
    pbStartPoll();
  } else {
    const err = await res.json().catch(() => ({detail: 'Failed to start'}));
    toast(err.detail || 'Failed to start', true);
  }
}

async function pbStop() {
  const res = await fetch('/api/test/stop', { method: 'POST' });
  pbStopPoll();
  if (res.ok) toast('Playback stopped');
  setPbIdle();
}

async function pbDeleteFile(filename) {
  if (!confirm(`Delete "${filename}"?`)) return;
  await fetch(`/api/test/files/${encodeURIComponent(filename)}`, { method: 'DELETE' });
  toast('Deleted');
  await loadTestFiles();
}

function pbStartPoll() {
  pbStopPoll();
  pbPollTimer = setInterval(pbPoll, 1000);
  pbPoll();
}

function pbStopPoll() {
  if (pbPollTimer) { clearInterval(pbPollTimer); pbPollTimer = null; }
}

async function pbPoll() {
  let data;
  try {
    const res = await fetch('/api/test/status');
    data = await res.json();
  } catch { return; }

  const fill     = document.getElementById('pb-fill');
  const statusEl = document.getElementById('pb-status-text');
  const timeEl   = document.getElementById('pb-time-text');

  fill.style.width = (data.progress || 0) + '%';

  const elapsed  = data.elapsed  ? fmtTime(data.elapsed)  : '';
  const duration = data.duration ? fmtTime(data.duration) : '';

  if (data.state === 'loading' || data.state === 'starting') {
    statusEl.className   = '';
    statusEl.textContent = 'Loading file…';
    timeEl.textContent   = '';

  } else if (data.state === 'playing') {
    statusEl.className   = '';
    statusEl.textContent = `Playing: ${data.file}`;
    timeEl.textContent   = elapsed && duration ? `${elapsed} / ${duration}` : '';

  } else if (data.state === 'done') {
    statusEl.className   = '';
    statusEl.textContent = `Done: ${data.file}`;
    timeEl.textContent   = duration;
    fill.style.width     = '100%';
    pbStopPoll();
    document.getElementById('pb-stop-btn').disabled = true;

  } else if (data.state === 'error') {
    statusEl.className   = 'pb-error';
    statusEl.textContent = `Error: ${data.error}`;
    timeEl.textContent   = '';
    pbStopPoll();
    document.getElementById('pb-stop-btn').disabled = true;

  } else {
    pbStopPoll();
    setPbIdle();
  }
}

function setPbIdle() {
  document.getElementById('pb-stop-btn').disabled = true;
  document.getElementById('pb-fill').style.width  = '0%';
  const statusEl = document.getElementById('pb-status-text');
  statusEl.className   = '';
  statusEl.textContent = 'Idle';
  document.getElementById('pb-time-text').textContent = '';
}

function fmtTime(secs) {
  const s = Math.floor(secs);
  const m = Math.floor(s / 60);
  return `${m}:${String(s % 60).padStart(2, '0')}`;
}

// ── Keyboard shortcuts ────────────────────────────────────────────────────────

document.addEventListener('keydown', e => {
  if (e.key === 'Escape') { closeAddModal(); closeUploadModal(); }
  if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
    e.preventDefault();
    document.getElementById('search').focus();
  }
});

// ── Boot ──────────────────────────────────────────────────────────────────────

load();
loadTestFiles();
</script>
</body>
</html>
"""

@app.get("/", response_class=HTMLResponse)
def index():
    return HTML


# ── Entry point ───────────────────────────────────────────────────────────────

if __name__ == "__main__":
    print("[Admin] Speaker admin running at http://localhost:8001")
    uvicorn.run(app, host="0.0.0.0", port=8001, log_level="warning")