// guides.js — Anfänger-Guide (v5): erklärt die Local-LLM-Welt idiotensicher.
// Reine Erklär-Seite. Tool-Einrichtung/Configs liegen im Tab „Verbinden".

import { $ } from "../core/ui.js";

const SECTIONS = [
  ["Erste Schritte — in 3 Schritten loslegen", `
    <ol style="padding-left:18px;line-height:1.9">
      <li><b>Modell holen:</b> Im <b>Cookbook</b> auf „Wofür möchtest du es nutzen?" deinen Fall wählen
        (z.B. „Coden") → „Komplettes Setup installieren". Der Download läuft im Tab <b>Aktivität</b>.</li>
      <li><b>Verbinden:</b> Im Tab <b>Verbinden</b> die Basis-URL kopieren und in deinem Tool (z.B. OpenCode)
        als „OpenAI-kompatibel" eintragen. Mit „Verbindung testen" prüfen.</li>
      <li><b>Loslegen:</b> Im Tool das Modell (z.B. <code>coder</code>) auswählen und arbeiten. Die Engine
        lädt das passende Modell automatisch.</li>
    </ol>`],
  ["Was ist ein LLM bzw. ein Modell?", `
    <p>Ein <b>LLM</b> (Large Language Model) ist ein KI-Sprachmodell — die „Intelligenz", die Text versteht
    und schreibt (wie ChatGPT, nur <b>lokal auf deinem Mini-PC</b>, ohne Cloud). Ein <b>Modell</b> ist eine
    konkrete Datei davon. Verschiedene Modelle sind unterschiedlich gut/schnell und auf Dinge spezialisiert
    (Coden, Bilder, Chat).</p>`],
  ["Was ist GGUF?", `
    <p><b>GGUF</b> ist das Datei<b>format</b>, in dem lokale Modelle gespeichert werden — gemacht, damit sie
    effizient auf normaler Hardware laufen. Unsere Engine (llama-swap/llama.cpp) lädt <b>nur GGUF</b>.
    Steht im Cookbook „keine GGUF", hat dieses HuggingFace-Repo schlicht keine passende Datei — dann ein
    anderes Repo nehmen (oft gibt's „…-GGUF"-Varianten).</p>`],
  ["Quantisierung (z.B. Q4_K_M)?", `
    <p>Modelle sind riesig. <b>Quantisierung</b> verkleinert sie, indem die Zahlen gröber gespeichert werden
    (16-Bit → 4-Bit) — sie passen dann in den Speicher und laufen schneller, bei kaum spürbarem
    Qualitätsverlust. <b>Q4_K_M</b> ist der beliebte Sweetspot aus Größe und Qualität. Höhere Zahl (Q6, Q8)
    = etwas besser, aber größer/langsamer.</p>`],
  ["Kontextfenster — das Gedächtnis", `
    <p>Das <b>Kontextfenster</b> ist das Kurzzeitgedächtnis: wie viel Text (Tokens) sich das Modell
    <i>gleichzeitig</i> merken kann. <b>Größer</b> = es überblickt längere Dateien/Gespräche, braucht aber
    <b>mehr Speicher</b> und wird etwas langsamer. Fürs Coden (viele Dateien) hilft groß; für kurzen Chat
    reicht klein. Mission Control rechnet dir das <b>Optimum für deine Hardware</b> aus.</p>`],
  ["Swapping — warum nur ein Modell läuft", `
    <p>llama-swap lädt <b>immer nur ein Modell gleichzeitig</b> und tauscht es bei Bedarf automatisch aus.
    Vorteil: Du kannst viele Modelle einrichten, ohne dass sie sich den Speicher teilen müssen.
    Heißt auch: Der Speicherbedarf deines Setups = das <b>größte</b> Einzelmodell, <b>nicht</b> die Summe.</p>`],
  ["MCP, Skills & Agenten", `
    <p><b>Agent:</b> Ein Programm, das das Modell <i>selbstständig</i> Aufgaben erledigen lässt — Dateien
    lesen/schreiben, Befehle ausführen, mehrere Schritte planen (z.B. OpenCode, Cline).</p>
    <p><b>MCP (Model Context Protocol):</b> Ein Standard, über den ein Agent dem Modell <b>zusätzliche
    Werkzeuge</b> gibt — z.B. „durchsuche das Web", „lies meine Datenbank", „steuere Tool X". So wird aus
    einem reinen Textmodell ein nützlicher Helfer mit Zugriff auf echte Tools.</p>
    <p><b>Skills:</b> Vorgefertigte Fähigkeiten/Anleitungen, die ein Agent für wiederkehrende Aufgaben nutzt.</p>`],
];

function mount() {
  const c = $(".view[data-view='guides']"); if (!c) return;
  c.innerHTML = `
    <div class="pagehead"><div>
      <h1>Guide für Einsteiger</h1>
      <div class="sub">Die Local-LLM-Welt in Klartext — ohne Vorwissen verständlich.</div></div></div>
    <div class="card" style="padding:0;overflow:hidden">
      ${SECTIONS.map(([title, body], i) => `
        <details class="guide-acc"${i === 0 ? " open" : ""}>
          <summary>${title}</summary>
          <div class="acc-body">${body}</div>
        </details>`).join("")}
    </div>`;
}

export default { id: "guides", mount };