{% extends "_base.html" %}
{% block content %}
<h1 class="page-title">Chat</h1>
<p class="page-lead">What every conversation starts from: your instructions, and what the
  python tool can do with the files you give it.</p>

<div class="card" x-data='instructionsForm({{ prefs.instructions | tojson }})'>
  <h2 style="margin-top: 0;">Your instructions</h2>
  <p class="card-meta" style="margin-bottom: 12px;">Sent with every chat. A project's
    instructions and a chat's own are added after these, so they can narrow them.</p>
  <div class="form-row">
    <label for="prefs-instructions">Instructions</label>
    <textarea id="prefs-instructions" x-model="text" rows="7" maxlength="20000"
              placeholder="For example: I work in finance. Use tables for comparisons, give figures in EUR, and say when you are unsure."></textarea>
    <div class="hint" x-text="text.length.toLocaleString() + ' / 20,000 characters'"></div>
  </div>
  <div style="display: flex; gap: 12px; align-items: center;">
    <button class="btn" type="button" @click="save()" :disabled="saving || text === saved">Save instructions</button>
    <span class="card-meta" x-text="status" role="status"></span>
  </div>
</div>

<div class="card" x-data="analysisEnv()" x-init="poll()" style="margin-top: 20px;">
  <h2 style="margin-top: 0;">Data analysis</h2>
  <p class="card-meta" style="margin-bottom: 12px;">The python tool reads spreadsheets and
    draws charts with pandas and matplotlib. They are installed into a separate environment
    that only the sandbox uses (about 300 MB); the Lab's own install is not touched.</p>
  <template x-if="info">
    <div>
      <div class="env-row">
        <span class="pill" :class="info.ready ? 'pill-ok' : (info.installing ? 'pill-running' : 'pill-idle')"
              x-text="info.ready ? 'ready' : (info.installing ? 'installing' : 'not set up')"></span>
        <span class="card-meta" x-show="info.libraries.length"
              x-text="'Python can use: ' + info.libraries.join(', ')"></span>
        <span class="card-meta" x-show="!info.libraries.length && !info.installing">The python tool has the standard library only.</span>
      </div>
      <div style="margin-top: 12px; display: flex; gap: 12px; align-items: center;">
        <button class="btn" type="button" @click="install()" :disabled="info.installing"
                x-text="info.ready ? 'Reinstall' : (info.installing ? 'Installing…' : 'Set up data analysis')"></button>
        <span class="card-meta" x-show="info.error" style="color: var(--err);" x-text="'Setup failed: ' + info.error"></span>
      </div>
      <template x-if="info.installing || (info.error && info.log.length)">
        <pre class="env-log" x-text="info.log.join('\n')"></pre>
      </template>
    </div>
  </template>
</div>

<style>
  .env-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .env-log { max-height: 180px; overflow: auto; font-size: 11px; margin-top: 12px; }
</style>
<script>
function instructionsForm(initial) {
  return {
    text: initial, saved: initial, saving: false, status: '',
    async save() {
      this.saving = true; this.status = 'Saving…';
      try {
        const r = await fetch('/api/preferences', { method: 'PUT', credentials: 'same-origin',
          headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ instructions: this.text }) });
        const d = await r.json();
        if (!r.ok) throw new Error(d.error || r.status);
        this.saved = d.instructions; this.status = 'Saved. New messages use these instructions.';
      } catch (e) { this.status = 'Not saved: ' + e.message; }
      this.saving = false;
    },
  };
}
function analysisEnv() {
  return {
    info: null,
    async poll() {
      try {
        const r = await fetch('/api/sandbox/info', { credentials: 'same-origin' });
        if (r.ok) this.info = (await r.json()).analysis;
      } catch (e) {}
      setTimeout(() => this.poll(), this.info && this.info.installing ? 1500 : 8000);
    },
    async install() {
      const r = await fetch('/api/sandbox/analysis', { method: 'POST', credentials: 'same-origin' });
      if (r.ok) this.info = (await r.json()).analysis;
    },
  };
}
</script>
{% endblock %}