{% extends "base.html" %}
{% block title %}Workspaces — SimpleAudit{% endblock %}
{% block content %}
<div class="flex items-start justify-between gap-3 flex-wrap mb-6">
  <div class="min-w-0">
    <h1 class="text-lg font-semibold text-gray-100">Workspaces</h1>
    <p class="text-sm text-gray-500 mt-1">Each workspace keeps its own scenarios, models, and audits.</p>
  </div>
  {% if can_create %}
  <button type="button" id="ws-new-btn" class="px-4 py-2 rounded-lg text-sm bg-accent/15 border border-accent/30 text-accent hover:bg-accent/25 transition-colors whitespace-nowrap">＋ New workspace</button>
  {% endif %}
</div>

{% if workspace_cards %}
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-8">
  {% for card in workspace_cards %}
  <div class="bg-surface-raised rounded-xl border p-4 {% if card.is_current %}border-accent/40{% else %}border-gray-800{% endif %}">
    <div class="flex items-center gap-2 mb-1">
      <span class="text-base">▣</span>
      <span class="font-medium text-gray-100 truncate">{{ card.project.name }}</span>
      {% if card.is_current %}<span class="text-[10px] bg-accent/20 text-accent rounded px-1.5 py-0.5 shrink-0">Current</span>{% endif %}
    </div>
    <p class="text-xs text-gray-500 mb-3 h-8 overflow-hidden">{% if card.project.description %}{{ card.project.description }}{% else %}<em>No description</em>{% endif %}</p>
    <p class="text-xs text-gray-500 mb-3">{{ card.member_count }} member{{ card.member_count|pluralize }}</p>
    <div class="flex flex-wrap gap-2">
      {% if not card.is_current %}
      <button type="button" data-switch="{{ card.project.id }}" class="ws-switch px-3 py-1.5 rounded-lg text-xs bg-surface-overlay border border-gray-700 text-gray-300 hover:border-accent/40">Switch</button>
      {% endif %}
      {% if card.is_admin %}
      <a href="/workspaces/?manage={{ card.project.id }}" class="px-3 py-1.5 rounded-lg text-xs bg-surface-overlay border border-gray-700 text-gray-300 hover:border-accent/40">Manage</a>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="bg-surface-raised rounded-xl border border-gray-800 p-8 text-center mb-8">
  <p class="text-sm text-gray-400">You don't belong to any workspace yet.</p>
  {% if can_create %}<p class="text-xs text-gray-500 mt-2">Create your first workspace to get started.</p>{% endif %}
</div>
{% endif %}

<!-- Manage panel -->
{% if managed %}
<div class="bg-surface-raised rounded-xl border border-gray-800 p-5 mb-8" data-ws-id="{{ managed.workspace.project.id }}" data-ws-name="{{ managed.workspace.project.name|escapejs }}">
  <div class="flex items-center justify-between gap-3 flex-wrap mb-4">
    <h2 class="text-sm font-semibold text-gray-100 min-w-0 truncate">Manage — {{ managed.workspace.project.name }}</h2>
    {% if managed.can_manage %}
    <div class="flex items-center gap-2 flex-wrap">
      <input id="ws-add-username" type="text" placeholder="Username" class="px-3 py-1.5 rounded-lg text-xs bg-surface border border-gray-700 text-gray-200 focus:outline-none focus:border-accent/50 w-36">
      <select id="ws-add-role" class="px-2 py-1.5 rounded-lg text-xs bg-surface border border-gray-700 text-gray-300 focus:outline-none focus:border-accent/50">
        <option value="viewer">Viewer</option>
        <option value="auditor">Auditor</option>
        <option value="admin">Admin</option>
      </select>
      <button type="button" id="ws-add-btn" class="px-3 py-1.5 rounded-lg text-xs bg-accent/15 border border-accent/30 text-accent hover:bg-accent/25 shrink-0">Add member</button>
    </div>
    {% endif %}
  </div>
  <p id="ws-manage-error" class="hidden text-xs text-red-400 mb-3"></p>

  {% if managed.can_manage %}
  <div class="mb-5 p-4 rounded-xl border border-gray-800 bg-surface/50">
    <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">Workspace details</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
      <div>
        <label class="block text-xs text-gray-500 mb-1" for="ws-edit-name">Name</label>
        <input id="ws-edit-name" type="text" maxlength="200" value="{{ managed.workspace.project.name }}" class="w-full px-3 py-2 rounded-lg text-sm bg-surface border border-gray-700 text-gray-200 focus:outline-none focus:border-accent/50">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1" for="ws-edit-desc">Description</label>
        <input id="ws-edit-desc" type="text" maxlength="500" value="{{ managed.workspace.project.description }}" placeholder="No description" class="w-full px-3 py-2 rounded-lg text-sm bg-surface border border-gray-700 text-gray-200 focus:outline-none focus:border-accent/50">
      </div>
    </div>
    <div class="mt-3">
      <button type="button" id="ws-save-details" class="px-3 py-1.5 rounded-lg text-xs bg-accent/15 border border-accent/30 text-accent hover:bg-accent/25">Save changes</button>
    </div>
  </div>
  {% endif %}

  <div class="overflow-x-auto">
  <table class="w-full text-sm">
    <thead>
      <tr class="text-left text-xs text-gray-500 uppercase tracking-wide border-b border-gray-800">
        <th class="py-2 pr-4">User</th>
        <th class="py-2 pr-4">Email</th>
        <th class="py-2 pr-4">Role</th>
        {% if managed.can_manage %}<th class="py-2 text-right">Actions</th>{% endif %}
      </tr>
    </thead>
    <tbody>
      {% for m in managed.memberships %}
      <tr class="border-b border-gray-800/60" data-member-user-id="{{ m.user_id }}">
        <td class="py-2.5 pr-4 text-gray-200">
          {{ m.user.username }}
          {% if m.user.is_superuser %}<span class="text-[10px] bg-gray-700 text-gray-300 rounded px-1 ml-1">System</span>{% endif %}
        </td>
        <td class="py-2.5 pr-4 text-gray-500">{{ m.user.email|default:"—" }}</td>
        <td class="py-2.5 pr-4">
          {% if managed.can_manage and not m.user.is_superuser %}
          <select data-role-select="{{ m.user_id }}" class="ws-role-select px-2 py-1 rounded-lg text-xs bg-surface border border-gray-700 text-gray-300 focus:outline-none focus:border-accent/50">
            <option value="viewer" {% if m.role == "viewer" %}selected{% endif %}>Viewer</option>
            <option value="auditor" {% if m.role == "auditor" %}selected{% endif %}>Auditor</option>
            <option value="admin" {% if m.role == "admin" %}selected{% endif %}>Admin</option>
          </select>
          {% else %}
          <span class="text-xs text-gray-400 capitalize">{{ m.get_role_display }}</span>
          {% endif %}
        </td>
        {% if managed.can_manage %}
        <td class="py-2.5 text-right">
          {% if not m.user.is_superuser %}
          <button type="button" data-remove-member="{{ m.user_id }}" class="ws-remove text-xs text-gray-500 hover:text-red-400">Remove</button>
          {% endif %}
        </td>
        {% endif %}
      </tr>
      {% empty %}
      <tr><td colspan="4" class="py-4 text-center text-xs text-gray-500">No members yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
  </div>

  {% if managed.can_manage %}
  <div class="mt-5 pt-4 border-t border-gray-800">
    <h3 class="text-xs font-semibold text-red-400/80 uppercase tracking-wide mb-2">Danger zone</h3>
    <div class="flex items-center gap-3">
      <button type="button" id="ws-delete-btn" class="px-3 py-1.5 rounded-lg text-xs bg-red-900/30 border border-red-800 text-red-300 hover:bg-red-900/50">Delete workspace</button>
      <p class="text-xs text-gray-500">Only possible while the workspace is empty.</p>
    </div>
  </div>
  {% endif %}
</div>
{% endif %}

<!-- New workspace modal -->
{% if can_create %}
<div id="ws-new-modal" class="hidden fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
  <div class="bg-surface-raised border border-gray-700 rounded-xl p-6 w-full max-w-md">
    <h2 class="text-sm font-semibold text-gray-100 mb-4">New workspace</h2>
    <label class="block text-xs text-gray-400 mb-1" for="ws-new-name">Name *</label>
    <input id="ws-new-name" type="text" maxlength="200" class="w-full px-3 py-2 rounded-lg text-sm bg-surface border border-gray-700 text-gray-200 focus:outline-none focus:border-accent/50 mb-3">
    <label class="block text-xs text-gray-400 mb-1" for="ws-new-desc">Description</label>
    <textarea id="ws-new-desc" rows="3" class="w-full px-3 py-2 rounded-lg text-sm bg-surface border border-gray-700 text-gray-200 focus:outline-none focus:border-accent/50 mb-4"></textarea>
    <p id="ws-new-error" class="hidden text-xs text-red-400 mb-3"></p>
    <div class="flex justify-end gap-2">
      <button type="button" id="ws-new-cancel" class="px-4 py-2 rounded-lg text-xs bg-surface-overlay border border-gray-700 text-gray-300">Cancel</button>
      <button type="button" id="ws-new-save" class="px-4 py-2 rounded-lg text-xs bg-accent/15 border border-accent/30 text-accent hover:bg-accent/25">Create</button>
    </div>
  </div>
</div>
{% endif %}

<script>
(function() {
  function csrfToken() {
    const m = document.cookie.match(/(?:^|;\s*)csrftoken=([^;]+)/);
    return m ? m[1] : '';
  }
  async function api(url, options) {
    const resp = await fetch(url, Object.assign({headers: {'Content-Type': 'application/json', 'X-CSRFToken': csrfToken()}}, options));
    let data = null;
    try { data = await resp.json(); } catch (e) { /* 204 */ }
    if (!resp.ok) {
      const msg = (data && data.error && data.error.message) || ('Request failed (' + resp.status + ')');
      throw new Error(msg);
    }
    return data;
  }

  // Switch buttons on cards
  document.querySelectorAll('.ws-switch').forEach((btn) => {
    btn.addEventListener('click', async () => {
      try {
        await api('/api/projects/switch/', {method: 'POST', body: JSON.stringify({project_id: Number(btn.dataset.switch)})});
        window.location.reload();
      } catch (err) { alert(err.message); }
    });
  });

  // New workspace modal
  const modal = document.getElementById('ws-new-modal');
  const openModal = () => { if (modal) { modal.classList.remove('hidden'); document.getElementById('ws-new-name').focus(); } };
  const closeModal = () => { if (modal) modal.classList.add('hidden'); };
  const newBtn = document.getElementById('ws-new-btn');
  if (newBtn) newBtn.addEventListener('click', openModal);
  if (modal) {
    document.getElementById('ws-new-cancel').addEventListener('click', closeModal);
    modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
    document.getElementById('ws-new-save').addEventListener('click', async () => {
      const name = document.getElementById('ws-new-name').value.trim();
      const description = document.getElementById('ws-new-desc').value.trim();
      const errEl = document.getElementById('ws-new-error');
      errEl.classList.add('hidden');
      try {
        await api('/api/projects/create/', {method: 'POST', body: JSON.stringify({name, description})});
        window.location.href = '/workspaces/';
      } catch (err) { errEl.textContent = err.message; errEl.classList.remove('hidden'); }
    });
  }
  if (new URLSearchParams(window.location.search).get('new') === '1' && modal) openModal();

  // Team management
  const manageError = document.getElementById('ws-manage-error');
  function showManageError(msg) {
    if (!manageError) return;
    manageError.textContent = msg;
    manageError.classList.remove('hidden');
    setTimeout(() => manageError.classList.add('hidden'), 6000);
  }

  const managePanel = document.querySelector('[data-ws-id]');
  const wsId = managePanel ? Number(managePanel.dataset.wsId) : null;
  const wsName = managePanel ? managePanel.dataset.wsName : '';

  const addBtn = document.getElementById('ws-add-btn');
  if (addBtn) {
    addBtn.addEventListener('click', async () => {
      const username = document.getElementById('ws-add-username').value.trim();
      const role = document.getElementById('ws-add-role').value;
      if (!username) { showManageError('Enter a username.'); return; }
      try {
        await api(`/api/projects/${wsId}/members/add/`, {method: 'POST', body: JSON.stringify({username, role})});
        window.location.reload();
      } catch (err) { showManageError(err.message); }
    });
  }

  document.querySelectorAll('.ws-role-select').forEach((sel) => {
    sel.addEventListener('change', async () => {
      const userId = sel.dataset.roleSelect;
      try {
        await api(`/api/projects/${wsId}/members/${userId}/`, {method: 'PUT', body: JSON.stringify({role: sel.value})});
        window.location.reload();
      } catch (err) { showManageError(err.message); window.location.reload(); }
    });
  });

  document.querySelectorAll('.ws-remove').forEach((btn) => {
    btn.addEventListener('click', async () => {
      if (!confirm('Remove this member from the workspace?')) return;
      const userId = btn.dataset.removeMember;
      try {
        await api(`/api/projects/${wsId}/members/${userId}/`, {method: 'DELETE'});
        window.location.reload();
      } catch (err) { showManageError(err.message); }
    });
  });

  // Rename / re-describe workspace
  const saveDetailsBtn = document.getElementById('ws-save-details');
  if (saveDetailsBtn) {
    saveDetailsBtn.addEventListener('click', async () => {
      const name = document.getElementById('ws-edit-name').value.trim();
      const description = document.getElementById('ws-edit-desc').value.trim();
      if (!name) { showManageError('Workspace name cannot be empty.'); return; }
      try {
        await api(`/api/projects/${wsId}/`, {method: 'PATCH', body: JSON.stringify({name, description})});
        window.location.reload();
      } catch (err) { showManageError(err.message); }
    });
  }

  const deleteBtn = document.getElementById('ws-delete-btn');
  if (deleteBtn) {
    deleteBtn.addEventListener('click', async () => {
      const typed = prompt(`Type the workspace name "${wsName}" to confirm deletion:`);
      if (typed === null) return;
      if (typed !== wsName) { showManageError('Name did not match — nothing deleted.'); return; }
      try {
        await api(`/api/projects/${wsId}/`, {method: 'DELETE'});
        window.location.href = '/workspaces/';
      } catch (err) { showManageError(err.message); }
    });
  }
})();
</script>
{% endblock %}