"""
Web platform adapter.

Provides a browser-based chat interface via HTTP + WebSocket.
Serves a single-page chat UI with markdown rendering, code highlighting,
voice messages, and mobile responsive design.

No external dependencies beyond aiohttp (already in messaging extra).
"""

import asyncio
import base64
import json
import logging
import os
import secrets
import shutil
import socket
import time
import uuid
from pathlib import Path
from typing import Dict, List, Optional, Any

logger = logging.getLogger(__name__)

try:
    from aiohttp import web
    AIOHTTP_AVAILABLE = True
except ImportError:
    AIOHTTP_AVAILABLE = False
    web = None

import sys
from pathlib import Path as _Path
sys.path.insert(0, str(_Path(__file__).resolve().parents[2]))

from gateway.config import Platform, PlatformConfig
from gateway.platforms.base import (
    BasePlatformAdapter,
    MessageEvent,
    MessageType,
    SendResult,
)


def check_web_requirements() -> bool:
    """Check if aiohttp is available."""
    return AIOHTTP_AVAILABLE


class WebAdapter(BasePlatformAdapter):
    """
    Web-based chat adapter.

    Runs a local HTTP server serving a chat UI. Clients connect via
    WebSocket for real-time bidirectional messaging.
    """

    def __init__(self, config: PlatformConfig):
        super().__init__(config, Platform.WEB)
        self._app: Optional[web.Application] = None
        self._runner: Optional[web.AppRunner] = None
        self._site: Optional[web.TCPSite] = None

        # Config
        self._host: str = config.extra.get("host", "0.0.0.0")
        self._port: int = config.extra.get("port", 8765)
        self._token: str = config.extra.get("token", "") or secrets.token_hex(16)

        # Connected WebSocket clients: session_id -> ws
        self._clients: Dict[str, web.WebSocketResponse] = {}

        # Media directory for uploaded/generated files
        self._media_dir = Path.home() / ".hermes" / "web_media"

        # Cleanup task handle
        self._cleanup_task: Optional[asyncio.Task] = None

    async def connect(self) -> bool:
        """Start the HTTP server and begin accepting connections."""
        if not AIOHTTP_AVAILABLE:
            return False

        self._media_dir.mkdir(parents=True, exist_ok=True)

        self._app = web.Application(client_max_size=50 * 1024 * 1024)  # 50MB upload limit
        self._app.router.add_get("/", self._handle_index)
        self._app.router.add_get("/ws", self._handle_websocket)
        self._app.router.add_post("/upload", self._handle_upload)
        self._app.router.add_static("/media", str(self._media_dir), show_index=False)

        self._runner = web.AppRunner(self._app)
        await self._runner.setup()

        try:
            self._site = web.TCPSite(self._runner, self._host, self._port)
            await self._site.start()
        except OSError as e:
            logger.error("Failed to start web server on %s:%s — %s", self._host, self._port, e)
            await self._runner.cleanup()
            return False

        self._running = True
        self._cleanup_task = asyncio.ensure_future(self._media_cleanup_loop())

        all_ips = self._get_local_ips()
        primary_ip = self._get_local_ip()
        print(f"[{self.name}] Web UI: http://{primary_ip}:{self._port}")
        for ip in all_ips:
            if ip != primary_ip:
                print(f"[{self.name}]   also: http://{ip}:{self._port}")
        print(f"[{self.name}] Access token: {self._token}")

        return True

    async def disconnect(self) -> None:
        """Stop the server and close all connections."""
        if self._cleanup_task:
            self._cleanup_task.cancel()
            self._cleanup_task = None

        for ws in list(self._clients.values()):
            try:
                await ws.close()
            except Exception:
                pass
        self._clients.clear()

        if self._site:
            await self._site.stop()
        if self._runner:
            await self._runner.cleanup()

        self._running = False
        self._app = None
        self._runner = None
        self._site = None
        print(f"[{self.name}] Disconnected")

    async def send(
        self,
        chat_id: str,
        content: str,
        reply_to: Optional[str] = None,
        metadata: Optional[Dict[str, Any]] = None,
    ) -> SendResult:
        """Send a text message to all connected clients."""
        msg_id = str(uuid.uuid4())[:8]
        payload = {
            "type": "message",
            "id": msg_id,
            "content": content,
            "timestamp": time.time(),
        }
        await self._broadcast(payload)
        return SendResult(success=True, message_id=msg_id)

    async def edit_message(
        self, chat_id: str, message_id: str, content: str
    ) -> SendResult:
        """Edit a previously sent message (used for streaming updates)."""
        payload = {
            "type": "edit",
            "id": message_id,
            "content": content,
            "timestamp": time.time(),
        }
        await self._broadcast(payload)
        return SendResult(success=True, message_id=message_id)

    async def send_typing(self, chat_id: str, metadata=None) -> None:
        """Send typing indicator to all clients."""
        await self._broadcast({"type": "typing"})

    async def send_image(
        self,
        chat_id: str,
        image_url: str,
        caption: Optional[str] = None,
        reply_to: Optional[str] = None,
    ) -> SendResult:
        """Send an image to all connected clients."""
        msg_id = str(uuid.uuid4())[:8]
        payload = {
            "type": "image",
            "id": msg_id,
            "url": image_url,
            "caption": caption or "",
            "timestamp": time.time(),
        }
        await self._broadcast(payload)
        return SendResult(success=True, message_id=msg_id)

    async def send_voice(
        self,
        chat_id: str,
        audio_path: str,
        caption: Optional[str] = None,
        reply_to: Optional[str] = None,
        **kwargs,
    ) -> SendResult:
        """Send a voice message by copying audio to media dir and broadcasting URL."""
        filename = f"voice_{uuid.uuid4().hex[:8]}{Path(audio_path).suffix}"
        dest = self._media_dir / filename
        try:
            shutil.copy2(audio_path, dest)
        except Exception as e:
            return SendResult(success=False, error=f"Failed to copy audio: {e}")

        msg_id = str(uuid.uuid4())[:8]
        payload = {
            "type": "voice",
            "id": msg_id,
            "url": f"/media/{filename}",
            "caption": caption or "",
            "timestamp": time.time(),
        }
        await self._broadcast(payload)
        return SendResult(success=True, message_id=msg_id)

    async def play_tts(
        self,
        chat_id: str,
        audio_path: str,
        **kwargs,
    ) -> SendResult:
        """Play TTS audio invisibly — no bubble in chat, just audio playback."""
        filename = f"tts_{uuid.uuid4().hex[:8]}{Path(audio_path).suffix}"
        dest = self._media_dir / filename
        try:
            shutil.copy2(audio_path, dest)
        except Exception as e:
            return SendResult(success=False, error=f"Failed to copy audio: {e}")

        payload = {
            "type": "play_audio",
            "url": f"/media/{filename}",
        }
        await self._broadcast(payload)
        return SendResult(success=True)

    async def send_image_file(
        self,
        chat_id: str,
        image_path: str,
        caption: Optional[str] = None,
        reply_to: Optional[str] = None,
    ) -> SendResult:
        """Send a local image file by copying to media dir."""
        filename = f"img_{uuid.uuid4().hex[:8]}{Path(image_path).suffix}"
        dest = self._media_dir / filename
        try:
            shutil.copy2(image_path, dest)
        except Exception as e:
            return SendResult(success=False, error=f"Failed to copy image: {e}")
        return await self.send_image(chat_id, f"/media/{filename}", caption, reply_to)

    async def send_document(
        self,
        chat_id: str,
        file_path: str,
        caption: Optional[str] = None,
        file_name: Optional[str] = None,
        reply_to: Optional[str] = None,
        **kwargs,
    ) -> SendResult:
        """Send a document file by copying to media dir."""
        orig_name = file_name or Path(file_path).name
        safe_name = f"{uuid.uuid4().hex[:8]}_{orig_name}"
        dest = self._media_dir / safe_name
        try:
            shutil.copy2(file_path, dest)
        except Exception as e:
            return SendResult(success=False, error=f"Failed to copy file: {e}")

        msg_id = str(uuid.uuid4())[:8]
        payload = {
            "type": "document",
            "id": msg_id,
            "url": f"/media/{safe_name}",
            "filename": orig_name,
            "caption": caption or "",
            "timestamp": time.time(),
        }
        await self._broadcast(payload)
        return SendResult(success=True, message_id=msg_id)

    async def get_chat_info(self, chat_id: str) -> Dict[str, Any]:
        """Return basic chat info for the web session."""
        return {"name": "Web Chat", "type": "dm"}

    # ---- HTTP Handlers ----

    async def _handle_index(self, request: web.Request) -> web.Response:
        """Serve the chat UI HTML page."""
        html = _build_chat_html()
        return web.Response(text=html, content_type="text/html")

    async def _handle_websocket(self, request: web.Request) -> web.WebSocketResponse:
        """Handle WebSocket connections for real-time chat."""
        ws = web.WebSocketResponse(max_msg_size=50 * 1024 * 1024)
        await ws.prepare(request)

        session_id = uuid.uuid4().hex[:12]
        authenticated = False

        try:
            async for msg in ws:
                if msg.type == web.WSMsgType.TEXT:
                    try:
                        data = json.loads(msg.data)
                    except json.JSONDecodeError:
                        continue

                    msg_type = data.get("type", "")

                    # Auth handshake
                    if msg_type == "auth":
                        if data.get("token") == self._token:
                            authenticated = True
                            self._clients[session_id] = ws
                            await ws.send_str(json.dumps({
                                "type": "auth_ok",
                                "session_id": session_id,
                            }))
                        else:
                            await ws.send_str(json.dumps({
                                "type": "auth_fail",
                                "error": "Invalid token",
                            }))
                        continue

                    if not authenticated:
                        await ws.send_str(json.dumps({"type": "auth_required"}))
                        continue

                    # Chat message
                    if msg_type == "message":
                        text = data.get("text", "").strip()
                        if text:
                            await self._process_user_message(session_id, text)

                    # Voice message (base64 audio)
                    elif msg_type == "voice":
                        await self._process_voice_message(session_id, data)

                elif msg.type in (web.WSMsgType.ERROR, web.WSMsgType.CLOSE):
                    break
        except Exception as e:
            logger.debug("WebSocket session %s error: %s", session_id, e)
        finally:
            self._clients.pop(session_id, None)

        return ws

    async def _handle_upload(self, request: web.Request) -> web.Response:
        """Handle file uploads (images, voice recordings)."""
        token = request.headers.get("Authorization", "").replace("Bearer ", "")
        if token != self._token:
            return web.json_response({"error": "Unauthorized"}, status=401)

        reader = await request.multipart()
        field = await reader.next()
        if not field:
            return web.json_response({"error": "No file"}, status=400)

        orig_name = field.filename or "file"
        filename = f"upload_{uuid.uuid4().hex[:8]}_{orig_name}"
        dest = self._media_dir / filename

        with open(dest, "wb") as f:
            while True:
                chunk = await field.read_chunk()
                if not chunk:
                    break
                f.write(chunk)

        return web.json_response({"url": f"/media/{filename}", "filename": filename})

    # ---- Message Processing ----

    async def _process_user_message(self, session_id: str, text: str) -> None:
        """Build MessageEvent from user text and feed to handler."""
        msg_type = MessageType.COMMAND if text.startswith("/") else MessageType.TEXT

        source = self.build_source(
            chat_id="web",
            chat_name="Web Chat",
            chat_type="dm",
            user_id=session_id,
            user_name="Web User",
        )

        event = MessageEvent(
            text=text,
            message_type=msg_type,
            source=source,
            message_id=uuid.uuid4().hex[:8],
        )

        if self._message_handler:
            await self.handle_message(event)

    async def _process_voice_message(self, session_id: str, data: dict) -> None:
        """Decode base64 voice audio, transcribe via STT, and process as message."""
        import tempfile

        audio_b64 = data.get("audio", "")
        if not audio_b64:
            return

        audio_bytes = base64.b64decode(audio_b64)
        fmt = data.get("format", "webm")
        tmp_path = os.path.join(
            tempfile.gettempdir(),
            f"web_voice_{uuid.uuid4().hex[:8]}.{fmt}",
        )

        with open(tmp_path, "wb") as f:
            f.write(audio_bytes)

        try:
            from tools.transcription_tools import transcribe_audio
            result = await asyncio.to_thread(transcribe_audio, tmp_path)

            if not result.get("success"):
                await self._send_to_session(session_id, {
                    "type": "error",
                    "error": f"Transcription failed: {result.get('error', 'Unknown')}",
                })
                return

            transcript = result.get("transcript", "").strip()
            if not transcript:
                return

            # Show transcript to user
            await self._send_to_session(session_id, {
                "type": "transcript",
                "text": transcript,
            })

            # Process as voice message
            source = self.build_source(
                chat_id="web",
                chat_name="Web Chat",
                chat_type="dm",
                user_id=session_id,
                user_name="Web User",
            )
            event = MessageEvent(
                text=transcript,
                message_type=MessageType.VOICE,
                source=source,
                message_id=uuid.uuid4().hex[:8],
                media_urls=[tmp_path],
                media_types=[f"audio/{fmt}"],
            )
            if self._message_handler:
                await self.handle_message(event)
        except Exception as e:
            logger.warning("Voice processing failed: %s", e, exc_info=True)
        finally:
            try:
                os.unlink(tmp_path)
            except OSError:
                pass

    # ---- Internal Utilities ----

    async def _broadcast(self, payload: dict) -> None:
        """Send JSON payload to all connected WebSocket clients."""
        data = json.dumps(payload)
        dead: List[str] = []
        for sid, ws in self._clients.items():
            try:
                await ws.send_str(data)
            except Exception:
                dead.append(sid)
        for sid in dead:
            self._clients.pop(sid, None)

    async def _send_to_session(self, session_id: str, payload: dict) -> None:
        """Send a message to a specific client session."""
        ws = self._clients.get(session_id)
        if ws:
            try:
                await ws.send_str(json.dumps(payload))
            except Exception:
                self._clients.pop(session_id, None)

    async def _media_cleanup_loop(self) -> None:
        """Periodically delete old media files (older than 24h)."""
        try:
            while self._running:
                await asyncio.sleep(3600)
                cutoff = time.time() - 86400
                removed = 0
                for f in self._media_dir.iterdir():
                    if f.is_file() and f.stat().st_mtime < cutoff:
                        try:
                            f.unlink()
                            removed += 1
                        except OSError:
                            pass
                if removed:
                    logger.debug("Web media cleanup: removed %d old file(s)", removed)
        except asyncio.CancelledError:
            pass

    @staticmethod
    def _get_local_ips() -> List[str]:
        """Get all non-loopback IPv4 addresses on this machine."""
        ips = []
        try:
            import netifaces
            for iface in netifaces.interfaces():
                addrs = netifaces.ifaddresses(iface).get(netifaces.AF_INET, [])
                for addr in addrs:
                    ip = addr.get("addr", "")
                    if ip and not ip.startswith("127."):
                        ips.append(ip)
        except ImportError:
            # Fallback: parse ifconfig output
            import subprocess
            try:
                out = subprocess.check_output(["ifconfig"], text=True, timeout=5)
                for line in out.splitlines():
                    line = line.strip()
                    if line.startswith("inet ") and "127.0.0.1" not in line:
                        parts = line.split()
                        if len(parts) >= 2:
                            ips.append(parts[1])
            except Exception:
                pass
        if not ips:
            # Last resort: UDP trick (may return VPN IP)
            try:
                s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
                s.connect(("8.8.8.8", 80))
                ips.append(s.getsockname()[0])
                s.close()
            except Exception:
                ips.append("127.0.0.1")
        return ips

    @staticmethod
    def _get_local_ip() -> str:
        """Get the most likely LAN IP address."""
        ips = WebAdapter._get_local_ips()
        # Prefer 192.168.x.x or 10.x.x.x over VPN ranges like 172.16.x.x
        for ip in ips:
            if ip.startswith("192.168.") or ip.startswith("10."):
                return ip
        return ips[0] if ips else "127.0.0.1"


# ---------------------------------------------------------------------------
# Chat UI HTML
# ---------------------------------------------------------------------------

def _build_chat_html() -> str:
    """Build the complete single-page chat UI as an HTML string."""
    return '''<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Hermes</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
:root {
    --bg: #08090d;
    --bg-secondary: rgba(14,16,24,0.85);
    --bg-input: rgba(20,24,36,0.9);
    --glass: rgba(16,20,32,0.6);
    --glass-border: rgba(100,120,200,0.12);
    --border: rgba(80,100,160,0.15);
    --text: #e2e8f0;
    --text-muted: #64748b;
    --accent: #6c5ce7;
    --accent-glow: rgba(108,92,231,0.3);
    --accent-hover: #a29bfe;
    --user-bg: linear-gradient(135deg, #6c5ce7 0%, #4834d4 100%);
    --bot-bg: rgba(20,24,40,0.7);
    --error: #ff6b6b;
    --success: #51cf66;
    --radius: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    height: 100dvh;
    overflow: hidden;
    /* Subtle grid background */
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(108,92,231,0.08) 0%, transparent 60%),
        linear-gradient(rgba(30,35,60,0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30,35,60,0.3) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
}

/* Auth Screen */
#auth-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    gap: 20px;
}
#auth-screen h1 {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #e2e8f0, #a29bfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
}
#auth-screen p { color: var(--text-muted); font-size: 14px; }
#token-input {
    background: var(--bg-input);
    border: 1px solid var(--glass-border);
    color: var(--text);
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 16px;
    width: 320px;
    max-width: 80vw;
    text-align: center;
    outline: none;
    backdrop-filter: blur(12px);
    transition: border-color 0.2s, box-shadow 0.2s;
}
#token-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow);
}
#auth-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 12px 36px;
    border-radius: 12px;
    font-size: 15px;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s;
}
#auth-btn:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 24px var(--accent-glow);
    transform: translateY(-1px);
}
#auth-error { color: var(--error); font-size: 13px; display: none; }

/* Chat container — centered on desktop */
#chat-screen {
    display: none;
    flex-direction: column;
    height: 100dvh;
    max-width: 760px;
    margin: 0 auto;
    position: relative;
}
@media (min-width: 800px) {
    #chat-screen {
        border-left: 1px solid var(--glass-border);
        border-right: 1px solid var(--glass-border);
        background: rgba(8,9,13,0.5);
        backdrop-filter: blur(8px);
    }
}

/* Status bar */
#status-bar {
    background: var(--bg-secondary);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
#status-bar .title {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.3px;
}
#status-bar .conn-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}
#status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    display: inline-block;
    margin-right: 8px;
    box-shadow: 0 0 8px rgba(81,207,102,0.5);
}
#status-dot.disconnected {
    background: var(--error);
    box-shadow: 0 0 8px rgba(255,107,107,0.5);
}

/* Messages */
#messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}
#messages::-webkit-scrollbar { width: 4px; }
#messages::-webkit-scrollbar-track { background: transparent; }
#messages::-webkit-scrollbar-thumb { background: rgba(100,120,200,0.2); border-radius: 4px; }

.msg {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    animation: msgIn 0.25s ease-out;
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.msg.user {
    align-self: flex-end;
    background: var(--user-bg);
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 16px rgba(108,92,231,0.2);
}
.msg.bot {
    align-self: flex-start;
    background: var(--bot-bg);
    border: 1px solid var(--glass-border);
    border-bottom-left-radius: 4px;
    backdrop-filter: blur(8px);
}
.msg.bot pre {
    background: rgba(8,9,13,0.8);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 12px;
    overflow-x: auto;
    margin: 8px 0;
}
.msg.bot code {
    font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
    font-size: 13px;
}
.msg.bot p code {
    background: rgba(108,92,231,0.15);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}
.msg.bot img {
    max-width: 100%;
    border-radius: 10px;
    margin: 8px 0;
    cursor: pointer;
}

/* Voice message bubble */
.voice-bubble {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    padding: 4px 0;
}
.voice-play-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    box-shadow: 0 2px 12px var(--accent-glow);
}
.voice-play-btn:hover { background: var(--accent-hover); }
.voice-play-btn svg { fill: #fff; width: 16px; height: 16px; }
.voice-waveform {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 28px;
    cursor: pointer;
    position: relative;
}
.voice-waveform .bar {
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
    opacity: 0.3;
    transition: opacity 0.15s;
}
.voice-waveform .bar.played { opacity: 1.0; }
.voice-time {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 38px;
    text-align: right;
    flex-shrink: 0;
}

.msg .timestamp {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: right;
}
.msg.system {
    align-self: center;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
    padding: 4px 8px;
}
.msg.transcript {
    align-self: flex-end;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}

/* Typing indicator */
.typing-indicator {
    display: none;
    align-self: flex-start;
    padding: 10px 16px;
    background: var(--bot-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    border-bottom-left-radius: 4px;
    backdrop-filter: blur(8px);
}
.typing-indicator span {
    display: inline-block;
    width: 7px; height: 7px;
    background: var(--accent);
    border-radius: 50%;
    margin: 0 2px;
    animation: typing 1.4s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-5px); }
}

/* Input bar */
#input-bar {
    background: var(--bg-secondary);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--glass-border);
    padding: 12px 16px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-shrink: 0;
}
#input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--glass-border);
    color: var(--text);
    padding: 11px 16px;
    border-radius: 22px;
    font-size: 15px;
    font-family: inherit;
    resize: none;
    max-height: 120px;
    min-height: 44px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 16px var(--accent-glow);
}
#input::placeholder { color: var(--text-muted); }
.input-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
#send-btn {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 12px var(--accent-glow);
}
#send-btn:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 20px var(--accent-glow);
    transform: translateY(-1px);
}
#send-btn:disabled { opacity: 0.3; cursor: default; box-shadow: none; transform: none; }
#voice-btn {
    background: var(--bg-input);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
}
#voice-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
}
#voice-btn.recording {
    background: var(--error);
    border-color: var(--error);
    color: #fff;
    animation: pulse 1.5s infinite;
    box-shadow: 0 0 16px rgba(255,107,107,0.4);
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.input-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* Download link */
.file-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(108,92,231,0.1);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--accent);
    text-decoration: none;
    font-size: 13px;
    margin: 4px 0;
}
.file-download:hover { background: rgba(88,166,255,0.2); }

/* Scrollbar */
#messages::-webkit-scrollbar { width: 6px; }
#messages::-webkit-scrollbar-track { background: transparent; }
#messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
</style>
</head>
<body>

<!-- Auth Screen -->
<div id="auth-screen">
    <h1>Hermes</h1>
    <p>Enter access token to connect</p>
    <input type="password" id="token-input" placeholder="Access token" autocomplete="off">
    <button id="auth-btn" onclick="doAuth()">Connect</button>
    <div id="auth-error">Invalid token. Try again.</div>
</div>

<!-- Chat Screen -->
<div id="chat-screen">
    <header id="status-bar">
        <div><span id="status-dot"></span><span class="title">Hermes</span></div>
        <span id="status-text" style="font-size:12px;color:var(--text-muted)">Connected</span>
    </header>
    <div id="messages">
        <div class="typing-indicator" id="typing"><span></span><span></span><span></span></div>
    </div>
    <div id="input-bar">
        <button class="input-btn" id="voice-btn" onclick="toggleVoice()" title="Voice message">
            <svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>
        </button>
        <textarea id="input" rows="1" placeholder="Type a message..." onkeydown="handleKey(event)" oninput="autoGrow(this)"></textarea>
        <button class="input-btn" id="send-btn" onclick="sendMessage()">
            <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
        </button>
    </div>
</div>

<script>
// --- State ---
let ws = null;
let sessionId = null;
let authToken = '';
let isRecording = false;
let mediaRecorder = null;
let audioChunks = [];
let typingTimeout = null;
let autoScroll = true;

// --- Markdown setup ---
marked.setOptions({
    highlight: function(code, lang) {
        if (lang && hljs.getLanguage(lang)) {
            return hljs.highlight(code, {language: lang}).value;
        }
        return hljs.highlightAuto(code).value;
    },
    breaks: true,
    gfm: true,
});

// --- Auth ---
document.getElementById('token-input').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') doAuth();
});

function doAuth() {
    authToken = document.getElementById('token-input').value.trim();
    if (!authToken) return;
    document.getElementById('auth-error').style.display = 'none';
    connectWS();
}

// --- WebSocket ---
function connectWS() {
    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
    ws = new WebSocket(`${proto}//${location.host}/ws`);

    ws.onopen = () => {
        ws.send(JSON.stringify({type: 'auth', token: authToken}));
    };

    ws.onmessage = (e) => {
        const data = JSON.parse(e.data);
        handleServerMessage(data);
    };

    ws.onclose = () => {
        setStatus(false);
        // Auto-reconnect after 3s
        setTimeout(() => {
            if (authToken && sessionId) connectWS();
        }, 3000);
    };

    ws.onerror = () => {};
}

function handleServerMessage(data) {
    switch (data.type) {
        case 'auth_ok':
            sessionId = data.session_id;
            document.getElementById('auth-screen').style.display = 'none';
            document.getElementById('chat-screen').style.display = 'flex';
            document.getElementById('input').focus();
            setStatus(true);
            // Check voice support
            if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                document.getElementById('voice-btn').style.display = 'none';
            }
            break;

        case 'auth_fail':
            document.getElementById('auth-error').style.display = 'block';
            break;

        case 'auth_required':
            break;

        case 'message':
            hideTyping();
            addBotMessage(data.id, data.content, data.timestamp);
            break;

        case 'edit':
            hideTyping();
            editBotMessage(data.id, data.content);
            break;

        case 'typing':
            showTyping();
            break;

        case 'image':
            hideTyping();
            addImageMessage(data.id, data.url, data.caption, data.timestamp);
            break;

        case 'voice':
            hideTyping();
            addVoiceMessage(data.id, data.url, data.caption, data.timestamp);
            break;

        case 'document':
            hideTyping();
            addDocumentMessage(data.id, data.url, data.filename, data.caption, data.timestamp);
            break;

        case 'transcript':
            addTranscriptMessage(data.text);
            break;

        case 'play_audio':
            // Invisible TTS playback — no UI element, just play audio
            { const a = new Audio(data.url); a.play().catch(() => {}); }
            break;

        case 'error':
            addSystemMessage(data.error);
            break;
    }
}

// --- Send ---
function sendMessage() {
    const input = document.getElementById('input');
    const text = input.value.trim();
    if (!text || !ws) return;

    addUserMessage(text);
    ws.send(JSON.stringify({type: 'message', text: text}));
    input.value = '';
    input.style.height = 'auto';
}

function handleKey(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
}

function autoGrow(el) {
    el.style.height = 'auto';
    el.style.height = Math.min(el.scrollHeight, 120) + 'px';
}

// --- Voice Recording ---
async function toggleVoice() {
    if (isRecording) {
        stopRecording();
    } else {
        await startRecording();
    }
}

async function startRecording() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({audio: true});
        audioChunks = [];
        mediaRecorder = new MediaRecorder(stream, {mimeType: 'audio/webm;codecs=opus'});
        mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) audioChunks.push(e.data); };
        mediaRecorder.onstop = async () => {
            stream.getTracks().forEach(t => t.stop());
            if (audioChunks.length === 0) return;
            const blob = new Blob(audioChunks, {type: 'audio/webm'});
            const reader = new FileReader();
            reader.onloadend = () => {
                const b64 = reader.result.split(',')[1];
                ws.send(JSON.stringify({type: 'voice', audio: b64, format: 'webm'}));
            };
            reader.readAsDataURL(blob);
        };
        mediaRecorder.start();
        isRecording = true;
        document.getElementById('voice-btn').classList.add('recording');
    } catch (err) {
        addSystemMessage('Microphone access denied.');
    }
}

function stopRecording() {
    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
    }
    isRecording = false;
    document.getElementById('voice-btn').classList.remove('recording');
}

// --- Messages UI ---
const messagesEl = document.getElementById('messages');
const typingEl = document.getElementById('typing');

function formatTime(ts) {
    if (!ts) return '';
    const d = new Date(ts * 1000);
    return d.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
}

function addUserMessage(text) {
    const div = document.createElement('div');
    div.className = 'msg user';
    div.textContent = text;
    messagesEl.insertBefore(div, typingEl);
    scrollToBottom();
}

function addBotMessage(id, content, ts) {
    const div = document.createElement('div');
    div.className = 'msg bot';
    div.id = 'msg-' + id;
    div.innerHTML = renderMarkdown(content);
    if (ts) {
        const time = document.createElement('div');
        time.className = 'timestamp';
        time.textContent = formatTime(ts);
        div.appendChild(time);
    }
    messagesEl.insertBefore(div, typingEl);
    highlightCode(div);
    scrollToBottom();
}

function editBotMessage(id, content) {
    const div = document.getElementById('msg-' + id);
    if (div) {
        // Preserve timestamp
        const ts = div.querySelector('.timestamp');
        div.innerHTML = renderMarkdown(content);
        if (ts) div.appendChild(ts);
        highlightCode(div);
        scrollToBottom();
    } else {
        addBotMessage(id, content, null);
    }
}

function addImageMessage(id, url, caption, ts) {
    const div = document.createElement('div');
    div.className = 'msg bot';
    div.id = 'msg-' + id;
    if (caption) div.innerHTML = renderMarkdown(caption);
    const img = document.createElement('img');
    img.src = url;
    img.alt = caption || 'Image';
    img.onclick = () => window.open(url, '_blank');
    div.appendChild(img);
    if (ts) {
        const time = document.createElement('div');
        time.className = 'timestamp';
        time.textContent = formatTime(ts);
        div.appendChild(time);
    }
    messagesEl.insertBefore(div, typingEl);
    scrollToBottom();
}

function addVoiceMessage(id, url, caption, ts) {
    const div = document.createElement('div');
    div.className = 'msg bot';
    div.id = 'msg-' + id;
    if (caption) {
        const p = document.createElement('p');
        p.textContent = caption;
        div.appendChild(p);
    }

    const audio = new Audio(url);
    audio.preload = 'metadata';

    // Build voice bubble
    const bubble = document.createElement('div');
    bubble.className = 'voice-bubble';

    // Play/pause button
    const btn = document.createElement('button');
    btn.className = 'voice-play-btn';
    const playSvg = '<svg viewBox="0 0 24 24"><polygon points="6,3 20,12 6,21"/></svg>';
    const pauseSvg = '<svg viewBox="0 0 24 24"><rect x="5" y="3" width="4" height="18"/><rect x="15" y="3" width="4" height="18"/></svg>';
    btn.innerHTML = playSvg;
    bubble.appendChild(btn);

    // Waveform bars
    const waveform = document.createElement('div');
    waveform.className = 'voice-waveform';
    const barCount = 35;
    const bars = [];
    for (let i = 0; i < barCount; i++) {
        const bar = document.createElement('div');
        bar.className = 'bar';
        const h = 6 + Math.random() * 22;
        bar.style.height = h + 'px';
        waveform.appendChild(bar);
        bars.push(bar);
    }
    bubble.appendChild(waveform);

    // Duration display
    const timeEl = document.createElement('div');
    timeEl.className = 'voice-time';
    timeEl.textContent = '0:00';
    bubble.appendChild(timeEl);

    function fmtDur(s) {
        const m = Math.floor(s / 60);
        const sec = Math.floor(s % 60);
        return m + ':' + (sec < 10 ? '0' : '') + sec;
    }

    audio.addEventListener('loadedmetadata', () => {
        if (isFinite(audio.duration)) timeEl.textContent = fmtDur(audio.duration);
    });

    let playing = false;
    function updateProgress() {
        if (!isFinite(audio.duration)) return;
        const pct = audio.currentTime / audio.duration;
        const playedIdx = Math.floor(pct * barCount);
        bars.forEach((b, i) => b.classList.toggle('played', i <= playedIdx));
        timeEl.textContent = fmtDur(audio.currentTime);
        if (playing) requestAnimationFrame(updateProgress);
    }

    btn.onclick = () => {
        if (playing) { audio.pause(); }
        else { audio.play(); }
    };
    audio.onplay = () => { playing = true; btn.innerHTML = pauseSvg; updateProgress(); };
    audio.onpause = () => { playing = false; btn.innerHTML = playSvg; };
    audio.onended = () => {
        playing = false;
        btn.innerHTML = playSvg;
        bars.forEach(b => b.classList.remove('played'));
        if (isFinite(audio.duration)) timeEl.textContent = fmtDur(audio.duration);
    };

    // Click on waveform to seek
    waveform.onclick = (e) => {
        if (!isFinite(audio.duration)) return;
        const rect = waveform.getBoundingClientRect();
        const pct = (e.clientX - rect.left) / rect.width;
        audio.currentTime = pct * audio.duration;
        if (!playing) audio.play();
    };

    div.appendChild(bubble);

    if (ts) {
        const time = document.createElement('div');
        time.className = 'timestamp';
        time.textContent = formatTime(ts);
        div.appendChild(time);
    }
    messagesEl.insertBefore(div, typingEl);
    scrollToBottom();

    // Autoplay
    audio.play().catch(() => {});
}

function addDocumentMessage(id, url, filename, caption, ts) {
    const div = document.createElement('div');
    div.className = 'msg bot';
    div.id = 'msg-' + id;
    if (caption) div.innerHTML = renderMarkdown(caption);
    const a = document.createElement('a');
    a.className = 'file-download';
    a.href = url;
    a.download = filename;
    a.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>' + filename;
    div.appendChild(a);
    if (ts) {
        const time = document.createElement('div');
        time.className = 'timestamp';
        time.textContent = formatTime(ts);
        div.appendChild(time);
    }
    messagesEl.insertBefore(div, typingEl);
    scrollToBottom();
}

function addSystemMessage(text) {
    const div = document.createElement('div');
    div.className = 'msg system';
    div.textContent = text;
    messagesEl.insertBefore(div, typingEl);
    scrollToBottom();
}

function addTranscriptMessage(text) {
    // Show transcribed voice as a normal user message with mic icon
    const div = document.createElement('div');
    div.className = 'msg user';
    div.textContent = text;
    const ts = document.createElement('div');
    ts.className = 'timestamp';
    ts.textContent = formatTime(Date.now() / 1000);
    div.appendChild(ts);
    messagesEl.insertBefore(div, typingEl);
    scrollToBottom();
}

function renderMarkdown(text) {
    try {
        return marked.parse(text);
    } catch (e) {
        return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }
}

function highlightCode(el) {
    el.querySelectorAll('pre code').forEach(block => {
        hljs.highlightElement(block);
    });
}

// --- Typing ---
function showTyping() {
    typingEl.style.display = 'block';
    scrollToBottom();
    clearTimeout(typingTimeout);
    typingTimeout = setTimeout(hideTyping, 10000);
}

function hideTyping() {
    typingEl.style.display = 'none';
    clearTimeout(typingTimeout);
}

// --- Scroll ---
messagesEl.addEventListener('scroll', () => {
    const atBottom = messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight < 60;
    autoScroll = atBottom;
});

function scrollToBottom() {
    if (autoScroll) {
        requestAnimationFrame(() => {
            messagesEl.scrollTop = messagesEl.scrollHeight;
        });
    }
}

// --- Status ---
function setStatus(connected) {
    const dot = document.getElementById('status-dot');
    const text = document.getElementById('status-text');
    if (connected) {
        dot.className = '';
        dot.id = 'status-dot';
        text.textContent = 'Connected';
    } else {
        dot.className = 'disconnected';
        dot.id = 'status-dot';
        text.textContent = 'Reconnecting...';
    }
}
</script>
</body>
</html>'''