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

let currentUrl = "http://localhost:8000";

function render() {
  const c = document.querySelector(".view[data-view='guides']");
  if (!c) return;
  
  c.innerHTML = `
    <div class="grid grid-2">
      <div class="card">
        <div class="card-h"><h3>Cline / Cursor</h3></div>
        <p>Nutze llama-swap als lokalen OpenAI-kompatiblen Provider in Cursor oder Cline.</p>
        <label>API Provider</label>
        <input class="tokin mono-sm" readonly value="OpenAI Compatible">
        <label>Base URL</label>
        <input class="tokin mono-sm" readonly value="${currentUrl}/v1">
        <label>API Key</label>
        <input class="tokin mono-sm" readonly value="Dein_Mission_Control_Token_oder_leer">
      </div>

      <div class="card">
        <div class="card-h"><h3>OpenWebUI</h3></div>
        <p>Füge llama-swap in OpenWebUI als externe OpenAI-Verbindung hinzu.</p>
        <label>Settings -> Connections -> OpenAI API</label>
        <input class="tokin mono-sm" readonly value="${currentUrl}/v1">
        <label>API Key</label>
        <input class="tokin mono-sm" readonly value="dummy-key">
        <p style="margin-top:12px; font-size:12px; color:var(--text-dim);">
          OpenWebUI zieht sich danach automatisch alle geladenen Modelle.
        </p>
      </div>

      <div class="card" style="grid-column: span 2;">
        <div class="card-h"><h3>Python / LangChain (OpenAI SDK)</h3></div>
        <p>Nutze das offizielle <code>openai</code> Package, um mit llama-swap zu sprechen.</p>
        <pre style="background: var(--bg); padding: 12px; border-radius: 8px; border: 1px solid var(--border); overflow-x: auto; color: var(--text); font-family: monospace; font-size: 13px;"><code>from openai import OpenAI

client = OpenAI(
    base_url="${currentUrl}/v1",
    api_key="Dein_Token" # Optional, falls in Mission Control konfiguriert
)

response = client.chat.completions.create(
    model="coder", # Alias aus deinem Cookbook
    messages=[{"role": "user", "content": "Hallo Modell!"}]
)

print(response.choices[0].message.content)</code></pre>
      </div>

      <div class="card" style="grid-column: span 2;">
        <div class="card-h"><h3>n8n / Zapier / HTTP Node</h3></div>
        <p>Führe direkte HTTP POST Requests gegen den Endpunkt aus.</p>
        <label>Methode & URL</label>
        <input class="tokin mono-sm" readonly value="POST ${currentUrl}/v1/chat/completions">
        <label>Headers</label>
        <input class="tokin mono-sm" readonly value="Content-Type: application/json">
        <label>Body (JSON)</label>
        <pre style="background: var(--bg); padding: 12px; border-radius: 8px; border: 1px solid var(--border); overflow-x: auto; color: var(--text); font-family: monospace; font-size: 13px;"><code>{
  "model": "coder",
  "messages": [
    { "role": "user", "content": "Erkläre mir Quantisierung." }
  ]
}</code></pre>
      </div>
    </div>
  `;
}

function mount() {
  render();
}

function onStatus(s) {
  if (s && s.swap_url) {
    if (currentUrl !== s.swap_url) {
      currentUrl = s.swap_url;
      render(); // Neu rendern, wenn sich die URL ändert
    }
  }
}

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