app.py

import os
import json
import uuid
import datetime
import hashlib
import secrets
from pathlib import Path
from fastapi import FastAPI, HTTPException, Header, Response, Request
from fastapi.responses import HTMLResponse, StreamingResponse, JSONResponse, RedirectResponse
from pydantic import BaseModel
from groq import Groq
from typing import List, Optional

app = FastAPI()
client = Groq(api_key=os.environ.get("GROQ_API_KEY"))

# ── Persistent storage ───────────────────────────────────────────────────────
_preferred = Path("/data/pharma_chat")
_fallback  = Path(os.environ.get("HOME", "/home/user")) / "pharma_chat"
try:
    _preferred.mkdir(parents=True, exist_ok=True)
    DATA_DIR = _preferred
except PermissionError:
    _fallback.mkdir(parents=True, exist_ok=True)
    DATA_DIR = _fallback

THREADS_FILE = DATA_DIR / "threads.json"
SESSIONS_FILE = DATA_DIR / "sessions.json"

def load_threads() -> dict:
    if THREADS_FILE.exists():
        try:
            return json.loads(THREADS_FILE.read_text())
        except Exception:
            return {}
    return {}

def save_threads(threads: dict):
    THREADS_FILE.write_text(json.dumps(threads, indent=2))

def load_sessions() -> dict:
    if SESSIONS_FILE.exists():
        try:
            return json.loads(SESSIONS_FILE.read_text())
        except Exception:
            return {}
    return {}

def save_sessions(sessions: dict):
    SESSIONS_FILE.write_text(json.dumps(sessions, indent=2))

# ── Auth ─────────────────────────────────────────────────────────────────────
# Dummy credentials — change these for production
USERS = {
    "admin":    {"password": "pharma123",  "role": "Admin",    "name": "Admin User"},
    "auditor":  {"password": "audit2024",  "role": "Auditor",  "name": "Sarah Chen"},
    "reviewer": {"password": "review99",   "role": "Reviewer", "name": "James Patel"},
    "analyst":  {"password": "analyst01",  "role": "Analyst",  "name": "Maria Lopez"},
}

SESSION_TTL_HOURS = 8

def create_session(username: str) -> str:
    token = secrets.token_hex(32)
    sessions = load_sessions()
    sessions[token] = {
        "username": username,
        "created_at": datetime.datetime.utcnow().isoformat(),
        "expires_at": (datetime.datetime.utcnow() + datetime.timedelta(hours=SESSION_TTL_HOURS)).isoformat(),
    }
    save_sessions(sessions)
    return token

def get_session(token: str) -> Optional[dict]:
    if not token:
        return None
    sessions = load_sessions()
    s = sessions.get(token)
    if not s:
        return None
    if datetime.datetime.utcnow() > datetime.datetime.fromisoformat(s["expires_at"]):
        del sessions[token]
        save_sessions(sessions)
        return None
    return s

def require_auth(authorization: Optional[str] = Header(default=None)):
    token = None
    if authorization and authorization.startswith("Bearer "):
        token = authorization[7:]
    s = get_session(token)
    if not s:
        raise HTTPException(status_code=401, detail="Not authenticated")
    return s

# ── Models ───────────────────────────────────────────────────────────────────
MODELS = {
    "llama-3.1-8b-instant":    {"name": "Llama 3.1 8B",  "description": "Fast responses", "icon": "⚡"},
    "llama-3.3-70b-versatile": {"name": "Llama 3.3 70B", "description": "Deep analysis",  "icon": "🧠"},
}

SYSTEM_PROMPT = """You are PharmaComply AI, an expert pharmaceutical compliance assistant with deep knowledge across:

REGULATORY FRAMEWORKS:
- FDA (21 CFR Parts 11, 210, 211, 312, 314, 820) — cGMP, IND/NDA/ANDA submissions, 510(k)
- EMA guidelines, ICH Q10 Pharmaceutical Quality System, ICH E6 GCP
- EU GMP Annex 1-21, EudraLex Volume 4
- WHO GMP guidelines, PIC/S standards

PHARMACOVIGILANCE (PV):
- ICH E2A-E2F guidelines, EMA GVP modules I-XVI
- FAERS/EudraVigilance reporting, MedWatch, PSUR/PBRER preparation
- Signal detection, risk management (REMS/RMP), aggregate safety reporting
- Serious Adverse Event (SAE) reporting timelines (7-day, 15-day, expedited)

CLINICAL TRIALS / GCP:
- ICH E6(R2/R3) Good Clinical Practice
- Protocol deviations, CAPA management, audit findings
- Informed consent regulations, IRB/IEC requirements
- eCTD format, TMF structure (DIA Reference Model)

QUALITY SYSTEMS:
- CAPA (Corrective and Preventive Action) workflows
- Deviation management, OOS/OOT investigations
- Change control, validation (CSV/computerized systems, 21 CFR Part 11)
- Batch record review, release procedures

REPORTING:
When asked to generate a report, produce structured output with:
- Document header (title, date, classification)
- Executive summary
- Regulatory basis / applicable guidelines
- Findings with risk classification (Critical / Major / Minor / Observation)
- CAPA recommendations with timelines
- Conclusion and sign-off section

COMPLIANCE RULES:
- Always cite specific regulation section numbers (e.g., 21 CFR 211.68, ICH Q10 Section 3.2)
- Flag Critical findings that require immediate action
- Distinguish between regulatory requirements and best practices
- Never provide legal advice; recommend qualified regulatory counsel for legal matters
- Apply ALCOA+ principles throughout

Maintain professional, precise language appropriate for regulatory submissions and audit documentation."""

# ── Pydantic models ──────────────────────────────────────────────────────────
class LoginRequest(BaseModel):
    username: str
    password: str

class Message(BaseModel):
    role: str
    content: str

class ChatRequest(BaseModel):
    thread_id: str
    message: str
    model: str = "llama-3.1-8b-instant"

class NewThreadRequest(BaseModel):
    title: Optional[str] = None

class RenameRequest(BaseModel):
    title: str

class ReportRequest(BaseModel):
    thread_id: str
    report_type: str
    model: str = "llama-3.3-70b-versatile"

# ── Auth endpoints ───────────────────────────────────────────────────────────
@app.post("/api/login")
def login(req: LoginRequest):
    user = USERS.get(req.username)
    if not user or user["password"] != req.password:
        raise HTTPException(status_code=401, detail="Invalid username or password")
    token = create_session(req.username)
    return {"ok": True, "token": token, "name": user["name"], "role": user["role"], "username": req.username}

@app.post("/api/logout")
def logout(authorization: Optional[str] = Header(default=None)):
    if authorization and authorization.startswith("Bearer "):
        token = authorization[7:]
        sessions = load_sessions()
        sessions.pop(token, None)
        save_sessions(sessions)
    return {"ok": True}

@app.get("/api/me")
def me(authorization: Optional[str] = Header(default=None)):
    token = None
    if authorization and authorization.startswith("Bearer "):
        token = authorization[7:]
    s = get_session(token)
    if not s:
        raise HTTPException(status_code=401, detail="Not authenticated")
    u = USERS[s["username"]]
    return {"username": s["username"], "name": u["name"], "role": u["role"]}

# ── Thread endpoints ─────────────────────────────────────────────────────────
@app.get("/api/threads")
def get_threads(authorization: Optional[str] = Header(default=None)):
    require_auth(authorization)
    threads = load_threads()
    result = [
        {"id": tid, "title": t.get("title","Untitled"), "created_at": t.get("created_at",""),
         "updated_at": t.get("updated_at",""), "message_count": len(t.get("messages",[]))}
        for tid, t in threads.items()
    ]
    result.sort(key=lambda x: x["updated_at"], reverse=True)
    return result

@app.post("/api/threads")
def create_thread(req: NewThreadRequest, authorization: Optional[str] = Header(default=None)):
    s = require_auth(authorization)
    threads = load_threads()
    tid = str(uuid.uuid4())
    now = datetime.datetime.utcnow().isoformat()
    threads[tid] = {"id": tid, "title": req.title or "New Conversation",
                    "created_at": now, "updated_at": now,
                    "created_by": s["username"], "messages": []}
    save_threads(threads)
    return threads[tid]

@app.get("/api/threads/{thread_id}")
def get_thread(thread_id: str, authorization: Optional[str] = Header(default=None)):
    require_auth(authorization)
    threads = load_threads()
    if thread_id not in threads:
        raise HTTPException(status_code=404, detail="Thread not found")
    return threads[thread_id]

@app.patch("/api/threads/{thread_id}")
def rename_thread(thread_id: str, req: RenameRequest, authorization: Optional[str] = Header(default=None)):
    require_auth(authorization)
    threads = load_threads()
    if thread_id not in threads:
        raise HTTPException(status_code=404, detail="Thread not found")
    threads[thread_id]["title"] = req.title
    threads[thread_id]["updated_at"] = datetime.datetime.utcnow().isoformat()
    save_threads(threads)
    return {"ok": True}

@app.delete("/api/threads/{thread_id}")
def delete_thread(thread_id: str, authorization: Optional[str] = Header(default=None)):
    require_auth(authorization)
    threads = load_threads()
    if thread_id not in threads:
        raise HTTPException(status_code=404, detail="Thread not found")
    del threads[thread_id]
    save_threads(threads)
    return {"ok": True}

# ── Chat endpoint ────────────────────────────────────────────────────────────
@app.post("/api/chat")
def chat(req: ChatRequest, authorization: Optional[str] = Header(default=None)):
    require_auth(authorization)
    threads = load_threads()
    if req.thread_id not in threads:
        raise HTTPException(status_code=404, detail="Thread not found")
    thread = threads[req.thread_id]
    thread["messages"].append({"role": "user", "content": req.message})
    history = [{"role": m["role"], "content": m["content"]} for m in thread["messages"]]
    full_response = []

    def generate():
        stream = client.chat.completions.create(
            model=req.model,
            messages=[{"role": "system", "content": SYSTEM_PROMPT}] + history,
            stream=True, max_tokens=4096,
        )
        for chunk in stream:
            delta = chunk.choices[0].delta
            if delta.content:
                full_response.append(delta.content)
                yield f"data: {json.dumps({'content': delta.content})}\n\n"
        assistant_text = "".join(full_response)
        thread["messages"].append({"role": "assistant", "content": assistant_text})
        thread["updated_at"] = datetime.datetime.utcnow().isoformat()
        if len(thread["messages"]) == 2 and thread["title"] == "New Conversation":
            thread["title"] = req.message[:50] + ("…" if len(req.message) > 50 else "")
        threads[req.thread_id] = thread
        save_threads(threads)
        yield "data: [DONE]\n\n"

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

# ── Report endpoint ──────────────────────────────────────────────────────────
@app.post("/api/report")
def generate_report(req: ReportRequest, authorization: Optional[str] = Header(default=None)):
    require_auth(authorization)
    threads = load_threads()
    if req.thread_id not in threads:
        raise HTTPException(status_code=404, detail="Thread not found")
    thread = threads[req.thread_id]
    history = [{"role": m["role"], "content": m["content"]} for m in thread["messages"]]
    report_prompts = {
        "compliance_summary": "Generate a formal pharmaceutical compliance summary report based on this conversation. Include: Executive Summary, Regulatory Basis, Key Findings with risk classification (Critical/Major/Minor/Observation), CAPA Recommendations with timelines, and Conclusion. Format as a professional regulatory document.",
        "deviation_report": "Generate a formal deviation report based on this conversation. Include: Deviation Description, Root Cause Analysis, Immediate Containment Actions, Regulatory Impact Assessment, CAPA Plan with owners and due dates. Use GMP deviation report format.",
        "audit_findings": "Generate a formal audit findings report based on this conversation. Include: Audit Scope, Applicable Regulations, Findings Table (Finding #, Description, Classification, Reference, CAPA), Risk Summary, and Closing Statement.",
        "pv_assessment": "Generate a pharmacovigilance assessment report. Include: Safety Signal Summary, ICH E2A/E2E classification, Reporting Obligations (7-day/15-day/PSUR), Risk-Benefit Assessment, and Regulatory Action Required.",
        "regulatory_briefing": "Generate a regulatory affairs briefing document. Include: Regulatory Strategy Overview, Applicable Guidelines, Submission Requirements, Timeline, Open Issues, and Recommendations.",
    }
    prompt = report_prompts.get(req.report_type, report_prompts["compliance_summary"])

    def generate():
        stream = client.chat.completions.create(
            model=req.model,
            messages=[{"role": "system", "content": SYSTEM_PROMPT}, *history,
                      {"role": "user", "content": prompt}],
            stream=True, max_tokens=4096,
        )
        for chunk in stream:
            delta = chunk.choices[0].delta
            if delta.content:
                yield f"data: {json.dumps({'content': delta.content})}\n\n"
        yield "data: [DONE]\n\n"

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

# ── Frontend ─────────────────────────────────────────────────────────────────
@app.get("/", response_class=HTMLResponse)
def root():
    return HTMLResponse(content=HTML)

HTML = r"""<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>PharmaComply AI</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── THEME TOKENS ── */
html[data-theme="dark"]{
  --bg:#08090c;--surface:#10121a;--surface-2:#181c28;--surface-3:#1e2330;
  --border:#252a38;--border-2:#2e3548;
  --accent:#2563eb;--accent-light:#3b82f6;--accent-glow:rgba(37,99,235,0.15);
  --green:#10b981;--amber:#f59e0b;--red:#ef4444;--purple:#8b5cf6;
  --text:#e2e8f0;--text-muted:#94a3b8;--text-dim:#475569;
  --user-bubble:#0f1f3d;--user-border:#1e3a5f;
  --card-shadow:0 4px 24px rgba(0,0,0,0.4);
  --login-bg:linear-gradient(135deg,#0a0e1a 0%,#0f1628 50%,#0a0e1a 100%);
}
html[data-theme="light"]{
  --bg:#f0f4f8;--surface:#ffffff;--surface-2:#f8fafc;--surface-3:#f1f5f9;
  --border:#e2e8f0;--border-2:#cbd5e1;
  --accent:#2563eb;--accent-light:#3b82f6;--accent-glow:rgba(37,99,235,0.08);
  --green:#059669;--amber:#d97706;--red:#dc2626;--purple:#7c3aed;
  --text:#0f172a;--text-muted:#475569;--text-dim:#94a3b8;
  --user-bubble:#eff6ff;--user-border:#bfdbfe;
  --card-shadow:0 4px 24px rgba(0,0,0,0.08);
  --login-bg:linear-gradient(135deg,#e0e7ff 0%,#f0f9ff 50%,#e0e7ff 100%);
}

html,body{height:100%;overflow:hidden}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;transition:background .2s,color .2s}

/* ── LOGIN SCREEN ── */
#login-screen{
  position:fixed;inset:0;z-index:1000;
  background:var(--login-bg);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
#login-screen.hidden{display:none}
.login-card{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:40px 36px;width:100%;max-width:400px;
  box-shadow:var(--card-shadow);
}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo-icon{width:64px;height:64px;background:linear-gradient(135deg,#1d4ed8,#7c3aed);border-radius:18px;display:inline-grid;place-items:center;font-size:32px;margin-bottom:14px;box-shadow:0 8px 32px rgba(37,99,235,.3)}
.login-logo h1{font-size:22px;font-weight:700;letter-spacing:-.4px}
.login-logo h1 span{color:#60a5fa}
.login-logo p{font-size:12px;color:var(--text-muted);margin-top:4px}
.login-form{display:flex;flex-direction:column;gap:14px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-label{font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:.3px}
.form-input{
  padding:10px 13px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-family:inherit;font-size:13.5px;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.login-btn{
  padding:11px;border-radius:9px;border:none;
  background:var(--accent);color:#fff;font-size:14px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:all .15s;margin-top:4px;
}
.login-btn:hover{background:var(--accent-light);transform:translateY(-1px)}
.login-btn:active{transform:none}
.login-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:var(--red);border-radius:8px;padding:9px 12px;font-size:12px;display:none}
.login-error.show{display:block}
.login-creds{margin-top:16px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px}
.login-creds-title{font-size:11px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px}
.cred-table{width:100%;border-collapse:collapse;font-size:11px}
.cred-table th{text-align:left;color:var(--text-dim);padding:3px 6px;font-weight:500}
.cred-table td{padding:3px 6px;color:var(--text-muted)}
.cred-table td code{background:var(--surface-3);border:1px solid var(--border);padding:1px 5px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent-light);cursor:pointer}
.theme-toggle-login{position:absolute;top:16px;right:16px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 11px;cursor:pointer;color:var(--text-muted);font-size:13px;transition:all .15s}
.theme-toggle-login:hover{background:var(--surface-2);color:var(--text)}

/* ── APP LAYOUT ── */
#app{display:flex;height:100vh;overflow:hidden}
#app.hidden{display:none}

/* ── SIDEBAR ── */
.sidebar{width:280px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:background .2s}
.sidebar-top{padding:14px 12px 12px;border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:9px;padding:0 4px;margin-bottom:12px}
.brand-icon{width:32px;height:32px;background:linear-gradient(135deg,#1d4ed8,#7c3aed);border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-size:16px}
.brand-name{font-size:14px;font-weight:700;letter-spacing:-.3px}
.brand-name span{color:#60a5fa}
.brand-badge{font-size:9px;font-weight:700;background:var(--accent-glow);color:#60a5fa;border:1px solid var(--accent);border-radius:4px;padding:1px 5px;letter-spacing:.5px;text-transform:uppercase;margin-left:auto;flex-shrink:0}
.new-btn{width:100%;padding:8px 12px;background:var(--accent-glow);border:1px solid var(--accent);border-radius:8px;color:#60a5fa;font-size:12.5px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:7px;transition:all .15s;font-family:inherit}
.new-btn:hover{background:rgba(37,99,235,.28)}
.model-wrap{padding:10px 12px;border-bottom:1px solid var(--border)}
.section-label{font-size:10px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.model-pills{display:flex;gap:5px}
.model-pill{flex:1;padding:5px 7px;border-radius:7px;border:1px solid var(--border);background:none;color:var(--text-muted);font-size:11px;font-weight:500;cursor:pointer;text-align:center;transition:all .15s;font-family:inherit}
.model-pill:hover{background:var(--surface-2)}
.model-pill.active{background:var(--accent-glow);border-color:var(--accent);color:#60a5fa}
.threads-wrap{flex:1;overflow-y:auto;padding:10px 8px}
.threads-empty{padding:24px 8px;color:var(--text-dim);font-size:12px;text-align:center;line-height:2}
.thread-item{padding:8px 10px;border-radius:9px;cursor:pointer;border:1px solid transparent;margin-bottom:3px;transition:all .15s;position:relative}
.thread-item:hover{background:var(--surface-2)}
.thread-item.active{background:var(--accent-glow);border-color:var(--accent)}
.thread-item-title{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:48px}
.thread-item.active .thread-item-title{color:#90c4ff}
.thread-item-meta{font-size:10px;color:var(--text-dim);margin-top:2px}
.thread-actions{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:none;gap:2px}
.thread-item:hover .thread-actions,.thread-item.active .thread-actions{display:flex}
.thread-action-btn{width:22px;height:22px;border-radius:5px;border:none;background:var(--surface-3);color:var(--text-muted);cursor:pointer;display:grid;place-items:center;font-size:10px;transition:all .15s}
.thread-action-btn:hover{background:var(--border-2);color:var(--text)}
.thread-action-btn.del:hover{background:rgba(239,68,68,.15);color:var(--red)}
.thread-rename-input{width:100%;background:var(--surface-3);border:1px solid var(--accent);border-radius:6px;color:var(--text);font-size:12px;font-family:inherit;padding:3px 7px;outline:none}
.sidebar-footer{padding:10px 12px;border-top:1px solid var(--border)}
.user-card{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);margin-bottom:8px}
.user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--purple));display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.user-info{min-width:0}
.user-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:10px;color:var(--text-muted)}
.sidebar-actions{display:flex;gap:6px}
.sidebar-action-btn{flex:1;padding:6px;border-radius:7px;border:1px solid var(--border);background:none;color:var(--text-muted);font-size:11px;font-family:inherit;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:4px}
.sidebar-action-btn:hover{background:var(--surface-2);color:var(--text)}
.sidebar-action-btn.logout:hover{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:var(--red)}

/* ── MAIN ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{padding:11px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--surface);flex-shrink:0;gap:12px;transition:background .2s}
.topbar-left{display:flex;align-items:center;gap:9px;min-width:0}
.topbar-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.topbar-title{font-size:13px;font-weight:500;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;gap:6px;flex-shrink:0;align-items:center}
.top-btn{padding:6px 11px;border-radius:7px;border:1px solid var(--border);background:none;color:var(--text-muted);font-size:12px;font-family:inherit;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:4px;white-space:nowrap}
.top-btn:hover{background:var(--surface-2);color:var(--text)}
.top-btn.primary{background:var(--accent-glow);border-color:var(--accent);color:#60a5fa}
.top-btn.primary:hover{background:rgba(37,99,235,.28)}
.theme-btn{width:32px;height:32px;padding:0;display:grid;place-items:center;font-size:15px}
.report-dropdown{position:relative}
.report-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface-2);border:1px solid var(--border-2);border-radius:10px;padding:5px;min-width:210px;z-index:100;display:none;box-shadow:var(--card-shadow)}
.report-menu.open{display:block}
.report-menu-item{padding:8px 11px;border-radius:7px;cursor:pointer;font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:8px;transition:all .15s}
.report-menu-item:hover{background:var(--surface-3);color:var(--text)}

/* ── CHAT ── */
.chat-window{flex:1;overflow-y:auto;padding:24px 0;scroll-behavior:smooth}
.chat-inner{max-width:780px;margin:0 auto;padding:0 20px}
.welcome{text-align:center;padding:44px 20px 28px;display:flex;flex-direction:column;align-items:center;gap:12px}
.welcome-icon{width:68px;height:68px;background:linear-gradient(135deg,#1d4ed8,#7c3aed);border-radius:18px;display:grid;place-items:center;font-size:34px;box-shadow:0 0 40px rgba(37,99,235,.25)}
.welcome h1{font-size:22px;font-weight:700;letter-spacing:-.4px}
.welcome h1 span{color:#60a5fa}
.welcome p{color:var(--text-muted);font-size:13px;max-width:400px;line-height:1.7}
.compliance-tags{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.ctag{padding:3px 9px;border-radius:20px;font-size:10px;font-weight:600;border:1px solid}
.ctag.fda{color:#60a5fa;border-color:rgba(96,165,250,.3);background:rgba(37,99,235,.1)}
.ctag.ema{color:#a78bfa;border-color:rgba(167,139,250,.3);background:rgba(139,92,246,.1)}
.ctag.ich{color:#34d399;border-color:rgba(52,211,153,.3);background:rgba(16,185,129,.1)}
.ctag.gcp{color:#fbbf24;border-color:rgba(251,191,36,.3);background:rgba(245,158,11,.1)}
.ctag.pv{color:#f87171;border-color:rgba(248,113,113,.3);background:rgba(239,68,68,.1)}
.ctag.gmp{color:#e879f9;border-color:rgba(232,121,249,.3);background:rgba(217,70,239,.1)}
.starter-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:4px;width:100%;max-width:540px}
.starter-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;text-align:left;transition:all .15s;font-family:inherit;color:var(--text)}
.starter-card:hover{border-color:var(--accent);background:var(--accent-glow)}
.starter-card .sc-icon{font-size:16px;margin-bottom:4px;display:block}
.starter-card .sc-title{font-size:11.5px;font-weight:600;margin-bottom:2px}
.starter-card .sc-text{font-size:11px;color:var(--text-muted)}
.message{margin-bottom:22px;display:flex;flex-direction:column}
.message.user{align-items:flex-end}
.message.assistant{align-items:flex-start}
.msg-header{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px;display:flex;align-items:center;gap:6px}
.message.user .msg-header{color:#60a5fa}
.message.assistant .msg-header{color:var(--text-dim)}
.msg-avatar{width:18px;height:18px;border-radius:4px;display:grid;place-items:center;font-size:9px}
.message.assistant .msg-avatar{background:linear-gradient(135deg,#1d4ed8,#7c3aed)}
.message.user .msg-avatar{background:#1e3a5f}
.msg-bubble{padding:12px 15px;border-radius:12px;line-height:1.75;font-size:13.5px}
.message.user .msg-bubble{background:var(--user-bubble);border:1px solid var(--user-border);border-radius:12px 12px 4px 12px;max-width:80%}
.message.assistant .msg-bubble{background:var(--surface);border:1px solid var(--border);border-radius:12px 12px 12px 4px;width:100%}
.msg-bubble code{font-family:'JetBrains Mono',monospace;background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.2);padding:2px 5px;border-radius:4px;font-size:11.5px;color:#93c5fd}
.msg-bubble pre{background:var(--surface-3);border:1px solid var(--border);border-radius:8px;padding:13px;overflow-x:auto;margin:9px 0}
.msg-bubble pre code{background:none;border:none;padding:0;font-size:12px;color:var(--text)}
.msg-bubble p{margin-bottom:8px}
.msg-bubble p:last-child{margin-bottom:0}
.msg-bubble ul,.msg-bubble ol{padding-left:18px;margin:7px 0}
.msg-bubble li{margin-bottom:3px}
.msg-bubble strong{color:var(--text);font-weight:600}
.msg-bubble h1,.msg-bubble h2,.msg-bubble h3{font-weight:700;margin:12px 0 6px}
.msg-bubble h1{font-size:15px;border-bottom:1px solid var(--border);padding-bottom:5px}
.msg-bubble h2{font-size:13.5px;color:#60a5fa}
.msg-bubble h3{font-size:13px}
.msg-bubble blockquote{border-left:3px solid var(--accent);padding-left:11px;color:var(--text-muted);margin:7px 0}
.msg-bubble table{width:100%;border-collapse:collapse;margin:9px 0;font-size:12px}
.msg-bubble th{background:var(--surface-2);padding:7px 9px;text-align:left;border:1px solid var(--border);font-weight:600}
.msg-bubble td{padding:6px 9px;border:1px solid var(--border);color:var(--text-muted)}
.msg-bubble tr:nth-child(even) td{background:var(--surface-2)}
.cursor{display:inline-block;width:2px;height:13px;background:#60a5fa;vertical-align:middle;margin-left:2px;animation:blink 1s infinite;border-radius:1px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── REPORT PANEL ── */
.report-panel{background:var(--surface-2);border-top:1px solid var(--border);padding:13px 20px;flex-shrink:0;display:none;transition:background .2s}
.report-panel.visible{display:block}
.report-panel-inner{max-width:780px;margin:0 auto}
.report-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.report-title-label{font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
.report-close{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:15px}
.report-content{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:15px;max-height:300px;overflow-y:auto;font-size:12.5px;line-height:1.8;color:var(--text-muted)}
.report-content h1,.report-content h2,.report-content h3{color:var(--text);font-weight:700;margin:11px 0 5px}
.report-content h1{font-size:14px;border-bottom:1px solid var(--border);padding-bottom:5px}
.report-content h2{font-size:13px;color:#60a5fa}
.report-content strong{color:var(--text)}
.report-content ul,.report-content ol{padding-left:17px;margin:5px 0}
.report-actions{display:flex;gap:7px;margin-top:9px}
.report-action-btn{padding:6px 13px;border-radius:7px;border:1px solid var(--border);background:none;color:var(--text-muted);font-size:11px;font-family:inherit;cursor:pointer;transition:all .15s}
.report-action-btn:hover{background:var(--surface-3);color:var(--text)}
.report-action-btn.primary{background:var(--accent-glow);border-color:var(--accent);color:#60a5fa}

/* ── INPUT ── */
.input-area{padding:12px 20px 15px;background:var(--bg);border-top:1px solid var(--border);flex-shrink:0;transition:background .2s}
.input-inner{max-width:780px;margin:0 auto}
.input-box{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:11px 13px;display:flex;align-items:flex-end;gap:9px;transition:border-color .15s}
.input-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
#user-input{flex:1;background:none;border:none;color:var(--text);font-family:'Inter',sans-serif;font-size:13.5px;line-height:1.6;resize:none;outline:none;max-height:160px;min-height:22px}
#user-input::placeholder{color:var(--text-dim)}
.send-btn{width:30px;height:30px;background:var(--accent);border:none;border-radius:8px;color:#fff;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:all .15s}
.send-btn:hover{background:var(--accent-light);transform:scale(1.05)}
.send-btn:disabled{background:var(--border);cursor:not-allowed;transform:none}
.input-footer{display:flex;justify-content:center;margin-top:6px;font-size:10px;color:var(--text-dim);gap:10px}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
@media(max-width:640px){.sidebar{display:none}.starter-grid{grid-template-columns:1fr}}
</style>
</head>
<body>

<!-- ══════════════════════ LOGIN SCREEN ══════════════════════ -->
<div id="login-screen">
  <button class="theme-toggle-login" onclick="toggleTheme()" title="Toggle theme" id="login-theme-btn">🌙</button>
  <div class="login-card">
    <div class="login-logo">
      <div class="login-logo-icon">⚕</div>
      <h1>Pharma<span>Comply</span> AI</h1>
      <p>Pharmaceutical Regulatory Compliance Platform</p>
    </div>
    <div class="login-form">
      <div class="form-group">
        <label class="form-label">USERNAME</label>
        <input class="form-input" type="text" id="login-user" placeholder="Enter username" autocomplete="username" onkeydown="loginKey(event)"/>
      </div>
      <div class="form-group">
        <label class="form-label">PASSWORD</label>
        <input class="form-input" type="password" id="login-pass" placeholder="Enter password" autocomplete="current-password" onkeydown="loginKey(event)"/>
      </div>
      <div class="login-error" id="login-error">Invalid username or password. Please try again.</div>
      <button class="login-btn" onclick="doLogin()" id="login-btn">Sign In</button>
    </div>
    <div class="login-creds">
      <div class="login-creds-title">Demo Credentials</div>
      <table class="cred-table">
        <tr><th>Username</th><th>Password</th><th>Role</th></tr>
        <tr><td><code onclick="fillCred('admin','pharma123')">admin</code></td><td><code onclick="fillCred('admin','pharma123')">pharma123</code></td><td>Admin</td></tr>
        <tr><td><code onclick="fillCred('auditor','audit2024')">auditor</code></td><td><code onclick="fillCred('auditor','audit2024')">audit2024</code></td><td>Auditor</td></tr>
        <tr><td><code onclick="fillCred('reviewer','review99')">reviewer</code></td><td><code onclick="fillCred('reviewer','review99')">review99</code></td><td>Reviewer</td></tr>
        <tr><td><code onclick="fillCred('analyst','analyst01')">analyst</code></td><td><code onclick="fillCred('analyst','analyst01')">analyst01</code></td><td>Analyst</td></tr>
      </table>
      <div style="font-size:10px;color:var(--text-dim);margin-top:8px">💡 Click any credential to auto-fill</div>
    </div>
  </div>
</div>

<!-- ══════════════════════ MAIN APP ══════════════════════ -->
<div id="app" class="hidden">
  <!-- SIDEBAR -->
  <aside class="sidebar">
    <div class="sidebar-top">
      <div class="brand">
        <div class="brand-icon">⚕</div>
        <div class="brand-name">Pharma<span>Comply</span></div>
        <div class="brand-badge">AI</div>
      </div>
      <button class="new-btn" onclick="newThread()">＋ &nbsp;New Conversation</button>
    </div>
    <div class="model-wrap">
      <div class="section-label">Model</div>
      <div class="model-pills">
        <button class="model-pill active" data-model="llama-3.1-8b-instant" onclick="selectModel('llama-3.1-8b-instant',this)">⚡ 8B Fast</button>
        <button class="model-pill" data-model="llama-3.3-70b-versatile" onclick="selectModel('llama-3.3-70b-versatile',this)">🧠 70B Deep</button>
      </div>
    </div>
    <div class="threads-wrap">
      <div class="section-label" style="padding:0 4px;margin-bottom:7px">Conversations</div>
      <div id="thread-list"><div class="threads-empty">💬<br>No conversations yet.<br>Start one above.</div></div>
    </div>
    <div class="sidebar-footer">
      <div class="user-card">
        <div class="user-avatar" id="user-avatar">?</div>
        <div class="user-info">
          <div class="user-name" id="user-name">—</div>
          <div class="user-role" id="user-role">—</div>
        </div>
      </div>
      <div class="sidebar-actions">
        <button class="sidebar-action-btn" onclick="toggleTheme()" id="theme-btn">🌙 Dark</button>
        <button class="sidebar-action-btn logout" onclick="doLogout()">⎋ Sign out</button>
      </div>
    </div>
  </aside>

  <!-- MAIN CONTENT -->
  <main class="main">
    <header class="topbar">
      <div class="topbar-left">
        <div class="topbar-dot"></div>
        <span class="topbar-title" id="topbar-title">Select or start a conversation</span>
      </div>
      <div class="topbar-right">
        <div class="report-dropdown" id="report-dropdown">
          <button class="top-btn primary" onclick="toggleReportMenu()">📋 Generate Report ▾</button>
          <div class="report-menu" id="report-menu">
            <div class="report-menu-item" onclick="generateReport('compliance_summary')">📊 Compliance Summary</div>
            <div class="report-menu-item" onclick="generateReport('deviation_report')">⚠️ Deviation Report</div>
            <div class="report-menu-item" onclick="generateReport('audit_findings')">🔍 Audit Findings</div>
            <div class="report-menu-item" onclick="generateReport('pv_assessment')">💊 PV Safety Assessment</div>
            <div class="report-menu-item" onclick="generateReport('regulatory_briefing')">📁 Regulatory Briefing</div>
          </div>
        </div>
        <button class="top-btn" onclick="copyLastResponse()">⎘ Copy</button>
      </div>
    </header>

    <div class="chat-window" id="chat-window">
      <div class="chat-inner" id="chat-inner">
        <div id="welcome-placeholder"></div>
      </div>
    </div>

    <div class="report-panel" id="report-panel">
      <div class="report-panel-inner">
        <div class="report-header">
          <div class="report-title-label">📋 <span id="report-panel-title">Generated Report</span></div>
          <button class="report-close" onclick="closeReport()">✕</button>
        </div>
        <div class="report-content" id="report-content"></div>
        <div class="report-actions">
          <button class="report-action-btn primary" onclick="copyReport()">⎘ Copy</button>
          <button class="report-action-btn" onclick="downloadReport()">⬇ Download .txt</button>
          <button class="report-action-btn" onclick="closeReport()">Close</button>
        </div>
      </div>
    </div>

    <div class="input-area">
      <div class="input-inner">
        <div class="input-box">
          <textarea id="user-input" placeholder="Ask about FDA regulations, GMP deviations, SAE reporting, CAPA, audit prep…" rows="1" onkeydown="handleKey(event)" oninput="autoResize(this)"></textarea>
          <button class="send-btn" id="send-btn" onclick="sendMessage()">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
          </button>
        </div>
        <div class="input-footer">
          <span>⚕ FDA · EMA · ICH · GCP · PV · GMP</span>
          <span>For informational purposes only</span>
        </div>
      </div>
    </div>
  </main>
</div>

<template id="welcome-tpl">
  <div class="welcome" id="welcome-screen">
    <div class="welcome-icon">⚕</div>
    <h1>Pharma<span>Comply</span> AI</h1>
    <p>Your expert assistant for pharmaceutical regulatory compliance, pharmacovigilance, clinical trials, and quality systems.</p>
    <div class="compliance-tags">
      <span class="ctag fda">FDA 21 CFR</span><span class="ctag ema">EMA/GMP</span>
      <span class="ctag ich">ICH Guidelines</span><span class="ctag gcp">GCP/GLP</span>
      <span class="ctag pv">Pharmacovigilance</span><span class="ctag gmp">cGMP</span>
    </div>
    <div class="starter-grid">
      <button class="starter-card" onclick="sendStarter(this)"><span class="sc-icon">⚠️</span><div class="sc-title">SAE Reporting</div><div class="sc-text">What are the 7-day expedited SAE reporting requirements under ICH E2A?</div></button>
      <button class="starter-card" onclick="sendStarter(this)"><span class="sc-icon">🏭</span><div class="sc-title">GMP Deviation</div><div class="sc-text">How do I classify and handle a manufacturing deviation under 21 CFR 211?</div></button>
      <button class="starter-card" onclick="sendStarter(this)"><span class="sc-icon">🔬</span><div class="sc-title">Audit Preparation</div><div class="sc-text">Prepare a checklist for an FDA pre-approval inspection of a sterile manufacturing site.</div></button>
      <button class="starter-card" onclick="sendStarter(this)"><span class="sc-icon">📋</span><div class="sc-title">CAPA Plan</div><div class="sc-text">Draft a CAPA plan template for an OOS result in a finished product release test.</div></button>
      <button class="starter-card" onclick="sendStarter(this)"><span class="sc-icon">📁</span><div class="sc-title">eCTD Submission</div><div class="sc-text">What modules are required for a 505(b)(1) NDA submission in eCTD format?</div></button>
      <button class="starter-card" onclick="sendStarter(this)"><span class="sc-icon">🛡️</span><div class="sc-title">Data Integrity</div><div class="sc-text">Explain ALCOA+ principles and common data integrity failures in FDA warning letters.</div></button>
    </div>
  </div>
</template>

<script>
// ── Theme ────────────────────────────────────────────────────────────────────
let theme = localStorage.getItem('theme') || 'dark';
applyTheme(theme);

function applyTheme(t){
  theme = t;
  document.documentElement.setAttribute('data-theme', t);
  localStorage.setItem('theme', t);
  const icon  = t === 'dark' ? '☀️ Light' : '🌙 Dark';
  const licon = t === 'dark' ? '☀️' : '🌙';
  const tb = document.getElementById('theme-btn');
  const lb = document.getElementById('login-theme-btn');
  if(tb) tb.textContent = icon;
  if(lb) lb.textContent = licon;
}
function toggleTheme(){ applyTheme(theme === 'dark' ? 'light' : 'dark'); }

// ── Token helpers ─────────────────────────────────────────────────────────────
function getToken(){ return localStorage.getItem('auth_token'); }
function setToken(t){ localStorage.setItem('auth_token', t); }
function clearToken(){ localStorage.removeItem('auth_token'); }

function authHeaders(extra){
  const token = getToken();
  return Object.assign(
    { 'Authorization': token ? `Bearer ${token}` : '' },
    extra || {}
  );
}

// apiFetch — always attaches auth header, handles 401 globally
async function apiFetch(url, opts){
  opts = opts || {};
  opts.headers = Object.assign(authHeaders(opts.headers || {}));
  const r = await fetch(url, opts);
  if(r.status === 401){
    // Only logout if we actually had a token (not on the login call itself)
    if(getToken()){ doLogout(); }
    throw new Error('401');
  }
  return r;
}

// ── Auth ──────────────────────────────────────────────────────────────────────
let currentUser = null;

function fillCred(u, p){
  document.getElementById('login-user').value = u;
  document.getElementById('login-pass').value = p;
}
function loginKey(e){ if(e.key === 'Enter') doLogin(); }

async function doLogin(){
  const username = document.getElementById('login-user').value.trim();
  const password = document.getElementById('login-pass').value;
  const btn = document.getElementById('login-btn');
  const errEl = document.getElementById('login-error');
  errEl.classList.remove('show');
  btn.textContent = 'Signing in…'; btn.disabled = true;
  try{
    const r = await fetch('/api/login', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({username, password})
    });
    if(!r.ok) throw new Error('bad');
    const u = await r.json();
    setToken(u.token);
    currentUser = u;
    showApp(u);
  } catch {
    errEl.classList.add('show');
  }
  btn.textContent = 'Sign In'; btn.disabled = false;
}

async function doLogout(){
  try{
    const token = getToken();
    if(token){
      await fetch('/api/logout', {
        method: 'POST',
        headers: authHeaders()
      });
    }
  } catch{}
  clearToken();
  currentUser = null;
  currentThreadId = null;
  document.getElementById('app').classList.add('hidden');
  document.getElementById('login-screen').classList.remove('hidden');
  document.getElementById('login-user').value = '';
  document.getElementById('login-pass').value = '';
  document.getElementById('login-error').classList.remove('show');
}

function showApp(u){
  document.getElementById('login-screen').classList.add('hidden');
  document.getElementById('app').classList.remove('hidden');
  document.getElementById('user-name').textContent = u.name;
  document.getElementById('user-role').textContent = u.role;
  document.getElementById('user-avatar').textContent = u.name.charAt(0).toUpperCase();
  applyTheme(theme);
  showWelcome();
  loadThreads();
}

// ── State ─────────────────────────────────────────────────────────────────────
let currentThreadId = null;
let currentModel = 'llama-3.1-8b-instant';
let isStreaming = false;

// ── Utils ─────────────────────────────────────────────────────────────────────
function escHtml(s){ return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
function autoResize(el){ el.style.height='auto'; el.style.height=Math.min(el.scrollHeight,160)+'px'; }
function handleKey(e){ if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendMessage();} }
function scrollToBottom(){ const w=document.getElementById('chat-window'); w.scrollTop=w.scrollHeight; }
function selectModel(id,el){ currentModel=id; document.querySelectorAll('.model-pill').forEach(p=>p.classList.remove('active')); el.classList.add('active'); }
function fmtDate(iso){ if(!iso) return ''; const d=new Date(iso); return d.toLocaleDateString(undefined,{month:'short',day:'numeric'}); }

function renderMarkdown(text){
  return text
    .replace(/```(\w*)\n([\s\S]*?)```/g,(_,l,c)=>`<pre><code>${escHtml(c.trim())}</code></pre>`)
    .replace(/`([^`\n]+)`/g,'<code>$1</code>')
    .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
    .replace(/\*(.+?)\*/g,'<em>$1</em>')
    .replace(/^#{3} (.+)$/gm,'<h3>$1</h3>')
    .replace(/^#{2} (.+)$/gm,'<h2>$1</h2>')
    .replace(/^# (.+)$/gm,'<h1>$1</h1>')
    .replace(/^> (.+)$/gm,'<blockquote>$1</blockquote>')
    .replace(/^\- (.+)$/gm,'<li>$1</li>')
    .replace(/^(\d+)\. (.+)$/gm,'<li>$2</li>')
    .replace(/(<li>[\s\S]*?<\/li>\n?)+/g,s=>`<ul>${s}</ul>`)
    .replace(/\n\n+/g,'</p><p>')
    .split('\n').filter(l=>l.trim()).join('\n');
}

// ── Threads ───────────────────────────────────────────────────────────────────
async function loadThreads(){
  try{
    const r = await apiFetch('/api/threads');
    const threads = await r.json();
    renderThreadList(threads);
  } catch(e){ if(e.message!=='401') console.error(e); }
}

function renderThreadList(threads){
  const el = document.getElementById('thread-list');
  if(!threads.length){
    el.innerHTML='<div class="threads-empty">💬<br>No conversations yet.<br>Start one above.</div>';
    return;
  }
  el.innerHTML = threads.map(t=>`
    <div class="thread-item ${t.id===currentThreadId?'active':''}" id="thread-${t.id}" onclick="selectThread('${t.id}')">
      <div class="thread-item-title" id="thread-title-${t.id}">${escHtml(t.title)}</div>
      <div class="thread-item-meta">${fmtDate(t.updated_at)} · ${t.message_count} msg${t.message_count!==1?'s':''}</div>
      <div class="thread-actions">
        <button class="thread-action-btn" title="Rename" onclick="startRename(event,'${t.id}','${escHtml(t.title).replace(/'/g,"\\'")}')">✏</button>
        <button class="thread-action-btn del" title="Delete" onclick="deleteThread(event,'${t.id}')">🗑</button>
      </div>
    </div>`).join('');
}

async function newThread(){
  try{
    const r = await apiFetch('/api/threads', {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({})
    });
    const t = await r.json();
    currentThreadId = t.id;
    await loadThreads();
    showWelcome();
    document.getElementById('topbar-title').textContent = t.title;
    document.getElementById('user-input').focus();
  } catch(e){ if(e.message!=='401') console.error(e); }
}

async function selectThread(id){
  try{
    currentThreadId = id;
    const r = await apiFetch(`/api/threads/${id}`);
    const t = await r.json();
    await loadThreads();
    document.getElementById('topbar-title').textContent = t.title;
    const inner = document.getElementById('chat-inner');
    if(!t.messages.length){ showWelcome(); return; }
    inner.innerHTML='';
    t.messages.forEach(m=>{
      const bubble = addMessageBubble(m.role,'');
      bubble.innerHTML = m.role==='assistant' ? renderMarkdown(m.content) : escHtml(m.content);
    });
    scrollToBottom();
  } catch(e){ if(e.message!=='401') console.error(e); }
}

async function deleteThread(e,id){
  e.stopPropagation();
  if(!confirm('Delete this conversation?')) return;
  try{
    await apiFetch(`/api/threads/${id}`, {method:'DELETE'});
    if(currentThreadId===id){
      currentThreadId=null;
      showWelcome();
      document.getElementById('topbar-title').textContent='Select or start a conversation';
    }
    await loadThreads();
  } catch(e){ if(e.message!=='401') console.error(e); }
}

function startRename(e,id,currentTitle){
  e.stopPropagation();
  const titleEl = document.getElementById(`thread-title-${id}`);
  titleEl.innerHTML=`<input class="thread-rename-input" id="rename-input-${id}" value="${escHtml(currentTitle)}" onclick="event.stopPropagation()"/>`;
  const input = document.getElementById(`rename-input-${id}`);
  input.focus(); input.select();
  let saved = false;
  const finish = async ()=>{
    if(saved) return; saved=true;
    await doRename(id, input.value.trim()||currentTitle);
  };
  input.addEventListener('keydown', async ev=>{
    if(ev.key==='Enter'){ev.preventDefault(); await finish();}
    else if(ev.key==='Escape'){titleEl.textContent=currentTitle;}
  });
  input.addEventListener('blur', finish);
}

async function doRename(id,newTitle){
  try{
    await apiFetch(`/api/threads/${id}`, {
      method:'PATCH',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({title:newTitle})
    });
    if(currentThreadId===id) document.getElementById('topbar-title').textContent=newTitle;
    await loadThreads();
  } catch(e){ if(e.message!=='401') console.error(e); }
}

// ── Chat ──────────────────────────────────────────────────────────────────────
function showWelcome(){
  const inner = document.getElementById('chat-inner');
  inner.innerHTML = document.getElementById('welcome-tpl').innerHTML;
}

function addMessageBubble(role, content){
  const ws = document.getElementById('welcome-screen');
  if(ws) ws.remove();
  const inner = document.getElementById('chat-inner');
  const div = document.createElement('div');
  div.className=`message ${role}`;
  div.innerHTML=`<div class="msg-header"><div class="msg-avatar">${role==='assistant'?'⚕':'U'}</div>${role==='assistant'?'PharmaComply AI':'You'}</div><div class="msg-bubble">${role==='assistant'?'':escHtml(content)}</div>`;
  inner.appendChild(div);
  scrollToBottom();
  return div.querySelector('.msg-bubble');
}

function sendStarter(btn){ document.getElementById('user-input').value=btn.querySelector('.sc-text').textContent.trim(); sendMessage(); }

async function sendMessage(){
  if(isStreaming) return;
  const input = document.getElementById('user-input');
  const text  = input.value.trim();
  if(!text) return;

  // Auto-create thread if needed
  if(!currentThreadId){
    try{
      const r = await apiFetch('/api/threads', {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify({})
      });
      const t = await r.json();
      currentThreadId = t.id;
    } catch(e){ return; }
  }

  input.value=''; input.style.height='auto';
  document.getElementById('send-btn').disabled=true;
  isStreaming=true;

  addMessageBubble('user', text);
  const bubble = addMessageBubble('assistant','');
  const cursor = document.createElement('span');
  cursor.className='cursor'; bubble.appendChild(cursor); scrollToBottom();

  let fullText='';
  try{
    const res = await fetch('/api/chat', {
      method:'POST',
      headers: authHeaders({'Content-Type':'application/json'}),
      body: JSON.stringify({thread_id:currentThreadId, message:text, model:currentModel})
    });
    if(res.status===401){ clearToken(); doLogout(); return; }
    const reader  = res.body.getReader();
    const decoder = new TextDecoder();
    while(true){
      const {done,value} = await reader.read();
      if(done) break;
      for(const line of decoder.decode(value).split('\n')){
        if(line.startsWith('data: ')){
          const d = line.slice(6);
          if(d==='[DONE]') break;
          try{
            const j = JSON.parse(d);
            if(j.content){ fullText+=j.content; bubble.innerHTML=renderMarkdown(fullText); bubble.appendChild(cursor); scrollToBottom(); }
          } catch{}
        }
      }
    }
  } catch(e){
    if(e.message!=='401') fullText='⚠️ Error — check your GROQ_API_KEY secret.';
  }

  cursor.remove();
  bubble.innerHTML = renderMarkdown(fullText)||'<em style="color:var(--text-dim)">No response.</em>';
  isStreaming=false;
  document.getElementById('send-btn').disabled=false;
  // Reload thread list without triggering logout on failure
  try{ await loadThreads(); } catch{}
  scrollToBottom();
}

// ── Reports ───────────────────────────────────────────────────────────────────
function toggleReportMenu(){ document.getElementById('report-menu').classList.toggle('open'); }
document.addEventListener('click',e=>{
  const dd = document.getElementById('report-dropdown');
  if(dd && !dd.contains(e.target)) document.getElementById('report-menu').classList.remove('open');
});

const REPORT_LABELS={
  compliance_summary:'Compliance Summary',
  deviation_report:'Deviation Report',
  audit_findings:'Audit Findings',
  pv_assessment:'PV Safety Assessment',
  regulatory_briefing:'Regulatory Briefing'
};

async function generateReport(type){
  document.getElementById('report-menu').classList.remove('open');
  if(!currentThreadId){alert('Start a conversation first.');return;}
  const panel   = document.getElementById('report-panel');
  const content = document.getElementById('report-content');
  document.getElementById('report-panel-title').textContent = REPORT_LABELS[type]||'Report';
  content.innerHTML='<em style="color:var(--text-dim)">Generating report…</em>';
  panel.classList.add('visible');
  let fullText='';
  try{
    const res = await fetch('/api/report',{
      method:'POST',
      headers: authHeaders({'Content-Type':'application/json'}),
      body: JSON.stringify({thread_id:currentThreadId, report_type:type, model:'llama-3.3-70b-versatile'})
    });
    if(res.status===401){ doLogout(); return; }
    const reader  = res.body.getReader();
    const decoder = new TextDecoder();
    content.innerHTML='';
    while(true){
      const {done,value} = await reader.read(); if(done) break;
      for(const line of decoder.decode(value).split('\n')){
        if(line.startsWith('data: ')){
          const d=line.slice(6); if(d==='[DONE]') break;
          try{const j=JSON.parse(d);if(j.content){fullText+=j.content;content.innerHTML=renderMarkdown(fullText);}}catch{}
        }
      }
    }
  } catch { content.innerHTML='⚠️ Report generation failed.'; }
}

function closeReport(){ document.getElementById('report-panel').classList.remove('visible'); }
function copyReport(){ navigator.clipboard.writeText(document.getElementById('report-content').innerText).then(()=>alert('Copied!')); }
function downloadReport(){
  const text  = document.getElementById('report-content').innerText;
  const title = document.getElementById('report-panel-title').textContent.replace(/\s+/g,'_');
  const a = document.createElement('a');
  a.href     = URL.createObjectURL(new Blob([text],{type:'text/plain'}));
  a.download = `${title}_${new Date().toISOString().slice(0,10)}.txt`;
  a.click();
}
function copyLastResponse(){
  const bubbles = document.querySelectorAll('.message.assistant .msg-bubble');
  if(!bubbles.length) return;
  navigator.clipboard.writeText(bubbles[bubbles.length-1].innerText).then(()=>{
    const btn=document.querySelector('.topbar-right .top-btn:last-child');
    const old=btn.textContent; btn.textContent='✓ Copied'; setTimeout(()=>btn.textContent=old,1500);
  });
}

// ── Init ──────────────────────────────────────────────────────────────────────
(async ()=>{
  const token = getToken();
  if(!token) return;          // no token → stay on login screen
  try{
    const r = await fetch('/api/me', { headers: authHeaders() });
    if(r.ok){
      const u = await r.json();
      currentUser = u;
      showApp(u);
    } else {
      clearToken();           // stale token → clear and show login
    }
  } catch { clearToken(); }
})();
</script>
</body>
</html>"""