"use client";
// Application de chat : liste de conversations, fil streaming SSE, sélecteurs
// (cours / modèle / mode pédagogique / mode de connaissances), pièces jointes,
// citations cliquables, actions par message, raccourcis clavier.
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import {
  Archive, ArrowUp, Bookmark, Check, ChevronDown, Copy, Flag, GitBranch, Menu,
  Paperclip, Pencil, PenLine, Pin, Plus, RefreshCw, Search, Settings2, Sparkles,
  ThumbsDown, ThumbsUp, Trash2, X,
} from "lucide-react";
import { ImmbotMark } from "@/components/logo";
import { Badge, Button, Input, Modal, Spinner, Textarea, cn } from "@/components/ui";
import { Markdown } from "./markdown";
import { CitationPanel, type Citation } from "./citation-panel";

// ---------------- Types ----------------
type Conversation = {
  id: number; title: string; folder: string; pinned: number; archived: number;
  course_code: string | null; mode: string; knowledge_mode: string; model: string; updated_at: string;
};
type ToolTraceItem = { name: string; label: string; running?: boolean };
type Message = {
  id: number; role: "user" | "assistant"; content: string;
  citations: Citation[]; attachments: { id: number; filename: string; mime: string }[];
  model: string; feedback: number; saved: number; streaming?: boolean;
  toolTrace?: ToolTraceItem[];
};
type ModelInfo = {
  id: string; name: string; provider: string; supportsImages: boolean;
  isFree: boolean; costTier: string; favorite: boolean; description: string;
};
type Course = { code: string; title: string; color: string };
type Attachment = { id: number; filename: string; mime: string };

const MODES = [
  { key: "ask", label: "Demander au cours", hint: "Réponse directe et citée" },
  { key: "tutor", label: "Tuteur", hint: "Explication progressive, une étape à la fois" },
  { key: "socratic", label: "Socratique", hint: "Vous guide par des questions" },
  { key: "simple", label: "Explique simplement", hint: "Vocabulaire accessible, exemples concrets" },
  { key: "professional", label: "Niveau professionnel", hint: "Terminologie de la pratique" },
  { key: "correction", label: "Corrige ma réponse", hint: "Rétroaction progressive sur votre travail" },
  { key: "exam-prep", label: "Préparation examen", hint: "Résumés, questions, simulations" },
  { key: "challenge", label: "Mode défi", hint: "Cas intégrés complexes" },
  { key: "targeted-review", label: "Révision ciblée", hint: "Sur vos faiblesses identifiées" },
] as const;

const KNOWLEDGE_MODES = [
  { key: "course-only", label: "Cours uniquement", hint: "Matériel officiel seulement — mode par défaut" },
  { key: "course-tools", label: "Cours interactif", hint: "Le modèle explore lui-même séances et diapositives avec ses outils (visible en direct)" },
  { key: "course-plus", label: "Cours + général", hint: "Matériel cité, complété par le modèle" },
  { key: "general", label: "Général", hint: "Sans le matériel du cours (signalé)" },
] as const;

const SUGGESTIONS_1003 = [
  "Quelle est la différence entre la valeur marchande et la valeur au rôle ?",
  "Explique-moi les ajustements séquentiels de la méthode de comparaison.",
  "Comment calcule-t-on le RNE d'un immeuble à revenus ?",
];
const SUGGESTIONS_1033 = [
  "Explique-moi la ventilation de la dépréciation physique.",
  "Comment calcule-t-on les intérêts intercalaires ?",
  "Quelles sont les 5 méthodes d'évaluation d'un terrain ?",
];

const COST_LABEL: Record<string, { label: string; tone: "green" | "amber" | "red" }> = {
  "économique": { label: "Économique", tone: "green" },
  "modéré": { label: "Modéré", tone: "amber" },
  "coûteux": { label: "Coûteux", tone: "red" },
};

export function ChatApp({ courses, initialConversationId }: { courses: Course[]; initialConversationId?: number }) {
  const router = useRouter();
  const searchParams = useSearchParams();

  // ---------------- État ----------------
  const [conversations, setConversations] = useState<Conversation[]>([]);
  const [convId, setConvId] = useState<number | null>(initialConversationId ?? null);
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState("");
  const [sending, setSending] = useState(false);
  const [models, setModels] = useState<ModelInfo[]>([]);
  const [presets, setPresets] = useState<Record<string, { label: string; models: string[]; description: string }>>({});
  const [model, setModel] = useState<string>("");
  const [course, setCourse] = useState<string | null>(searchParams.get("course") ?? courses[0]?.code ?? null);
  const [mode, setMode] = useState<string>("ask");
  const [knowledgeMode, setKnowledgeMode] = useState<string>("course-only");
  const [attachments, setAttachments] = useState<Attachment[]>([]);
  const [uploading, setUploading] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [modelPickerOpen, setModelPickerOpen] = useState(false);
  const [modelSearch, setModelSearch] = useState("");
  const [citation, setCitation] = useState<Citation | null>(null);
  const [convSearch, setConvSearch] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [editingMessageId, setEditingMessageId] = useState<number | null>(null);
  const [renamingConv, setRenamingConv] = useState<Conversation | null>(null);
  const [renameValue, setRenameValue] = useState("");

  const bottomRef = useRef<HTMLDivElement>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const abortRef = useRef<AbortController | null>(null);

  const currentModel = useMemo(() => models.find((m) => m.id === model), [models, model]);

  // ---------------- Chargements ----------------
  const loadConversations = useCallback(async (q?: string) => {
    const res = await fetch(`/api/conversations${q ? `?q=${encodeURIComponent(q)}` : ""}`);
    if (res.ok) setConversations((await res.json()).conversations);
  }, []);

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

  useEffect(() => {
    fetch("/api/models")
      .then((r) => (r.ok ? r.json() : Promise.reject()))
      .then((d) => {
        setModels(d.models);
        setPresets(d.presets);
        const preferred = localStorage.getItem("immbot-model");
        if (preferred && d.models.some((m: ModelInfo) => m.id === preferred)) setModel(preferred);
        else {
          const rec: string[] = d.presets?.recommande?.models ?? [];
          const first = rec.find((id) => d.models.some((m: ModelInfo) => m.id === id)) ?? d.models[0]?.id ?? "";
          setModel(first);
        }
      })
      .catch(() => setError("Impossible de charger les modèles — vérifiez la clé OpenRouter."));
  }, []);

  const loadConversation = useCallback(async (id: number) => {
    const res = await fetch(`/api/conversations/${id}`);
    if (!res.ok) return;
    const d = await res.json();
    setConvId(id);
    setMessages(
      d.messages.map((m: { id: number; role: string; content: string; citations: string; attachments: string; tool_trace?: string; model: string; feedback: number; saved: number }) => ({
        ...m,
        citations: JSON.parse(m.citations || "[]"),
        attachments: JSON.parse(m.attachments || "[]"),
        toolTrace: JSON.parse(m.tool_trace || "[]"),
      }))
    );
    if (d.conversation.course_code) setCourse(d.conversation.course_code);
    if (d.conversation.mode) setMode(d.conversation.mode);
    if (d.conversation.knowledge_mode) setKnowledgeMode(d.conversation.knowledge_mode);
    if (d.conversation.model) setModel((prev) => d.conversation.model || prev);
    setSidebarOpen(false);
  }, []);

  useEffect(() => {
    if (initialConversationId) loadConversation(initialConversationId);
  }, [initialConversationId, loadConversation]);

  // Préremplissage depuis un lien (ex. « Demander au chat » depuis les diapositives)
  useEffect(() => {
    const q = searchParams.get("q");
    if (q && !initialConversationId) {
      setInput(q);
      textareaRef.current?.focus();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
  }, [messages.length, messages.at(-1)?.content?.length]);

  // ---------------- Envoi (SSE) ----------------
  async function send(text: string, opts?: { regenerateOfMessageId?: number }) {
    if (!text.trim() || sending || !model) return;
    setError(null);
    setSending(true);
    const tempUser: Message = {
      id: -1, role: "user", content: text, citations: [], attachments: [...attachments], model, feedback: 0, saved: 0,
    };
    const tempAssistant: Message = {
      id: -2, role: "assistant", content: "", citations: [], attachments: [], model, feedback: 0, saved: 0, streaming: true,
    };
    if (opts?.regenerateOfMessageId) {
      setMessages((ms) => [...ms.filter((m) => m.id < opts.regenerateOfMessageId!), tempUser, tempAssistant]);
    } else {
      setMessages((ms) => [...ms, tempUser, tempAssistant]);
    }
    setInput("");
    const sentAttachments = attachments.map((a) => a.id);
    setAttachments([]);

    const controller = new AbortController();
    abortRef.current = controller;
    try {
      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        signal: controller.signal,
        body: JSON.stringify({
          conversationId: convId ?? undefined,
          courseCode: knowledgeMode === "general" ? course : course,
          message: text,
          model,
          mode,
          knowledgeMode,
          attachmentIds: sentAttachments,
          regenerateOfMessageId: opts?.regenerateOfMessageId,
        }),
      });
      if (!res.ok || !res.body) {
        const d = await res.json().catch(() => ({}));
        throw new Error(d.error ?? `Erreur ${res.status}`);
      }
      const reader = res.body.getReader();
      const decoder = new TextDecoder();
      let buffer = "";
      let acc = "";
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buffer += decoder.decode(value, { stream: true });
        const events = buffer.split("\n\n");
        buffer = events.pop() ?? "";
        for (const ev of events) {
          const line = ev.trim();
          if (!line.startsWith("data:")) continue;
          const data = JSON.parse(line.slice(5));
          if (data.type === "meta") {
            if (!convId) {
              setConvId(data.conversationId);
              window.history.replaceState(null, "", `/chat/${data.conversationId}`);
            }
            setMessages((ms) => ms.map((m) => (m.id === -1 ? { ...m, id: data.userMessageId } : m)));
          } else if (data.type === "tool") {
            setMessages((ms) =>
              ms.map((m) =>
                m.id === -2
                  ? {
                      ...m,
                      toolTrace: [
                        ...(m.toolTrace ?? []).map((t) => ({ ...t, running: false })),
                        { name: data.name, label: data.label, running: true },
                      ],
                    }
                  : m
              )
            );
          } else if (data.type === "delta") {
            acc += data.text;
            setMessages((ms) => ms.map((m) => (m.id === -2 ? { ...m, content: acc, toolTrace: m.toolTrace?.map((t) => ({ ...t, running: false })) } : m)));
          } else if (data.type === "error") {
            setError(data.message);
          } else if (data.type === "done") {
            setMessages((ms) =>
              ms.map((m) =>
                m.id === -2
                  ? {
                      ...m,
                      id: data.messageId,
                      content: data.content,
                      citations: data.citations ?? [],
                      toolTrace: (data.toolTrace ?? m.toolTrace ?? []).map((t: ToolTraceItem) => ({ ...t, running: false })),
                      streaming: false,
                    }
                  : m
              )
            );
          }
        }
      }
      loadConversations();
    } catch (e) {
      if ((e as Error).name !== "AbortError") {
        setError(e instanceof Error ? e.message : "Erreur d'envoi.");
        setMessages((ms) => ms.filter((m) => m.id !== -2 || m.content));
      }
    } finally {
      setMessages((ms) => ms.map((m) => ({ ...m, streaming: false })));
      setSending(false);
      abortRef.current = null;
      textareaRef.current?.focus();
    }
  }

  function stopStreaming() {
    abortRef.current?.abort();
  }

  // ---------------- Actions ----------------
  async function newConversation() {
    setConvId(null);
    setMessages([]);
    setAttachments([]);
    window.history.replaceState(null, "", "/chat");
    textareaRef.current?.focus();
  }

  async function patchConversation(id: number, patch: Record<string, unknown>) {
    await fetch(`/api/conversations/${id}`, {
      method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(patch),
    });
    loadConversations();
  }

  async function deleteConversation(id: number) {
    if (!confirm("Supprimer définitivement cette conversation ?")) return;
    await fetch(`/api/conversations/${id}`, { method: "DELETE" });
    if (convId === id) newConversation();
    loadConversations();
  }

  async function branchFrom(messageId: number) {
    if (!convId) return;
    const res = await fetch(`/api/conversations/${convId}/branch`, {
      method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ upToMessageId: messageId }),
    });
    if (res.ok) {
      const d = await res.json();
      await loadConversation(d.conversationId);
      loadConversations();
    }
  }

  async function messageAction(id: number, patch: Record<string, unknown>) {
    await fetch(`/api/messages/${id}`, {
      method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(patch),
    });
  }

  async function uploadFiles(files: FileList | null) {
    if (!files?.length) return;
    setUploading(true);
    setError(null);
    try {
      for (const file of Array.from(files).slice(0, 6 - attachments.length)) {
        const fd = new FormData();
        fd.append("file", file);
        if (convId) fd.append("conversationId", String(convId));
        const res = await fetch("/api/uploads", { method: "POST", body: fd });
        const d = await res.json();
        if (!res.ok) throw new Error(d.error ?? "Erreur de téléversement");
        setAttachments((a) => [...a, d.upload]);
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur de téléversement.");
    } finally {
      setUploading(false);
      if (fileInputRef.current) fileInputRef.current.value = "";
    }
  }

  function copyText(text: string) {
    navigator.clipboard?.writeText(text);
  }

  function exportConversation() {
    const md = messages
      .map((m) => `**${m.role === "user" ? "Moi" : "Immbot AI"}** :\n\n${m.content}`)
      .join("\n\n---\n\n");
    const blob = new Blob([md], { type: "text/markdown" });
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = `immbot-conversation-${convId ?? "nouvelle"}.md`;
    a.click();
    URL.revokeObjectURL(a.href);
  }

  // Raccourcis clavier
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape" && sending) stopStreaming();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [sending]);

  const filteredModels = useMemo(() => {
    const q = modelSearch.toLowerCase();
    return models.filter((m) => !q || m.name.toLowerCase().includes(q) || m.id.toLowerCase().includes(q));
  }, [models, modelSearch]);

  const lastAssistantWithSources = messages.filter((m) => m.role === "assistant" && m.citations.length > 0).at(-1);

  // ---------------- Rendu ----------------
  return (
    <div className="flex h-[calc(100dvh-4rem)] md:h-dvh overflow-hidden relative">
      {/* Liste des conversations */}
      <div
        className={cn(
          "absolute md:relative z-30 h-full w-72 bg-sidebar border-r border-app flex flex-col transition-transform md:translate-x-0",
          sidebarOpen ? "translate-x-0" : "-translate-x-full"
        )}
      >
        <div className="p-3 space-y-2.5 border-b border-app">
          <Button onClick={newConversation} className="w-full justify-center" size="sm">
            <Plus size={15} /> Nouvelle conversation
          </Button>
          <div className="relative">
            <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
            <Input
              value={convSearch}
              onChange={(e) => { setConvSearch(e.target.value); loadConversations(e.target.value); }}
              placeholder="Rechercher…"
              className="h-8.5 pl-8.5 text-[13px]"
            />
          </div>
        </div>
        <div className="flex-1 overflow-y-auto p-2 space-y-0.5">
          {conversations.length === 0 && (
            <p className="text-[12.5px] text-muted text-center py-8 px-4">
              Aucune conversation. Posez votre première question !
            </p>
          )}
          {conversations.map((c) => (
            <div
              key={c.id}
              className={cn(
                "group flex items-center gap-1.5 rounded-lg px-2.5 py-2 cursor-pointer transition-colors",
                convId === c.id ? "bg-brand-100 dark:bg-brand-900/60" : "hover:bg-surface-2 dark:hover:bg-brand-900/30"
              )}
              onClick={() => loadConversation(c.id)}
            >
              {c.pinned ? <Pin size={12} className="text-gold-500 shrink-0" /> : null}
              <div className="min-w-0 flex-1">
                <p className="text-[13px] font-medium text-fg truncate">{c.title}</p>
                <p className="text-[11px] text-muted">{c.course_code ?? "Général"}</p>
              </div>
              <div className="hidden group-hover:flex items-center gap-0.5 shrink-0" onClick={(e) => e.stopPropagation()}>
                <button title="Renommer" aria-label="Renommer" className="p-1 text-muted hover:text-fg" onClick={() => { setRenamingConv(c); setRenameValue(c.title); }}>
                  <PenLine size={13} />
                </button>
                <button title={c.pinned ? "Désépingler" : "Épingler"} aria-label="Épingler" className="p-1 text-muted hover:text-fg" onClick={() => patchConversation(c.id, { pinned: !c.pinned })}>
                  <Pin size={13} />
                </button>
                <button title="Archiver" aria-label="Archiver" className="p-1 text-muted hover:text-fg" onClick={() => patchConversation(c.id, { archived: true })}>
                  <Archive size={13} />
                </button>
                <button title="Supprimer" aria-label="Supprimer" className="p-1 text-muted hover:text-red-500" onClick={() => deleteConversation(c.id)}>
                  <Trash2 size={13} />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
      {sidebarOpen && <div className="absolute inset-0 z-20 bg-black/30 md:hidden" onClick={() => setSidebarOpen(false)} />}

      {/* Fil principal */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* Barre d'outils — compacte sur mobile (réglages en feuille basse), complète sur desktop */}
        <div className="border-b border-app bg-card px-2.5 sm:px-4 h-12 flex items-center gap-2">
          <button className="md:hidden p-2 -ml-0.5 text-muted hover:text-fg rounded-md" onClick={() => setSidebarOpen(true)} aria-label="Conversations">
            <Menu size={19} />
          </button>
          {/* Cours — segments nets */}
          <div className="flex items-center rounded-lg border border-app overflow-hidden shrink-0" role="group" aria-label="Cours">
            {courses.map((c) => (
              <button
                key={c.code}
                onClick={() => setCourse(c.code)}
                aria-pressed={course === c.code}
                className={cn(
                  "h-8 px-2.5 sm:px-3 text-[12.5px] font-semibold transition-colors",
                  course === c.code ? "bg-brand-700 text-white" : "bg-card text-muted hover:text-fg"
                )}
              >
                {c.code.replace("IMM", "")}
              </button>
            ))}
          </div>
          {/* Modèle */}
          <button
            onClick={() => setModelPickerOpen(true)}
            className="h-8 inline-flex items-center gap-1.5 rounded-lg border border-app bg-card px-2.5 text-[12.5px] font-medium text-fg hover:border-brand-400 min-w-0 max-w-36 sm:max-w-60"
          >
            <Sparkles size={13} className="text-gold-500 shrink-0" />
            <span className="truncate">{currentModel?.name.replace(/^.*?:\s*/, "") ?? "Modèle…"}</span>
            <ChevronDown size={12} className="text-muted shrink-0" />
          </button>
          {/* Mode + connaissances : inline ≥ md seulement */}
          <select
            value={mode}
            onChange={(e) => setMode(e.target.value)}
            aria-label="Mode pédagogique"
            title={MODES.find((m) => m.key === mode)?.hint}
            className="hidden md:block h-8 rounded-lg border border-app bg-card text-[12.5px] font-medium text-fg px-2 outline-none focus:border-brand-400"
          >
            {MODES.map((m) => (
              <option key={m.key} value={m.key}>{m.label}</option>
            ))}
          </select>
          <select
            value={knowledgeMode}
            onChange={(e) => setKnowledgeMode(e.target.value)}
            aria-label="Source des connaissances"
            title={KNOWLEDGE_MODES.find((m) => m.key === knowledgeMode)?.hint}
            className="hidden md:block h-8 rounded-lg border border-app bg-card text-[12.5px] font-medium text-fg px-2 outline-none focus:border-brand-400"
          >
            {KNOWLEDGE_MODES.map((m) => (
              <option key={m.key} value={m.key}>{m.label}</option>
            ))}
          </select>
          <div className="ml-auto flex items-center gap-1 shrink-0">
            {currentModel && (
              <span className="hidden lg:block">
                <Badge tone={COST_LABEL[currentModel.costTier]?.tone ?? "neutral"}>
                  {currentModel.isFree ? "Gratuit" : COST_LABEL[currentModel.costTier]?.label}
                </Badge>
              </span>
            )}
            {messages.length > 0 && (
              <Button variant="ghost" size="sm" onClick={exportConversation} title="Exporter en Markdown" className="hidden sm:inline-flex">
                Exporter
              </Button>
            )}
            {/* Réglages (mobile) */}
            <button
              onClick={() => setSettingsOpen(true)}
              aria-label="Réglages de la conversation"
              className="md:hidden relative p-2 text-muted hover:text-fg rounded-md"
            >
              <Settings2 size={18} />
              {(mode !== "ask" || knowledgeMode !== "course-only") && (
                <span className="absolute top-1 right-1 w-2 h-2 rounded-full bg-gold-500" aria-hidden />
              )}
            </button>
          </div>
        </div>

        {/* Feuille de réglages mobile */}
        <Modal open={settingsOpen} onClose={() => setSettingsOpen(false)} title="Réglages de la conversation">
          <div className="space-y-5">
            <div>
              <p className="text-[12px] font-semibold text-muted uppercase tracking-wide mb-2">Mode pédagogique</p>
              <div className="grid grid-cols-1 gap-1.5">
                {MODES.map((m) => (
                  <button
                    key={m.key}
                    onClick={() => { setMode(m.key); }}
                    aria-pressed={mode === m.key}
                    className={cn(
                      "flex items-start justify-between gap-3 px-3.5 py-2.5 rounded-lg border text-left transition-colors",
                      mode === m.key ? "border-brand-500 bg-brand-50 dark:bg-brand-900/40" : "border-app hover:border-brand-300"
                    )}
                  >
                    <span>
                      <span className="block text-[13.5px] font-semibold text-fg">{m.label}</span>
                      <span className="block text-[12px] text-muted mt-0.5">{m.hint}</span>
                    </span>
                    {mode === m.key && <Check size={16} className="text-brand-600 shrink-0 mt-1" />}
                  </button>
                ))}
              </div>
            </div>
            <div>
              <p className="text-[12px] font-semibold text-muted uppercase tracking-wide mb-2">Source des connaissances</p>
              <div className="grid grid-cols-1 gap-1.5">
                {KNOWLEDGE_MODES.map((m) => (
                  <button
                    key={m.key}
                    onClick={() => setKnowledgeMode(m.key)}
                    aria-pressed={knowledgeMode === m.key}
                    className={cn(
                      "flex items-start justify-between gap-3 px-3.5 py-2.5 rounded-lg border text-left transition-colors",
                      knowledgeMode === m.key ? "border-brand-500 bg-brand-50 dark:bg-brand-900/40" : "border-app hover:border-brand-300"
                    )}
                  >
                    <span>
                      <span className="block text-[13.5px] font-semibold text-fg">{m.label}</span>
                      <span className="block text-[12px] text-muted mt-0.5">{m.hint}</span>
                    </span>
                    {knowledgeMode === m.key && <Check size={16} className="text-brand-600 shrink-0 mt-1" />}
                  </button>
                ))}
              </div>
            </div>
            {messages.length > 0 && (
              <Button variant="secondary" className="w-full justify-center" onClick={() => { exportConversation(); setSettingsOpen(false); }}>
                Exporter la conversation (.md)
              </Button>
            )}
            <Button className="w-full justify-center" onClick={() => setSettingsOpen(false)}>Terminé</Button>
          </div>
        </Modal>

        {/* Messages */}
        <div className="flex-1 overflow-y-auto">
          <div className="max-w-3xl mx-auto px-3 sm:px-5 py-6 space-y-6">
            {messages.length === 0 && (
              <div className="flex flex-col items-center text-center pt-10 sm:pt-16 animate-fade-up">
                <ImmbotMark size={52} />
                <h2 className="mt-4 text-lg sm:text-xl font-bold text-fg tracking-tight">
                  Posez une question sur {course ?? "vos cours"}
                </h2>
                <p className="text-[13px] text-muted mt-1.5 max-w-sm">
                  Réponses fondées sur le matériel officiel, avec les diapositives citées.
                </p>
                <div className="mt-6 grid gap-2 w-full max-w-md">
                  {(course === "IMM1033" ? SUGGESTIONS_1033 : SUGGESTIONS_1003).map((s) => (
                    <button
                      key={s}
                      onClick={() => { setInput(s); textareaRef.current?.focus(); }}
                      className="text-left text-[13.5px] text-fg bg-card border border-app rounded-lg px-4 py-3 hover:border-brand-400 hover:shadow-sm transition-all"
                    >
                      {s}
                    </button>
                  ))}
                </div>
              </div>
            )}
            {messages.map((m) =>
              m.role === "user" ? (
                <div key={m.id} className="flex justify-end group">
                  <div className="max-w-[88%] sm:max-w-xl">
                    <div className="bg-brand-600 text-white rounded-2xl rounded-br-md px-4 py-2.5 text-[14.5px] whitespace-pre-wrap break-words">
                      {m.content}
                      {m.attachments.length > 0 && (
                        <div className="mt-2 flex flex-wrap gap-1.5">
                          {m.attachments.map((a) => (
                            <span key={a.id} className="inline-flex items-center gap-1 bg-white/15 rounded-md px-2 py-0.5 text-[11.5px]">
                              <Paperclip size={10} /> {a.filename}
                            </span>
                          ))}
                        </div>
                      )}
                    </div>
                    <div className="hidden group-hover:flex justify-end gap-1 mt-1">
                      <button title="Modifier et relancer" className="p-1 text-muted hover:text-fg" onClick={() => { setEditingMessageId(m.id); setInput(m.content); textareaRef.current?.focus(); }}>
                        <Pencil size={13} />
                      </button>
                      <button title="Copier" className="p-1 text-muted hover:text-fg" onClick={() => copyText(m.content)}>
                        <Copy size={13} />
                      </button>
                    </div>
                  </div>
                </div>
              ) : (
                <div key={m.id} className="flex gap-3 group">
                  <ImmbotMark size={26} className="shrink-0 mt-0.5 hidden sm:block" />
                  <div className="min-w-0 flex-1">
                    {(m.toolTrace?.length ?? 0) > 0 && (
                      <div className="mb-2.5 space-y-1" aria-label="Consultations du matériel de cours">
                        {m.toolTrace!.map((t, ti) => (
                          <div
                            key={ti}
                            className={cn(
                              "inline-flex items-center gap-2 mr-1.5 px-2.5 py-1 rounded-lg border text-[12px] font-medium",
                              t.running
                                ? "border-brand-300 bg-brand-50 dark:bg-brand-900/40 text-brand-700 dark:text-brand-200"
                                : "border-app bg-surface-1 dark:bg-brand-950/40 text-muted"
                            )}
                          >
                            {t.running ? <Spinner className="h-3 w-3" /> : <Search size={11} className="opacity-70" />}
                            {t.label}
                          </div>
                        ))}
                      </div>
                    )}
                    <Markdown
                      content={m.content || (m.streaming ? "" : "*Réponse vide.*")}
                      streaming={m.streaming}
                      onCitationClick={(index) => {
                        const c = m.citations.find((x) => x.index === index);
                        if (c) setCitation(c);
                      }}
                    />
                    {m.citations.length > 0 && !m.streaming && (
                      <div className="mt-3 flex flex-wrap items-center gap-1.5">
                        <span className="text-[11.5px] text-muted font-medium">Sources :</span>
                        {m.citations.map((c) => (
                          <button key={c.tag} className="citation-chip" onClick={() => setCitation(c)} title={c.refLabel}>
                            {c.tag}
                          </button>
                        ))}
                      </div>
                    )}
                    {!m.streaming && m.content && (
                      <div className="flex items-center gap-0.5 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
                        <button title="Copier" className="p-1.5 text-muted hover:text-fg rounded-md" onClick={() => copyText(m.content)}>
                          <Copy size={14} />
                        </button>
                        <button title="Régénérer" className="p-1.5 text-muted hover:text-fg rounded-md" disabled={sending}
                          onClick={() => {
                            const prevUser = [...messages].reverse().find((x) => x.role === "user" && x.id < m.id);
                            if (prevUser) send(prevUser.content, { regenerateOfMessageId: prevUser.id });
                          }}>
                          <RefreshCw size={14} />
                        </button>
                        <button title="Créer une branche à partir d'ici" className="p-1.5 text-muted hover:text-fg rounded-md" onClick={() => branchFrom(m.id)}>
                          <GitBranch size={14} />
                        </button>
                        <button title="Sauvegarder dans la bibliothèque" className="p-1.5 text-muted hover:text-gold-500 rounded-md"
                          onClick={(e) => { messageAction(m.id, { save: true }); (e.currentTarget as HTMLButtonElement).classList.add("text-gold-500"); }}>
                          <Bookmark size={14} />
                        </button>
                        <span className="w-px h-4 bg-app mx-1" />
                        <button title="Réponse utile" className={cn("p-1.5 rounded-md", m.feedback === 1 ? "text-emerald-500" : "text-muted hover:text-emerald-500")}
                          onClick={() => { messageAction(m.id, { feedback: m.feedback === 1 ? 0 : 1 }); setMessages((ms) => ms.map((x) => (x.id === m.id ? { ...x, feedback: x.feedback === 1 ? 0 : 1 } : x))); }}>
                          <ThumbsUp size={14} />
                        </button>
                        <button title="Réponse à revoir" className={cn("p-1.5 rounded-md", m.feedback === -1 ? "text-red-500" : "text-muted hover:text-red-500")}
                          onClick={() => { messageAction(m.id, { feedback: m.feedback === -1 ? 0 : -1 }); setMessages((ms) => ms.map((x) => (x.id === m.id ? { ...x, feedback: x.feedback === -1 ? 0 : -1 } : x))); }}>
                          <ThumbsDown size={14} />
                        </button>
                        <button title="Signaler une erreur au professeur" className="p-1.5 text-muted hover:text-amber-500 rounded-md"
                          onClick={() => { const reason = prompt("Décrivez brièvement le problème :"); if (reason !== null) messageAction(m.id, { flag: true, flagReason: reason }); }}>
                          <Flag size={14} />
                        </button>
                      </div>
                    )}
                  </div>
                </div>
              )
            )}
            {error && (
              <div className="text-sm text-red-600 dark:text-red-400 bg-red-500/10 border border-red-500/25 rounded-xl px-4 py-3" role="alert">
                {error}
              </div>
            )}
            <div ref={bottomRef} />
          </div>
        </div>

        {/* Composeur */}
        <div className="border-t border-app bg-card/70 backdrop-blur px-3 sm:px-5 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]">
          <div className="max-w-3xl mx-auto">
            {attachments.length > 0 && (
              <div className="flex flex-wrap gap-1.5 mb-2">
                {attachments.map((a) => (
                  <span key={a.id} className="inline-flex items-center gap-1.5 bg-surface-2 dark:bg-brand-900/50 rounded-lg px-2.5 py-1 text-[12px] text-fg">
                    <Paperclip size={11} /> {a.filename}
                    <button onClick={() => setAttachments((x) => x.filter((y) => y.id !== a.id))} aria-label="Retirer" className="text-muted hover:text-fg"><X size={12} /></button>
                  </span>
                ))}
              </div>
            )}
            {editingMessageId && (
              <div className="flex items-center justify-between text-[12px] text-amber-700 dark:text-amber-400 bg-amber-500/10 rounded-lg px-3 py-1.5 mb-2">
                <span>Modification d'une question — l'envoi remplacera la suite de la conversation.</span>
                <button onClick={() => { setEditingMessageId(null); setInput(""); }} className="font-medium hover:underline">Annuler</button>
              </div>
            )}
            <div className="flex items-end gap-2 bg-card border border-app rounded-2xl p-2 shadow-sm focus-within:border-brand-400 focus-within:ring-2 focus-within:ring-brand-500/20 transition-shadow">
              <input ref={fileInputRef} type="file" multiple hidden accept=".pdf,.docx,.xlsx,.csv,.txt,.md,.png,.jpg,.jpeg,.webp" onChange={(e) => uploadFiles(e.target.files)} />
              <button
                onClick={() => fileInputRef.current?.click()}
                disabled={uploading || attachments.length >= 6}
                title="Joindre un fichier (PDF, DOCX, XLSX, CSV, image…)"
                aria-label="Joindre un fichier"
                className="p-2.5 text-muted hover:text-fg rounded-xl disabled:opacity-50 shrink-0"
              >
                {uploading ? <Spinner /> : <Paperclip size={17} />}
              </button>
              <Textarea
                ref={textareaRef}
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter" && !e.shiftKey) {
                    e.preventDefault();
                    if (editingMessageId) {
                      send(input, { regenerateOfMessageId: editingMessageId });
                      setEditingMessageId(null);
                    } else send(input);
                  }
                }}
                placeholder={`Votre question sur ${course ?? "le cours"}…`}
                rows={Math.min(6, Math.max(1, input.split("\n").length))}
                className="border-0 bg-transparent focus:ring-0 px-1 py-2 text-[14.5px]"
                aria-label="Votre question"
              />
              {sending ? (
                <Button variant="secondary" size="icon" onClick={stopStreaming} title="Arrêter (Échap)" className="shrink-0">
                  <span className="w-3 h-3 bg-fg rounded-[3px]" />
                </Button>
              ) : (
                <Button
                  size="icon"
                  disabled={!input.trim() || !model}
                  onClick={() => {
                    if (editingMessageId) {
                      send(input, { regenerateOfMessageId: editingMessageId });
                      setEditingMessageId(null);
                    } else send(input);
                  }}
                  title="Envoyer"
                  className="shrink-0"
                >
                  <ArrowUp size={17} />
                </Button>
              )}
            </div>
            <p className="text-[11px] text-muted text-center mt-1.5 truncate">
              Immbot AI peut se tromper — vérifiez les sources citées.
            </p>
          </div>
        </div>
      </div>

      {/* Sélecteur de modèle */}
      <Modal open={modelPickerOpen} onClose={() => setModelPickerOpen(false)} title="Choisir un modèle" wide>
        <div className="space-y-4">
          <div>
            <p className="text-[12px] font-semibold text-muted uppercase tracking-wide mb-2">Préréglages</p>
            <div className="grid sm:grid-cols-2 gap-2">
              {Object.entries(presets).map(([key, p]) => {
                const available = p.models.find((id) => models.some((m) => m.id === id));
                if (!available) return null;
                return (
                  <button
                    key={key}
                    onClick={() => { setModel(available); localStorage.setItem("immbot-model", available); setModelPickerOpen(false); }}
                    className="text-left border border-app rounded-xl px-3.5 py-2.5 hover:border-brand-400 hover:bg-brand-50 dark:hover:bg-brand-900/30 transition-colors"
                  >
                    <p className="text-[13px] font-semibold text-fg">{p.label}</p>
                    <p className="text-[11.5px] text-muted mt-0.5">{p.description}</p>
                  </button>
                );
              })}
            </div>
          </div>
          <div>
            <Input value={modelSearch} onChange={(e) => setModelSearch(e.target.value)} placeholder={`Rechercher parmi ${models.length} modèles…`} />
            <div className="mt-2 max-h-72 overflow-y-auto space-y-1">
              {filteredModels.slice(0, 60).map((m) => (
                <button
                  key={m.id}
                  onClick={() => { setModel(m.id); localStorage.setItem("immbot-model", m.id); setModelPickerOpen(false); }}
                  className={cn(
                    "w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-left hover:bg-surface-2 dark:hover:bg-brand-900/30 transition-colors",
                    model === m.id && "bg-brand-100 dark:bg-brand-900/50"
                  )}
                >
                  {model === m.id ? <Check size={14} className="text-brand-500 shrink-0" /> : <span className="w-3.5 shrink-0" />}
                  <div className="min-w-0 flex-1">
                    <p className="text-[13px] font-medium text-fg truncate">{m.name}</p>
                    <p className="text-[11px] text-muted truncate">{m.id}</p>
                  </div>
                  <div className="flex gap-1 shrink-0">
                    {m.supportsImages && <Badge tone="brand">Vision</Badge>}
                    {m.isFree ? <Badge tone="green">Gratuit</Badge> : <Badge tone={COST_LABEL[m.costTier]?.tone ?? "neutral"}>{COST_LABEL[m.costTier]?.label}</Badge>}
                  </div>
                </button>
              ))}
              {filteredModels.length === 0 && <p className="text-sm text-muted text-center py-6">Aucun modèle trouvé.</p>}
            </div>
          </div>
        </div>
      </Modal>

      {/* Renommage */}
      <Modal open={!!renamingConv} onClose={() => setRenamingConv(null)} title="Renommer la conversation">
        <form
          onSubmit={(e) => {
            e.preventDefault();
            if (renamingConv) patchConversation(renamingConv.id, { title: renameValue });
            setRenamingConv(null);
          }}
          className="space-y-3"
        >
          <Input value={renameValue} onChange={(e) => setRenameValue(e.target.value)} autoFocus maxLength={200} />
          <Button type="submit" className="w-full justify-center">Renommer</Button>
        </form>
      </Modal>

      <CitationPanel citation={citation} onClose={() => setCitation(null)} />
      {lastAssistantWithSources ? null : null}
    </div>
  );
}