import { useState, useEffect, useRef, useCallback } from "react";
import type { DB } from "../lib/db";
import type { ChatTokenTotals, Message, Usage, ModelInfo, ServerStatus } from "../lib/types";
import type { RuntimeModelFile } from "../features/runtime/types";
import { buildChatTitle, parseAssistantResponse } from "../lib/chat";
import { renderMarkdown, ensureHljs } from "../lib/markdown";
import { getComposerNotice, getSuggestedPrompts } from "./chat-view-state";
import MessageBubble from "./MessageBubble";
import ModelSelectorPill from "./ModelSelectorPill";
import { useMemoryExtractor } from "../hooks/useMemoryExtractor";
import { getDisplayName } from "../lib/modelAlias";
import { ArrowUp, Image, Microphone, Paperclip, ChatCircleText, PaperPlaneRight } from "@phosphor-icons/react";
import "./ChatView.css";

const MAX_MEMORY = 20;

/** Model used for background memory extraction (small/fast). */
const MEMORY_EXTRACTOR_MODEL = "smollm2";

interface Props {
  db: DB;
  chatId: number | null;
  server: string;
  apiKey: string;
  model: string;
  models: ModelInfo[];
  localModels: RuntimeModelFile[];
  selectedModel: string;
  onModelChange: (id: string) => void;
  onModelSwap?: (path: string) => void;
  isSwapping?: boolean;
  status: ServerStatus;
  onChatCreated: (id: number) => void;
  onChatUpdated: () => void;
  onOpenSidebar?: () => void;
  onDegradationDetected?: () => void;
}

export default function ChatView({ 
  db, chatId, server, apiKey, model, 
  models, localModels, selectedModel, onModelChange, onModelSwap, isSwapping, status,
  onChatCreated, onChatUpdated, onOpenSidebar, onDegradationDetected 
}: Props) {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState("");
  const [generating, setGenerating] = useState(false);
  const [streamContent, setStreamContent] = useState("");
  const [streamReasoning, setStreamReasoning] = useState("");
  const [streamThinkingOpen, setStreamThinkingOpen] = useState(false);
  const [showLiveReasoning, setShowLiveReasoning] = useState(false);
  const [tps, setTps] = useState<number | null>(null);
  const [useStream, setUseStream] = useState(true);
  const [useMemory, setUseMemory] = useState(true);
  const [streamTokenCount, setStreamTokenCount] = useState(0);
  const [messageQueue, setMessageQueue] = useState<string[]>([]);
  const [showMemoryModal, setShowMemoryModal] = useState(false);
  const [isQueueOpen, setIsQueueOpen] = useState(false);

  const messagesEndRef = useRef<HTMLDivElement>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const abortRef = useRef<AbortController | null>(null);
  const activeChatIdRef = useRef<number | null>(chatId);
  const pendingRequestChatIdRef = useRef<number | null>(null);
  const loadMessagesRef = useRef<(targetChatId?: number | null) => void>(() => {});
  const messageQueueRef = useRef<string[]>([]);
  const sendRef = useRef<(text: string, fromChatId?: number, replaceAssistantId?: number) => Promise<void>>(async () => {});
  // Tracks accumulated stream content so abort can persist it
  const streamContentAccRef = useRef<string>("");
  // TPS degradation detection: timer fires if TPS stays < 30 for 5s
  const degradationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  // Single helper to keep ref and state in sync — use at every queue mutation site
  const setQueue = (next: string[]) => {
    messageQueueRef.current = next;
    setMessageQueue(next);
  };

  const composerNotice = getComposerNotice(model, server);
  const starterPrompts = getSuggestedPrompts();
  const estimatedTokens = input.length > 0 ? Math.ceil(input.length / 4) : 0;

  const chatTotals = messages.reduce<ChatTokenTotals>((acc, msg) => {
    acc.prompt_tokens += msg.prompt_tokens ?? 0;
    acc.completion_tokens += msg.completion_tokens ?? 0;
    acc.total_tokens += msg.total_tokens ?? 0;
    return acc;
  }, { prompt_tokens: 0, completion_tokens: 0, total_tokens: 0 });

  const memoryMessageCount = chatId != null
    ? Math.min(
        messages.filter(m => m.content && !m.content.startsWith("⚠️") && m.content !== "internal error").length,
        useMemory ? MAX_MEMORY : 1,
      )
    : 0;

  // ── Memory extractor (background, fire-and-forget) ────────────────────────
  const { extractMemories, buildMemorySystemPrompt } = useMemoryExtractor({
    db,
    server,
    apiKey,
    memoryModel: MEMORY_EXTRACTOR_MODEL,
    enabled: useMemory,
  });

  useEffect(() => { ensureHljs(); }, []);

  // TPS degradation detection: if TPS < 30 for 5 continuous seconds, notify
  useEffect(() => {
    if (tps === null) return;
    if (tps < 30) {
      if (!degradationTimerRef.current) {
        degradationTimerRef.current = setTimeout(() => {
          onDegradationDetected?.();
          degradationTimerRef.current = null;
        }, 5000);
      }
    } else {
      // TPS recovered — cancel pending timer
      if (degradationTimerRef.current) {
        clearTimeout(degradationTimerRef.current);
        degradationTimerRef.current = null;
      }
    }
    return () => {
      if (degradationTimerRef.current) {
        clearTimeout(degradationTimerRef.current);
        degradationTimerRef.current = null;
      }
    };
  }, [tps, onDegradationDetected]);

  const loadMessages = useCallback((targetChatId: number | null = chatId) => {
    if (targetChatId == null) { setMessages([]); return; }
    const rows = db.query<Message>(
      "SELECT * FROM messages WHERE chat_id = ? ORDER BY created_at ASC",
      [targetChatId],
    );
    setMessages(rows);
  }, [db, chatId]);

  loadMessagesRef.current = loadMessages;

  useEffect(() => { loadMessages(); }, [loadMessages]);

  useEffect(() => {
    activeChatIdRef.current = chatId;

    const switchedAway = pendingRequestChatIdRef.current !== null && chatId !== pendingRequestChatIdRef.current;

    if (abortRef.current && switchedAway) {
      abortRef.current.abort();
      abortRef.current = null;
      messageQueueRef.current = [];
      setMessageQueue([]);
      setGenerating(false);
      setStreamContent("");
      setStreamReasoning("");
      setStreamThinkingOpen(false);
      setShowLiveReasoning(false);
      setTps(null);
      setStreamTokenCount(0);
      pendingRequestChatIdRef.current = null;
      return;
    }

    if (!abortRef.current) {
      setGenerating(false);
      setStreamContent("");
      setStreamReasoning("");
      setStreamThinkingOpen(false);
      setShowLiveReasoning(false);
      setTps(null);
      setStreamTokenCount(0);
    }
  }, [chatId]);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages, streamContent]);

  const autoResize = () => {
    const el = textareaRef.current;
    if (!el) return;
    el.style.height = "auto";
    el.style.height = Math.min(el.scrollHeight, 200) + "px";
  };

  const getOrCreateChat = useCallback((firstMessage?: string): number => {
    if (chatId != null) return chatId;
    const newId = db.insert("INSERT INTO chats (title) VALUES (?)", [buildChatTitle(firstMessage || "")]);
    onChatCreated(newId);
    return newId;
  }, [chatId, db, onChatCreated]);

  const ensureChatTitle = useCallback((cid: number, firstMsg: string) => {
    const title = buildChatTitle(firstMsg);
    db.run(
      "UPDATE chats SET title = CASE WHEN title = 'New Chat' OR title = '' THEN ? ELSE title END, updated_at = strftime('%s','now') WHERE id = ?",
      [title, cid],
    );
    onChatUpdated();
  }, [db, onChatUpdated]);

  const buildApiMessages = useCallback((cid: number) => {
    const limit = useMemory ? MAX_MEMORY : 1;
    const history = db.query<{ role: string; content: string }>(
      "SELECT role, content FROM messages WHERE chat_id = ? AND content != '' AND content NOT LIKE '⚠️ Error:%' AND content != 'internal error' ORDER BY created_at DESC LIMIT ?",
      [cid, limit],
    ).reverse();

    // Prepend system prompt with user memories when memory mode is on
    const systemPrompt = useMemory ? buildMemorySystemPrompt() : "";
    if (systemPrompt) {
      return [{ role: "system", content: systemPrompt }, ...history];
    }
    return history;
  }, [db, useMemory, buildMemorySystemPrompt]);

  const send = useCallback(async (text: string, fromChatId?: number, replaceAssistantId?: number) => {
    if (!text.trim() || generating) return;
    if (getComposerNotice(model, server)) return;

    setGenerating(true);
    setStreamContent("");
    setStreamReasoning("");
    setStreamThinkingOpen(false);
    setShowLiveReasoning(false);
    setStreamTokenCount(0);
    streamContentAccRef.current = "";

    const cid = fromChatId ?? getOrCreateChat(text);
    activeChatIdRef.current = cid;
    pendingRequestChatIdRef.current = cid;

    // When replaceAssistantId is set we are resending — the user message already
    // exists in the DB; we only delete the old assistant reply and replace it.
    if (replaceAssistantId == null) {
      db.run("INSERT INTO messages (chat_id, role, content) VALUES (?, 'user', ?)", [cid, text]);
      const count = db.get<{ c: number }>("SELECT COUNT(*) as c FROM messages WHERE chat_id = ?", [cid]);
      if (count?.c === 1) ensureChatTitle(cid, text);
    } else {
      // Delete the old assistant message that we're replacing
      db.run("DELETE FROM messages WHERE id = ?", [replaceAssistantId]);
    }

    loadMessagesRef.current(cid);
    onChatUpdated();

    const apiMessages = buildApiMessages(cid);
    const headers: Record<string, string> = { "Content-Type": "application/json" };
    if (apiKey) headers["Authorization"] = `Bearer ${apiKey}`;

    abortRef.current = new AbortController();

    try {
      const res = await fetch(`${server}/v1/chat/completions`, {
        method: "POST",
        headers,
        signal: abortRef.current.signal,
        body: JSON.stringify({
          model,
          messages: apiMessages,
          stream: useStream,
          stream_options: useStream ? { include_usage: true } : undefined,
          max_tokens: 2048,
        }),
      });

      if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        throw new Error((err as { error?: { message?: string } })?.error?.message || `HTTP ${res.status}`);
      }

      let fullContent = "";
      let usage: Usage | null = null;
      let tokenCount = 0;

      if (useStream) {
        const reader = res.body!.getReader();
        const decoder = new TextDecoder('utf-8');
        let buf = "";

        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          buf += decoder.decode(value, { stream: true });
          const lines = buf.split("\n");
          buf = lines.pop()!;

          for (const line of lines) {
            if (!line.startsWith("data: ")) continue;
            const data = line.slice(6).trim();
            if (data === "[DONE]") continue;
            try {
              const chunk = JSON.parse(data);
              const delta = chunk.choices?.[0]?.delta?.content;
              if (delta) {
                tokenCount++;
                setStreamTokenCount(tokenCount);
                fullContent += delta;
                streamContentAccRef.current = fullContent;
                const parsed = parseAssistantResponse(fullContent);
                setStreamContent(parsed.content);
                setStreamReasoning(parsed.reasoning);
                setStreamThinkingOpen(parsed.thinkingOpen);
                if (parsed.reasoning) setShowLiveReasoning(true);
              }
              if (chunk.usage) usage = chunk.usage;
            } catch { /* ignore malformed chunks */ }
          }
        }
      } else {
        const data = await res.json();
        fullContent = data.choices?.[0]?.message?.content || "";
        streamContentAccRef.current = fullContent;
        usage = data.usage;
        const parsed = parseAssistantResponse(fullContent);
        setStreamContent(parsed.content);
        setStreamReasoning(parsed.reasoning);
        setStreamThinkingOpen(parsed.thinkingOpen);
        if (parsed.reasoning) setShowLiveReasoning(true);
      }

      const parsed = parseAssistantResponse(fullContent);
      const finalContent = parsed.content.trim() || fullContent.trim();
      if (finalContent || parsed.reasoning) {
        db.run(
          `INSERT INTO messages (
            chat_id, role, content, reasoning_content, prompt_tokens, completion_tokens, total_tokens, tokens_per_second
          ) VALUES (?, 'assistant', ?, ?, ?, ?, ?, ?)`,
          [
            cid,
            finalContent,
            parsed.content.trim() ? parsed.reasoning : null,
            usage?.prompt_tokens ?? 0,
            usage?.completion_tokens ?? 0,
            usage?.total_tokens ?? 0,
            usage?.tokens_per_second ?? null,
          ],
        );
      }
      db.run("UPDATE chats SET updated_at = strftime('%s','now') WHERE id = ?", [cid]);
      if (usage?.tokens_per_second) setTps(usage.tokens_per_second);
      onChatUpdated();

      // Fire background memory extraction (non-blocking)
      setTimeout(() => { extractMemories(cid).catch(() => undefined); }, 500);

    } catch (err: unknown) {
      if (err instanceof Error && err.name === "AbortError") {
        // ── Save partial response on user-initiated stop ──────────────────
        const partial = streamContentAccRef.current;
        if (partial.trim()) {
          const parsed = parseAssistantResponse(partial);
          const partialContent = parsed.content.trim() || partial.trim();
          db.run(
            `INSERT INTO messages (chat_id, role, content, reasoning_content) VALUES (?, 'assistant', ?, ?)`,
            [cid, `${partialContent} _(geração cancelada)_`, parsed.reasoning || null],
          );
          db.run("UPDATE chats SET updated_at = strftime('%s','now') WHERE id = ?", [cid]);
          onChatUpdated();
        }
      } else if (err instanceof Error) {
        db.run("INSERT INTO messages (chat_id, role, content) VALUES (?, 'assistant', ?)", [
          cid,
          `⚠️ Error: ${err.message}`,
        ]);
        onChatUpdated();
      }
    } finally {
      setGenerating(false);
      setStreamContent("");
      setStreamReasoning("");
      setStreamThinkingOpen(false);
      setShowLiveReasoning(false);
      setStreamTokenCount(0);
      streamContentAccRef.current = "";

      if (activeChatIdRef.current === cid) {
        loadMessagesRef.current(cid);
      }
      pendingRequestChatIdRef.current = null;
      abortRef.current = null;

      // Process message queue
      const nextInQueue = messageQueueRef.current[0];
      if (nextInQueue && activeChatIdRef.current === cid) {
        setQueue(messageQueueRef.current.slice(1));
        setTimeout(() => sendRef.current(nextInQueue), 100);
      }
    }
  }, [generating, model, server, apiKey, useStream, db, getOrCreateChat, ensureChatTitle, buildApiMessages, onChatUpdated, extractMemories]);

  // Keep sendRef always pointing to latest send closure
  sendRef.current = send;

  const handleSend = () => {
    const text = input.trim();
    if (!text || composerNotice) return;
    setInput("");
    if (textareaRef.current) textareaRef.current.style.height = "auto";

    if (generating) {
      setQueue([...messageQueueRef.current, text]);
      return;
    }
    send(text);
  };

  const handleStop = () => {
    abortRef.current?.abort();
    setQueue([]);
  };

  const handleDeleteMessage = (id: number) => {
    if (!window.confirm("Delete this message?")) return;
    db.run("DELETE FROM messages WHERE id = ?", [id]);
    loadMessages();
  };

  const handleStarterPrompt = (prompt: string) => {
    setInput(prompt);
    requestAnimationFrame(() => {
      textareaRef.current?.focus();
      autoResize();
    });
  };

  const handleEditAndResend = (msg: Message, newContent: string) => {
    db.run("UPDATE messages SET content = ? WHERE id = ?", [newContent, msg.id]);
    db.run("DELETE FROM messages WHERE chat_id = ? AND id > ?", [msg.chat_id, msg.id]);
    loadMessages();
    if (generating) {
      setQueue([...messageQueueRef.current, newContent]);
    } else {
      send(newContent, msg.chat_id);
    }
  };

  /**
   * Resend: regenerate the assistant reply for an existing assistant message.
   * Finds the preceding user message and calls send() with replaceAssistantId
   * so the old assistant row is replaced — no duplicate user message is inserted.
   */
  const handleResend = useCallback((assistantMsg: Message) => {
    if (generating) return;
    // Find the user message immediately before this assistant message
    const userMsg = db.get<Message>(
      `SELECT * FROM messages
       WHERE chat_id = ? AND id < ? AND role = 'user'
       ORDER BY id DESC LIMIT 1`,
      [assistantMsg.chat_id, assistantMsg.id],
    );
    if (!userMsg) return;

    // Delete any messages after the user message up to and including this assistant msg
    db.run(
      "DELETE FROM messages WHERE chat_id = ? AND id >= ? AND id <= ?",
      [assistantMsg.chat_id, userMsg.id + 1, assistantMsg.id],
    );
    loadMessages();
    send(userMsg.content, assistantMsg.chat_id, assistantMsg.id);
  }, [generating, db, send, loadMessages]);

  const handleEditAssistant = (id: number, newContent: string) => {
    db.run("UPDATE messages SET content = ? WHERE id = ?", [newContent, id]);
    loadMessages();
  };

  const memoryMessages = showMemoryModal && chatId != null ? buildApiMessages(chatId) : [];

  const isInitialScreen = chatId === null && messages.length === 0;
  const modelShort = getDisplayName(model);
  const workspaceStateLabel = chatId === null ? "Workspace" : "Conversation";
  const workspaceStateCopy = composerNotice
    ? composerNotice.title
    : server
      ? "Runtime ready"
      : "Runtime offline";
  const heroCards = [
    {
      title: "Personalize ForgeLM",
      copy: "Tune workspace defaults, preferred prompts, and local runtime behavior.",
    },
  ];

  return (
    <div className={`chat-view${isInitialScreen ? " initial-screen" : ""}`}>
      {/* ── Top bar ── */}
      <div className="chat-topbar">
        <div className="chat-topbar-left">
          {onOpenSidebar && (
            <button type="button" className="chat-menu-btn" onClick={onOpenSidebar} aria-label="Open navigation">
              ☰
            </button>
          )}
          {model && (
            <div className={`topbar-model-badge${isInitialScreen ? " topbar-model-badge--hero" : ""}`}>
              {!isInitialScreen && <div className={`topbar-status-dot${server ? " connected" : ""}`} />}
              <span className="topbar-model-name">{modelShort}</span>
            </div>
          )}
        </div>

        <div className="chat-topbar-center">
          {isInitialScreen ? null : chatId !== null && chatTotals.total_tokens > 0 ? (
            <div className="chat-token-summary">
              <span title="Prompt tokens sent">↑ {chatTotals.prompt_tokens.toLocaleString()}</span>
              <span title="Completion tokens generated">↓ {chatTotals.completion_tokens.toLocaleString()}</span>
              <span title="Total tokens" className="token-total">Σ {chatTotals.total_tokens.toLocaleString()}</span>
            </div>
          ) : (
            <div className="chat-topbar-context" aria-label="Workspace status">
              <span className="chat-topbar-context-label">{workspaceStateLabel}</span>
              <span className="chat-topbar-context-copy">{workspaceStateCopy}</span>
            </div>
          )}
        </div>

        <div className="chat-topbar-right">
          <span className={`topbar-state-pill${server ? " online" : " offline"}${isInitialScreen ? " topbar-state-pill--hero" : ""}`}>
            {server ? "Runtime ready" : "Runtime offline"}
          </span>
          {!isInitialScreen && generating && streamTokenCount > 0 && (
            <div className="live-token-counter">
              <span className="live-token-pulse" />
              <span>{streamTokenCount.toLocaleString()} tokens</span>
            </div>
          )}
          {!isInitialScreen && tps !== null && !generating && (
            <span className="tps-badge">{tps.toFixed(1)} tok/s</span>
          )}

          {!isInitialScreen && (
            <>
              <button
                type="button"
                className={`topbar-icon-btn${showMemoryModal ? " active" : ""}`}
                onClick={() => setShowMemoryModal(!showMemoryModal)}
                title={`Memory context — ${memoryMessageCount} message${memoryMessageCount !== 1 ? "s" : ""}`}
                aria-label="View memory context"
              >
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <ellipse cx="12" cy="5" rx="9" ry="3"/>
                  <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
                  <path d="M3 12c0 1.66 4 3 9 3s9-1.34 9-3"/>
                </svg>
                {memoryMessageCount > 0 && (
                  <span className="memory-count-badge">{memoryMessageCount}</span>
                )}
              </button>

              <div className="topbar-toggles">
                <button
                  type="button"
                  className={`toggle-pill${useStream ? " on" : " off"}`}
                  onClick={() => setUseStream(!useStream)}
                  title={useStream ? "Streaming enabled" : "Streaming disabled"}
                >
                  Stream
                </button>
                <button
                  type="button"
                  className={`toggle-pill${useMemory ? " on" : " off"}`}
                  onClick={() => setUseMemory(!useMemory)}
                  title={useMemory ? `Memory: last ${MAX_MEMORY} messages` : "Memory off — single turn"}
                >
                  Memory
                </button>
              </div>
            </>
          )}
        </div>
      </div>

      {/* ── Memory Modal ── */}
      {showMemoryModal && (
        <div className="memory-modal-overlay" onClick={() => setShowMemoryModal(false)}>
          <div className="memory-modal" onClick={(e) => e.stopPropagation()}>
            <div className="memory-modal-header">
              <div className="memory-modal-title">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <ellipse cx="12" cy="5" rx="9" ry="3"/>
                  <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
                  <path d="M3 12c0 1.66 4 3 9 3s9-1.34 9-3"/>
                </svg>
                <span>Memory Context</span>
              </div>
              <span className="memory-modal-subtitle">
                {memoryMessages.length} message{memoryMessages.length !== 1 ? "s" : ""} · {useMemory ? `last ${MAX_MEMORY}` : "single turn"} mode
              </span>
              <button type="button" className="memory-modal-close" onClick={() => setShowMemoryModal(false)}>✕</button>
            </div>
            <div className="memory-modal-body">
              {memoryMessages.length === 0 ? (
                <div className="memory-empty">No messages in context yet. Start a conversation to populate memory.</div>
              ) : (
                memoryMessages.map((msg, i) => (
                  <div key={i} className={`memory-item ${msg.role}`}>
                    <span className="memory-item-role">{msg.role}</span>
                    <span className="memory-item-content">
                      {msg.content.length > 240 ? msg.content.slice(0, 238) + "…" : msg.content}
                    </span>
                  </div>
                ))
              )}
            </div>
          </div>
        </div>
      )}

      {/* ── Chat Layout ── */}
      <div className="chat-layout-root">
        {/* Scrollable message area */}
        <div className="chat-scroll-area">
          <div className={`messages-container${isInitialScreen ? " messages-container--hero" : ""}`}>
            {chatId === null && messages.length === 0 && (
              <div className="empty-state empty-state--hero">
                <section className="empty-state-panel empty-state-panel--hero" aria-labelledby="workspace-welcome">
                  <div className="empty-state-header empty-state-header--hero">
                    <span className="empty-kicker">ForgeLM workspace</span>
                    <h1 id="workspace-welcome">What can I do for you?</h1>
                  </div>

                  <div className="hero-composer-block">
                    <div className="input-box input-box--hero">
                      <ModelSelectorPill
                        models={models}
                        localModels={localModels}
                        selectedModel={selectedModel}
                        onModelChange={onModelChange}
                        onModelSwap={onModelSwap}
                        isSwapping={isSwapping}
                        status={status}
                      />
                      <div className="attachment-actions" aria-label="Attachment options (coming soon)">
                        <button type="button" disabled aria-disabled="true" title="Attach image (Coming soon)">
                          <Image size={20} weight="duotone" />
                        </button>
                        <button type="button" disabled aria-disabled="true" title="Attach audio (Coming soon)">
                          <Microphone size={20} weight="duotone" />
                        </button>
                        <button type="button" disabled aria-disabled="true" title="Attach document (Coming soon)">
                          <Paperclip size={20} weight="duotone" />
                        </button>
                      </div>

                      <div className="input-box-main">
                        <textarea
                          ref={textareaRef}
                          value={input}
                          onChange={(e) => { setInput(e.target.value); autoResize(); }}
                          onKeyDown={(e) => {
                            if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSend(); }
                          }}
                          placeholder={
                            composerNotice
                              ? `${composerNotice.title}. ${composerNotice.description}`
                              : generating
                                ? "Type to queue next message…"
                                : "Assign a task or ask anything"
                          }
                          rows={1}
                          disabled={Boolean(composerNotice)}
                        />

                        {generating ? (
                          <button className="stop-btn" onClick={handleStop} type="button">
                            ■ Stop
                          </button>
                        ) : (
                          <button
                            className="send-btn"
                            onClick={handleSend}
                            disabled={!input.trim() || Boolean(composerNotice)}
                            type="button"
                            aria-label="Send message"
                          >
                            <PaperPlaneRight size={18} weight="fill" />
                          </button>
                        )}
                      </div>

                      <div className="composer-footer-row">
                        <span className="composer-footer-hint">
                          {composerNotice ? `${composerNotice.title} · ${composerNotice.description}` : "Connect your tools to ForgeLM"}
                        </span>
                        <div className="composer-footer-icons" aria-hidden="true">
                          <span />
                          <span />
                          <span />
                          <span />
                          <span />
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="starter-chip-rail" aria-label="Starter prompts">
                    {starterPrompts.map((prompt) => (
                      <button key={prompt} type="button" className="starter-chip starter-chip--hero" onClick={() => handleStarterPrompt(prompt)}>
                        {prompt}
                      </button>
                    ))}
                  </div>

                  <div className="hero-card-carousel" aria-label="Workspace shortcuts">
                    {heroCards.map((card) => (
                      <button key={card.title} type="button" className="hero-card" onClick={() => handleStarterPrompt(card.copy)}>
                        <div>
                          <span className="hero-card-title">{card.title}</span>
                          <span className="hero-card-copy">{card.copy}</span>
                        </div>
                        <div className="hero-card-preview" aria-hidden="true">
                          <span />
                          <span />
                          <span />
                        </div>
                      </button>
                    ))}
                    <div className="hero-card-pager" aria-hidden="true">
                      <span className="active" />
                      <span />
                      <span />
                    </div>
                  </div>
                </section>
              </div>
            )}

            {messages.map((msg) => (
              <MessageBubble
                key={msg.id}
                message={msg}
                onDelete={handleDeleteMessage}
                onEditAndResend={msg.role === "user" ? handleEditAndResend : undefined}
                onEditAssistant={msg.role === "assistant" ? handleEditAssistant : undefined}
                onResend={msg.role === "assistant" ? handleResend : undefined}
                renderMarkdown={renderMarkdown}
              />
            ))}

            {/* Live streaming bubble */}
            {generating && (streamReasoning || streamContent || streamThinkingOpen) && (
              <div className="msg-wrapper assistant">
                <div className="msg-bubble">
                  {(streamReasoning || streamThinkingOpen) && (
                    <details
                      className="msg-thinking"
                      open={showLiveReasoning}
                      onToggle={(event) => setShowLiveReasoning(event.currentTarget.open)}
                    >
                      <summary className="thinking-summary" aria-label="Toggle live thinking details">
                        <svg className="thinking-chevron" viewBox="0 0 16 16" focusable="false" aria-hidden="true">
                          <path d="M6 4l4 4-4 4" />
                        </svg>
                        <span className="reasoning-live-dot" aria-hidden="true" />
                        Thinking{streamThinkingOpen ? "..." : ""}
                      </summary>
                      {streamReasoning && (
                        <div
                          className="thinking-content"
                          dangerouslySetInnerHTML={{ __html: renderMarkdown(streamReasoning) }}
                        />
                      )}
                    </details>
                  )}

                  {streamContent && (
                    <div
                      className="msg-content"
                      dangerouslySetInnerHTML={{ __html: renderMarkdown(streamContent) }}
                    />
                  )}

                  {!streamContent && streamThinkingOpen && (
                    <div className="thinking-manus">
                      <span className="thinking-dot" aria-hidden="true" />
                      <span className="thinking-label">Thinking</span>
                    </div>
                  )}
                </div>
              </div>
            )}

            {generating && !streamReasoning && !streamContent && !streamThinkingOpen && (
              <div className="msg-wrapper assistant">
                <div className="thinking-manus">
                  <span className="thinking-dot" aria-hidden="true" />
                  <span className="thinking-label">Thinking</span>
                </div>
              </div>
            )}

            <div ref={messagesEndRef} />
            <div className="scroll-spacer" />
          </div>
        </div>

        {/* ── Message Queue indicator ── */}
        {!isInitialScreen && messageQueue.length > 0 && (
          <div className="queue-indicator">
            <span className="queue-indicator-pulse" />
            <span className="queue-indicator-text">
              {messageQueue.length} message{messageQueue.length > 1 ? "s" : ""} queued
            </span>
            <button
              type="button"
              className="queue-clear-btn"
              onClick={() => { messageQueueRef.current = []; setMessageQueue([]); }}
            >
              ✕ Clear
            </button>
          </div>
        )}

        {/* ── Fixed Input ── */}
        {!isInitialScreen && (
        <div className="input-sticky-wrapper">
          <div className="input-gradient-mask" />
          <div className="input-content-constrained">
            <div className="input-wrapper">
              {composerNotice && (
                <div className={`composer-notice ${composerNotice.tone}`}>
                  <div>
                    <strong>{composerNotice.title}</strong>
                    <p>{composerNotice.description}</p>
                  </div>
                  {onOpenSidebar && (
                    <button type="button" className="notice-action-btn" onClick={onOpenSidebar}>
                      {composerNotice.actionLabel}
                    </button>
                  )}
                </div>
              )}

              {/* Model capabilities — floating above the pill */}
              <div className="model-capabilities" aria-label="Model capabilities">
                <span className="capability-group">
                  <span className="label">In</span>
                  <ChatCircleText size={14} weight="duotone" />
                  <Image size={14} weight="duotone" />
                </span>
                <span className="separator">·</span>
                <span className="capability-group">
                  <span className="label">Out</span>
                  <ChatCircleText size={14} weight="duotone" />
                </span>
              </div>

              {/* The typing pill */}
              <div className="input-box">
                <ModelSelectorPill
                  models={models}
                  localModels={localModels}
                  selectedModel={selectedModel}
                  onModelChange={onModelChange}
                  onModelSwap={onModelSwap}
                  isSwapping={isSwapping}
                  status={status}
                />
                <div className="attachment-actions" aria-label="Attachment options (coming soon)">
                  <button type="button" disabled aria-disabled="true" title="Attach image (Coming soon)">
                    <Image size={20} weight="duotone" />
                  </button>
                  <button type="button" disabled aria-disabled="true" title="Attach audio (Coming soon)">
                    <Microphone size={20} weight="duotone" />
                  </button>
                  <button type="button" disabled aria-disabled="true" title="Attach document (Coming soon)">
                    <Paperclip size={20} weight="duotone" />
                  </button>
                </div>

                <textarea
                  ref={textareaRef}
                  value={input}
                  onChange={(e) => { setInput(e.target.value); autoResize(); }}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSend(); }
                  }}
                  placeholder={
                    composerNotice
                      ? `${composerNotice.title}. ${composerNotice.description}`
                      : generating
                        ? "Type to queue next message…"
                        : "Message..."
                  }
                  rows={1}
                  disabled={Boolean(composerNotice)}
                />

                {generating ? (
                  <button className="stop-btn" onClick={handleStop} type="button">
                    ■ Stop
                  </button>
                ) : (
                  <button
                    className="send-btn"
                    onClick={handleSend}
                    disabled={!input.trim() || Boolean(composerNotice)}
                    type="button"
                    aria-label="Send message"
                  >
                    <PaperPlaneRight size={18} weight="fill" />
                  </button>
                )}
              </div>

              {/* Queue system */}
              {messageQueue.length > 0 && (
                <div className="queue-container">
                  {isQueueOpen && (
                    <div className="queue-popover">
                      <div className="queue-header">
                        <span>Mensagens em espera</span>
                      </div>
                      <ul className="queue-list">
                        {messageQueue.map((msg, index) => (
                          <li key={index} className="queue-item">
                            <span className="queue-text">{msg}</span>
                            <button
                              className="queue-remove"
                              aria-label="Remover da fila"
                              onClick={() => {
                                const next = messageQueue.filter((_, i) => i !== index);
                                setQueue(next);
                              }}
                            >
                              ✕
                            </button>
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}
                  <button
                    className="queue-toggle"
                    onClick={() => setIsQueueOpen(!isQueueOpen)}
                  >
                    {messageQueue.length} queued
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
        )}
      </div>
    </div>
  );
}