app.py

"""
RyzGateway - BYOK OpenAI-Compatible AI Gateway
Single-file FastAPI app for HuggingFace Spaces deployment.

Model routing:
  - provider/model  → direct passthrough to that provider
  - generic-name    → routed pool (round-robin, skip rate-limited)

Rate limit handling:
  - Auto-detects 429s and marks endpoints as cooled down
  - Respects RPM / RPD / RPS limits configured per provider
  - Smart selection skips exhausted endpoints

Features:
  - Glassmorphism UI (highly optimized for mobile touch)
  - Auto-fetches and imports models directly from provider's /v1/models
"""

import os
import re
import time
import uuid
import json
import asyncio
import logging
from pathlib import Path
from typing import Any, Dict, List, Optional, Literal
from contextlib import asynccontextmanager
from collections import defaultdict, deque

import httpx
from fastapi import FastAPI, HTTPException, Header, Request, Depends
from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
from pydantic import BaseModel, Field

# ── Logging ────────────────────────────────────────────────────────────────────

logging.basicConfig(level=logging.INFO, format="%(asctime)s [%(levelname)s] %(message)s")
log = logging.getLogger("ryzgateway")

# ── Persistence (JSON file, reloaded on each read) ─────────────────────────────

DATA_FILE = Path(os.getenv("DATA_FILE", "/data/gateway.json"))

def _default_data() -> dict:
    return {
        "api_keys": {},       # key_id → {key, name, created_at}
        "providers": {},      # provider_id → {name, base_url, api_key, rate_type, rate_limit, notes}
        "pool_models": {},    # pool_id → {name, members: [{provider_id, model_name, weight}], strategy}
    }

def load_data() -> dict:
    try:
        if DATA_FILE.exists():
            return json.loads(DATA_FILE.read_text())
    except Exception as e:
        log.error(f"Failed to load data: {e}")
    return _default_data()

def save_data(data: dict):
    try:
        DATA_FILE.parent.mkdir(parents=True, exist_ok=True)
        DATA_FILE.write_text(json.dumps(data, indent=2))
    except Exception as e:
        log.error(f"Failed to save data: {e}")

# ── In-memory rate limit state ─────────────────────────────────────────────────
# keyed by (provider_id, model_name)

class RateLimitState:
    def __init__(self):
        self._lock = asyncio.Lock()
        self._cooldown: Dict[str, float] = {}
        self._timestamps: Dict[str, deque] = defaultdict(lambda: deque(maxlen=10000))
        self._rr_index: Dict[str, int] = defaultdict(int)

    def key(self, provider_id: str, model_name: str) -> str:
        return f"{provider_id}:{model_name}"

    async def mark_rate_limited(self, provider_id: str, model_name: str, cooldown_secs: float = 60.0):
        async with self._lock:
            k = self.key(provider_id, model_name)
            self._cooldown[k] = time.time() + cooldown_secs
            log.warning(f"Rate limited: {k} — cooling for {cooldown_secs}s")

    async def is_available(self, provider_id: str, model_name: str, provider_cfg: dict) -> bool:
        async with self._lock:
            k = self.key(provider_id, model_name)
            now = time.time()

            if self._cooldown.get(k, 0) > now:
                return False

            rate_type = provider_cfg.get("rate_type", "none")
            rate_limit = provider_cfg.get("rate_limit", 0)
            if rate_type == "none" or not rate_limit:
                return True

            window = {"rpm": 60, "rps": 1, "rpd": 86400}.get(rate_type, 60)
            cutoff = now - window
            dq = self._timestamps[k]
            while dq and dq[0] < cutoff:
                dq.popleft()
            return len(dq) < rate_limit

    async def record_request(self, provider_id: str, model_name: str):
        async with self._lock:
            k = self.key(provider_id, model_name)
            self._timestamps[k].append(time.time())

    def get_cooldown_remaining(self, provider_id: str, model_name: str) -> float:
        k = self.key(provider_id, model_name)
        remaining = self._cooldown.get(k, 0) - time.time()
        return max(0.0, remaining)

    async def next_rr(self, pool_id: str, count: int) -> int:
        async with self._lock:
            idx = self._rr_index[pool_id] % count
            self._rr_index[pool_id] = (idx + 1) % count
            return idx

rl_state = RateLimitState()

# ── Auth ───────────────────────────────────────────────────────────────────────

ADMIN_KEY = os.getenv("ADMIN_KEY", "admin-changeme")

async def require_admin(authorization: Optional[str] = Header(None)):
    if not authorization or not authorization.startswith("Bearer "):
        raise HTTPException(status_code=401, detail="Missing Authorization header")
    token = authorization[7:]
    if token != ADMIN_KEY:
        raise HTTPException(status_code=403, detail="Invalid admin key")
    return token

async def require_api_key(authorization: Optional[str] = Header(None)):
    if not authorization or not authorization.startswith("Bearer "):
        raise HTTPException(status_code=401, detail="Missing Authorization header")
    token = authorization[7:]
    if token == ADMIN_KEY:
        return token
    data = load_data()
    for k in data["api_keys"].values():
        if k["key"] == token:
            return token
    raise HTTPException(status_code=403, detail="Invalid API key")

# ── Routing logic ──────────────────────────────────────────────────────────────

async def resolve_endpoint(model_str: str, data: dict):
    if "/" in model_str:
        parts = model_str.split("/", 1)
        provider_id, model_name = parts[0], parts[1]
        provider = data["providers"].get(provider_id)
        if not provider:
            raise HTTPException(status_code=404, detail=f"Provider '{provider_id}' not found")
        return provider, model_name, provider_id

    pool = None
    pool_id = None
    for pid, p in data["pool_models"].items():
        if p["name"] == model_str or pid == model_str:
            pool = p
            pool_id = pid
            break

    if not pool:
        raise HTTPException(status_code=404, detail=f"Model or pool '{model_str}' not found.")

    members = pool.get("members", [])
    if not members:
        raise HTTPException(status_code=503, detail=f"Pool '{model_str}' has no members")

    strategy = pool.get("strategy", "round_robin")

    if strategy == "round_robin":
        start = await rl_state.next_rr(pool_id, len(members))
        for i in range(len(members)):
            m = members[(start + i) % len(members)]
            provider = data["providers"].get(m["provider_id"])
            if not provider:
                continue
            if await rl_state.is_available(m["provider_id"], m["model_name"], provider):
                return provider, m["model_name"], m["provider_id"]

    elif strategy == "priority":
        for m in members:
            provider = data["providers"].get(m["provider_id"])
            if not provider:
                continue
            if await rl_state.is_available(m["provider_id"], m["model_name"], provider):
                return provider, m["model_name"], m["provider_id"]

    elif strategy == "weighted":
        import random
        available = []
        for m in members:
            provider = data["providers"].get(m["provider_id"])
            if not provider:
                continue
            if await rl_state.is_available(m["provider_id"], m["model_name"], provider):
                available.append((m, provider))
        if available:
            weights = [m[0].get("weight", 1) for m in available]
            chosen_m, chosen_p = random.choices(available, weights=weights, k=1)[0]
            return chosen_p, chosen_m["model_name"], chosen_m["provider_id"]

    raise HTTPException(status_code=429, detail=f"All endpoints in pool '{model_str}' are currently rate-limited.")

# ── Proxy logic ────────────────────────────────────────────────────────────────

TIMEOUT = httpx.Timeout(320.0, connect=30.0, read=300.0, write=30.0)

def _extract_retry_after(response: httpx.Response) -> float:
    ra = response.headers.get("retry-after", "")
    try:
        return float(ra)
    except Exception:
        return 60.0

async def proxy_request(provider: dict, model_name: str, provider_id: str, body: dict, stream: bool):
    base_url = provider["base_url"].rstrip("/")
    api_key = provider["api_key"]
    headers = {
        "Authorization": f"Bearer {api_key}",
        "Content-Type": "application/json",
    }
    body = {**body, "model": model_name}
    url = f"{base_url}/chat/completions"

    await rl_state.record_request(provider_id, model_name)

    if stream:
        async def stream_gen():
            async with httpx.AsyncClient(timeout=TIMEOUT) as client:
                async with client.stream("POST", url, json=body, headers=headers) as resp:
                    if resp.status_code == 429:
                        cooldown = _extract_retry_after(resp)
                        await rl_state.mark_rate_limited(provider_id, model_name, cooldown)
                        yield f"data: {json.dumps({'error': 'rate_limited', 'provider': provider_id})}\n\n"
                        return
                    async for chunk in resp.aiter_bytes():
                        yield chunk
        return StreamingResponse(stream_gen(), media_type="text/event-stream")

    async with httpx.AsyncClient(timeout=TIMEOUT) as client:
        resp = await client.post(url, json=body, headers=headers)

    if resp.status_code == 429:
        cooldown = _extract_retry_after(resp)
        await rl_state.mark_rate_limited(provider_id, model_name, cooldown)
        raise HTTPException(status_code=429, detail=f"Upstream rate limit hit on {provider_id}/{model_name}. Retry after {cooldown}s.")

    if resp.status_code >= 500:
        raise HTTPException(status_code=502, detail=f"Upstream error from {provider_id}: {resp.status_code}")

    if resp.status_code >= 400:
        try:
            detail = resp.json()
        except Exception:
            detail = resp.text
        raise HTTPException(status_code=resp.status_code, detail=detail)

    return JSONResponse(content=resp.json())

# ── App ────────────────────────────────────────────────────────────────────────

@asynccontextmanager
async def lifespan(app: FastAPI):
    log.info("RyzGateway starting up")
    if not DATA_FILE.exists():
        save_data(_default_data())
        log.info(f"Initialized empty data at {DATA_FILE}")
    yield
    log.info("RyzGateway shutting down")

app = FastAPI(title="RyzGateway", lifespan=lifespan)

# ── OpenAI-compatible endpoints ────────────────────────────────────────────────

class ChatMessage(BaseModel):
    role: str
    content: Any

class ChatRequest(BaseModel):
    model: str
    messages: List[ChatMessage]
    stream: Optional[bool] = False
    temperature: Optional[float] = None
    max_tokens: Optional[int] = None
    top_p: Optional[float] = None
    model_config = {"extra": "allow"}

@app.post("/v1/chat/completions")
async def chat_completions(request: ChatRequest, _key: str = Depends(require_api_key)):
    data = load_data()
    provider, model_name, provider_id = await resolve_endpoint(request.model, data)
    body = request.model_dump(exclude_none=True, exclude={"model"})
    body.update(request.model_extra or {})
    return await proxy_request(provider, model_name, provider_id, body, request.stream or False)

@app.get("/v1/models")
async def list_models(_key: str = Depends(require_api_key)):
    data = load_data()
    now = int(time.time())
    models = []

    for pid, p in data["providers"].items():
        for m in p.get("known_models", []):
            models.append({
                "id": f"{pid}/{m}",
                "object": "model",
                "created": now,
                "owned_by": pid,
            })

    for pool_id, pool in data["pool_models"].items():
        models.append({
            "id": pool["name"],
            "object": "model",
            "created": now,
            "owned_by": "pool",
        })

    return {"object": "list", "data": models}

# ── Admin API ──────────────────────────────────────────────────────────────────

@app.get("/admin/api-keys")
async def get_api_keys(_=Depends(require_admin)):
    data = load_data()
    return list(data["api_keys"].values())

@app.post("/admin/api-keys")
async def create_api_key(body: dict, _=Depends(require_admin)):
    data = load_data()
    kid = str(uuid.uuid4())[:8]
    key = "ryz-" + str(uuid.uuid4()).replace("-", "")
    data["api_keys"][kid] = {
        "id": kid,
        "key": key,
        "name": body.get("name", "Unnamed Key"),
        "created_at": int(time.time()),
    }
    save_data(data)
    return data["api_keys"][kid]

@app.delete("/admin/api-keys/{kid}")
async def delete_api_key(kid: str, _=Depends(require_admin)):
    data = load_data()
    if kid not in data["api_keys"]:
        raise HTTPException(status_code=404, detail="Key not found")
    del data["api_keys"][kid]
    save_data(data)
    return {"deleted": True}

# --- Providers ---

@app.get("/admin/providers")
async def get_providers(_=Depends(require_admin)):
    data = load_data()
    result = []
    for pid, p in data["providers"].items():
        entry = {**p, "id": pid}
        raw = entry.get("api_key", "")
        entry["api_key_masked"] = raw[:6] + "..." + raw[-4:] if len(raw) > 10 else "****"
        entry.pop("api_key", None)
        
        cooldowns = {}
        for m in p.get("known_models", []):
            cd = rl_state.get_cooldown_remaining(pid, m)
            if cd > 0:
                cooldowns[m] = round(cd, 1)
        entry["active_cooldowns"] = cooldowns
        result.append(entry)
    return result

@app.post("/admin/providers")
async def create_provider(body: dict, _=Depends(require_admin)):
    data = load_data()
    pid = body.get("id") or re.sub(r"[^a-z0-9_-]", "-", body.get("name", "provider").lower())[:32]
    if pid in data["providers"]:
        raise HTTPException(status_code=409, detail=f"Provider ID '{pid}' already exists")
    data["providers"][pid] = {
        "name": body.get("name", pid),
        "base_url": body.get("base_url", ""),
        "api_key": body.get("api_key", ""),
        "rate_type": body.get("rate_type", "none"),
        "rate_limit": int(body.get("rate_limit", 0)),
        "known_models": body.get("known_models", []),
        "notes": body.get("notes", ""),
    }
    save_data(data)
    return {"id": pid, **data["providers"][pid], "api_key": "[hidden]"}

@app.put("/admin/providers/{pid}")
async def update_provider(pid: str, body: dict, _=Depends(require_admin)):
    data = load_data()
    if pid not in data["providers"]:
        raise HTTPException(status_code=404, detail="Provider not found")
    p = data["providers"][pid]
    for field in ["name", "base_url", "rate_type", "notes", "known_models"]:
        if field in body:
            p[field] = body[field]
    if "rate_limit" in body:
        p["rate_limit"] = int(body["rate_limit"])
    if "api_key" in body and body["api_key"] and not body["api_key"].startswith("****"):
        p["api_key"] = body["api_key"]
    save_data(data)
    return {"id": pid, **p, "api_key": "[hidden]"}

@app.delete("/admin/providers/{pid}")
async def delete_provider(pid: str, _=Depends(require_admin)):
    data = load_data()
    if pid not in data["providers"]:
        raise HTTPException(status_code=404, detail="Provider not found")
    del data["providers"][pid]
    save_data(data)
    return {"deleted": True}

@app.post("/admin/providers/{pid}/fetch-models")
async def fetch_provider_models(pid: str, _=Depends(require_admin)):
    data = load_data()
    if pid not in data["providers"]:
        raise HTTPException(status_code=404, detail="Provider not found")
    
    p = data["providers"][pid]
    base_url = p["base_url"].rstrip("/")
    api_key = p["api_key"]
    
    if not base_url or not api_key:
        raise HTTPException(status_code=400, detail="Provider base_url or api_key is missing.")
    
    headers = {
        "Authorization": f"Bearer {api_key}",
        "Content-Type": "application/json",
    }
    
    try:
        async with httpx.AsyncClient(timeout=15.0) as client:
            resp = await client.get(f"{base_url}/models", headers=headers)
            
            if resp.status_code != 200:
                raise HTTPException(status_code=502, detail=f"Upstream returned {resp.status_code}: {resp.text[:200]}")
            
            resp_data = resp.json()
            models = []
            if isinstance(resp_data, dict) and "data" in resp_data:
                for item in resp_data["data"]:
                    if "id" in item:
                        models.append(item["id"])
            elif isinstance(resp_data, list):
                for item in resp_data:
                    if isinstance(item, dict) and "id" in item:
                        models.append(item["id"])
                    elif isinstance(item, str):
                        models.append(item)
            
            if not models:
                raise HTTPException(status_code=404, detail="No models found in upstream /v1/models response.")

            # Remove duplicates and sort
            unique_models = sorted(list(set(models)))
            
            p["known_models"] = unique_models
            save_data(data)
            
            return {"fetched_count": len(unique_models), "models": unique_models}
            
    except httpx.RequestError as e:
        raise HTTPException(status_code=502, detail=f"Network error fetching models: {str(e)}")

# --- Pool Models ---

@app.get("/admin/pools")
async def get_pools(_=Depends(require_admin)):
    data = load_data()
    result = []
    for pool_id, pool in data["pool_models"].items():
        entry = {**pool, "id": pool_id}
        annotated = []
        for m in pool.get("members", []):
            provider = data["providers"].get(m["provider_id"], {})
            available = await rl_state.is_available(m["provider_id"], m["model_name"], provider)
            cooldown = rl_state.get_cooldown_remaining(m["provider_id"], m["model_name"])
            annotated.append({**m, "available": available, "cooldown_remaining": round(cooldown, 1)})
        entry["members"] = annotated
        result.append(entry)
    return result

@app.post("/admin/pools")
async def create_pool(body: dict, _=Depends(require_admin)):
    data = load_data()
    pool_id = body.get("id") or re.sub(r"[^a-z0-9_-]", "-", body.get("name", "pool").lower())[:32]
    if pool_id in data["pool_models"]:
        raise HTTPException(status_code=409, detail=f"Pool ID '{pool_id}' already exists")
    data["pool_models"][pool_id] = {
        "name": body.get("name", pool_id),
        "strategy": body.get("strategy", "round_robin"),
        "members": body.get("members", []),
    }
    save_data(data)
    return {"id": pool_id, **data["pool_models"][pool_id]}

@app.put("/admin/pools/{pool_id}")
async def update_pool(pool_id: str, body: dict, _=Depends(require_admin)):
    data = load_data()
    if pool_id not in data["pool_models"]:
        raise HTTPException(status_code=404, detail="Pool not found")
    p = data["pool_models"][pool_id]
    for field in ["name", "strategy", "members"]:
        if field in body:
            p[field] = body[field]
    save_data(data)
    return {"id": pool_id, **p}

@app.delete("/admin/pools/{pool_id}")
async def delete_pool(pool_id: str, _=Depends(require_admin)):
    data = load_data()
    if pool_id not in data["pool_models"]:
        raise HTTPException(status_code=404, detail="Pool not found")
    del data["pool_models"][pool_id]
    save_data(data)
    return {"deleted": True}

# --- Status ---

@app.get("/admin/status")
async def get_status(_=Depends(require_admin)):
    data = load_data()
    return {
        "providers": len(data["providers"]),
        "pools": len(data["pool_models"]),
        "api_keys": len(data["api_keys"]),
    }

# ── Dashboard (Mobile-Optimized Glassmorphism UI) ──────────────────────────────

DASHBOARD_HTML = r"""<!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>RyzGateway</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

  :root {
    --bg: #0a0a0f;
    --surface-glass: rgba(20, 20, 30, 0.55);
    --surface-glass-strong: rgba(30, 30, 45, 0.7);
    --border-glass: rgba(255, 255, 255, 0.1);
    --border-glass-strong: rgba(255, 255, 255, 0.2);
    --text: #f0f0f5;
    --muted: #8888a0;
    --accent: #7c6af7;
    --accent-dim: rgba(124,106,247,0.2);
    --accent-hover: #9080ff;
    --green: #4ade80;
    --green-dim: rgba(74,222,128,0.15);
    --red: #f87171;
    --red-dim: rgba(248,113,113,0.15);
    --amber: #fbbf24;
    --amber-dim: rgba(251,191,36,0.15);
    --radius: 10px;
    --radius-lg: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  html, body { height: 100%; overscroll-behavior: none; }
  
  body { 
    background: var(--bg);
    color: var(--text); 
    min-height: 100vh;
    background-image: 
      radial-gradient(circle at 0% 0%, rgba(124, 106, 247, 0.15) 0%, transparent 40%),
      radial-gradient(circle at 100% 100%, rgba(74, 222, 128, 0.1) 0%, transparent 40%);
    background-attachment: fixed;
  }

  /* Layout */
  .app { display: flex; min-height: 100vh; }
  
  .sidebar { 
    width: 260px; 
    flex-shrink: 0; 
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-right: 1px solid var(--border-glass); 
    padding: 1.5rem 0; 
    display: flex; 
    flex-direction: column; 
    position: fixed; 
    top: 0; left: 0; height: 100vh; 
    z-index: 100; 
    transition: transform 0.3s ease;
  }
  
  .main { 
    flex: 1; 
    padding: 2rem; 
    max-width: 960px; 
    margin-left: 260px; 
  }

  .mobile-header {
    display: none;
    position: sticky;
    top: 0;
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid var(--border-glass);
    padding: 1rem;
    z-index: 90;
    align-items: center;
    justify-content: space-between;
  }
  
  .menu-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--border-glass);
    color: var(--text);
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }

  /* Sidebar */
  .logo { padding: 0 1.25rem 1.5rem; border-bottom: 1px solid var(--border-glass); margin-bottom: 0.75rem; }
  .logo-text { font-size: 1.2rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
  .logo-sub { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
  .nav-item { display: flex; align-items: center; gap: 12px; padding: 0.75rem 1.25rem; color: var(--muted); cursor: pointer; font-size: 0.9rem; transition: all 0.2s; border-left: 3px solid transparent; }
  .nav-item:hover { color: var(--text); background: rgba(255,255,255,0.05); }
  .nav-item.active { color: var(--text); background: var(--accent-dim); border-left-color: var(--accent); }
  .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
  .nav-section { font-size: 0.7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 1.25rem 1.25rem 0.5rem; }

  /* Auth gate */
  #auth-gate { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 999; padding: 1rem; }
  .auth-box { background: var(--surface-glass-strong); backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%); border: 1px solid var(--border-glass-strong); border-radius: var(--radius-lg); padding: 2rem; width: 100%; max-width: 360px; }
  .auth-box h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
  .auth-box p { color: var(--muted); font-size: 0.85rem; margin-bottom: 1.5rem; }

  /* Page header */
  .page-header { margin-bottom: 1.75rem; }
  .page-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
  .page-sub { color: var(--muted); font-size: 0.875rem; margin-top: 4px; }

  /* Cards */
  .card { background: var(--surface-glass); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: 1.25rem; transition: border-color 0.2s; }
  .card + .card { margin-top: 1rem; }

  /* Stats row */
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
  .stat { background: var(--surface-glass); backdrop-filter: blur(15px); border: 1px solid var(--border-glass); border-radius: var(--radius); padding: 1rem; text-align: center; }
  .stat-val { font-size: 1.5rem; font-weight: 700; color: var(--text); }
  .stat-label { font-size: 0.7rem; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }

  /* Table */
  .table-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
  th { text-align: left; color: var(--muted); font-weight: 500; font-size: 0.75rem; padding: 0 0.75rem 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
  td { padding: 0.875rem 0.75rem; border-top: 1px solid var(--border-glass); vertical-align: middle; }
  tr:hover td { background: rgba(255,255,255,0.03); }

  /* Badges */
  .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; font-size: 0.7rem; font-weight: 600; }
  .badge-green { background: var(--green-dim); color: var(--green); }
  .badge-red { background: var(--red-dim); color: var(--red); }
  .badge-amber { background: var(--amber-dim); color: var(--amber); }
  .badge-purple { background: var(--accent-dim); color: var(--accent); }
  .badge-gray { background: rgba(255,255,255,0.08); color: var(--muted); }
  .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; gap: 6px; padding: 0.5rem 1rem; border-radius: var(--radius); border: 1px solid var(--border-glass-strong); background: rgba(255,255,255,0.05); color: var(--text); font-size: 0.85rem; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
  .btn:hover { background: rgba(255,255,255,0.1); }
  .btn:active { transform: scale(0.97); }
  .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .btn-danger { background: var(--red-dim); border-color: rgba(248,113,113,0.3); color: var(--red); }
  .btn-sm { padding: 0.35rem 0.7rem; font-size: 0.75rem; }
  .btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }

  /* Forms */
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .form-grid.full { grid-template-columns: 1fr; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field.span2 { grid-column: span 2; }
  label { font-size: 0.8rem; color: var(--muted); font-weight: 500; }
  input, select, textarea { background: rgba(0,0,0,0.2); border: 1px solid var(--border-glass-strong); border-radius: var(--radius); color: var(--text); padding: 0.65rem 0.85rem; font-size: 0.9rem; font-family: inherit; width: 100%; transition: border-color 0.2s; }
  input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
  select option { background: #1a1a25; }
  textarea { min-height: 70px; resize: vertical; }

  /* Modal */
  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); display: flex; align-items: flex-end; justify-content: center; z-index: 500; padding: 0; }
  .modal { background: var(--surface-glass-strong); backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%); border: 1px solid var(--border-glass-strong); border-radius: 20px 20px 0 0; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; animation: slideUp 0.3s ease-out; }
  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .modal-header { padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--border-glass); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: inherit; z-index: 10; }
  .modal-title { font-size: 1.1rem; font-weight: 600; }
  .modal-body { padding: 1.5rem; }
  .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border-glass); display: flex; justify-content: flex-end; gap: 0.5rem; position: sticky; bottom: 0; background: inherit; }
  .close-btn { background: rgba(255,255,255,0.05); border: 1px solid var(--border-glass); color: var(--muted); cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 6px 10px; border-radius: 8px; }
  .close-btn:hover { color: var(--text); background: rgba(255,255,255,0.1); }

  /* Members list in pool */
  .member-item { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-glass); border-radius: var(--radius); padding: 0.65rem 0.85rem; margin-bottom: 0.5rem; }
  .member-item .member-label { flex: 1; font-size: 0.85rem; word-break: break-all; }
  .member-badge { font-size: 0.75rem; color: var(--muted); }

  /* Code / key display */
  .key-display { font-family: 'SF Mono', Consolas, monospace; font-size: 0.8rem; background: rgba(0,0,0,0.3); border: 1px solid var(--border-glass); border-radius: var(--radius); padding: 0.65rem 0.85rem; word-break: break-all; color: var(--green); }
  .code-block { font-family: 'SF Mono', Consolas, monospace; font-size: 0.8rem; background: rgba(0,0,0,0.3); border: 1px solid var(--border-glass); border-radius: var(--radius); padding: 1rem; overflow-x: auto; line-height: 1.6; }

  /* Toast */
  #toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: var(--surface-glass-strong); backdrop-filter: blur(20px); border: 1px solid var(--border-glass-strong); border-radius: 99px; padding: 0.75rem 1.5rem; font-size: 0.85rem; z-index: 9999; opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; max-width: 90%; text-align: center; }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* Empty state */
  .empty { text-align: center; padding: 3rem 1rem; color: var(--muted); font-size: 0.9rem; }

  /* Sections */
  .section { display: none; }
  .section.active { display: block; }

  /* Callout */
  .callout { background: var(--accent-dim); border: 1px solid rgba(124,106,247,0.3); border-radius: var(--radius); padding: 1rem; font-size: 0.85rem; color: var(--text); margin-bottom: 1.25rem; line-height: 1.6; }
  .callout code { background: rgba(0,0,0,0.3); border-radius: 4px; padding: 2px 6px; font-family: monospace; font-size: 0.8rem; color: var(--accent); }

  /* Mobile optimizations */
  @media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); box-shadow: 5px 0 30px rgba(0,0,0,0.5); }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; padding: 1rem; padding-bottom: 3rem; }
    .mobile-header { display: flex; }
    .form-grid { grid-template-columns: 1fr; }
    .field.span2 { grid-column: span 1; }
    .page-title { font-size: 1.25rem; }
    .stats { gap: 0.5rem; }
    .stat-val { font-size: 1.25rem; }
    .card { padding: 1rem; }
    th, td { padding: 0.65rem 0.5rem; font-size: 0.8rem; }
    .hide-mobile { display: none; }
  }
  
  /* Prevent body scroll when menu open */
  body.menu-open { overflow: hidden; }
  .menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; }
  body.menu-open .menu-overlay { display: block; }
</style>
</head>
<body>

<div id="auth-gate">
  <div class="auth-box">
    <h2>RyzGateway</h2>
    <p>Enter your admin key to access the dashboard.</p>
    <div class="field" style="margin-bottom:1rem">
      <label>Admin Key</label>
      <input type="password" id="login-key" placeholder="sk-admin-..." />
    </div>
    <button class="btn btn-primary" style="width:100%; justify-content:center;" onclick="doLogin()">Sign in</button>
    <div id="login-err" style="color:var(--red);font-size:0.8rem;margin-top:0.75rem;display:none">Invalid key.</div>
  </div>
</div>

<div class="app" id="app-shell" style="display:none">
  <div class="menu-overlay" onclick="toggleMenu()"></div>
  
  <aside class="sidebar" id="sidebar">
    <div class="logo">
      <div class="logo-text">RyzGateway</div>
      <div class="logo-sub">BYOK AI Router</div>
    </div>
    <div class="nav-section">Overview</div>
    <div class="nav-item active" onclick="nav('overview', this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
      Dashboard
    </div>
    <div class="nav-section">Configure</div>
    <div class="nav-item" onclick="nav('providers', this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
      Providers
    </div>
    <div class="nav-item" onclick="nav('pools', this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
      Model Pools
    </div>
    <div class="nav-item" onclick="nav('keys', this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
      API Keys
    </div>
    <div class="nav-section">Reference</div>
    <div class="nav-item" onclick="nav('docs', this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
      Usage Docs
    </div>
  </aside>

  <main class="main">
    <div class="mobile-header">
      <button class="menu-btn" onclick="toggleMenu()">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
      </button>
      <div style="font-weight:600">RyzGateway</div>
      <div style="width:40px"></div>
    </div>

    <!-- OVERVIEW -->
    <div class="section active" id="sec-overview">
      <div class="page-header">
        <div class="page-title">Dashboard</div>
        <div class="page-sub">Gateway status and routing health</div>
      </div>
      <div class="stats" id="stats-row">
        <div class="stat"><div class="stat-val" id="stat-providers">—</div><div class="stat-label">Providers</div></div>
        <div class="stat"><div class="stat-val" id="stat-pools">—</div><div class="stat-label">Pools</div></div>
        <div class="stat"><div class="stat-val" id="stat-keys">—</div><div class="stat-label">Keys</div></div>
      </div>
      <div class="card">
        <div style="font-size:0.9rem;font-weight:600;margin-bottom:1rem">Provider health</div>
        <div id="health-list"><div class="empty">No providers configured</div></div>
      </div>
    </div>

    <!-- PROVIDERS -->
    <div class="section" id="sec-providers">
      <div class="page-header">
        <div class="page-title">Providers</div>
        <div class="page-sub">API endpoints with rate limit configuration</div>
      </div>
      <div class="btn-row">
        <button class="btn btn-primary" onclick="openProviderModal()">+ Add provider</button>
        <button class="btn" onclick="loadProviders()">↺ Refresh</button>
      </div>
      <div class="callout">
        <strong>Provider ID</strong> is auto-generated from the name and used in model routing. Use <code>provider-id/exact-model-name</code> to route directly. Click <strong>Fetch Models</strong> on a provider to auto-import available models.
      </div>
      <div class="card">
        <div class="table-wrap">
          <table>
            <thead><tr>
              <th>Provider</th><th class="hide-mobile">Base URL</th><th>Rate limit</th><th>Models</th><th>Status</th><th></th>
            </tr></thead>
            <tbody id="providers-tbody"><tr><td colspan="6"><div class="empty">Loading...</div></td></tr></tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- POOLS -->
    <div class="section" id="sec-pools">
      <div class="page-header">
        <div class="page-title">Model Pools</div>
        <div class="page-sub">Generic model names that route across multiple providers</div>
      </div>
      <div class="btn-row">
        <button class="btn btn-primary" onclick="openPoolModal()">+ Add pool</button>
        <button class="btn" onclick="loadPools()">↺ Refresh</button>
      </div>
      <div class="callout">
        Pool names are generic model names exposed in <code>/v1/models</code>. The gateway routes requests using your chosen strategy and automatically skips rate-limited endpoints.
      </div>
      <div id="pools-list"><div class="empty">Loading...</div></div>
    </div>

    <!-- API KEYS -->
    <div class="section" id="sec-keys">
      <div class="page-header">
        <div class="page-title">API Keys</div>
        <div class="page-sub">Keys issued to clients for /v1/ access</div>
      </div>
      <div class="btn-row">
        <button class="btn btn-primary" onclick="openKeyModal()">+ Create key</button>
        <button class="btn" onclick="loadKeys()">↺ Refresh</button>
      </div>
      <div class="card">
        <div class="table-wrap">
          <table>
            <thead><tr><th>Name</th><th>Key</th><th class="hide-mobile">Created</th><th></th></tr></thead>
            <tbody id="keys-tbody"><tr><td colspan="4"><div class="empty">Loading...</div></td></tr></tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- DOCS -->
    <div class="section" id="sec-docs">
      <div class="page-header">
        <div class="page-title">Usage docs</div>
        <div class="page-sub">How to use RyzGateway in your apps</div>
      </div>
      <div class="card" style="margin-bottom:1rem">
        <div style="font-size:0.9rem;font-weight:600;margin-bottom:0.75rem">Base URL</div>
        <div class="key-display" id="base-url-display"></div>
        <div style="font-size:0.8rem;color:var(--muted);margin-top:0.5rem">Point any OpenAI-compatible client at this URL.</div>
      </div>
      <div class="card" style="margin-bottom:1rem">
        <div style="font-size:0.9rem;font-weight:600;margin-bottom:0.75rem">Model name formats</div>
        <div style="font-size:0.85rem;line-height:1.8;color:var(--text)">
          <div style="margin-bottom:0.75rem"><span style="font-family:monospace;background:rgba(0,0,0,0.3);padding:3px 8px;border-radius:6px;color:var(--accent)">provider-id/exact-model-name</span> — Direct passthrough.</div>
          <div><span style="font-family:monospace;background:rgba(0,0,0,0.3);padding:3px 8px;border-radius:6px;color:var(--green)">pool-name</span> — Pool routing.</div>
        </div>
      </div>
      <div class="card" style="margin-bottom:1rem">
        <div style="font-size:0.9rem;font-weight:600;margin-bottom:0.75rem">Example: Python (openai SDK)</div>
        <pre class="code-block"><code>import openai

client = openai.OpenAI(
    base_url="<span id="doc-base-url"></span>",
    api_key="YOUR_RYZGATEWAY_API_KEY",
)

# Direct provider routing
resp = client.chat.completions.create(
    model="openrouter/google/gemini-flash-1.5",
    messages=[{"role": "user", "content": "Hello!"}]
)

# Pool routing (auto-selects available endpoint)
resp = client.chat.completions.create(
    model="fast-model",
    messages=[{"role": "user", "content": "Hello!"}]
)</code></pre>
      </div>
      <div class="card">
        <div style="font-size:0.9rem;font-weight:600;margin-bottom:0.75rem">Rate limit types</div>
        <table style="font-size:0.85rem">
          <thead><tr><th>Type</th><th>Meaning</th><th>Window</th></tr></thead>
          <tbody>
            <tr><td><span class="badge badge-purple">RPM</span></td><td>Requests per minute</td><td>60s</td></tr>
            <tr><td><span class="badge badge-green">RPS</span></td><td>Requests per second</td><td>1s</td></tr>
            <tr><td><span class="badge badge-amber">RPD</span></td><td>Requests per day</td><td>86400s</td></tr>
            <tr><td><span class="badge badge-gray">None</span></td><td>No limit tracked</td><td>—</td></tr>
          </tbody>
        </table>
      </div>
    </div>

  </main>
</div>

<!-- Modals -->
<div class="overlay" id="modal-overlay" style="display:none" onclick="if(event.target===this)closeModal()">
  <div class="modal" id="modal-box">
    <div class="modal-header">
      <div class="modal-title" id="modal-title">Modal</div>
      <button class="close-btn" onclick="closeModal()">✕</button>
    </div>
    <div class="modal-body" id="modal-body"></div>
    <div class="modal-footer" id="modal-footer"></div>
  </div>
</div>

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

<script>
let ADMIN_KEY = '';
const BASE = window.location.origin;

// ── Auth ────────────────────────────────────────────────────────────────────
async function doLogin() {
  const k = document.getElementById('login-key').value.trim();
  const err = document.getElementById('login-err');
  err.style.display = 'none';
  try {
    const r = await fetch('/admin/status', { headers: { Authorization: 'Bearer ' + k } });
    if (!r.ok) { err.style.display = 'block'; return; }
    ADMIN_KEY = k;
    document.getElementById('auth-gate').style.display = 'none';
    document.getElementById('app-shell').style.display = 'flex';
    document.getElementById('base-url-display').textContent = BASE;
    document.getElementById('doc-base-url').textContent = BASE + '/v1';
    initApp();
  } catch(e) { err.style.display = 'block'; }
}
document.getElementById('login-key').addEventListener('keydown', e => { if(e.key === 'Enter') doLogin(); });

async function api(method, path, body) {
  const opts = { method, headers: { 'Authorization': 'Bearer ' + ADMIN_KEY, 'Content-Type': 'application/json' } };
  if (body) opts.body = JSON.stringify(body);
  const r = await fetch(path, opts);
  if (!r.ok) { 
    const t = await r.text(); 
    let msg = t;
    try { const j = JSON.parse(t); msg = j.detail || t; } catch(e) {}
    throw new Error(msg); 
  }
  return r.json();
}

// ── Navigation ───────────────────────────────────────────────────────────────
function toggleMenu() {
  document.body.classList.toggle('menu-open');
  document.getElementById('sidebar').classList.toggle('open');
}

function nav(id, el) {
  document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
  document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
  document.getElementById('sec-' + id).classList.add('active');
  if(el) el.classList.add('active');
  if (window.innerWidth <= 768) toggleMenu();
  if (id === 'overview') loadOverview();
  if (id === 'providers') loadProviders();
  if (id === 'pools') loadPools();
  if (id === 'keys') loadKeys();
}

function initApp() {
  loadOverview();
  loadProviders();
  loadPools();
  loadKeys();
}

// ── Toast ────────────────────────────────────────────────────────────────────
let toastTimer;
function toast(msg, type='ok') {
  const el = document.getElementById('toast');
  el.textContent = msg;
  el.style.color = type === 'err' ? 'var(--red)' : 'var(--text)';
  el.style.borderColor = type === 'err' ? 'var(--red-dim)' : 'var(--border-glass-strong)';
  el.classList.add('show');
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => el.classList.remove('show'), 3500);
}

// ── Modal ────────────────────────────────────────────────────────────────────
function openModal(title, bodyHTML, footerHTML) {
  document.getElementById('modal-title').textContent = title;
  document.getElementById('modal-body').innerHTML = bodyHTML;
  document.getElementById('modal-footer').innerHTML = footerHTML;
  document.getElementById('modal-overlay').style.display = 'flex';
}
function closeModal() { document.getElementById('modal-overlay').style.display = 'none'; }

// ── Overview ─────────────────────────────────────────────────────────────────
async function loadOverview() {
  try {
    const [status, providers] = await Promise.all([api('GET', '/admin/status'), api('GET', '/admin/providers')]);
    document.getElementById('stat-providers').textContent = status.providers;
    document.getElementById('stat-pools').textContent = status.pools;
    document.getElementById('stat-keys').textContent = status.api_keys;

    const el = document.getElementById('health-list');
    if (!providers.length) { el.innerHTML = '<div class="empty">No providers configured</div>'; return; }
    el.innerHTML = providers.map(p => {
      const cds = Object.entries(p.active_cooldowns || {});
      const status = cds.length
        ? `<span class="badge badge-amber"><span class="dot"></span>${cds.length} cooling</span>`
        : `<span class="badge badge-green"><span class="dot"></span>OK</span>`;
      const rl = p.rate_type !== 'none' ? `<span class="badge badge-gray">${p.rate_limit} ${p.rate_type.toUpperCase()}</span>` : '<span class="badge badge-gray">no limit</span>';
      return `<div style="display:flex;align-items:center;gap:12px;padding:0.75rem 0;border-bottom:1px solid var(--border-glass)">
        <div style="flex:1;font-size:0.9rem;font-weight:500">${p.name} <span style="color:var(--muted);font-weight:400;font-size:0.8rem">${p.id}</span></div>
        <div>${rl}</div>
        <div>${status}</div>
      </div>`;
    }).join('');
  } catch(e) { console.error(e); }
}

// ── Providers ────────────────────────────────────────────────────────────────
async function loadProviders() {
  try {
    const providers = await api('GET', '/admin/providers');
    const tbody = document.getElementById('providers-tbody');
    if (!providers.length) { tbody.innerHTML = '<tr><td colspan="6"><div class="empty">No providers yet</div></td></tr>'; return; }
    tbody.innerHTML = providers.map(p => {
      const rl = p.rate_type !== 'none' ? `${p.rate_limit} ${p.rate_type.toUpperCase()}` : '—';
      const cds = Object.entries(p.active_cooldowns || {});
      const statusBadge = cds.length
        ? `<span class="badge badge-amber"><span class="dot"></span>${cds.length}</span>`
        : `<span class="badge badge-green"><span class="dot"></span>OK</span>`;
      const models = (p.known_models || []).length;
      return `<tr>
        <td><div style="font-weight:500">${p.name}</div><div style="font-size:0.75rem;color:var(--muted)">${p.id}</div></td>
        <td class="hide-mobile" style="font-size:0.8rem;color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${p.base_url}</td>
        <td style="font-size:0.8rem">${rl}</td>
        <td style="font-size:0.8rem">${models}</td>
        <td>${statusBadge}</td>
        <td style="text-align:right; white-space:nowrap;">
          <button class="btn btn-sm" onclick='fetchModels("${p.id}")' title="Auto-fetch models from provider">Fetch</button>
          <button class="btn btn-sm" onclick='editProvider(${JSON.stringify(p)})'>Edit</button>
          <button class="btn btn-sm btn-danger" onclick="deleteProvider('${p.id}','${p.name}')">Del</button>
        </td>
      </tr>`;
    }).join('');
  } catch(e) { console.error(e); }
}

async function fetchModels(pid) {
  toast('Fetching models...');
  try {
    const res = await api('POST', `/admin/providers/${pid}/fetch-models`);
    toast(`Successfully imported ${res.fetched_count} models!`);
    loadProviders();
    loadOverview();
  } catch(e) { 
    toast('Fetch failed: ' + e.message, 'err'); 
  }
}

function openProviderModal(existing) {
  const p = existing || {};
  const isEdit = !!p.id;
  const body = `
    <div class="form-grid">
      <div class="field"><label>Provider name</label><input id="p-name" value="${p.name||''}" placeholder="OpenRouter"></div>
      <div class="field"><label>Provider ID</label><input id="p-id" value="${p.id||''}" placeholder="auto-generated" ${isEdit?'disabled':''}></div>
      <div class="field span2"><label>Base URL</label><input id="p-url" value="${p.base_url||''}" placeholder="https://openrouter.ai/api/v1"></div>
      <div class="field span2"><label>API Key</label><input id="p-key" type="password" value="" placeholder="${isEdit?'Leave blank to keep current':'sk-...'}"></div>
      <div class="field"><label>Rate limit type</label>
        <select id="p-rtype">
          <option value="none" ${p.rate_type==='none'||!p.rate_type?'selected':''}>None</option>
          <option value="rpm" ${p.rate_type==='rpm'?'selected':''}>RPM (per minute)</option>
          <option value="rps" ${p.rate_type==='rps'?'selected':''}>RPS (per second)</option>
          <option value="rpd" ${p.rate_type==='rpd'?'selected':''}>RPD (per day)</option>
        </select>
      </div>
      <div class="field"><label>Rate limit value</label><input id="p-rlimit" type="number" value="${p.rate_limit||0}" min="0"></div>
      <div class="field span2"><label>Known models (comma-separated)</label><input id="p-models" value="${(p.known_models||[]).join(', ')}" placeholder="gpt-4o, gpt-4o-mini, ..."></div>
      <div class="field span2"><label>Notes</label><textarea id="p-notes">${p.notes||''}</textarea></div>
    </div>
    <div class="callout" style="margin-top:1rem;font-size:0.8rem">
      Tip: Save the provider first, then click "Fetch" on the providers list to automatically pull and populate the models list.
    </div>`;
  const footer = `
    <button class="btn" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="saveProvider(${isEdit?`'${p.id}'`:'null'})">${isEdit?'Save changes':'Add provider'}</button>`;
  openModal(isEdit ? 'Edit provider' : 'Add provider', body, footer);
}

function editProvider(p) { openProviderModal(p); }

async function saveProvider(existingId) {
  const name = document.getElementById('p-name').value.trim();
  const id = document.getElementById('p-id').value.trim() || undefined;
  const base_url = document.getElementById('p-url').value.trim();
  const api_key = document.getElementById('p-key').value.trim();
  const rate_type = document.getElementById('p-rtype').value;
  const rate_limit = parseInt(document.getElementById('p-rlimit').value) || 0;
  const known_models = document.getElementById('p-models').value.split(',').map(s=>s.trim()).filter(Boolean);
  const notes = document.getElementById('p-notes').value.trim();
  if (!name || !base_url) { toast('Name and Base URL are required', 'err'); return; }
  try {
    if (existingId) {
      await api('PUT', `/admin/providers/${existingId}`, { name, base_url, api_key, rate_type, rate_limit, known_models, notes });
      toast('Provider updated');
    } else {
      await api('POST', '/admin/providers', { name, id, base_url, api_key, rate_type, rate_limit, known_models, notes });
      toast('Provider added');
    }
    closeModal();
    loadProviders();
    loadOverview();
  } catch(e) { toast('Error: ' + e.message, 'err'); }
}

async function deleteProvider(id, name) {
  if (!confirm(`Delete provider "${name}"?`)) return;
  try { await api('DELETE', `/admin/providers/${id}`); toast('Deleted'); loadProviders(); loadOverview(); }
  catch(e) { toast('Error: ' + e.message, 'err'); }
}

// ── Pools ────────────────────────────────────────────────────────────────────
let providersCache = [];

async function loadPools() {
  try {
    const [pools, providers] = await Promise.all([api('GET', '/admin/pools'), api('GET', '/admin/providers')]);
    providersCache = providers;
    const el = document.getElementById('pools-list');
    if (!pools.length) { el.innerHTML = '<div class="empty">No pools yet. Add a pool to create a generic routed model.</div>'; return; }
    el.innerHTML = pools.map(pool => {
      const stratBadge = {round_robin:'<span class="badge badge-purple">Round robin</span>', priority:'<span class="badge badge-amber">Priority</span>', weighted:'<span class="badge badge-green">Weighted</span>'}[pool.strategy] || '';
      const members = (pool.members||[]).map(m => {
        const avail = m.available;
        const cd = m.cooldown_remaining > 0 ? ` (${m.cooldown_remaining}s)` : '';
        const badge = avail ? '<span class="badge badge-green"><span class="dot"></span>OK</span>' : `<span class="badge badge-red"><span class="dot"></span>RL${cd}</span>`;
        return `<div class="member-item">
          <div class="member-label"><strong>${m.provider_id}</strong> / ${m.model_name}</div>
          ${m.weight !== undefined ? `<span class="member-badge">w:${m.weight}</span>` : ''}
          ${badge}
        </div>`;
      }).join('');
      return `<div class="card" style="margin-bottom:1rem">
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:1rem;flex-wrap:wrap">
          <div style="flex:1;min-width: 150px">
            <div style="font-weight:600;font-size:1rem">${pool.name}</div>
            <div style="font-size:0.8rem;color:var(--muted)">${pool.id}</div>
          </div>
          ${stratBadge}
          <button class="btn btn-sm" onclick='openPoolModal(${JSON.stringify(pool)})'>Edit</button>
          <button class="btn btn-sm btn-danger" onclick="deletePool('${pool.id}','${pool.name}')">Del</button>
        </div>
        ${members || '<div style="color:var(--muted);font-size:0.85rem">No members</div>'}
      </div>`;
    }).join('');
  } catch(e) { console.error(e); }
}

let poolMembers = [];

function openPoolModal(existing) {
  const p = existing || {};
  const isEdit = !!p.id;
  poolMembers = JSON.parse(JSON.stringify(p.members || []));

  const provOpts = providersCache.map(pr =>
    `<option value="${pr.id}">${pr.name} (${pr.id})</option>`
  ).join('');

  const body = `
    <div class="form-grid" style="margin-bottom:1rem">
      <div class="field"><label>Pool name (used as model ID)</label><input id="pool-name" value="${p.name||''}" placeholder="fast-model"></div>
      <div class="field"><label>Strategy</label>
        <select id="pool-strat">
          <option value="round_robin" ${p.strategy==='round_robin'||!p.strategy?'selected':''}>Round robin</option>
          <option value="priority" ${p.strategy==='priority'?'selected':''}>Priority (top-down)</option>
          <option value="weighted" ${p.strategy==='weighted'?'selected':''}>Weighted random</option>
        </select>
      </div>
    </div>
    <div style="font-size:0.8rem;color:var(--muted);font-weight:500;margin-bottom:0.5rem">MEMBERS</div>
    <div id="pool-members-list"></div>
    <div style="background:rgba(0,0,0,0.2);border:1px solid var(--border-glass);border-radius:var(--radius);padding:1rem;margin-top:0.5rem">
      <div style="font-size:0.8rem;color:var(--muted);margin-bottom:0.75rem">Add member</div>
      <div class="form-grid" style="grid-template-columns: 1fr 1.5fr auto; gap:8px;align-items:end">
        <div class="field"><label>Provider</label><select id="new-m-prov">${provOpts||'<option>No providers</option>'}</select></div>
        <div class="field"><label>Model name</label><input id="new-m-model" placeholder="google/gemini-flash-1.5"></div>
        <div class="field"><label>Wgt</label><input id="new-m-weight" type="number" value="1" min="1" style="width:70px"></div>
      </div>
      <button class="btn btn-sm" style="margin-top:10px;width:100%;justify-content:center" onclick="addPoolMember()">+ Add Member</button>
    </div>`;

  const footer = `
    <button class="btn" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="savePool(${isEdit?`'${p.id}'`:'null'})">${isEdit?'Save changes':'Create pool'}</button>`;

  openModal(isEdit ? 'Edit pool' : 'Create model pool', body, footer);
  renderPoolMembers();
}

function renderPoolMembers() {
  const el = document.getElementById('pool-members-list');
  if (!el) return;
  if (!poolMembers.length) { el.innerHTML = '<div style="color:var(--muted);font-size:0.85rem;margin-bottom:0.5rem">No members yet</div>'; return; }
  el.innerHTML = poolMembers.map((m, i) =>
    `<div class="member-item">
      <div class="member-label">${m.provider_id} / ${m.model_name}</div>
      <span class="member-badge">w:${m.weight||1}</span>
      <button class="btn btn-sm btn-danger" onclick="removePoolMember(${i})">✕</button>
    </div>`
  ).join('');
}

function addPoolMember() {
  const prov = document.getElementById('new-m-prov').value;
  const model = document.getElementById('new-m-model').value.trim();
  const weight = parseInt(document.getElementById('new-m-weight').value) || 1;
  if (!prov || !model) { toast('Provider and model name required', 'err'); return; }
  poolMembers.push({ provider_id: prov, model_name: model, weight });
  document.getElementById('new-m-model').value = '';
  renderPoolMembers();
}

function removePoolMember(i) {
  poolMembers.splice(i, 1);
  renderPoolMembers();
}

async function savePool(existingId) {
  const name = document.getElementById('pool-name').value.trim();
  const strategy = document.getElementById('pool-strat').value;
  if (!name) { toast('Pool name is required', 'err'); return; }
  try {
    const payload = { name, strategy, members: poolMembers };
    if (existingId) {
      await api('PUT', `/admin/pools/${existingId}`, payload);
      toast('Pool updated');
    } else {
      await api('POST', '/admin/pools', payload);
      toast('Pool created');
    }
    closeModal();
    loadPools();
  } catch(e) { toast('Error: ' + e.message, 'err'); }
}

async function deletePool(id, name) {
  if (!confirm(`Delete pool "${name}"?`)) return;
  try { await api('DELETE', `/admin/pools/${id}`); toast('Deleted'); loadPools(); }
  catch(e) { toast('Error: ' + e.message, 'err'); }
}

// ── API Keys ──────────────────────────────────────────────────────────────────
async function loadKeys() {
  try {
    const keys = await api('GET', '/admin/api-keys');
    const tbody = document.getElementById('keys-tbody');
    if (!keys.length) { tbody.innerHTML = '<tr><td colspan="4"><div class="empty">No keys yet</div></td></tr>'; return; }
    tbody.innerHTML = keys.map(k =>
      `<tr>
        <td style="font-weight:500">${k.name}</td>
        <td><div class="key-display">${k.key}</div></td>
        <td class="hide-mobile" style="color:var(--muted);font-size:0.8rem">${new Date(k.created_at*1000).toLocaleDateString()}</td>
        <td style="text-align:right"><button class="btn btn-sm btn-danger" onclick="deleteKey('${k.id}','${k.name}')">Delete</button></td>
      </tr>`
    ).join('');
  } catch(e) { console.error(e); }
}

function openKeyModal() {
  openModal('Create API key',
    `<div class="field"><label>Key name / description</label><input id="key-name" placeholder="My SillyTavern instance"></div>`,
    `<button class="btn" onclick="closeModal()">Cancel</button><button class="btn btn-primary" onclick="createKey()">Create</button>`
  );
}

async function createKey() {
  const name = document.getElementById('key-name').value.trim();
  if (!name) { toast('Name required', 'err'); return; }
  try {
    await api('POST', '/admin/api-keys', { name });
    closeModal();
    toast('Key created');
    loadKeys();
  } catch(e) { toast('Error: ' + e.message, 'err'); }
}

async function deleteKey(id, name) {
  if (!confirm(`Delete key "${name}"?`)) return;
  try { await api('DELETE', `/admin/api-keys/${id}`); toast('Deleted'); loadKeys(); }
  catch(e) { toast('Error: ' + e.message, 'err'); }
}
</script>
</body>
</html>"""

@app.get("/", response_class=HTMLResponse)
async def dashboard():
    return DASHBOARD_HTML

if __name__ == "__main__":
    import uvicorn
    uvicorn.run("app:app", host="0.0.0.0", port=7860, reload=False)