{% 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>
  </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">Spreadsheets, PDFs, Word and PowerPoint files, CSV, text and code.
        Every chat in this project can search and open them.</span>
    </label>
    <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>

  <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; }
  @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,
    async init() {
      const want = new URLSearchParams(location.search).get('tab');
      if (['chats', 'instructions', 'files'].includes(want)) this.tab = want;
      await this.refresh();
    },
    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 %}