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.  Also serves the fullscreen display
page for tablets / TVs and the SSE stream that feeds it.

Runs on port 8001 alongside bridge.py.

Access at:
  http://localhost:8001           ← speaker admin
  http://[PC-IP]:8001/display    ← fullscreen display for tablets
"""

import asyncio
import json
import shutil
import threading
from contextlib import asynccontextmanager
from pathlib import Path

import paho.mqtt.client as mqtt
from fastapi import FastAPI, HTTPException, UploadFile, File
from fastapi.responses import HTMLResponse, FileResponse, StreamingResponse
from pydantic import BaseModel
import uvicorn

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"}

MQTT_HOST        = "localhost"
MQTT_PORT        = 1883
MQTT_TOPIC_TEXT  = "display/text"
MQTT_TOPIC_CLEAR = "display/clear"

# ── SSE broadcast state ───────────────────────────────────────────────────────

_sse_clients: set[asyncio.Queue] = set()
_sse_lock    = threading.Lock()
_event_loop: asyncio.AbstractEventLoop | None = None


def _broadcast(data: str) -> None:
    if _event_loop is None:
        return
    with _sse_lock:
        for q in list(_sse_clients):
            try:
                _event_loop.call_soon_threadsafe(q.put_nowait, data)
            except Exception:
                pass


# ── MQTT subscriber ───────────────────────────────────────────────────────────

def _build_mqtt_subscriber() -> mqtt.Client:
    client = mqtt.Client(mqtt.CallbackAPIVersion.VERSION2)

    def on_connect(client, userdata, flags, rc, props):
        if rc == 0:
            client.subscribe([(MQTT_TOPIC_TEXT, 0), (MQTT_TOPIC_CLEAR, 0)])
            print("[Admin] MQTT subscribed to display/text and display/clear")
        else:
            print(f"[Admin] MQTT connect failed: {rc}")

    def on_message(client, userdata, msg):
        payload = msg.payload.decode("utf-8", errors="replace")
        if msg.topic == MQTT_TOPIC_CLEAR:
            _broadcast("event: clear\ndata: {}\n\n")
        else:
            _broadcast(f"event: text\ndata: {payload}\n\n")

    client.on_connect = on_connect
    client.on_message = on_message
    client.reconnect_delay_set(min_delay=1, max_delay=30)
    client.connect_async(MQTT_HOST, MQTT_PORT)
    client.loop_start()
    return client


# ── App lifecycle ─────────────────────────────────────────────────────────────

_mqtt_sub: mqtt.Client | None = None


@asynccontextmanager
async def lifespan(app: FastAPI):
    global _mqtt_sub, _event_loop
    _event_loop = asyncio.get_running_loop()
    _mqtt_sub   = _build_mqtt_subscriber()
    yield
    if _mqtt_sub:
        _mqtt_sub.loop_stop()
        _mqtt_sub.disconnect()


app = FastAPI(title="Speaker Admin", lifespan=lifespan)


# ── 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 | None = None
    role: str | None = None
    location: str | None = None

class AddBody(BaseModel):
    id: str
    name: str = ""
    role: str = ""
    location: str = ""


@app.get("/api/speakers")
def api_list():
    speakers = _load()
    result = []
    for k, v in sorted(speakers.items()):
        if isinstance(v, dict):
            entry = {"id": k, "name": v.get("name", ""), "role": v.get("role", ""),
                     "location": v.get("location", ""), "has_recording": _recording_path(k) is not None}
        else:
            entry = {"id": k, "name": str(v), "role": "", "location": "",
                     "has_recording": _recording_path(k) is not None}
        result.append(entry)
    return {"speakers": result}


@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] = {"name": body.name.strip(), "role": body.role.strip(), "location": body.location.strip()}
    _save(speakers)
    return {"ok": True, "id": sid, "name": body.name}


@app.put("/api/speakers/{sid}")
def api_update(sid: str, body: NameBody):
    speakers = _load()
    entry = speakers.get(sid, {})
    if not isinstance(entry, dict):
        entry = {"name": str(entry), "role": "", "location": ""}
    if body.name is not None:
        entry["name"] = body.name.strip()
    if body.role is not None:
        entry["role"] = body.role.strip()
    if body.location is not None:
        entry["location"] = body.location.strip()
    speakers[sid] = entry
    _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}'")
    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


# ── SSE display stream ────────────────────────────────────────────────────────

@app.get("/api/display/stream")
async def display_stream():
    q: asyncio.Queue[str] = asyncio.Queue(maxsize=50)
    with _sse_lock:
        _sse_clients.add(q)

    async def generator():
        try:
            yield ": heartbeat\n\n"
            while True:
                try:
                    data = await asyncio.wait_for(q.get(), timeout=25)
                    yield data
                except asyncio.TimeoutError:
                    yield ": heartbeat\n\n"
        except (asyncio.CancelledError, GeneratorExit):
            pass
        finally:
            with _sse_lock:
                _sse_clients.discard(q)

    return StreamingResponse(
        generator(),
        media_type="text/event-stream",
        headers={
            "Cache-Control":     "no-cache",
            "Connection":        "keep-alive",
            "X-Accel-Buffering": "no",
        },
    )


# ── Web UI (admin) ────────────────────────────────────────────────────────────

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;
    text-decoration: none;
  }
  .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-display  { background: #059669; color: white; }
  .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 style="flex:1">
    <h1>&#127908; Speaker Admin</h1>
    <small>Meeting Transcription for the Deaf — Speaker Name &amp; Voice Library</small>
  </div>
  <a href="/display" target="_blank" class="btn btn-display">&#128065; View Display</a>
</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>Initials</th>
        <th>Name</th>
        <th>Locality</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
        <a href="/display" target="_blank">display page</a> 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. SPK_00, or any unique key)
        </span>
      </label>
      <input id="new-id" placeholder="SPK_00">
    </div>
    <div class="field">
      <label>Initials</label>
      <input id="new-initials" placeholder="J.B.B">
    </div>
    <div class="field">
      <label>Name / Role</label>
      <input id="new-name" placeholder="John Brown">
    </div>
    <div class="field">
      <label>Locality</label>
      <input id="new-location" placeholder="Sydney">
    </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 mkEdit(id, field, value) {
  return `<div class="name-cell">
      <span class="name-display" onclick="startEdit(this,'${id}','${field}')"
            title="Click to edit">${value}</span>
      <input class="name-input" style="display:none"
             onblur="saveEdit(this,'${id}','${field}')"
             onkeydown="editKeydown(event,this,'${id}','${field}')">
    </div>`;
}

function makeRow(s) {
  const tr = document.createElement('tr');
  tr.dataset.id   = s.id;
  tr.dataset.name = (s.name + ' ' + s.role + ' ' + s.location).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>${mkEdit(esc(s.id), 'name', esc(s.name))}</td>
    <td>${mkEdit(esc(s.id), 'role', esc(s.role))}</td>
    <td>${mkEdit(esc(s.id), 'location', esc(s.location))}</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, field) {
  const input = span.nextElementSibling;
  input.value = span.textContent;
  span.style.display = 'none';
  input.style.display = '';
  input.focus();
  input.select();
}

function editKeydown(e, input, id, field) {
  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, field) {
  const value = input.value.trim();
  const span  = input.previousElementSibling;
  if (value === span.textContent) { cancelEdit(input); return; }
  const body = {};
  body[field] = value;
  const res = await fetch(`/api/speakers/${encodeURIComponent(id)}`, {
    method: 'PUT',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(body)
  });
  if (res.ok) {
    span.textContent = value;
    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-initials').value = '';
  document.getElementById('new-name').value     = '';
  document.getElementById('new-location').value = '';
  document.getElementById('add-modal').classList.add('open');
  setTimeout(() => document.getElementById('new-initials').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-initials').value.trim();
  const role     = document.getElementById('new-name').value.trim();
  const location = document.getElementById('new-location').value.trim();
  if (!id) { toast('Speaker ID is required', true); return; }
  const res = await fetch('/api/speakers', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({id, name, role, location})
  });
  if (res.ok) {
    closeAddModal();
    toast(`Added ${name || id}`);
    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>
"""

# ── Display page (fullscreen tablet / TV) ─────────────────────────────────────

DISPLAY_HTML = """<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Live Transcription</title>
<style>
  *, *::before, *::after { box-sizing: border-box; }

  html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    background: #0d0d0d;
    color: #eeeeee;
    overflow: hidden;
  }

  #screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 5vh 6vw;
    gap: 4vh;
    justify-content: flex-start;
  }

  .display-line {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(22px, 3vw, 44px);
    line-height: 1.25;
    letter-spacing: 0.02em;
    min-height: 1.25em;
    word-break: break-word;
    transition: opacity 0.15s;
  }

  .display-line.is-speaker {
    font-size: clamp(16px, 2.2vw, 32px);
    color: #f5c518;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: system-ui, sans-serif;
    padding-bottom: 1.5vh;
    border-bottom: 2px solid #2a2a2a;
  }

  /* Small status indicator in the corner */
  #conn {
    position: fixed;
    bottom: 12px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: system-ui, sans-serif;
    font-size: 12px;
    color: #333;
    pointer-events: none;
  }
  #conn-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #555;
    transition: background 0.4s;
  }
  #conn-dot.live { background: #22c55e; }
  #conn-dot.lost { background: #dc2626; }
</style>
</head>
<body>
<div id="screen">
  <div class="display-line" id="line0"></div>
  <div class="display-line" id="line1"></div>
  <div class="display-line" id="line2"></div>
</div>

<div id="conn">
  <div id="conn-dot"></div>
  <span id="conn-label">connecting</span>
</div>

<script>
  const SPEAKER_RE = /^\\[(.+)\\]$/;

  function applyLines(lines) {
    for (let i = 0; i < 3; i++) {
      const el  = document.getElementById('line' + i);
      const txt = String(lines[i] || '').trim();
      const m   = txt.match(SPEAKER_RE);
      if (m) {
        el.textContent = m[1];
        el.className   = 'display-line is-speaker';
      } else {
        el.textContent = txt;
        el.className   = 'display-line';
      }
    }
  }

  function setStatus(ok) {
    const dot   = document.getElementById('conn-dot');
    const label = document.getElementById('conn-label');
    dot.className   = ok ? 'live' : 'lost';
    label.textContent = ok ? 'live' : 'reconnecting…';
  }

  function connect() {
    const es = new EventSource('/api/display/stream');

    es.addEventListener('text', e => {
      try { applyLines(JSON.parse(e.data).lines || []); } catch {}
    });

    es.addEventListener('clear', () => applyLines(['', '', '']));

    es.onopen  = () => setStatus(true);
    es.onerror = () => {
      setStatus(false);
      es.close();
      setTimeout(connect, 4000);
    };
  }

  connect();
</script>
</body>
</html>
"""


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


@app.get("/display", response_class=HTMLResponse)
def display():
    return DISPLAY_HTML


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

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