{% extends "base.html" %}
{% block title %}Chat — CoderAI{% endblock %}
{% block wrapper_class %}{% endblock %}

{% block content %}
<div class="chat-wrap" style="margin:0 1.5rem 1rem;border-radius:8px">
  <div class="chat-bar">
    <h2>Chat</h2>
    <div class="chat-controls">
      <select id="model-sel" class="form-input" style="font-size:13px;padding:.3rem .625rem;min-width:200px">
        <option value="">Select model…</option>
      </select>
      <button class="btn btn-ghost btn-sm" onclick="newChat()">Clear</button>
    </div>
  </div>

  <div class="chat-messages" id="chat-msgs">
    <div class="chat-empty">
      <h3>CoderAI Chat</h3>
      <p>Select a model and start typing</p>
    </div>
  </div>

  <div class="chat-foot">
    <div id="typing" style="font-size:11px;color:var(--text-3);height:14px;margin-bottom:.3rem;font-family:var(--mono)"></div>
    <div class="chat-input-row">
      <textarea id="chat-in" class="chat-textarea" placeholder="Send a message…" rows="1"></textarea>
      <button class="btn btn-primary" id="send-btn" onclick="send()" style="padding:.5rem .75rem;align-self:flex-end">
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px"><line x1="14" y1="2" x2="7" y2="9"/><polygon points="14 2 10 14 7 9 2 6 14 2"/></svg>
      </button>
    </div>
    <div class="chat-hint">Enter to send · Shift+Enter for newline</div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let history = [];
let busy = false;

async function loadModels() {
  try {
    const d = await fetch('/v1/models').then(r => r.json());
    const sel = document.getElementById('model-sel');
    sel.innerHTML = '<option value="">Select model…</option>';
    (d.data || []).forEach(m => {
      const o = document.createElement('option');
      o.value = o.textContent = m.id;
      sel.appendChild(o);
    });
  } catch {}
}

function newChat() {
  history = [];
  document.getElementById('chat-msgs').innerHTML = '<div class="chat-empty"><h3>New conversation</h3><p>Start typing below</p></div>';
}

function addMsg(role, text) {
  const wrap = document.getElementById('chat-msgs');
  wrap.querySelector('.chat-empty')?.remove();
  const t = new Date().toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'});
  const d = document.createElement('div');
  d.className = 'msg ' + role;
  d.innerHTML = `
    <div class="msg-av ${role === 'user' ? 'user' : 'ai'}">${role === 'user' ? 'YOU' : 'AI'}</div>
    <div class="msg-body">
      <div class="msg-meta">${role === 'user' ? 'You' : 'Assistant'} · ${t}</div>
      <div class="msg-text">${String(text).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\n/g,'<br>')}</div>
    </div>`;
  wrap.appendChild(d);
  wrap.scrollTop = wrap.scrollHeight;
}

async function send() {
  if (busy) return;
  const model = document.getElementById('model-sel').value;
  if (!model) { document.getElementById('model-sel').focus(); return; }
  const input = document.getElementById('chat-in');
  const text = input.value.trim();
  if (!text) return;

  addMsg('user', text);
  history.push({role:'user', content:text});
  input.value = '';
  input.style.height = 'auto';

  busy = true;
  document.getElementById('send-btn').disabled = true;
  document.getElementById('typing').textContent = 'Assistant is typing…';

  try {
    const r = await fetch('/v1/chat/completions', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({model, messages: history, stream:false})
    });
    if (!r.ok) throw new Error('HTTP ' + r.status);
    const d = await r.json();
    const reply = d.choices[0].message.content;
    addMsg('assistant', reply);
    history.push({role:'assistant', content:reply});
  } catch (e) {
    addMsg('assistant', 'Error: ' + e.message);
  } finally {
    busy = false;
    document.getElementById('send-btn').disabled = false;
    document.getElementById('typing').textContent = '';
  }
}

document.getElementById('chat-in').addEventListener('keydown', e => {
  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
});
document.getElementById('chat-in').addEventListener('input', function() {
  this.style.height = 'auto';
  this.style.height = Math.min(this.scrollHeight, 140) + 'px';
});

loadModels();
</script>
{% endblock %}