{% extends "_base.html" %}
{% block content %}
<div x-data='collectionsPage({{ collections | tojson }})'>
  <h1 class="page-title">Collections</h1>
  <p class="page-lead">Document sets on this Mac that chats and deep research can search instead of
    the web: a company wiki, a folder of papers, a dataset. Attach one to a project, or pick it in a chat.
    Searching happens here; nothing is uploaded anywhere.</p>

  <form class="card col-new" @submit.prevent="create()">
    <div class="form-row" style="margin: 0; flex: 1;">
      <label for="col-name">New collection</label>
      <input id="col-name" type="text" x-model="name" maxlength="120" placeholder="Engineering wiki, Case law, Research papers…">
    </div>
    <button class="btn" type="submit" :disabled="!name.trim() || busy">Create collection</button>
  </form>
  <p class="col-err" x-show="error" x-text="error" role="alert"></p>

  <div class="col-layout" x-show="cols.length">
    <ul class="col-list" role="listbox" aria-label="Collections">
      <template x-for="c in cols" :key="c.id">
        <li role="option" :aria-selected="sel && sel.id === c.id">
          <button type="button" @click="open(c.id)">
            <span class="col-name" x-text="c.name"></span>
            <span class="card-meta" x-text="c.documents.toLocaleString() + ' documents · ' + size(c.bytes)"></span>
          </button>
        </li>
      </template>
    </ul>

    <section class="card col-detail" x-show="sel">
      <template x-if="sel">
        <div>
          <div class="col-titlebar">
            <h2 class="col-title" x-text="sel.name"></h2>
            <span class="card-meta" x-text="sel.documents.toLocaleString() + ' documents · ' + size(sel.bytes)"></span>
          </div>

          <h3 class="col-h">Add documents</h3>
          <label class="drop" :class="dragging ? 'drop-on' : ''"
                 @dragover.prevent="dragging = true" @dragleave="dragging = false"
                 @drop.prevent="dragging = false; upload($event.dataTransfer.files)">
            <input type="file" multiple @change="upload($event.target.files); $event.target.value = ''">
            <span class="drop-main">Drop files here or <u>choose files</u></span>
            <span class="card-meta">PDF, Word, PowerPoint, Excel, HTML, Markdown, text and code.
              <button type="button" class="link-btn" @click.prevent="$refs.folder.click()">Choose a folder</button></span>
          </label>
          <input type="file" x-ref="folder" webkitdirectory multiple hidden
                 @change="upload($event.target.files); $event.target.value = ''">

          <form class="col-import" @submit.prevent="importPath()">
            <div class="form-row" style="margin: 0; flex: 1;">
              <label for="col-path">Or import from this Mac (large folders and datasets)</label>
              <input id="col-path" type="text" x-model="path"
                     placeholder="~/Documents/papers  or  ~/data/corpus.parquet">
            </div>
            <button class="btn" type="submit" :disabled="!path.trim() || importing">Import</button>
          </form>
          <p class="card-meta">A folder is read file by file. A .jsonl or .parquet file is read as one
            document per row, from columns named text (or contents), and optionally id, title and url.</p>
          <p class="card-meta" x-show="status" x-text="status" role="status"></p>
          <template x-if="importing">
            <p class="col-progress"><span class="pill pill-run">working</span>
              <span x-text="importMsg"></span>
              <button type="button" class="link-btn" @click="stopImport()">Stop</button></p>
          </template>

          <h3 class="col-h">Search by meaning</h3>
          <p class="card-meta col-meaning" x-text="meaningText()"></p>
          <button type="button" class="btn btn-ghost" x-show="embeddings && sel.documents > 0"
                  :disabled="importing" @click="buildVectors()"
                  x-text="(sel.embedding || {}).vectors ? 'Update the meaning index' : 'Build the meaning index'"></button>

          <h3 class="col-h">Try a search</h3>
          <form class="col-search" @submit.prevent="search()">
            <input type="search" x-model="q" :placeholder="meaningOn() ? 'Words or a question' : 'Keywords'"
                   aria-label="Search this collection">
            <button class="btn btn-ghost" type="submit" :disabled="!q.trim()">Search</button>
          </form>
          <ol class="col-hits" x-show="hits.length">
            <template x-for="h in hits" :key="h.id">
              <li><strong x-text="h.title"></strong>
                <span class="card-meta col-hit-url" x-text="h.url"></span>
                <p x-text="h.snippet"></p></li>
            </template>
          </ol>
          <p class="card-meta" x-show="searched && !hits.length">No matches.</p>

          <div class="col-danger">
            <button type="button" class="link-btn" @click="renaming = !renaming; newName = sel.name">Rename</button>
            <template x-if="renaming">
              <form class="col-rename" @submit.prevent="rename()">
                <input type="text" x-model="newName" maxlength="120" aria-label="Collection name">
                <button class="btn" type="submit" :disabled="!newName.trim()">Save</button>
              </form>
            </template>
            <template x-if="!deleting">
              <button type="button" class="link-btn link-danger" @click="deleting = true">Delete collection…</button>
            </template>
            <template x-if="deleting">
              <span>Delete <strong x-text="sel.name"></strong> and its index? The original files on your
                Mac are not touched.
                <button type="button" class="btn btn-danger" @click="destroy()">Delete collection</button>
                <button type="button" class="btn btn-ghost" @click="deleting = false">Cancel</button></span>
            </template>
          </div>
        </div>
      </template>
    </section>
  </div>

  <template x-if="!cols.length">
    <div class="empty">
      <h3>No collections yet</h3>
      <p>Name one above, then add files or import a folder. For a few files a chat or a project
        needs, uploading them to the project is enough.</p>
    </div>
  </template>
</div>

<style>
  .col-new, .col-import { display: flex; gap: 12px; align-items: flex-end; margin: 4px 0 8px; }
  .col-import { margin-top: 14px; }
  .col-err { color: var(--err); font-size: 13px; margin: 0 0 12px; }
  .col-layout { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 16px; margin-top: 18px; align-items: start; }
  .col-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper-2); }
  .col-list li + li { border-top: 1px solid var(--rule-soft); }
  .col-list button { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: 0; padding: 10px 14px; font: inherit; color: var(--ink); cursor: pointer; }
  .col-list li[aria-selected="true"] button { background: var(--accent-soft); }
  .col-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .col-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .col-titlebar { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
  .col-title { margin: 0; font-size: 20px; }
  .col-h { font-size: 14px; margin: 20px 0 8px; }
  .drop { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 22px 16px;
          border: 1.5px dashed var(--rule); border-radius: var(--r-lg); background: var(--paper-2); cursor: pointer; }
  .drop input { display: none; }
  .drop-on, .drop:hover { border-color: var(--accent); background: var(--accent-soft); }
  .drop-main { font-weight: 600; }
  .col-progress { display: flex; gap: 10px; align-items: center; font-size: 13px; }
  .col-search { display: flex; gap: 8px; }
  .col-search input { flex: 1; font: inherit; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper-2); color: var(--ink); }
  .col-hits { padding-left: 20px; margin: 10px 0 0; font-size: 13.5px; }
  .col-hits li { margin-bottom: 10px; }
  .col-hits p { margin: 2px 0 0; color: var(--ink-2); }
  .col-hit-url { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .col-danger { margin-top: 26px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
  .col-rename { display: flex; gap: 8px; }
  .col-rename input { font: inherit; padding: 5px 8px; border: 1px solid var(--rule); border-radius: var(--r-md); }
  @media (max-width: 760px) {
    .col-layout { grid-template-columns: 1fr; }
    .col-new, .col-import { flex-direction: column; align-items: stretch; }
  }
</style>
<script>
function collectionsPage(initial) {
  const api = async (url, opts = {}) => {
    const r = await fetch(url, { credentials: 'same-origin', ...opts });
    const d = await r.json().catch(() => ({}));
    if (!r.ok) throw new Error(d.error || ('HTTP ' + r.status));
    return d;
  };
  return {
    cols: initial, sel: null, name: '', busy: false, error: '', status: '', path: '',
    dragging: false, importing: false, importMsg: '', importJob: null, timer: null,
    q: '', hits: [], searched: false, renaming: false, newName: '', deleting: false, embeddings: null,
    init() {
      api('/api/embeddings').then(d => { this.embeddings = d.embeddings; }).catch(() => {});
      const want = new URLSearchParams(location.search).get('c');
      if (want) this.open(want); else if (this.cols.length) this.open(this.cols[0].id);
    },
    size(b) { return b > 1e9 ? (b / 1e9).toFixed(1) + ' GB' : b > 1e6 ? (b / 1e6).toFixed(1) + ' MB' : Math.max(1, Math.round(b / 1e3)) + ' KB'; },
    async reloadList() { this.cols = (await api('/api/collections')).collections; },
    async open(id, refresh = false) {
      // A refresh of the open collection keeps what the page just said.
      if (!refresh) { clearTimeout(this.timer); this.hits = []; this.searched = false; this.status = ''; }
      this.deleting = false; this.renaming = false;
      try {
        this.sel = await api('/api/collections/' + id);
        history.replaceState(null, '', '/collections?c=' + id);
        const run = (this.sel.imports || []).find(i => ['queued', 'running'].includes(i.status));
        if (run && !this.importing) this.watch(run.id);
      } catch (e) { this.error = 'Could not open the collection: ' + e.message; }
    },
    meaningOn() {
      const e = (this.sel && this.sel.embedding) || {};
      return !!(this.embeddings && e.vectors && e.model === this.embeddings.model);
    },
    meaningText() {
      const e = (this.sel && this.sel.embedding) || {};
      if (!this.embeddings) return 'Off. Search matches keywords only. To also search by meaning, start optiq serve with --embedding-model Qwen/Qwen3-Embedding-0.6B.';
      if (e.vectors && e.model !== this.embeddings.model)
        return 'Built with ' + e.model + ', but the server now runs ' + this.embeddings.model + '. Update the index to search by meaning again.';
      if (!e.vectors) return 'Not built yet. Search matches keywords only until it is.';
      return 'On: ' + e.vectors.toLocaleString() + ' passages embedded with ' + e.model + '. Search matches keywords and meaning'
        + (e.scope === 'opening' ? '; for a collection this large, meaning covers the opening of each document and keywords cover all of it.' : '.');
    },
    async buildVectors() {
      try { this.watch((await api('/api/collections/' + this.sel.id + '/vectors', { method: 'POST' })).job_id); }
      catch (e) { this.status = 'Not built: ' + e.message; }
    },
    async create() {
      this.busy = true; this.error = '';
      try {
        const d = await api('/api/collections', { method: 'POST', headers: { 'Content-Type': 'application/json' },
                                                  body: JSON.stringify({ name: this.name }) });
        this.name = ''; await this.reloadList(); await this.open(d.id);
      } catch (e) { this.error = 'Could not create the collection: ' + e.message; }
      this.busy = false;
    },
    async upload(list) {
      const files = Array.from(list || []);
      if (!files.length) return;
      let added = 0, skipped = 0, job = null;
      // Batches keep each request small; a folder can hold thousands of files.
      for (let i = 0; i < files.length; i += 20) {
        const fd = new FormData();
        for (const f of files.slice(i, i + 20)) fd.append('files', f, f.webkitRelativePath || f.name);
        this.status = 'Indexing ' + Math.min(i + 20, files.length) + ' of ' + files.length + ' files…';
        try {
          const d = await api('/api/collections/' + this.sel.id + '/files', { method: 'POST', body: fd });
          added += d.added; skipped += d.skipped.length; job = d.vectors_job || job;
        } catch (e) { this.status = 'Stopped: ' + e.message; return; }
      }
      this.status = 'Added ' + added + ' document(s)' + (skipped ? ', skipped ' + skipped + ' that could not be read.' : '.');
      await this.open(this.sel.id, true); await this.reloadList();
      if (job && !this.importing) this.watch(job, false);
    },
    async importPath() {
      try {
        const d = await api('/api/collections/' + this.sel.id + '/import', { method: 'POST',
          headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ path: this.path }) });
        this.path = ''; this.watch(d.job_id);
      } catch (e) { this.status = 'Not imported: ' + e.message; }
    },
    watch(jobId, report = true) {
      this.importing = true; this.importJob = jobId; this.importMsg = 'starting…';
      const poll = async () => {
        try {
          const j = (await api('/api/jobs/' + jobId)).job;
          this.importMsg = j.message || j.status;
          if (['done', 'failed', 'cancelled', 'zombie'].includes(j.status)) {
            this.importing = false;
            if (report || j.status !== 'done')
              this.status = j.status === 'done' ? (j.message || 'Done.') : 'Stopped (' + j.status + ')' + (j.message ? ': ' + j.message : '');
            await this.open(this.sel.id, true); await this.reloadList();
            return;
          }
        } catch (e) { this.importMsg = e.message; }
        this.timer = setTimeout(poll, 1500);
      };
      poll();
    },
    async stopImport() {
      // Documents already indexed stay; importing the same source again picks up the rest.
      try { await api('/api/jobs/' + this.importJob + '/stop', { method: 'POST' }); this.importMsg = 'stopping…'; }
      catch (e) { this.status = 'Could not stop: ' + e.message; }
    },
    async search() {
      try { this.hits = (await api('/api/collections/' + this.sel.id + '/search?k=8&q=' + encodeURIComponent(this.q))).results; }
      catch (e) { this.status = 'Search failed: ' + e.message; this.hits = []; }
      this.searched = true;
    },
    async rename() {
      try { this.sel = { ...this.sel, ...(await api('/api/collections/' + this.sel.id, { method: 'PATCH',
              headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: this.newName }) })) };
            this.renaming = false; await this.reloadList(); }
      catch (e) { this.status = 'Not renamed: ' + e.message; }
    },
    async destroy() {
      try { await api('/api/collections/' + this.sel.id, { method: 'DELETE' });
            this.sel = null; await this.reloadList(); if (this.cols.length) this.open(this.cols[0].id);
            else history.replaceState(null, '', '/collections'); }
      catch (e) { this.status = 'Not deleted: ' + e.message; this.deleting = false; }
    },
  };
}
</script>
{% endblock %}