{% extends "base.html" %}

{% block title %}Settings – {{ project.name }}{% endblock %}

{% block content %}
<!-- Consistent Project Navigation -->
<div class="project-sub-nav">
  <a href="/ui/projects/{{ project.id }}/board" class="sub-nav-pill">Board</a>
  <a href="/ui/projects/{{ project.id }}/workbench" class="sub-nav-pill">Activity</a>
  <a href="/ui/projects/{{ project.id }}/git" class="sub-nav-pill">Changes</a>
  <a href="/ui/projects/{{ project.id }}/settings" class="sub-nav-pill active" aria-current="page">Settings</a>
</div>

<div class="d-flex align-items-center justify-content-between mb-4">
  <div>
    <h2 style="margin:0;font-size:1.5rem;font-weight:800;">{{ project.name }} — Settings</h2>
    <p class="text-secondary" style="font-size:0.9rem;margin:0.25rem 0 0 0;">Project workspace folder, agent role assignments, and project management</p>
  </div>
</div>

<!-- Section 1: General & Folder -->
<div class="card glass-card mb-4" style="padding: 1.5rem;">
  <h3 style="margin:0 0 1rem 0; font-size:1.2rem; font-weight:700;">Project Details</h3>
  <form id="settings-project-form" onsubmit="event.preventDefault(); saveProjectSettings();">
    <div class="form-group mb-3">
      <label for="settings-name" style="font-weight:600; font-size:0.85rem; display:block; margin-bottom:0.4rem;">Project Name</label>
      <input type="text" id="settings-name" class="form-input" style="width:100%; max-width:500px;" value="{{ project.name }}" required>
    </div>
    <div class="form-group mb-3">
      <label for="settings-desc" style="font-weight:600; font-size:0.85rem; display:block; margin-bottom:0.4rem;">Description</label>
      <textarea id="settings-desc" class="form-input" rows="3" style="width:100%; max-width:500px;">{{ project.description or '' }}</textarea>
    </div>
    <div class="form-group mb-3">
      <label for="settings-path" style="font-weight:600; font-size:0.85rem; display:block; margin-bottom:0.4rem;">Workspace Folder</label>
      <div style="display:flex; gap:0.5rem; max-width:500px;">
        <input type="text" id="settings-path" class="form-input" style="flex:1;" value="{{ project.path or '' }}" placeholder="No folder selected">
        <button type="button" class="btn btn-secondary" onclick="openFolderPicker('settings-path')">Browse</button>
      </div>
      <small class="text-secondary d-block mt-1">Directory where agent CLIs and Git worktrees run.</small>
    </div>
    <div class="d-flex gap-2 align-items-center">
      <button type="submit" class="btn btn-primary" id="save-settings-btn">Save changes</button>
      <span id="settings-feedback" class="text-success" style="display:none; font-size:0.85rem;">Saved!</span>
    </div>
  </form>
</div>

<!-- Section 2: Team Roles for Project -->
<div class="card glass-card mb-4" style="padding: 1.5rem;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h3 style="margin:0; font-size:1.2rem; font-weight:700;">Agents &amp; Roles</h3>
      <p class="text-secondary" style="font-size:0.85rem; margin:0.25rem 0 0 0;">Configure CLI agents and models for roles (worker, reviewer, planner, security).</p>
    </div>
  </div>
  <div id="team-list" class="team-list">
    <p class="text-secondary">Loading role assignments...</p>
  </div>
</div>

<!-- Section 3: Danger Zone -->
<div class="card glass-card" style="padding: 1.5rem; border-color: rgba(var(--danger-rgb, 239, 68, 68), 0.3);">
  <h3 style="margin:0 0 0.5rem 0; font-size:1.1rem; font-weight:700; color:var(--danger);">Danger Zone</h3>
  <p class="text-secondary" style="font-size:0.85rem; margin-bottom:1rem;">Deleting a project permanently deletes its board stages, task history, and sessions.</p>
  <button class="btn btn-danger btn-sm" onclick="deleteThisProject()">Delete project</button>
</div>

<!-- Folder Picker Modal -->
<div id="folder-picker-modal" class="project-modal-overlay" style="display:none;" role="dialog" aria-modal="true"
    aria-hidden="true" aria-labelledby="settings-folder-modal-title" onclick="if(event.target===this)closeFolderPicker()">
    <div class="project-modal-card folder-modal">
        <div class="project-modal-header">
            <div>
                <h3 class="project-modal-title" id="settings-folder-modal-title">Select Folder</h3>
                <p class="project-modal-subtitle">Browse local directories and choose the project workspace.</p>
            </div>
            <button class="btn-icon" aria-label="Close folder picker" onclick="closeFolderPicker()">&times;</button>
        </div>
        <div class="folder-picker-body">
            <div class="folder-toolbar">
                <input id="folder-picker-current" class="project-input" type="text" aria-label="Current folder">
                <button type="button" class="btn" onclick="loadFolderFromInput()">Go</button>
            </div>
            <div class="folder-shortcuts">
                <button type="button" class="btn btn-sm" onclick="loadFolder(folderPickerParent)">Up</button>
                <button type="button" class="btn btn-sm" onclick="loadFolder(folderPickerHome)">Home</button>
                <button type="button" class="btn btn-sm btn-primary" onclick="selectCurrentFolder()">Use This Folder</button>
            </div>
            <div id="folder-picker-list" class="folder-list">
                <p class="folder-empty">Loading...</p>
            </div>
        </div>
    </div>
</div>

<div id="toast" class="toast" style="display:none;" role="status" aria-live="polite" aria-atomic="true"></div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/role-settings.js"></script>
<script>
  var PROJECT_ID = {{ project.id }};
  var CURRENT_ENTITY_ID = {{ (current_entity.id if current_entity else 'null') }};
  var folderPickerTarget = null;
  var folderPickerCurrent = '';
  var folderPickerParent = null;
  var folderPickerHome = '';

  document.addEventListener('DOMContentLoaded', function() {
    apiFetch('/ui/api/roles', {}, 'Failed to load roles').then(function(data) {
      if (window.renderRoleCliPanel) {
        window.renderRoleCliPanel(data);
      }
    }).catch(function(err) {
      var list = document.getElementById('team-list');
      if (list) list.innerHTML = '<p class="text-danger">Failed to load roles: ' + err.message + '</p>';
    });
  });

  async function saveProjectSettings() {
    var btn = document.getElementById('save-settings-btn');
    var feedback = document.getElementById('settings-feedback');
    var name = document.getElementById('settings-name').value;
    var desc = document.getElementById('settings-desc').value;
    var path = document.getElementById('settings-path').value;
    btn.disabled = true;
    try {
      await apiFetch('/ui/projects/' + PROJECT_ID + '/edit', {
        method: 'PATCH',
        headers: {'Content-Type': 'application/json', 'x-entity-id': CURRENT_ENTITY_ID},
        body: JSON.stringify({name: name, description: desc, path: path})
      }, 'Failed to save settings');
      if (feedback) {
        feedback.style.display = 'inline';
        setTimeout(function() { feedback.style.display = 'none'; }, 3000);
      }
    } catch (err) {
      alert('Error saving settings: ' + err.message);
    } finally {
      btn.disabled = false;
    }
  }

  function deleteThisProject() {
    if (!confirm('Are you sure you want to delete this project? This action cannot be undone.')) return;
    apiFetch('/ui/projects/' + PROJECT_ID, {
      method: 'DELETE',
      headers: {'x-entity-id': CURRENT_ENTITY_ID}
    }, 'Failed to delete project').then(function() {
      window.location.href = '/ui/projects';
    }).catch(function(err) {
      alert('Error deleting project: ' + err.message);
    });
  }

  function openFolderPicker(targetInputId) {
    folderPickerTarget = document.getElementById(targetInputId);
    var initial = (folderPickerTarget && folderPickerTarget.value.trim()) || '';
    openModal('folder-picker-modal');
    loadFolder(initial);
  }
  function closeFolderPicker() {
    closeModal('folder-picker-modal');
  }
  function selectCurrentFolder() {
    if (folderPickerTarget && folderPickerCurrent) {
      folderPickerTarget.value = folderPickerCurrent;
    }
    closeFolderPicker();
  }
  function loadFolderFromInput() {
    var val = document.getElementById('folder-picker-current').value.trim();
    if (val) loadFolder(val);
  }
  var folderRequestSequence = 0;
  function loadFolder(path) {
    var requestId = ++folderRequestSequence;
    var input = document.getElementById('folder-picker-current');
    var inputAtRequest = input.value;
    var query = path ? '?path=' + encodeURIComponent(path) : '';
    apiFetch('/ui/api/folders' + query, {}, 'Failed to load folders').then(function(data) {
      if (requestId !== folderRequestSequence || input.value !== inputAtRequest) return;
      folderPickerCurrent = data.path;
      folderPickerParent = data.parent;
      folderPickerHome = data.home;
      document.getElementById('folder-picker-current').value = data.path;
      var list = document.getElementById('folder-picker-list');
      list.replaceChildren();
      if (!data.folders || !data.folders.length) {
        var empty = document.createElement('p');
        empty.className = 'folder-empty';
        empty.textContent = 'No subdirectories found.';
        list.append(empty);
        return;
      }
      data.folders.forEach(function(folder) {
        var row = document.createElement('button');
        row.type = 'button';
        row.className = 'folder-row';
        var icon = document.createElement('span');
        icon.className = 'folder-icon';
        icon.textContent = '📁';
        var details = document.createElement('div');
        var name = document.createElement('div');
        name.className = 'folder-name';
        name.textContent = folder.name;
        var folderPath = document.createElement('div');
        folderPath.className = 'folder-path';
        folderPath.textContent = folder.path;
        details.append(name, folderPath);
        row.append(icon, details);
        row.addEventListener('click', function() { loadFolder(folder.path); });
        list.append(row);
      });
    }).catch(function(err) {
      if (requestId !== folderRequestSequence) return;
      var list = document.getElementById('folder-picker-list');
      list.replaceChildren();
      var error = document.createElement('p');
      error.className = 'text-danger p-3';
      error.textContent = 'Error: ' + err.message;
      list.append(error);
    });
  }
</script>
{% endblock %}