"""
LegacyScribe — Family Memory Agent
Gradio Space entry point
"""

import gradio as gr
import html as _html
import json
import os
import re
import time
from pathlib import Path
from gradio_client import Client

# # ── Model loading ─────────────────────────────────────────────────────────────
# MODEL_REPO   = os.environ.get("MODEL_REPO", "build-small-hackathon/legacyscribe-Qwen3.5-9B.Q4_K_M")
# MODEL_FILE   = os.environ.get("MODEL_FILE", "Qwen3.5-9B.Q4_K_M.gguf")
# N_CTX        = 4096
# N_GPU_LAYERS = int(os.environ.get("N_GPU_LAYERS", "0"))


BACKEND_URL = os.environ.get("BACKEND_URL", "https://swohamkayastha--legacystribe-backend-legacyscribeserver-predict.modal.run/")


# print(f"Loading model from {MODEL_REPO}/{MODEL_FILE}...")
# model_path = hf_hub_download(repo_id=MODEL_REPO, filename=MODEL_FILE)
# llm = Llama(model_path=model_path, n_ctx=N_CTX, n_gpu_layers=N_GPU_LAYERS, verbose=False)
# print("Model ready.")

_client = None
def get_client():
    global _client
    if _client is None:
        _client = Client(BACKEND_URL)
    return _client

# ── System prompts ────────────────────────────────────────────────────────────
SYSTEM_PROMPTS = {
    "questioner": (
        "You are a gentle memory guide helping an elderly person tell their life story. "
        "Ask exactly one warm, open follow-up question. Never ask more than one question. "
        "Be patient, kind, and culturally sensitive to Nepali and South Asian contexts."
    ),
    "extractor": (
        "You are an extractor agent. Given a memory fragment, extract structured information "
        "as JSON with keys relevant to the content (who, when, where, what, emotion). "
        "Output only valid JSON, nothing else."
    ),
    "arcdetector": (
        "You are an arc detector agent. Given a memory fragment, identify the narrative stage. "
        "Output one word only: setup, tension, turn, or meaning."
    ),
    "publisher": (
        "You are a publisher agent. Given memory notes, synthesize them into a single warm, "
        "narrative paragraph suitable for a family memory book. Write in first person. "
        "Use natural, unhurried language. Output only the paragraph, nothing else."
    ),
}

def _parse_think(raw: str):
    """Split raw LLM output into (thinking, output).
    Handles two formats the backend may emit:
      1. <think>…</think>\n\noutput  (standard CoT tag)
      2. Thinking Process:\n1. …\n\noutput  (tag-free fallback)
    """
    raw = raw.strip()
    if "</think>" in raw:
        parts = raw.split("</think>", 1)
        return parts[0].replace("<think>", "").strip(), parts[1].strip()
    if re.match(r"^Thinking Process:", raw):
        # Split at first blank line NOT followed by a numbered list item
        parts = re.split(r"\n\n(?!\d+[\.\)])", raw, maxsplit=1)
        if len(parts) > 1:
            return parts[0].strip(), parts[1].strip()
    return "", raw

import requests

def call_agent(agent: str, user_text: str, max_tokens: int = -1, temp: float = -1.0):
    """Returns (output, thinking) — thinking is '' when no <think> block present."""
    try:
        print(f"Calling backend: agent={agent} url={BACKEND_URL}")
        
        # 1. Package the variables into a clean JSON dictionary matching the backend
        payload = {
            "agent": agent,
            "user_text": user_text,
            "max_tokens": int(max_tokens),
            "temp": float(temp)
        }
        
        # 2. Fire a real HTTP POST request with a generous timeout for cold-starts
        response = requests.post(BACKEND_URL, json=payload, timeout=300)
        
        # 3. Parse the JSON response back out
        response_data = response.json()
        
        if "error" in response_data:
            print(f"Backend returned an internal error [{agent}]: {response_data['error']}")
            return "", ""
            
        result = response_data.get("response", "")
        
        # 4. Pass the string text right back into your existing parser
        thinking, output = _parse_think(result or "")
        print(f"Backend output [{agent}]: {output[:80]}")
        return output, thinking
        
    except Exception as e:
        print(f"Backend error [{agent}]: {type(e).__name__}: {e}")
        return "", ""

# ── Session state ─────────────────────────────────────────────────────────────
def init_state():
    return {"turns": [], "all_notes": [], "chapters": [],"chapter_counter":1, "notes_consumed_idx":0, "chapter_num": 1,   "current_chapter_idx": -1, }

MIN_NOTES_PER_CHAPTER = 3

def process_turn(user_input: str, state: dict):
    if not user_input.strip():
        return state, "", "", "", []

    t0 = time.time()
    think_steps = []

    # --- arc detection ---
    arc_out, arc_think = call_agent("arcdetector", user_input, max_tokens=-1, temp=0.1)
    arc = arc_out.lower().strip()
    if arc not in ("setup", "tension", "turn", "meaning"):
        arc = "setup"
    think_steps.append({"t": "arc", "arc": arc, "label": ARC_LABELS.get(arc, arc), "thinking": arc_think})

    # --- extraction ---
    try:
        raw, ext_think = call_agent("extractor", user_input, max_tokens=-1, temp=0.1)
        notes = json.loads(raw)
        note_lines = [f"{k}: {v}" for k, v in notes.items() if v]
    except Exception:
        ext_think = ""
        note_lines = [user_input[:120]]
    think_steps.append({"t": "extract", "items": note_lines, "thinking": ext_think})

    # add new notes to the global pool
    state["all_notes"].extend(note_lines)

    # --- generate new chapter if enough fresh notes have arrived ---
    new_note_count = len(state["all_notes"]) - state["notes_consumed_idx"]
    if new_note_count >= MIN_NOTES_PER_CHAPTER:
        # use the last 6 notes for continuity (but we will only generate one new chapter)
        notes_text = "\n".join(
            f"{i+1}. {n}" for i, n in enumerate(state["all_notes"][-6:])
        )
        chapter_text, pub_think = call_agent("publisher", f"Notes:\n{notes_text}", max_tokens=-1, temp=0.4)
        if chapter_text and chapter_text.strip():
            state["chapters"].append(chapter_text)
            # advance the counter: number of chapters we now have
            state["chapter_counter"] = len(state["chapters"]) + 1
            state["notes_consumed_idx"] = len(state["all_notes"])
            if len(state["chapters"]) == 1:
              state["current_chapter_idx"] = 0
            think_steps.append({
                "t": "chapter",
                "num": len(state["chapters"]),
                "thinking": pub_think,
            })

    # --- generate follow-up question (uses last 3 turns) ---
    history_ctx = "\n".join(f"Memory: {t['user']}" for t in state["turns"][-3:])
    question_ctx = f"{history_ctx}\nMemory: {user_input}" if history_ctx else f"Memory: {user_input}"
    question, q_think = call_agent("questioner", question_ctx, max_tokens=-1, temp=0.7)
    think_steps.append({"t": "question", "text": question, "thinking": q_think})

    elapsed = round(time.time() - t0, 1)
    state["turns"].append({
        "user": user_input,
        "question": question,
        "arc": arc,
        "notes": note_lines,
        "think_secs": elapsed,
        "think_steps": think_steps,
    })
    return state, question, arc, state["chapters"][-1] if state["chapters"] else "", note_lines

#----
def build_page_from_chapter(chapters, idx):
    """Return HTML for the page showing chapter at index idx (no inline scripts)."""
    if not chapters or idx < 0 or idx >= len(chapters):
        # Empty / waiting state
        return '''
        <div class="ls-book-wrap">
          <div class="ls-book-cover-hint">— waiting for your story —</div>
          <div class="ls-page" id="ls-page">
            <div class="ls-page-inner">
              <div class="ls-chapter-label">Chapter One</div>
              <div class="ls-ruled-area">
                <div class="ls-ruled-lines"></div>
                <div class="ls-page-empty">Your memories are gathering.<br>Share a few more and I will begin to write.</div>
              </div>
            </div>
            <div class="ls-spine"></div>
            <div class="ls-page-shadow"></div>
          </div>
        </div>'''
    
    chapter_text = chapters[idx]
    chapter_num = idx + 1
    words = chapter_text.split()
    lines, current = [], []
    chars = 0
    for w in words:
        if chars + len(w) + 1 > 52:
            lines.append(" ".join(current))
            current, chars = [w], len(w)
        else:
            current.append(w)
            chars += len(w) + 1
    if current:
        lines.append(" ".join(current))
    text_html = "".join(f'<div class="ls-text-line">{line}</div>' for line in lines)
    
    # No scripts inside! Only the book HTML.
    return f'''
    <div class="ls-swipe-area" id="ls-swipe-area">
      <div class="ls-book-wrap">
        <div class="ls-page" id="ls-page">
          <div class="ls-page-inner">
            <div class="ls-chapter-label">Chapter {chapter_num}</div>
            <div class="ls-ruled-area">
              <div class="ls-ruled-lines"></div>
              <div class="ls-text-block">{text_html}</div>
            </div>
          </div>
          <div class="ls-spine"></div>
          <div class="ls-page-curl"></div>
          <div class="ls-page-shadow"></div>
        </div>
      </div>
    </div>'''


# ── HTML builders ─────────────────────────────────────────────────────────────
ARC_ICONS = {"setup": "◎", "tension": "◈", "turn": "◉", "meaning": "✦"}
ARC_LABELS = {"setup": "Setting the scene", "tension": "Something changed", "turn": "A new direction", "meaning": "What it meant"}

def build_chat_html(turns):
    if not turns:
        return '''
        <div class="ls-chat" id="ls-chat">
          <div class="ls-welcome">
            <div class="ls-welcome-icon">📖</div>
            <div class="ls-welcome-text">Tell me a memory — anything at all.<br>A meal, a person, a festival, a place.<br><em>I am here to listen.</em></div>
          </div>
        </div>'''
    html = '<div class="ls-chat" id="ls-chat">'
    for t in turns:
        arc = t.get("arc", "setup")
        icon = ARC_ICONS.get(arc, "◎")
        label = ARC_LABELS.get(arc, arc)
        secs = t.get("think_secs", "")
        steps = t.get("think_steps", [])
        def _think_block(thinking, output_html):
            out = ""
            if thinking:
                escaped = _html.escape(thinking).replace("\n", "<br>")
                out += f'<div class="ls-thought-raw">{escaped}</div>'
            out += f'<div class="ls-thought-output">{output_html}</div>'
            return out

        steps_html = ""
        for s in steps:
            if s["t"] == "arc":
                inner = _think_block(
                    s.get("thinking", ""),
                    f'<span class="ls-to-label">output</span> {_html.escape(s["arc"])} &nbsp;·&nbsp; {_html.escape(s["label"])}',
                )
                steps_html += f'<div class="ls-thought-section"><div class="ls-thought-agent">arc detector</div>{inner}</div>'
            elif s["t"] == "extract":
                pairs = "".join(
                    f'<div class="ls-thought-pair">'
                    f'<span class="ls-thought-key">{_html.escape(p.split(": ",1)[0])}</span>'
                    f'<span class="ls-thought-val">{_html.escape(p.split(": ",1)[1] if ": " in p else p)}</span>'
                    f'</div>'
                    for p in s["items"]
                )
                inner = _think_block(s.get("thinking", ""), f'<span class="ls-to-label">output</span>{pairs}')
                steps_html += f'<div class="ls-thought-section"><div class="ls-thought-agent">memory extractor</div>{inner}</div>'
            elif s["t"] == "question":
                inner = _think_block(
                    s.get("thinking", ""),
                    f'<span class="ls-to-label">output</span><span class="ls-thought-q">{_html.escape(s["text"])}</span>',
                )
                steps_html += f'<div class="ls-thought-section"><div class="ls-thought-agent">follow-up composer</div>{inner}</div>'
            elif s["t"] == "chapter":
                inner = _think_block(
                    s.get("thinking", ""),
                    f'<span class="ls-to-label">output</span> chapter {s["num"]} drafted to notebook',
                )
                steps_html += f'<div class="ls-thought-section"><div class="ls-thought-agent">publisher</div>{inner}</div>'
        thought_html = f'''
        <details class="ls-thought">
          <summary class="ls-thought-summary">Thought for {secs}s &rsaquo;</summary>
          <div class="ls-thought-body">{steps_html}</div>
        </details>''' if secs else ""
        html += f'''
        <div class="ls-turn">
          <div class="ls-bubble-user">{t["user"]}</div>
          <div class="ls-arc-pill {arc}"><span>{icon}</span><span>{label}</span></div>
          {thought_html}
          <div class="ls-bubble-agent">{t["question"]}</div>
        </div>'''
    html += '</div>'
    html += '<script>setTimeout(function(){var c=document.getElementById("ls-chat");if(c)c.scrollTop=c.scrollHeight;},80);</script>'
    return html

def build_notes_html(notes):
    if not notes:
        return ''
    html = '<div class="ls-fragments-label">Memory fragments extracted</div><div class="ls-fragments">'
    for n in notes[-5:]:
        parts = n.split(": ", 1)
        if len(parts) == 2:
            html += f'<div class="ls-fragment"><span class="ls-fkey">{parts[0]}</span><span class="ls-fval">{parts[1]}</span></div>'
        else:
            html += f'<div class="ls-fragment"><span class="ls-fval">{n}</span></div>'
    html += '</div>'
    return html

LINE_H = 28   # px per ruled line

def build_page_html(chapters, chapter_counter):
    if not chapters:
        return '''
        <div class="ls-book-wrap">
          <div class="ls-book-cover-hint">— waiting for your story —</div>
          <div class="ls-page" id="ls-page">
            <div class="ls-page-inner">
              <div class="ls-chapter-label">Chapter One</div>
              <div class="ls-ruled-area">
                <div class="ls-ruled-lines"></div>
                <div class="ls-page-empty">Your memories are gathering.<br>Share a few more and I will begin to write.</div>
              </div>
            </div>
            <div class="ls-spine"></div>
            <div class="ls-page-shadow"></div>
          </div>
        </div>'''

     # take the most recent chapter
    chapter_text = chapters[-1]
    chapter_num = len(chapters)   # chapter number = position in list

    # same line‑breaking logic as before
    words = chapter_text.split()
    lines, current = [], []
    chars = 0
    for w in words:
        if chars + len(w) + 1 > 52:
            lines.append(" ".join(current))
            current, chars = [w], len(w)
        else:
            current.append(w)
            chars += len(w) + 1
    if current:
        lines.append(" ".join(current))

    text_html = "".join(f'<div class="ls-text-line">{line}</div>' for line in lines)

    return f'''
    <div class="ls-book-wrap">
      <div class="ls-page" id="ls-page">
        <div class="ls-page-inner">
          <div class="ls-chapter-label">Chapter {chapter_num}</div>
          <div class="ls-ruled-area">
            <div class="ls-ruled-lines"></div>
            <div class="ls-text-block">{text_html}</div>
          </div>
        </div>
        <div class="ls-spine"></div>
        <div class="ls-page-curl"></div>
        <div class="ls-page-shadow"></div>
      </div>
    </div>
    <script>
      (function(){{
        var p = document.getElementById("ls-page");
        if(!p) return;
        p.classList.remove("ls-flip");
        void p.offsetWidth;
        p.classList.add("ls-flip");
      }})();
    </script>'''

# ── CSS / HEAD ─────────────────────────────────────────────────────────────────
HEAD = """
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,400;1,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;1,8..60,300;1,8..60,400&family=JetBrains+Mono:wght@300;400&display=swap" rel="stylesheet> """

CSS = """
/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --walnut:   #241208;
  --walnut2:  #2E1810;
  --parchment:#F0E4CC;
  --parchment2:#FAF4E8;
  --ink:      #1C0E06;
  --gold:     #C8861E;
  --gold2:    #E8A830;
  --sage:     #6A9070;
  --dust:     #B8A484;
  --cream:    #F8F2E4;
  --red:      #C04030;
  --purple:   #9060A8;
  --shadow:   rgba(20,8,2,0.5);
  --line-h:   28px;
}
html,body,.gradio-container{
  background: var(--walnut) !important;
  font-family:'Source Serif 4',Georgia,serif !important;
  color:var(--parchment) !important;
  min-height:100vh;
}
/* ── Suppress Gradio chrome ── */
footer,.svelte-1rjryqp,#footer{display:none!important;}
.gradio-container{padding:0!important;max-width:100%!important;}
.gr-prose{color:var(--parchment)!important;}
.gr-button{font-family:'Source Serif 4',serif!important;}
/* ════════════════════════════════
   HEADER
════════════════════════════════ */
.ls-header{
  text-align:center;
  padding:3rem 1rem 2rem;
  background: linear-gradient(to bottom, #1A0A02, var(--walnut));
  border-bottom:1px solid rgba(200,134,30,0.25);
  position:relative;
  overflow:hidden;
}
.ls-header::before{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(200,134,30,0.08), transparent);
  pointer-events:none;
}
.ls-wordmark{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.4rem,6vw,4rem);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1;
  position:relative;
}
.ls-wordmark-legacy{ color:var(--gold2); }
.ls-wordmark-scribe{ color:var(--parchment); font-style:italic; font-weight:500; }
.ls-wordmark-dot{ color:var(--gold); font-style:normal; }
.ls-deco-line{
  width:80px; height:1px;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
  margin:0.9rem auto 0.7rem;
}
.ls-tagline{
  font-size:0.95rem;
  color:var(--dust);
  font-style:italic;
  letter-spacing:0.05em;
}
.ls-badges{
  display:flex;gap:0.5rem;
  justify-content:center;
  margin-top:1.2rem;
  flex-wrap:wrap;
}
.ls-badge{
  font-family:'JetBrains Mono',monospace;
  font-size:0.6rem;
  padding:0.18rem 0.65rem;
  border:1px solid rgba(200,134,30,0.4);
  border-radius:1px;
  color:rgba(200,134,30,0.9);
  letter-spacing:0.1em;
  text-transform:uppercase;
}
/* ════════════════════════════════
   LAYOUT
════════════════════════════════ */
.ls-main{
  display:grid;
  grid-template-columns:1fr 1fr;
  max-width:1280px;
  margin:0 auto;
  min-height:calc(100vh - 220px);
}
@media(max-width:780px){.ls-main{grid-template-columns:1fr;}}
/* ════════════════════════════════
   LEFT — CONVERSATION
════════════════════════════════ */
.ls-conversation{
  border-right:1px solid rgba(200,134,30,0.15);
  padding:2rem 1.75rem;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  background:linear-gradient(160deg, rgba(46,24,16,0.6), rgba(36,18,8,0.9));
}
.ls-section-label{
  font-family:'JetBrains Mono',monospace;
  font-size:0.6rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:0.8;
}
/* Chat */
.ls-chat{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  max-height:360px;
  overflow-y:auto;
  padding-right:0.25rem;
  scrollbar-width:thin;
  scrollbar-color:rgba(200,134,30,0.3) transparent;
}
.ls-welcome{
  display:flex;flex-direction:column;align-items:center;
  gap:1rem;padding:2rem 1rem;
  color:var(--dust);text-align:center;
}
.ls-welcome-icon{font-size:2.5rem;opacity:0.6;}
.ls-welcome-text{font-size:0.9rem;line-height:1.7;font-style:italic;}
.ls-welcome-text em{color:var(--gold);font-style:italic;}
.ls-turn{display:flex;flex-direction:column;gap:0.5rem;}
.ls-bubble-user{
  align-self:flex-end;
  background:rgba(200,134,30,0.12);
  border:1px solid rgba(200,134,30,0.25);
  border-radius:14px 14px 3px 14px;
  padding:0.8rem 1.1rem;
  max-width:88%;
  font-size:0.9rem;
  line-height:1.6;
  color:var(--parchment);
  position:relative;
}
.ls-arc-pill{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:0.35rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.6rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0.18rem 0.7rem;
  border-radius:2px;
  margin-left:0.25rem;
}
.ls-arc-pill.setup   {background:rgba(106,144,112,0.15);color:var(--sage);  border:1px solid rgba(106,144,112,0.3);}
.ls-arc-pill.tension {background:rgba(192,64,48,0.12);  color:#D06858;      border:1px solid rgba(192,64,48,0.25);}
.ls-arc-pill.turn    {background:rgba(200,134,30,0.12); color:var(--gold2); border:1px solid rgba(200,134,30,0.3);}
.ls-arc-pill.meaning {background:rgba(144,96,168,0.12); color:#B080C8;      border:1px solid rgba(144,96,168,0.25);}
/* Thought toggle */
.ls-thought{
  align-self:flex-start;
  margin-left:0.25rem;
}
.ls-thought-summary{
  font-family:'JetBrains Mono',monospace;
  font-size:0.58rem;
  letter-spacing:0.06em;
  color:rgba(200,134,30,0.55);
  cursor:pointer;
  list-style:none;
  user-select:none;
  padding:0.15rem 0;
  transition:color 0.15s;
}
.ls-thought-summary::-webkit-details-marker{display:none;}
.ls-thought-summary::marker{display:none;}
.ls-thought[open] .ls-thought-summary{color:rgba(200,134,30,0.85);}
.ls-thought-summary:hover{color:var(--gold2);}
.ls-thought-body{
  margin-top:0.5rem;
  display:flex;flex-direction:column;gap:0.6rem;
  animation:ls-unfold 0.18s ease;
}
@keyframes ls-unfold{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}
.ls-thought-section{
  border-left:1px solid rgba(200,134,30,0.18);
  padding:0.35rem 0 0.35rem 0.7rem;
  display:flex;flex-direction:column;gap:0.22rem;
}
.ls-thought-agent{
  font-family:'JetBrains Mono',monospace;
  font-size:0.56rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(200,134,30,0.5);
  margin-bottom:0.1rem;
}
.ls-thought-result{
  font-family:'JetBrains Mono',monospace;
  font-size:0.62rem;
  color:rgba(184,164,132,0.65);
  line-height:1.5;
}
.ls-thought-q{
  font-family:'Source Serif 4',serif;
  font-size:0.75rem;
  font-style:italic;
  color:rgba(240,228,204,0.55);
  line-height:1.6;
}
.ls-thought-pair{
  display:flex;gap:0.5rem;align-items:baseline;
  font-family:'JetBrains Mono',monospace;
  font-size:0.62rem;
  line-height:1.5;
}
.ls-thought-key{
  color:rgba(200,134,30,0.55);
  min-width:72px;
  flex-shrink:0;
}
.ls-thought-val{
  color:rgba(184,164,132,0.65);
}
.ls-thought-raw{
  font-family:'JetBrains Mono',monospace;
  font-size:0.6rem;
  line-height:1.65;
  color:rgba(184,164,132,0.45);
  white-space:pre-wrap;
  word-break:break-word;
  margin-bottom:0.45rem;
  padding-bottom:0.45rem;
  border-bottom:1px dashed rgba(200,134,30,0.12);
}
.ls-thought-output{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0.35rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.62rem;
  color:rgba(240,228,204,0.75);
}
.ls-to-label{
  font-size:0.52rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(200,134,30,0.45);
  flex-shrink:0;
}
.ls-bubble-agent{
  align-self:flex-start;
  background:rgba(240,228,204,0.05);
  border:1px solid rgba(184,164,132,0.15);
  border-radius:3px 14px 14px 14px;
  padding:0.8rem 1.1rem;
  max-width:88%;
  font-size:0.9rem;
  line-height:1.65;
  color:rgba(240,228,204,0.9);
  font-style:italic;
}
.ls-bubble-agent::before{
  content:'✦ ';
  color:var(--gold);
  font-style:normal;
  font-size:0.65rem;
  vertical-align:middle;
}
/* Fragments */
.ls-fragments-label{
  font-family:'JetBrains Mono',monospace;
  font-size:0.58rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:rgba(200,134,30,0.7);
  margin-bottom:0.4rem;
}
.ls-fragments{display:flex;flex-direction:column;gap:0.25rem;}
.ls-fragment{
  display:flex;gap:0.5rem;align-items:baseline;
  font-family:'JetBrains Mono',monospace;
  font-size:0.68rem;
  padding:0.22rem 0.6rem 0.22rem 0.8rem;
  border-left:2px solid rgba(200,134,30,0.5);
  line-height:1.4;
}
.ls-fkey{color:var(--gold);min-width:60px;flex-shrink:0;}
.ls-fval{color:var(--dust);}
/* Input */
.ls-input-wrap textarea{
  width:100%;
  background:rgba(20,8,2,0.7)!important;
  border:1px solid rgba(184,164,132,0.2)!important;
  border-radius:4px!important;
  color:var(--parchment)!important;
  font-family:'Source Serif 4',serif!important;
  font-size:0.92rem!important;
  line-height:1.65!important;
  padding:0.9rem 1.1rem!important;
  resize:none!important;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.ls-input-wrap textarea:focus{
  border-color:rgba(200,134,30,0.5)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(200,134,30,0.08)!important;
}
.ls-input-wrap textarea::placeholder{color:var(--dust)!important;opacity:0.45;}
/* Buttons */
.ls-btn-row{display:flex;gap:0.75rem;align-items:center;}
.ls-btn{
  font-family:'Source Serif 4',serif!important;
  font-size:0.88rem!important;
  font-weight:400!important;
  letter-spacing:0.02em!important;
  padding:0.6rem 1.5rem!important;
  border-radius:3px!important;
  cursor:pointer!important;
  transition:all 0.16s!important;
  border:none!important;
}
.ls-btn-primary{background:var(--gold)!important;color:var(--walnut)!important;font-weight:600!important;}
.ls-btn-primary:hover{background:var(--gold2)!important;transform:translateY(-1px);box-shadow:0 4px 16px rgba(200,134,30,0.25)!important;}
.ls-btn-secondary{background:transparent!important;color:var(--dust)!important;border:1px solid rgba(184,164,132,0.25)!important;}
.ls-btn-secondary:hover{border-color:var(--dust)!important;color:var(--parchment)!important;}
/* Thinking dots */
.ls-thinking{
  display:flex;align-items:center;gap:0.5rem;
  font-size:0.78rem;color:var(--dust);font-style:italic;
  min-height:1.2rem;
}
.ls-dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--gold);
  animation:ls-pulse 1.3s ease-in-out infinite;
}
.ls-dot:nth-child(2){animation-delay:0.2s;}
.ls-dot:nth-child(3){animation-delay:0.4s;}
@keyframes ls-pulse{
  0%,80%,100%{opacity:0.15;transform:scale(0.7);}
  40%{opacity:1;transform:scale(1);}
}
/* ════════════════════════════════
   RIGHT — BOOK
════════════════════════════════ */
.ls-book{
  padding:2.5rem 2rem;
  display:flex;flex-direction:column;gap:1.5rem;
  background:linear-gradient(160deg, rgba(30,14,6,0.95), rgba(24,10,2,0.98));
}
/* Book wrapper — perspective for 3D flip */
.ls-book-wrap{
  perspective:1200px;
  perspective-origin:50% 40%;
}
.ls-book-cover-hint{
  font-family:'JetBrains Mono',monospace;
  font-size:0.6rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:rgba(200,134,30,0.3)!important;
  text-align:center;
  margin-bottom:0.75rem;
}
/* ── The page itself ── */
.ls-page{
  position:relative;
  background: linear-gradient(105deg, #F8F2E0 0%, #F2EAD4 40%, #EDE4C8 100%);
  border-radius:2px 6px 6px 2px;
  min-height:340px;
  box-shadow:
    -6px 0 18px rgba(20,8,2,0.5),
    2px 2px 6px rgba(20,8,2,0.25),
    inset 0 0 60px rgba(180,140,80,0.06);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: none;
  overflow:hidden;
}
/* Page-flip animation */
@keyframes pageFlip{
  0%  { transform: rotateY(-25deg) skewY(1deg); opacity:0.7; }
  35% { transform: rotateY(-8deg)  skewY(0.3deg); opacity:0.9; }
  65% { transform: rotateY(-3deg)  skewY(0deg); opacity:0.97; }
  100%{ transform: rotateY(0deg)   skewY(0deg); opacity:1; }
}
.ls-page.ls-flip{
  animation: pageFlip 0.55s cubic-bezier(0.23,1,0.32,1) forwards;
}
/* Leather spine */
.ls-spine{
  position:absolute;
  left:0;top:0;bottom:0;width:18px;
  background:linear-gradient(to right,
    #6B4012 0%, #9B6422 30%, #B88030 50%, #9B6422 70%, #6B4012 100%);
  box-shadow:inset -2px 0 4px rgba(0,0,0,0.3), 2px 0 6px rgba(0,0,0,0.2);
}
/* Spine stitching */
.ls-spine::before{
  content:'';
  position:absolute;
  left:7px;top:12px;bottom:12px;width:1px;
  background:repeating-linear-gradient(to bottom,
    rgba(255,220,120,0.5) 0px, rgba(255,220,120,0.5) 4px,
    transparent 4px, transparent 8px);
}
/* Page curl bottom-right */
.ls-page-curl{
  position:absolute;
  bottom:0;right:0;
  width:36px;height:36px;
  background:linear-gradient(135deg,
    transparent 50%,
    rgba(180,140,80,0.15) 50%,
    rgba(140,100,40,0.1) 100%);
  border-top-left-radius:3px;
  pointer-events:none;
}
.ls-page-curl::after{
  content:'';
  position:absolute;
  bottom:0;right:0;
  width:24px;height:24px;
  background:linear-gradient(135deg, transparent 50%, rgba(160,120,60,0.08) 50%);
  border-top-left-radius:2px;
}
/* Drop shadow panel */
.ls-page-shadow{
  position:absolute;
  bottom:-8px;left:12px;right:-4px;height:12px;
  background:rgba(20,8,2,0.3);
  border-radius:0 0 4px 4px;
  filter:blur(6px);
  z-index:-1;
}
/* Page inner content */
.ls-page-inner{
  position:relative;
  padding:1.5rem 1.5rem 1.5rem 2.5rem; /* left pad for spine */
  z-index:1;
}
/* Chapter label */
.ls-page .ls-chapter-label{
  font-family:'Playfair Display',serif;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#8B5E1A!important;
  margin-bottom:1rem;
  padding-bottom:0.5rem;
  border-bottom:1px solid rgba(180,140,80,0.3);
  position:relative;
}
.ls-chapter-label::after{
  content:'';
  position:absolute;
  bottom:-1px;left:0;width:40px;height:1px;
  background:var(--gold);
}
/* Ruled area — lines + text together */
.ls-ruled-area{
  position:relative;
  min-height:240px;
}
.ls-ruled-lines{
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent calc(var(--line-h) - 1px),
    rgba(160,120,60,0.18) calc(var(--line-h) - 1px),
    rgba(160,120,60,0.18) var(--line-h)
  );
  pointer-events:none;
}
/* Page sets base ink color so all children inherit correctly */
.ls-page{color:#2A1408!important;}
/* Text sits ON the ruled lines */
.ls-text-block{
  position:relative;
  z-index:1;
}
.ls-page .ls-text-line{
  font-family:'Source Serif 4',serif;
  font-size:0.88rem;
  line-height:28px;
  color:#2A1408!important;
  font-weight:300;
  height:28px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  padding-right:0.5rem;
  position:relative;
  top:-1px;
}
.ls-page .ls-page-empty{
  position:relative;
  z-index:1;
  padding-top:calc(28px * 3);
  font-family:'Source Serif 4',serif;
  font-style:italic;
  color:#9A7A50!important;
  font-size:0.85rem;
  line-height:1.7;
  text-align:center;
  opacity:0.8;
}
/* ── Download button ── */
.ls-dl-btn{
  align-self:flex-start;
  font-family:'JetBrains Mono',monospace!important;
  font-size:0.65rem!important;
  letter-spacing:0.1em!important;
  text-transform:uppercase!important;
  padding:0.4rem 1rem!important;
  background:transparent!important;
  color:rgba(200,134,30,0.7)!important;
  border:1px solid rgba(200,134,30,0.25)!important;
  border-radius:2px!important;
  cursor:pointer!important;
  transition:all 0.16s!important;
}
.ls-nav-btn {
    background: transparent !important;
    border: 1px solid rgba(200,134,30,0.3) !important;
    color: var(--dust) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.7rem !important;
    padding: 0.3rem 0.8rem !important;
    border-radius: 2px !important;
}
.ls-nav-btn:hover {
    border-color: var(--gold) !important;
    color: var(--gold2) !important;
}
.ls-chapter-indicator {
    font-family: 'Playfair Display', serif;
    font-size: 0.75rem;
    text-align: center;
    color: var(--gold);
    letter-spacing: 0.05em;
    margin: 0 0.5rem;
    line-height: 2rem;
}
/* Swipe container – allows vertical scroll, captures horizontal drag */
.ls-swipe-area {
  touch-action: pan-y;           /* vertical scroll stays, horizontal = swipe */
  cursor: grab;
  user-select: none;
}
.ls-swipe-area:active {
  cursor: grabbing;
}
.ls-dl-btn:hover{
  background:rgba(200,134,30,0.08)!important;
  color:var(--gold2)!important;
  border-color:rgba(200,134,30,0.5)!important;
}
/* ── Footer ── */
.ls-footer{
  text-align:center;
  padding:1.25rem 1rem;
  border-top:1px solid rgba(200,134,30,0.1);
  font-family:'JetBrains Mono',monospace;
  font-size:0.58rem;
  color:rgba(184,164,132,0.4);
  letter-spacing:0.1em;
  text-transform:uppercase;
}
"""

INTRO_JS = """
() => {
  /* Pure animation — no interaction. Just remove overlay from DOM after CSS is done. */
  /* Total: 3.5s delay + 0.9s fade = 4.4s. Add small buffer. */
  setTimeout(function() {
    var el = document.getElementById('ls-intro');
    if (el) el.style.display = 'none';
  }, 4600);
}
"""


# ── Gradio app ─────────────────────────────────────────────────────────────────
with gr.Blocks() as demo:
    gr.HTML(f"<style>{CSS}</style>")
    state = gr.State(init_state())

    # ── Book intro overlay — pure CSS animation, no interaction ─────────────────
    gr.HTML("""
    <style>
    /* ── Overlay ── */
    #ls-intro {
      position:fixed; inset:0; z-index:9999; overflow:hidden;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center; gap:1.4rem;
      background:radial-gradient(ellipse 70% 80% at 50% 50%, #2A1408, #160700 70%, #0D0500);
      pointer-events:none;
      /* Step 4 — fade the whole overlay out */
      animation: _ov-out 0.9s ease 3.5s forwards;
    }
    /* Step 4 — golden page-light flash */
    #ls-intro::after {
      content:''; position:absolute; inset:0; z-index:10; pointer-events:none;
      background:radial-gradient(ellipse 55% 50% at 50% 48%,
        rgba(235,175,55,0.55) 0%, rgba(200,134,30,0.2) 42%, transparent 68%);
      opacity:0;
      animation: _flash 0.6s ease 3.5s forwards;
    }
    @keyframes _ov-out { 0%{opacity:1} 20%{opacity:1} 100%{opacity:0} }
    @keyframes _flash  { 0%{opacity:0} 28%{opacity:1} 100%{opacity:0} }
    /* ── Ambient glow — blooms as cover opens ── */
    #ls-i-glow {
      position:absolute; width:520px; height:520px; border-radius:50%; pointer-events:none;
      background:radial-gradient(circle, rgba(200,134,30,0.13) 0%, rgba(200,134,30,0.04) 45%, transparent 70%);
      top:50%; left:50%;
      transform:translate(-50%,-50%) scale(0.3); opacity:0;
      animation:_glow-in 1s ease 1.9s forwards;
    }
    @keyframes _glow-in { to{opacity:1; transform:translate(-50%,-50%) scale(1);} }
    /* ── 3-D scene — Step 4 surges toward viewer ── */
    #ls-i-scene {
      perspective:1400px; perspective-origin:50% 45%;
      /* Step 4 zoom */
      animation: _surge 0.82s cubic-bezier(0.3,0,0.6,1) 3.5s forwards;
    }
    @keyframes _surge { 0%{transform:scale(1)} 100%{transform:scale(8)} }
    /* ── Book container — Step 1 drop-in ── */
    #ls-i-book {
      position:relative; width:300px; height:420px;
      transform-style:preserve-3d;
      filter:drop-shadow(0 28px 56px rgba(10,4,0,0.92));
      animation:_drop 0.82s cubic-bezier(0.23,1,0.32,1) forwards;
    }
    @keyframes _drop {
      from{opacity:0; transform:translateY(-65px) scale(0.82);}
      to  {opacity:1; transform:translateY(0) scale(1);}
    }
    /* ── Interior parchment page ── */
    #ls-i-back {
      position:absolute; inset:0;
      background:linear-gradient(108deg,#F8F2E0 0%,#F3EAD5 55%,#EDE4C8 100%);
      border-radius:2px 6px 6px 2px; overflow:hidden;
      display:flex; align-items:center; justify-content:center;
    }
    #ls-i-back-spine {
      position:absolute; left:0; top:0; bottom:0; width:14px;
      background:linear-gradient(to right,#5A3010 0%,#9A6020 40%,#C08030 50%,#9A6020 70%,#5A3010 100%);
    }
    #ls-i-back-content {
      display:flex; flex-direction:column; align-items:center;
      gap:0.55rem; padding-left:0.75rem; text-align:center;
    }
    /* Step 3 — text rises after cover opens */
    #ls-i-back-title {
      font-family:'Playfair Display',serif; line-height:1.15;
      opacity:0; animation:_rise 0.55s ease 2.2s forwards;
    }
    #ls-i-back-title .t { display:block; font-size:1.9rem; font-weight:700; color:#8B5E1A; }
    #ls-i-back-title .i { display:block; font-size:1.6rem; font-style:italic; font-weight:500; color:#2A1408; }
    #ls-i-back-rule {
      width:52px; height:1px;
      background:linear-gradient(to right,transparent,#C8861E,transparent);
      opacity:0; animation:_rise 0.45s ease 2.32s forwards;
    }
    #ls-i-back-sub {
      font-family:'Source Serif 4',serif; font-size:0.75rem; font-style:italic; color:#9A7A50;
      opacity:0; animation:_rise 0.45s ease 2.44s forwards;
    }
    @keyframes _rise { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
    /* ── Front leather cover — Step 2 flip ── */
    #ls-i-cover {
      position:absolute; inset:0;
      transform-origin:left center; transform-style:preserve-3d;
      animation:_flip 1.2s cubic-bezier(0.4,0,0.2,1) 1.0s forwards;
    }
    @keyframes _flip { 0%{transform:rotateY(0deg);} 100%{transform:rotateY(-162deg);} }
    #ls-i-cover-front {
      position:absolute; inset:0;
      backface-visibility:hidden; -webkit-backface-visibility:hidden;
      background:linear-gradient(158deg,#4A200A 0%,#2C1005 55%,#1C0803 100%);
      border-radius:2px 6px 6px 2px; overflow:hidden;
      box-shadow:6px 0 24px rgba(20,8,2,0.6), inset 0 0 80px rgba(0,0,0,0.2);
    }
    #ls-i-cover-front::before {
      content:''; position:absolute; inset:0; pointer-events:none;
      background:
        repeating-linear-gradient( 45deg,transparent 0,transparent 3px,rgba(255,255,255,0.013) 3px,rgba(255,255,255,0.013) 4px),
        repeating-linear-gradient(-45deg,transparent 0,transparent 3px,rgba(255,255,255,0.013) 3px,rgba(255,255,255,0.013) 4px);
    }
    #ls-i-cover-front::after {
      content:''; position:absolute; inset:0; pointer-events:none;
      background:radial-gradient(ellipse 60% 30% at 70% 15%,rgba(200,134,30,0.07),transparent);
    }
    #ls-i-spine {
      position:absolute; left:0; top:0; bottom:0; width:16px;
      background:linear-gradient(to right,#0A0300 0%,#1C0803 35%,#2E1005 55%,#1C0803 75%,#0A0300 100%);
      box-shadow:inset -2px 0 5px rgba(0,0,0,0.5);
    }
    #ls-i-spine::before {
      content:''; position:absolute; left:6px; top:20px; bottom:20px; width:1px;
      background:repeating-linear-gradient(to bottom,rgba(200,134,30,0.45) 0,rgba(200,134,30,0.45) 4px,transparent 4px,transparent 9px);
    }
    #ls-i-body {
      position:absolute; inset:0; left:18px;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:0.7rem; padding:2.5rem 1.5rem;
    }
    #ls-i-frame {
      position:absolute; inset:10px; left:22px;
      border:1px solid rgba(200,134,30,0.22); pointer-events:none;
    }
    #ls-i-frame::before { content:''; position:absolute; inset:5px; border:1px solid rgba(200,134,30,0.1); }
    #ls-i-frame::after  { content:'◆'; position:absolute; top:-7px; left:50%; transform:translateX(-50%); font-size:0.5rem; color:rgba(200,134,30,0.45); }
    #ls-i-ornament { font-size:0.95rem; color:rgba(200,134,30,0.75); letter-spacing:0.3em; }
    #ls-i-title { font-family:'Playfair Display',serif; text-align:center; line-height:1.15; }
    #ls-i-title .t { display:block; font-size:2.6rem; font-weight:700; color:#E8A830; }
    #ls-i-title .i { display:block; font-size:2.2rem; font-style:italic; font-weight:500; color:#FAF4E8; }
    #ls-i-deco { width:55px; height:1px; background:linear-gradient(to right,transparent,#C8861E,transparent); }
    #ls-i-desc { font-family:'Source Serif 4',serif; font-size:0.72rem; color:#B8A484; font-style:italic; letter-spacing:0.06em; text-align:center; opacity:0.75; }
    #ls-i-year { font-family:'JetBrains Mono',monospace; font-size:0.55rem; color:rgba(200,134,30,0.4); letter-spacing:0.22em; margin-top:0.3rem; }
    #ls-i-cover-inside {
      position:absolute; inset:0;
      backface-visibility:hidden; -webkit-backface-visibility:hidden;
      transform:rotateY(180deg);
      background:linear-gradient(108deg,#EAE0C8,#E4D8B8);
      border-radius:6px 2px 2px 6px;
    }
    /* Caption fades in early */
    #ls-i-caption {
      font-family:'JetBrains Mono',monospace; font-size:0.57rem;
      letter-spacing:0.22em; text-transform:uppercase;
      color:rgba(200,134,30,0.35);
      opacity:0; animation:_rise 0.5s ease 0.35s forwards;
    }
    </style>
    <div id="ls-intro">
      <div id="ls-i-glow"></div>
      <div id="ls-i-scene">
        <div id="ls-i-book">
          <div id="ls-i-back">
            <div id="ls-i-back-spine"></div>
            <div id="ls-i-back-content">
              <div id="ls-i-back-title">
                <span class="t">Legacy</span><em class="i">Scribe</em>
              </div>
              <div id="ls-i-back-rule"></div>
              <div id="ls-i-back-sub">Every family has a story worth keeping</div>
            </div>
          </div>
          <div id="ls-i-cover">
            <div id="ls-i-cover-front">
              <div id="ls-i-spine"></div>
              <div id="ls-i-frame"></div>
              <div id="ls-i-body">
                <div id="ls-i-ornament">✦ · ✦</div>
                <div id="ls-i-title">
                  <span class="t">Legacy</span><em class="i">Scribe</em>
                </div>
                <div id="ls-i-deco"></div>
                <div id="ls-i-desc">A Family Memory Journal</div>
                <div id="ls-i-year">· 2025 ·</div>
              </div>
            </div>
            <div id="ls-i-cover-inside"></div>
          </div>
        </div>
      </div>
      <div id="ls-i-caption">Family Memory Agent</div>
    </div>
    """)
    

    # ── Header ──
    gr.HTML("""
    <div class="ls-header">
      <div class="ls-wordmark">
        <span class="ls-wordmark-legacy">Legacy</span><span class="ls-wordmark-scribe">Scribe</span><span class="ls-wordmark-dot">.</span>
      </div>
      <div class="ls-deco-line"></div>
      <div class="ls-tagline">Every family has a story worth keeping</div>
      <div class="ls-badges">
        <span class="ls-badge">Off the Grid</span>
        <span class="ls-badge">Qwen3.5 · 9B</span>
        <span class="ls-badge">LoRA Fine-tuned</span>
        <span class="ls-badge">Nepali · English</span>
        <span class="ls-badge">5-Agent Pipeline</span>
        <span class="ls-badge">Build Small 2025</span>
      </div>
    </div>
    """)

    # ── Persistent swipe & flip script (runs once, watches DOM changes) ──
    gr.HTML('''
    <script>
    (function() {
        // Function to attach swipe listeners to the current swipe area
        function attachSwipe() {
            const container = document.getElementById('ls-swipe-area');
            if (!container) return;
            
            // Avoid duplicate listeners
            if (container._swipeActive) return;
            container._swipeActive = true;
            
            let startX = 0, startY = 0;
            let isSwiping = false;
            const minSwipeDistance = 50;
            
            function onStart(e) {
                const point = e.touches ? e.touches[0] : e;
                startX = point.clientX;
                startY = point.clientY;
                isSwiping = true;
                container.style.cursor = 'grabbing';
            }
            
            function onMove(e) {
                if (!isSwiping) return;
                const point = e.touches ? e.touches[0] : e;
                const diffX = point.clientX - startX;
                const diffY = point.clientY - startY;
                if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 10) {
                    e.preventDefault();
                }
            }
            
            function onEnd(e) {
                if (!isSwiping) return;
                container.style.cursor = 'grab';
                const point = e.changedTouches ? e.changedTouches[0] : e;
                const diffX = point.clientX - startX;
                if (Math.abs(diffX) >= minSwipeDistance) {
                    if (diffX > 0) {
                        // swipe right → previous chapter
                        const prevBtn = document.querySelector('.ls-nav-btn:first-child');
                        if (prevBtn) prevBtn.click();
                    } else {
                        // swipe left → next chapter
                        const nextBtn = document.querySelector('.ls-nav-btn:last-child');
                        if (nextBtn) nextBtn.click();
                    }
                }
                isSwiping = false;
            }
            
            container.addEventListener('touchstart', onStart, {passive: false});
            container.addEventListener('touchmove', onMove, {passive: false});
            container.addEventListener('touchend', onEnd);
            container.addEventListener('mousedown', onStart);
            window.addEventListener('mousemove', onMove);
            window.addEventListener('mouseup', onEnd);
        }
        
        // Function to trigger the page‑flip animation on the current #ls-page
        function triggerFlip() {
            const page = document.getElementById('ls-page');
            if (page) {
                page.classList.remove('ls-flip');
                void page.offsetWidth;  // force reflow
                page.classList.add('ls-flip');
            }
        }
        
        // Run both when the DOM is ready
        function updateBookInteractions() {
            attachSwipe();
            triggerFlip();
        }
        
        // Initial call
        updateBookInteractions();
        
        // Watch for changes in the right column where the book is rendered
        const observer = new MutationObserver(function(mutations) {
            // If the swipe area or its parent changed, re‑attach
            if (document.getElementById('ls-swipe-area')) {
                updateBookInteractions();
            }
        });
        
        // Wait for the container that holds the page display
        // It's inside .ls-book . We'll observe the whole body for simplicity
        observer.observe(document.body, { childList: true, subtree: true });
    })();
    </script>
    ''')

    def prev_chapter(state):
        idx = state.get("current_chapter_idx", -1)
        if idx > 0:
            state["current_chapter_idx"] = idx - 1
        page_html = build_page_from_chapter(state["chapters"], state.get("current_chapter_idx", -1))
        indicator_html = update_indicator(state)
        return state, page_html, indicator_html

    def next_chapter(state):
        idx = state.get("current_chapter_idx", -1)
        chapters = state.get("chapters", [])
        if idx < len(chapters) - 1:
            state["current_chapter_idx"] = idx + 1
        page_html = build_page_from_chapter(state["chapters"], state.get("current_chapter_idx", -1))
        indicator_html = update_indicator(state)
        return state, page_html, indicator_html

    def update_indicator(state):
        chapters = state.get("chapters", [])
        idx = state.get("current_chapter_idx", -1)
        if chapters and 0 <= idx < len(chapters):
            return f'<div class="ls-chapter-indicator">Chapter {idx+1} of {len(chapters)}</div>'
        return '<div class="ls-chapter-indicator">No chapters yet</div>'

    # ── Main two-column layout ──
    with gr.Row(elem_classes=["ls-main"]):

        # Left — conversation
        with gr.Column(elem_classes=["ls-conversation"]):
            gr.HTML('<div class="ls-section-label">Your memory</div>')
            chat_display   = gr.HTML(build_chat_html([]))
            notes_display  = gr.HTML("")

            with gr.Column(elem_classes=["ls-input-wrap"]):
                user_input = gr.Textbox(
                    placeholder="Tell me about a person, a festival, a meal, a place — anything you remember…",
                    lines=3,
                    show_label=False,
                    container=False,
                )

            with gr.Row(elem_classes=["ls-btn-row"]):
                submit_btn = gr.Button("Share this memory →", elem_classes=["ls-btn", "ls-btn-primary"])
                clear_btn  = gr.Button("Start over",          elem_classes=["ls-btn", "ls-btn-secondary"])

            thinking = gr.HTML(
                '<div class="ls-thinking" style="display:none">'
                '<div class="ls-dot"></div><div class="ls-dot"></div><div class="ls-dot"></div>'
                '&nbsp;Listening and writing…</div>'
            )

        # Right — memory book
        with gr.Column(elem_classes=["ls-book"]):
            gr.HTML('<div class="ls-section-label">Your memory book</div>')
            page_display = gr.HTML(build_page_from_chapter([], -1))

            # Navigation row
            with gr.Row():
                prev_btn = gr.Button("◀ Previous", elem_classes=["ls-nav-btn"], size="sm")
                chapter_label = gr.HTML('<div class="ls-chapter-indicator">Chapter —</div>')
                next_btn = gr.Button("Next ▶", elem_classes=["ls-nav-btn"], size="sm")

            # Download section (two-step but reliable)
            with gr.Row():
                download_btn = gr.Button("↓ Download memory book", elem_classes=["ls-dl-btn"])
                download_file = gr.File(label="Your memory book", visible=False, interactive=False)

            # Functions for download and indicator
            def export_memory_fn(state):
                import tempfile
                from pathlib import Path
                chapters = state.get("chapters", [])
                all_notes = state.get("all_notes", [])
                content = "# My Memory Book\n\n"
                if chapters:
                    for idx, ch in enumerate(chapters, start=1):
                        content += f"## Chapter {idx}\n\n{ch}\n\n---\n\n"
                else:
                    content += "## (No chapters yet)\n\nKeep sharing memories — I will write your story.\n\n---\n\n"
                if all_notes:
                    content += "### Memory fragments\n\n" + "\n".join(f"- {n}" for n in all_notes)
                else:
                    content += "### Memory fragments\n\n(Start a conversation to see fragments appear.)"
                path = Path(tempfile.gettempdir()) / "legacyscribe_memory.txt"
                path.write_text(content, encoding="utf-8")
                return str(path)

            def on_download(state):
                path = export_memory_fn(state)
                return gr.update(visible=True, value=path)

            download_btn.click(fn=on_download, inputs=[state], outputs=[download_file])

    # ── Footer ──
    gr.HTML("""
    <div class="ls-footer">
      LegacyScribe &nbsp;·&nbsp; Build Small Hackathon 2025 &nbsp;·&nbsp;
      Fine-tuned Qwen3.5-9B &nbsp;·&nbsp; Runs fully offline via llama.cpp
    </div>
    """)

    prev_btn.click(fn=prev_chapter, inputs=[state], outputs=[state, page_display, chapter_label])
    next_btn.click(fn=next_chapter, inputs=[state], outputs=[state, page_display, chapter_label])

    # ── Handlers ──
    def on_submit(user_text, state):
        if not user_text.strip():
            return (state,
                    build_chat_html(state["turns"]),
                    "",
                    build_page_from_chapter(state["chapters"], state.get("current_chapter_idx", -1)),
                    update_indicator(state),
                    "")
        new_state, question, arc, chapter, notes = process_turn(user_text, state)
        return (new_state,
                build_chat_html(new_state["turns"]),
                build_notes_html(notes),
                build_page_from_chapter(new_state["chapters"], new_state.get("current_chapter_idx", -1)),
                update_indicator(new_state),
                "")

    def on_clear():
        s = init_state()
        return (s,
                build_chat_html([]),
                "",
                build_page_from_chapter([], -1),
                update_indicator(s),
                "")
        
    submit_btn.click(
        fn=on_submit,
        inputs=[user_input, state],
        outputs=[state, chat_display, notes_display, page_display, chapter_label, user_input],
    )
    user_input.submit(
        fn=on_submit,
        inputs=[user_input, state],
        outputs=[state, chat_display, notes_display, page_display, chapter_label, user_input],
    )
    clear_btn.click(
        fn=on_clear,
        inputs=[],
        outputs=[state, chat_display, notes_display, page_display, chapter_label, user_input],
    )


print("=== Launching Gradio demo ===")
demo.launch(ssr_mode=False)