{% extends "_base.html" %}
{% block content %}
<script src="{{ url_for('static', filename='js/workspace.js') }}?v={{ asset_v }}"></script>
<div x-data='projectPage({{ project | tojson }})'>
  <a class="proj-crumb" href="{{ url_for('projects.projects_page') }}">Projects</a>
  <div class="proj-titlebar">
    <template x-if="!renaming">
      <h1 class="page-title" x-text="p.name"></h1>
    </template>
    <template x-if="renaming">
      <form class="proj-rename" @submit.prevent="rename()">
        <input type="text" x-model="newName" maxlength="80" aria-label="Project name" x-init="$el.focus()">
        <button class="btn" type="submit" :disabled="!newName.trim()">Save</button>
        <button class="btn btn-ghost" type="button" @click="renaming = false">Cancel</button>
        <span class="card-meta" style="color: var(--err);" x-show="renameError" x-text="renameError"></span>
      </form>
    </template>
    <div class="proj-actions">
      <button class="btn btn-ghost" type="button" x-show="!renaming" @click="renaming = true; newName = p.name">Rename</button>
      <a class="btn" :href="'/chat?project=' + p.id + '&new=1'">New chat in this project</a>
    </div>
  </div>

  <div class="proj-tabs" role="tablist">
    <button role="tab" :aria-selected="tab === 'chats'" @click="tab = 'chats'">Chats <span x-text="chats.length"></span></button>
    <button role="tab" :aria-selected="tab === 'instructions'" @click="tab = 'instructions'">Instructions</button>
    <button role="tab" :aria-selected="tab === 'files'" @click="tab = 'files'">Files <span x-text="files.length"></span></button>
    <button role="tab" :aria-selected="tab === 'sources'" @click="tab = 'sources'">Sources <span x-text="attached().length + (searchable() ? 1 : 0)"></span></button>
  </div>

  <section x-show="tab === 'chats'" role="tabpanel">
    <template x-if="!chats.length">
      <div class="empty">
        <h3>No chats in this project yet</h3>
        <p>Start one with the button above, or move a chat here from its options in Chat.</p>
      </div>
    </template>
    <ul class="proj-chats">
      <template x-for="c in chats" :key="c.id">
        <li><a :href="'/chat?project=' + p.id + '&chat=' + c.id">
          <span class="proj-chat-title" x-text="c.title"></span>
          <span class="card-meta" x-text="c.n_messages + ' messages · ' + OptiqFiles.when(c.updated_at)"></span>
        </a></li>
      </template>
    </ul>
  </section>

  <section x-show="tab === 'instructions'" role="tabpanel" class="card">
    <p class="card-meta" style="margin: 0 0 10px;">Every chat in this project follows these, after
      <a href="{{ url_for('settings.chat') }}">your own instructions</a> and before the chat's.</p>
    <div class="form-row">
      <label for="proj-instr">Project instructions</label>
      <textarea id="proj-instr" rows="10" x-model="instr" maxlength="20000"
                placeholder="What this project is, who the work is for, conventions to follow, what to avoid."></textarea>
    </div>
    <div style="display: flex; gap: 12px; align-items: center;">
      <button class="btn" type="button" @click="saveInstructions()" :disabled="instr === p.instructions">Save instructions</button>
      <span class="card-meta" x-text="instrStatus" role="status"></span>
    </div>
  </section>

  <section x-show="tab === 'files'" role="tabpanel">
    <label class="drop" :class="dragging ? 'drop-on' : ''"
           @dragover.prevent="dragging = true" @dragleave="dragging = false"
           @drop.prevent="dragging = false; uploadAll($event.dataTransfer.files)">
      <input type="file" multiple @change="uploadAll($event.target.files); $event.target.value = ''">
      <span class="drop-main">Drop files here or <u>choose files</u></span>
      <span class="card-meta">or <button type="button" class="link-btn" @click.prevent="$refs.folder.click()">choose a folder</button></span>
      <span class="card-meta">Spreadsheets, PDFs, Word and PowerPoint files, CSV, text and code.
        Every chat in this project can search and open them.</span>
    </label>
    <input type="file" x-ref="folder" webkitdirectory multiple hidden
           @change="uploadAll($event.target.files); $event.target.value = ''">
    <p class="card-meta" x-show="uploadStatus" x-text="uploadStatus" role="status"></p>
    <div class="file-filter" x-show="files.length">
      <button type="button" :aria-pressed="filter === 'all'" @click="filter = 'all'">All</button>
      <button type="button" :aria-pressed="filter === 'uploaded'" @click="filter = 'uploaded'">Uploaded</button>
      <button type="button" :aria-pressed="filter === 'made'" @click="filter = 'made'">Made by tools</button>
    </div>
    <table class="file-table" x-show="files.length">
      <thead><tr><th>Name</th><th>Size</th><th>Changed</th><th></th></tr></thead>
      <tbody>
        <template x-for="f in shown()" :key="f.path">
          <tr>
            <td><span class="file-ico" x-text="OptiqFiles.icon(f.path)"></span>
                <a :href="OptiqFiles.url(p.id, f.path)" x-text="f.path"></a>
                <span class="pill pill-idle" x-show="f.uploaded">uploaded</span></td>
            <td class="num" x-text="OptiqFiles.size(f.size)"></td>
            <td class="num" x-text="OptiqFiles.when(f.mtime)"></td>
            <td class="file-act">
              <template x-if="confirming !== f.path">
                <button type="button" class="link-btn" @click="confirming = f.path">Delete</button>
              </template>
              <template x-if="confirming === f.path">
                <span><button type="button" class="link-btn link-danger" @click="remove(f.path)">Delete for good</button>
                  <button type="button" class="link-btn" @click="confirming = null">Keep</button></span>
              </template>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
    <template x-if="!files.length">
      <p class="card-meta" style="margin-top: 14px;">No files yet.</p>
    </template>
  </section>

  <section x-show="tab === 'sources'" role="tabpanel">
    <div class="card src-card">
      <h3 class="src-h">What chats in this project can search</h3>
      <p class="card-meta src-note">Next to web search, every chat here gets a document search over these.
        Deep research can search them instead of the web.</p>
      <ul class="src-list">
        <li>
          <span class="src-name">This project's files</span>
          <span class="card-meta" x-text="searchable() ? searchable() + ' searchable file(s)' : 'none yet'"></span>
          <button type="button" class="link-btn" @click="tab = 'files'">Manage files</button>
        </li>
        <template x-for="c in attached()" :key="c.id">
          <li>
            <span class="src-name" x-text="c.name"></span>
            <span class="card-meta" x-text="c.documents.toLocaleString() + ' documents · collection'"></span>
            <button type="button" class="link-btn" @click="detach(c.id)">Remove from project</button>
          </li>
        </template>
      </ul>
      <div class="src-attach" x-show="available().length">
        <label for="src-add">Add a collection</label>
        <select id="src-add" x-model="toAttach">
          <option value="">Choose…</option>
          <template x-for="c in available()" :key="c.id">
            <option :value="c.id" x-text="c.name + ' (' + c.documents.toLocaleString() + ' documents)'"></option>
          </template>
        </select>
        <button class="btn" type="button" :disabled="!toAttach" @click="attach()">Add</button>
      </div>
      <p class="card-meta" x-show="!library.length">
        Large or shared document sets live in <a href="/collections">Collections</a>; add one there and attach it here.</p>
    </div>
    <div class="card src-card">
      <h3 class="src-h">Deep research searches</h3>
      <label class="src-radio"><input type="radio" value="web" x-model="research" @change="setResearch()"> The web</label>
      <label class="src-radio"><input type="radio" value="sources" x-model="research" @change="setResearch()"
             :disabled="!searchable() && !attached().length"> This project's sources</label>
      <p class="card-meta" x-text="sourcesStatus" role="status"></p>
    </div>
  </section>

  <div class="proj-danger">
    <template x-if="!deleting">
      <button type="button" class="link-btn link-danger" @click="deleting = true">Delete this project…</button>
    </template>
    <template x-if="deleting">
      <div class="card proj-danger-card">
        <p style="margin: 0 0 10px;">Delete <strong x-text="p.name"></strong> and its
          <span x-text="files.length"></span> file(s)? Its <span x-text="chats.length"></span>
          chat(s) are kept and move to “Chats in no project”.</p>
        <button type="button" class="btn btn-danger" @click="destroy()">Delete project and files</button>
        <button type="button" class="btn btn-ghost" @click="deleting = false">Cancel</button>
      </div>
    </template>
  </div>
</div>

<style>
  .proj-crumb { font-size: 13px; color: var(--mute); }
  .proj-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 2px 0 18px; }
  .proj-titlebar .page-title { margin: 0; }
  .proj-actions { display: flex; gap: 10px; }
  .proj-rename { display: flex; gap: 8px; align-items: center; }
  .proj-rename input { font: inherit; font-size: 20px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--r-md); }
  .proj-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; }
  .proj-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font: inherit; color: var(--ink-2); cursor: pointer; margin-bottom: -1px; }
  .proj-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }
  .proj-tabs button span { font-family: var(--mono); font-size: 11px; color: var(--mute); margin-left: 4px; }
  .proj-tabs button:focus-visible, .file-filter button:focus-visible, .link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .proj-chats { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper-2); }
  .proj-chats li + li { border-top: 1px solid var(--rule-soft); }
  .proj-chats a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; color: var(--ink); }
  .proj-chats a:hover { background: var(--accent-soft); text-decoration: none; }
  .proj-chat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .drop { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 26px 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; }
  .file-filter { display: flex; gap: 6px; margin: 16px 0 8px; }
  .file-filter button { font: inherit; font-size: 12px; border: 1px solid var(--rule); background: var(--paper-2); border-radius: 999px; padding: 3px 12px; cursor: pointer; color: var(--ink-2); }
  .file-filter button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .file-table { width: 100%; border-collapse: collapse; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; font-size: 13.5px; }
  .file-table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--mute); padding: 8px 12px; border-bottom: 1px solid var(--rule); }
  .file-table td { padding: 8px 12px; border-top: 1px solid var(--rule-soft); vertical-align: middle; }
  .file-table .num { font-family: var(--mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .file-ico { display: inline-block; width: 18px; color: var(--mute); }
  .file-table .pill { margin-left: 6px; }
  .file-act { text-align: right; white-space: nowrap; }
  .proj-danger { margin-top: 36px; }
  .proj-danger-card { max-width: 560px; }
  .src-card { margin-bottom: 16px; }
  .src-h { margin: 0 0 4px; font-size: 15px; }
  .src-note { margin: 0 0 12px; }
  .src-list { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-md); }
  .src-list li { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; flex-wrap: wrap; }
  .src-list li + li { border-top: 1px solid var(--rule-soft); }
  .src-name { font-weight: 600; }
  .src-list .link-btn { margin-left: auto; }
  .src-attach { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .src-attach select { font: inherit; padding: 5px 8px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper-2); color: var(--ink); max-width: 100%; }
  .src-radio { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
  @media (max-width: 640px) { .file-table th:nth-child(3), .file-table td:nth-child(3) { display: none; } }
</style>
<script>
function projectPage(project) {
  return {
    p: project, tab: 'chats', renaming: false, newName: '', renameError: '',
    chats: {{ chats | tojson }},
    instr: project.instructions, instrStatus: '',
    files: [], filter: 'all', dragging: false, uploadStatus: '', confirming: null, deleting: false,
    library: [], toAttach: '', research: project.search || 'web', sourcesStatus: '',
    async init() {
      const want = new URLSearchParams(location.search).get('tab');
      if (['chats', 'instructions', 'files', 'sources'].includes(want)) this.tab = want;
      await this.refresh();
      await this.loadLibrary();
    },
    async loadLibrary() {
      try {
        const r = await fetch('/api/collections', { credentials: 'same-origin' });
        this.library = (await r.json()).collections || [];
      } catch (e) { this.sourcesStatus = 'Could not list collections: ' + e.message; }
    },
    searchable() { return this.files.filter(f => f.uploaded).length; },
    attached() { const ids = this.p.collections || []; return this.library.filter(c => ids.includes(c.id)); },
    available() { const ids = this.p.collections || []; return this.library.filter(c => !ids.includes(c.id)); },
    async attach() {
      try { await this.patch({ collections: [...(this.p.collections || []), this.toAttach] }); this.toAttach = '';
            this.sourcesStatus = 'Added. Chats in this project can search it.'; }
      catch (e) { this.sourcesStatus = 'Not added: ' + e.message; }
    },
    async detach(id) {
      try { await this.patch({ collections: (this.p.collections || []).filter(c => c !== id) });
            this.sourcesStatus = 'Removed from this project. The collection itself is kept.'; }
      catch (e) { this.sourcesStatus = 'Not removed: ' + e.message; }
    },
    async setResearch() {
      try { await this.patch({ search: this.research });
            this.sourcesStatus = this.research === 'web' ? 'Deep research here searches the web.'
                                                        : 'Deep research here searches this project\'s sources.'; }
      catch (e) { this.sourcesStatus = 'Not saved: ' + e.message; this.research = this.p.search || 'web'; }
    },
    async refresh() {
      try { this.files = await OptiqFiles.list(this.p.id); } catch (e) { this.uploadStatus = 'Could not list files: ' + e.message; }
    },
    shown() {
      if (this.filter === 'uploaded') return this.files.filter(f => f.uploaded);
      if (this.filter === 'made') return this.files.filter(f => !f.uploaded);
      return this.files;
    },
    async patch(body) {
      const r = await fetch('/api/projects/' + this.p.id, { method: 'PATCH', credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
      const d = await r.json();
      if (!r.ok) throw new Error(d.error || r.status);
      this.p = d;
      return d;
    },
    async rename() {
      try { await this.patch({ name: this.newName }); this.renaming = false; document.title = this.p.name + ' · OptiQ Lab'; }
      catch (e) { this.instrStatus = ''; this.uploadStatus = ''; this.renameError = 'Not renamed: ' + e.message; }
    },
    async saveInstructions() {
      this.instrStatus = 'Saving…';
      try { await this.patch({ instructions: this.instr }); this.instrStatus = 'Saved. New messages in this project follow them.'; }
      catch (e) { this.instrStatus = 'Not saved: ' + e.message; }
    },
    async uploadAll(list) {
      const files = Array.from(list || []);
      for (const [i, f] of files.entries()) {
        this.uploadStatus = 'Uploading ' + f.name + (files.length > 1 ? ' (' + (i + 1) + ' of ' + files.length + ')' : '') + '…';
        try {
          const d = await OptiqFiles.upload(this.p.id, f);
          this.uploadStatus = d.indexed ? 'Added ' + d.name + '.' : 'Added ' + d.name + ' (stored for the tools; its contents are not searchable).';
        } catch (e) { this.uploadStatus = 'Could not add ' + f.name + ': ' + e.message; break; }
      }
      await this.refresh();
    },
    async remove(path) {
      try { await OptiqFiles.remove(this.p.id, path); this.confirming = null; await this.refresh(); }
      catch (e) { this.uploadStatus = 'Could not delete ' + path + ': ' + e.message; }
    },
    async destroy() {
      const r = await fetch('/api/projects/' + this.p.id, { method: 'DELETE', credentials: 'same-origin' });
      if (r.ok) window.location.href = '/projects';
    },
  };
}
</script>
{% endblock %}