{# Sidebar: nav + live status + integration token shortcut + sign out.
   Status panel polls /api/status every 5s via Alpine.js. #}

<div class="side-group">
  <div class="side-label">Workflows</div>
  <nav class="side-nav">
    <a href="{{ url_for('chat.chat_page') }}" class="{% if section == 'chat' %}is-active{% endif %}">Chat</a>
    {% if section == 'chat' %}
    {# Saved chats, listed under Chat. The list belongs to the chat page's
       component, which registers itself in the chatNav store. #}
    <div class="side-chats" x-data x-show="$store.chatNav && $store.chatNav.app" x-cloak>
      <template x-if="$store.chatNav && $store.chatNav.app">
        <div class="side-chats-inner">
          <button type="button" class="side-chat-new" @click="$store.chatNav.app.resetThread()">+ New chat</button>
          <template x-if="$store.chatNav.app.chats.length === 0">
            <div class="side-chats-empty">Chats are saved here as you talk.</div>
          </template>
          <template x-for="c in $store.chatNav.app.chats" :key="c.id">
            <div class="side-chat" :class="c.id === $store.chatNav.app.id ? 'is-current' : ''">
              <a href="#" @click.prevent="$store.chatNav.app.load(c.id)" x-text="c.title"
                 :title="c.title + ' · ' + c.n_messages + ' msgs · ' + (c.model || '').split('/').pop()"></a>
              <button type="button" class="side-chat-del" @click="$store.chatNav.app.delChat(c.id)" title="Delete chat" aria-label="Delete chat">✕</button>
            </div>
          </template>
          <template x-if="$store.chatNav.app.chats.length < $store.chatNav.app.chatsTotal">
            <button type="button" class="side-chat-more" @click="$store.chatNav.app.moreChats()"
                    x-text="'Show more (' + ($store.chatNav.app.chatsTotal - $store.chatNav.app.chats.length) + ')'"></button>
          </template>
        </div>
      </template>
    </div>
    {% endif %}
    <a href="{{ url_for('arena.arena_page') }}" class="{% if section == 'arena' %}is-active{% endif %}">Arena</a>
    <a href="{{ url_for('hub.hub_page') }}" class="{% if section == 'hub' %}is-active{% endif %}">Hub</a>
    <a href="{{ url_for('quantize.quantize_page') }}" class="{% if section == 'quantize' %}is-active{% endif %}">Quantize</a>
    <a href="{{ url_for('finetune.finetune_page') }}" class="{% if section == 'finetune' %}is-active{% endif %}">Fine-tune</a>
    <a href="{{ url_for('dataset.dataset_page') }}" class="{% if section == 'dataset' %}is-active{% endif %}">Build dataset</a>
  </nav>
</div>

<div class="side-group">
  <div class="side-label">Settings</div>
  <nav class="side-nav">
    <a href="{{ url_for('settings.server') }}" class="{% if section == 'settings_server' %}is-active{% endif %}">Server</a>
    <a href="{{ url_for('cluster.cluster_page') }}" class="{% if section == 'cluster' %}is-active{% endif %}">Cluster</a>
    <a href="{{ url_for('integrations') }}" class="{% if section == 'integrations' %}is-active{% endif %}">Integrations</a>
    <a href="{{ url_for('settings.hf_index') }}" class="{% if section == 'settings_hf' %}is-active{% endif %}">Hugging Face</a>
    <a href="{{ url_for('settings.account') }}" class="{% if section == 'settings_account' %}is-active{% endif %}">Account</a>
    <a href="#" @click.prevent="$dispatch('open-feedback')" x-data>Send feedback</a>
  </nav>
</div>

{# Feedback: a note to the OptiQ team. The open chat goes along only when the
   box is ticked, and the box says what that means. #}
<div x-data="feedbackBox()" @open-feedback.window="open()" x-cloak>
  <div class="fb-backdrop" x-show="shown" @click.self="shown = false" @keydown.escape.window="shown = false">
    <div class="fb-panel" role="dialog" aria-label="Send feedback">
      <h3>Send feedback</h3>
      <textarea x-model="body" rows="6" placeholder="What worked, what broke, what you wish it did"></textarea>
      <template x-if="chatId()">
        <label class="fb-attach"><input type="checkbox" x-model="attach">
          Attach this chat (its messages and tool output are sent with your note)</label>
      </template>
      <p class="fb-status" x-text="status"></p>
      <div class="fb-actions">
        <button type="button" @click="shown = false">Cancel</button>
        <button type="button" class="btn-primary" :disabled="sending || !body.trim()" @click="send()">Send</button>
      </div>
    </div>
  </div>
</div>
<style>
  .fb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:50}
  .fb-panel{background:var(--bg,#fff);color:inherit;border-radius:10px;padding:18px;width:min(520px,92vw);box-shadow:0 10px 40px rgba(0,0,0,.25)}
  .fb-panel h3{margin:0 0 10px}
  .fb-panel textarea{width:100%;box-sizing:border-box;font:inherit}
  .fb-attach{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:13px}
  .fb-status{min-height:1.2em;font-size:13px;margin:8px 0}
  .fb-actions{display:flex;gap:8px;justify-content:flex-end}
</style>
<script>
function feedbackBox() {
  return {
    shown: false, body: '', attach: false, sending: false, status: '',
    open() { this.shown = true; this.status = ''; },
    chatId() { const s = window.Alpine && Alpine.store('chatNav'); return s && s.app && s.app.id ? s.app.id : null; },
    async send() {
      this.sending = true; this.status = 'Sending…';
      try {
        const r = await fetch('/api/feedback', {method: 'POST', headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({body: this.body, chat_id: this.attach ? this.chatId() : null})});
        const d = await r.json();
        if (d.ok) { this.status = 'Thanks, sent' + (d.attached ? ' with this chat.' : '.'); this.body = ''; this.attach = false; }
        else if (d.queued) { this.status = 'OptiQ Cloud is unreachable; saved, and it will be sent next time.'; this.body = ''; }
        else { this.status = 'Not sent: ' + (d.error || r.status); }
      } catch (e) { this.status = 'Not sent: ' + e; }
      this.sending = false;
    },
  };
}
</script>

<div class="side-group"
     x-data="sidebarStatus()"
     x-init="poll()">
  <div class="side-label">Status</div>
  <div class="side-status">
    <div class="row">
      <span class="k">API</span>
      <span class="v">
        <template x-if="status.api_reachable"><span class="pill pill-ok" x-text="'port ' + status.api_port"></span></template>
        <template x-if="!status.api_reachable"><span class="pill pill-idle" x-text="'port ' + status.api_port"></span></template>
      </span>
    </div>
    <div class="row">
      <span class="k">Model</span>
      <span class="v" x-text="status.model ? shortModel(status.model) : '—'"></span>
    </div>
    <template x-if="remote">
      <div class="row" :title="'Chat sends messages to ' + remote.url + (remote.model ? ' (' + remote.model + ')' : '')">
        <span class="k">Chat</span>
        <span class="v"><span class="pill pill-ok">remote</span></span>
      </div>
    </template>
    <div class="row">
      <span class="k">MTP</span>
      <span class="v">
        <template x-if="status.mtp_enabled"><span class="pill pill-ok" x-text="'depth ' + status.mtp_depth"></span></template>
        <template x-if="!status.mtp_enabled"><span class="pill pill-idle">off</span></template>
      </span>
    </div>
  </div>

  <div class="copy-row" title="API base URL. Paste into Claude Code, Codex, etc.">
    <code x-text="status.api_url + '/v1'"></code>
    <button class="copy-btn" @click="copy(status.api_url + '/v1', $event)">⧉</button>
  </div>
  <div class="copy-row" title="Bearer token">
    <code x-text="status.auth_token"></code>
    <button class="copy-btn" @click="copy(status.auth_token, $event)">⧉</button>
  </div>
</div>

<div class="side-group" x-data="recentJobs()" x-init="poll()">
  <div class="side-label">Recent jobs</div>
  <template x-if="jobs.length === 0">
    <div style="font-size: 12px; color: var(--mute);">No jobs yet.</div>
  </template>
  <template x-for="job in jobs.slice(0,5)" :key="job.id">
    <div class="side-status" style="margin-bottom: 4px; padding: 6px 8px;">
      <div class="row">
        <span class="k" x-text="job.kind"></span>
        <span class="v">
          <span class="pill"
                :class="{'pill-ok': job.status === 'done',
                         'pill-err': job.status === 'failed',
                         'pill-running': job.status === 'running',
                         'pill-warn': job.status === 'zombie',
                         'pill-idle': job.status === 'queued'}"
                x-text="job.status"></span>
        </span>
      </div>
    </div>
  </template>
</div>

<div class="side-group" style="margin-top: 22px;">
  <div class="side-label">Learn</div>
  <nav class="side-nav">
    <a href="https://mlx-optiq.com/docs/" target="_blank" rel="noopener">Docs &amp; guides&nbsp;&#8599;</a>
    <a href="https://mlx-optiq.com/changelog" target="_blank" rel="noopener">What's new&nbsp;&#8599;</a>
  </nav>
</div>

<form method="post" action="{{ url_for('auth.logout') }}" style="margin-top: 18px;">
  <button type="submit" class="btn btn-ghost" style="width: 100%;">Sign out</button>
</form>

<script>
function sidebarStatus() {
  return {
    status: { api_url: '{{ api_url }}', api_port: '{{ api_url.split(":")[-1] }}', api_reachable: false, model: null, mtp_enabled: false, mtp_depth: 0, auth_token: 'sk-optiq-local' },
    // Chat can talk to a remote OpenAI-compatible server instead of this
    // machine's (Model & params -> cloud API). The rows above describe only the
    // local server, so without this the panel said "Model —" while every chat
    // message was being answered elsewhere.
    remote: null,
    readRemote() {
      try {
        const url = localStorage.getItem('optiq.chat.cloudBaseUrl') || '';
        const source = localStorage.getItem('optiq.chat.source');
        if (!url.trim() || source === 'local') { this.remote = null; return; }
        this.remote = { url, model: localStorage.getItem('optiq.chat.cloudModel') || '' };
      } catch (e) { this.remote = null; }
    },
    async poll() {
      this.readRemote();
      try {
        const r = await fetch('/api/status', { credentials: 'same-origin' });
        if (r.ok) this.status = await r.json();
      } catch (e) {}
      setTimeout(() => this.poll(), 5000);
    },
    shortModel(m) {
      if (!m) return '—';
      // Local path: /…/Qwen_Qwen3.5-0.8B-bpw4.5/optiq_mixed → Qwen3.5-0.8B-bpw4.5
      // HF id:      mlx-community/Qwen3.5-9B-OptiQ-4bit → Qwen3.5-9B-OptiQ-4bit
      const parts = m.split('/').filter(Boolean);
      // Strip trailing 'optiq_mixed' (our quant output dir convention)
      let candidate = parts[parts.length - 1];
      if (candidate === 'optiq_mixed' && parts.length > 1) {
        candidate = parts[parts.length - 2];
      }
      // Strip 'Qwen_' / 'Gemma_' etc. prefix added by our path sanitiser
      candidate = candidate.replace(/^(Qwen|Gemma|Meta|Mistral|Llama)_/, '');
      return candidate.length > 22 ? candidate.slice(0, 21) + '…' : candidate;
    },
    copy(text, ev) {
      navigator.clipboard.writeText(text);
      const btn = ev.target;
      const original = btn.textContent;
      btn.textContent = '✓';
      setTimeout(() => { btn.textContent = original; }, 1000);
    }
  };
}

function recentJobs() {
  return {
    jobs: [],
    async poll() {
      try {
        const r = await fetch('/api/jobs/recent', { credentials: 'same-origin' });
        if (r.ok) {
          const data = await r.json();
          this.jobs = data.jobs || [];
        }
      } catch (e) {}
      setTimeout(() => this.poll(), 5000);
    }
  };
}
</script>