"""Shared HTML template for all KOAN demos — Tailwind CSS via CDN."""

from __future__ import annotations


def chat_page(
    *,
    title: str,
    badge_text: str,
    badge_color: str = "indigo",
    info_html: str = "",
    port: int = 8001,
) -> str:
    """Generate the full HTML page for a demo chat UI.

    Args:
        title: Demo title shown in header.
        badge_text: Badge label (e.g. "FalkorDB", "3 Agents").
        badge_color: Tailwind color name for badge.
        info_html: Extra HTML for the info panel.
        port: Port number for display.
    """
    badge_classes = {
        "indigo": "bg-indigo-500/20 text-indigo-300 ring-indigo-500/30",
        "green": "bg-emerald-500/20 text-emerald-300 ring-emerald-500/30",
        "orange": "bg-amber-500/20 text-amber-300 ring-amber-500/30",
        "red": "bg-rose-500/20 text-rose-300 ring-rose-500/30",
        "gray": "bg-slate-500/20 text-slate-300 ring-slate-500/30",
        "purple": "bg-purple-500/20 text-purple-300 ring-purple-500/30",
    }
    bc = badge_classes.get(badge_color, badge_classes["indigo"])

    return f"""\
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{title}</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <link rel="stylesheet" href="/static/style.css" />
  <style type="text/tailwindcss">
    @theme {{
      --color-surface: #1e1e2e;
      --color-surface-2: #181825;
      --color-surface-3: #11111b;
      --color-border: #313244;
      --color-dim: #6c7086;
      --color-accent: #89b4fa;
    }}
  </style>
</head>
<body class="h-full bg-surface-3 text-slate-200 font-sans flex flex-col overflow-hidden">
  <script>window.DEMO_CONFIG = {{ apiBase: '/api' }};</script>

  <!-- Header -->
  <header class="flex items-center gap-3 px-5 py-3 bg-surface border-b border-border shrink-0">
    <div class="flex items-center gap-2">
      <svg class="w-6 h-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
      </svg>
      <h1 class="text-base font-semibold tracking-tight">{title}</h1>
    </div>
    <span class="text-xs font-medium px-2.5 py-0.5 rounded-full ring-1 ring-inset {bc}">{badge_text}</span>
    <div class="ml-auto flex items-center gap-2 text-xs text-dim">
      <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
      localhost:{port}
    </div>
  </header>

  <!-- Main layout -->
  <div class="flex flex-1 overflow-hidden">

    <!-- Sidebar: Threads -->
    <aside class="hidden md:flex w-64 flex-col border-r border-border bg-surface shrink-0">
      <div class="flex items-center justify-between p-3 border-b border-border">
        <span class="text-xs font-semibold uppercase tracking-wider text-dim">Threads</span>
        <button id="new-thread-btn"
                class="text-xs font-medium px-2.5 py-1 rounded-md
                       bg-indigo-600 hover:bg-indigo-500 text-white transition">
          + New
        </button>
      </div>
      <div id="thread-list" class="thread-list flex-1 overflow-y-auto p-2 space-y-0.5"></div>
    </aside>

    <!-- Chat area -->
    <main class="flex-1 flex flex-col min-w-0">
      <!-- Messages -->
      <div id="messages" class="messages-container flex-1 overflow-y-auto px-4 py-6 space-y-4"></div>

      <!-- Input -->
      <div class="shrink-0 border-t border-border bg-surface p-4">
        <div class="max-w-3xl mx-auto flex gap-3">
          <textarea id="input"
                    rows="1"
                    placeholder="Type a message..."
                    class="flex-1 bg-surface-3 border border-border rounded-xl px-4 py-2.5 text-sm text-slate-200
                           placeholder:text-dim resize-none focus:outline-none focus:ring-2 focus:ring-indigo-500/50
                           focus:border-indigo-500 transition max-h-32"></textarea>
          <button id="send-btn"
                  class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-40 disabled:cursor-not-allowed
                         text-white text-sm font-medium rounded-xl transition shrink-0">
            Send
          </button>
        </div>
      </div>
    </main>

    <!-- Info panel -->
    <aside class="hidden lg:flex w-72 flex-col border-l border-border bg-surface shrink-0 overflow-y-auto">
      <div class="p-4 space-y-5">
        <div>
          <h3 class="text-xs font-semibold uppercase tracking-wider text-dim mb-3">Run Info</h3>
          <div id="info-content" class="space-y-2 text-sm">
            <p class="text-dim italic text-xs">Send a message to see run details</p>
          </div>
        </div>
        <div class="border-t border-border pt-4">
          <h3 class="text-xs font-semibold uppercase tracking-wider text-dim mb-3">Configuration</h3>
          <div class="space-y-1 text-xs">
            {info_html}
          </div>
        </div>
      </div>
    </aside>

  </div>

  <script src="/static/chat.js"></script>
</body>
</html>"""


def info_row(label: str, value: str) -> str:
    """Generate an info panel key-value row."""
    return (
        f'<div class="flex justify-between py-1 border-b border-border/50">'
        f'<span class="text-dim">{label}</span>'
        f'<span class="text-slate-300 font-medium">{value}</span>'
        f'</div>'
    )
