// ============================================================
// Projects Module
// ============================================================

let projectsState = { page: 1, search: '', status: '', priority: '' };

async function renderProjects(params = {}) {
  if (params.id) return renderProjectDetail(params.id);

  const content = document.getElementById('page-content');
  content.innerHTML = `
    <div class="section-header">
      <div>
        <h3>Projects</h3>
        <p class="text-muted text-sm">Development, testing, and bug tracking</p>
      </div>
      ${Auth.can('projects','create') ? `<button class="btn btn-primary" onclick="openAddProjectModal()">
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        New Project
      </button>` : ''}
    </div>

    <div class="filter-bar">
      <div class="search-wrap flex-1">
        <svg class="search-icon" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <input type="text" class="form-control" placeholder="Search projects..." oninput="projSearchDebounced(this.value)">
      </div>
      <select class="form-control" style="width:150px" onchange="projectsState.status=this.value; loadProjects(1)">
        <option value="">All Status</option>
        <option value="planning">Planning</option>
        <option value="active">Active</option>
        <option value="on_hold">On Hold</option>
        <option value="completed">Completed</option>
      </select>
      <select class="form-control" style="width:150px" onchange="projectsState.priority=this.value; loadProjects(1)">
        <option value="">All Priority</option>
        <option value="low">Low</option>
        <option value="medium">Medium</option>
        <option value="high">High</option>
        <option value="critical">Critical</option>
      </select>
    </div>

    <div id="projects-grid"><div class="loading-overlay"><div class="spinner"></div></div></div>
    <div id="projects-pagination"></div>
  `;
  await loadProjects(1);
}

const projSearchDebounced = debounce(val => { projectsState.search = val; loadProjects(1); }, 350);

async function loadProjects(page = 1) {
  projectsState.page = page;
  const grid = document.getElementById('projects-grid');
  if (!grid) return;

  const res = await API.post('projects/list', {
    page, limit: 12,
    search: projectsState.search,
    status: projectsState.status,
    priority: projectsState.priority,
  });

  if (!res.success) { grid.innerHTML = `<div class="empty-state"><div class="empty-title">${res.message}</div></div>`; return; }

  const projects = res.data.projects;
  if (!projects.length) {
    grid.innerHTML = `<div class="empty-state"><div class="empty-icon"><svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/></svg></div><div class="empty-title">No projects found</div></div>`;
    return;
  }

  grid.innerHTML = `<div class="grid-3">
    ${projects.map(p => `
      <div class="card" style="cursor:pointer;transition:all .2s" onmouseenter="this.style.transform='translateY(-2px)';this.style.boxShadow='var(--shadow)'" onmouseleave="this.style.transform='';this.style.boxShadow=''" onclick="Router.navigate('projects', {id:${p.id}})">
        <div class="card-body">
          <div class="d-flex justify-between align-center mb-3">
            ${Fmt.statusBadge(p.status)}
            ${Fmt.priorityBadge(p.priority)}
          </div>
          <h4 class="mb-1">${p.name}</h4>
          <p class="text-sm text-muted mb-3">${p.client_name || 'Internal Project'}</p>
          <div class="d-flex gap-3 text-xs text-muted">
            <span title="Open tasks"><svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="display:inline"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg> ${p.open_todos || 0} tasks</span>
            <span title="Open bugs" style="color:${p.open_bugs > 0 ? 'var(--danger)' : 'inherit'}"><svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="display:inline"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg> ${p.open_bugs || 0} bugs</span>
            <span title="Team members"><svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="display:inline"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> ${p.member_count || 0}</span>
          </div>
          ${p.target_date ? `<div class="mt-3 text-xs text-muted">🗓 Target: ${Fmt.date(p.target_date)}</div>` : ''}
        </div>
      </div>
    `).join('')}
  </div>`;

  renderPagination('projects-pagination', res.data.pagination, `p => loadProjects(p)`);
}

function openAddProjectModal() {
  Modal.open({
    id: 'add-project',
    title: 'New Project',
    size: 'modal-lg',
    body: `
      <form id="add-project-form">
        <div class="form-group"><label class="form-label">Project Name <span class="required">*</span></label>
          <input name="name" class="form-control" required placeholder="e.g. Client Portal v2.0">
        </div>
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">Client</label>
            <select name="client_id" class="form-control" id="proj-client-select">
              <option value="">Internal / No Client</option>
            </select>
          </div>
          <div class="form-group"><label class="form-label">Type</label>
            <select name="project_type" class="form-control">
              <option value="software">Software</option><option value="hardware">Hardware</option><option value="both">Both</option>
            </select>
          </div>
        </div>
          <div class="form-group"><label class="form-label">Priority</label>
            <select name="priority" class="form-control">
              <option value="low">Low</option><option value="medium" selected>Medium</option><option value="high">High</option><option value="critical">Critical</option>
            </select>
          </div>
        </div>
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">Start Date</label>
            <input type="date" name="start_date" class="form-control" value="${new Date().toISOString().split('T')[0]}">
          </div>
          <div class="form-group"><label class="form-label">Target Date</label>
            <input type="date" name="target_date" class="form-control">
          </div>
        </div>
        <div class="form-group"><label class="form-label">Budget (R)</label>
          <input type="number" name="budget" class="form-control" step="0.01" min="0" placeholder="0.00">
        </div>
        <div class="form-group"><label class="form-label">Description</label>
          <textarea name="description" class="form-control" rows="4" placeholder="Brief overview of the project scope..."></textarea>
        </div>
      </form>
    `,
    footer: `
      <button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitAddProject()"><span class="btn-text">Create Project</span></button>
    `
  });
}

async function submitAddProject() {
  const btn = document.querySelector('#modal-add-project .btn-primary');
  if (btn) btn.classList.add('loading');
  const data = getFormData('add-project-form');
  const res = await API.post('projects/create', data);
  if (btn) btn.classList.remove('loading');
  if (res.success) {
    Toast.show('Project created!', 'success');
    Modal.close();
    Router.navigate('projects', { id: res.data.id });
  } else Toast.show(res.message, 'error');
}

async function renderProjectDetail(id) {
  const content = document.getElementById('page-content');
  const res = await API.post('projects/get', { id });
  if (!res.success) { Toast.show(res.message, 'error'); return; }
  const p = res.data.project;

  content.innerHTML = `
    <div class="section-header">
      <div class="d-flex align-center gap-3">
        <button class="btn btn-ghost btn-sm" onclick="Router.navigate('projects')">
          <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg> Back
        </button>
        <div>
          <h3>${p.name}</h3>
          <div class="text-sm text-muted">${p.client_name || 'Internal'} · ${Fmt.capitalize(p.project_type)} · Managed by ${p.manager_name || '—'}</div>
        </div>
      </div>
      <div class="d-flex gap-2 align-center">
        ${Fmt.statusBadge(p.status)}
        ${Fmt.priorityBadge(p.priority)}
        ${Auth.can('projects','create') ? `<button class="btn btn-ghost btn-sm" onclick="openAddSectionModal(${p.id})">+ Section</button>` : ''}
      </div>
    </div>

    <div class="tabs-nav mb-4" id="proj-tabs">
      <button class="tab-btn active" data-tab="kanban" onclick="switchProjectTab('kanban', this)">Board</button>
      <button class="tab-btn" data-tab="bugs" onclick="switchProjectTab('bugs', this)">
        Bugs <span class="tab-count">${p.open_bugs?.length || 0}</span>
      </button>
      <button class="tab-btn" data-tab="tests" onclick="switchProjectTab('tests', this)">
        Test Requests <span class="tab-count">${p.test_requests?.length || 0}</span>
      </button>
      <button class="tab-btn" data-tab="ftp" onclick="switchProjectTab('ftp', this);loadProjectFtp(${p.id})">FTP / Servers</button>
      <button class="tab-btn" data-tab="team" onclick="switchProjectTab('team', this);loadProjectTeam(${p.id})">Team</button>
      <button class="tab-btn" data-tab="activity" onclick="switchProjectTab('activity', this)">Activity</button>
    </div>

    <!-- KANBAN BOARD -->
    <div id="proj-tab-kanban">
      ${p.sections?.length ? p.sections.map(section => `
        <div class="mb-6">
          <div class="d-flex align-center justify-between mb-3">
            <h4 style="font-size:.9375rem">${section.name}</h4>
            ${Auth.can('projects','create') ? `<button class="btn btn-ghost btn-sm" onclick="openAddTodoModal(${section.id}, ${p.id})">+ Task</button>` : ''}
          </div>
          <div class="kanban-board">
            ${renderKanbanCol('todo', 'To Do', section.todos, p.id)}
            ${renderKanbanCol('in_progress', 'In Progress', section.todos, p.id)}
            ${renderKanbanCol('done', 'Done', section.todos, p.id)}
            ${renderKanbanCol('blocked', 'Blocked', section.todos, p.id)}
          </div>
        </div>
      `).join('') : `
        <div class="empty-state">
          <div class="empty-icon"><svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/></svg></div>
          <div class="empty-title">No sections yet</div>
          <p>Add a section to start organising tasks.</p>
          ${Auth.can('projects','create') ? `<button class="btn btn-primary mt-3" onclick="openAddSectionModal(${p.id})">+ Add First Section</button>` : ''}
        </div>
      `}
    </div>

    <!-- BUGS -->
    <div id="proj-tab-bugs" style="display:none">
      <div class="section-header mb-4">
        <h4>Open Bugs & Issues</h4>
      </div>
      ${p.open_bugs?.length ? `
        <div class="card">
          <div class="table-wrap" style="border:none">
            <table>
              <thead><tr><th>Title</th><th>Severity</th><th>Status</th><th>Reported By</th><th>Assigned To</th><th>Created</th></tr></thead>
              <tbody>
                ${p.open_bugs.map(b => `
                  <tr>
                    <td><div class="td-bold">${b.title}</div><div class="text-xs text-muted">${b.description?.slice(0,80)}...</div></td>
                    <td>${Fmt.severityBadge(b.severity)}</td>
                    <td>${Fmt.statusBadge(b.status)}</td>
                    <td>${b.reporter_name}</td>
                    <td>${b.assigned_name || '—'}</td>
                    <td class="text-xs text-muted">${Fmt.ago(b.created_at)}</td>
                  </tr>
                `).join('')}
              </tbody>
            </table>
          </div>
        </div>
      ` : `<div class="empty-state"><div class="empty-icon">✅</div><div class="empty-title">No open bugs</div><p>All clear!</p></div>`}
    </div>

    <!-- TEST REQUESTS -->
    <div id="proj-tab-tests" style="display:none">
      <div class="section-header mb-4">
        <h4>Test Requests</h4>
        ${Auth.can('projects','create') ? `<button class="btn btn-primary btn-sm" onclick="openTestRequestModal(${p.id}, ${JSON.stringify(p.sections || []).replace(/"/g, '&quot;')})">+ New Test Request</button>` : ''}
      </div>
      ${p.test_requests?.length ? `
        <div class="card">
          <div class="table-wrap" style="border:none">
            <table>
              <thead><tr><th>Title</th><th>Status</th><th>Requested By</th><th>Tester</th><th>Created</th></tr></thead>
              <tbody>
                ${p.test_requests.map(t => `
                  <tr>
                    <td class="td-bold">${t.title}</td>
                    <td>${Fmt.statusBadge(t.status)}</td>
                    <td>${t.requested_by_name}</td>
                    <td>${t.tester_name || '—'}</td>
                    <td class="text-xs text-muted">${Fmt.ago(t.created_at)}</td>
                  </tr>
                `).join('')}
              </tbody>
            </table>
          </div>
        </div>
      ` : `<div class="empty-state"><div class="empty-icon"><svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></div><div class="empty-title">No test requests yet</div></div>`}
    </div>

    <!-- ACTIVITY -->
    <div id="proj-tab-activity" style="display:none">
      <div class="card">
        <div class="card-header"><h4>Project Activity</h4></div>
        <div class="card-body">
          ${p.activity?.length ? `
            <div class="timeline">
              ${p.activity.map(a => `
                <div class="timeline-item">
                  <div class="timeline-dot">${avatarHTML(a.user_name)}</div>
                  <div class="timeline-body">
                    <div><strong>${a.user_name}</strong> ${Fmt.capitalize(a.action.replace(/_/g,' '))}</div>
                    <div class="timeline-meta">${Fmt.ago(a.created_at)}</div>
                  </div>
                </div>
              `).join('')}
            </div>
          ` : `<div class="empty-state" style="padding:1rem"><div class="empty-title">No activity yet</div></div>`}
        </div>
      </div>
    </div>

    <!-- FTP / SERVERS -->
    <div id="proj-tab-ftp" style="display:none">
      <div class="section-header mb-3">
        <h4>FTP / Server Connections</h4>
        <button class="btn btn-primary btn-sm" onclick="openAddFtpModal(${p.id})">+ Add Connection</button>
      </div>
      <div style="background:rgba(240,165,0,.08);border:1px solid rgba(240,165,0,.25);border-radius:var(--radius-sm);padding:.625rem .875rem;font-size:.78rem;color:#92400e;margin-bottom:1rem">
        🔒 Credentials are AES-256 encrypted. These will be used in the future online code editor.
      </div>
      <div id="proj-ftp-list"><div class="loading-overlay"><div class="spinner"></div></div></div>
    </div>

    <!-- TEAM -->
    <div id="proj-tab-team" style="display:none">
      <div class="section-header mb-3">
        <h4>Project Team</h4>
        <button class="btn btn-primary btn-sm" onclick="openAddMemberModal(${p.id})">+ Add Member</button>
      </div>
      <div id="proj-team-list"><div class="loading-overlay"><div class="spinner"></div></div></div>
    </div>
  `;
}

function renderKanbanCol(status, label, todos, projectId) {
  const filtered = todos?.filter(t => t.status === status) || [];
  const colColors = { todo: 'var(--info)', in_progress: 'var(--warning)', done: 'var(--success)', blocked: 'var(--danger)' };
  return `
    <div class="kanban-col">
      <div class="kanban-col-header">
        <span class="kanban-col-label" style="color:${colColors[status]}">${label}</span>
        <span class="kanban-col-count">${filtered.length}</span>
      </div>
      <div class="kanban-col-body">
        ${filtered.map(t => `
          <div class="kanban-card" onclick="openTodoModal(${t.id}, ${projectId})">
            <div class="d-flex justify-between align-center mb-2">
              ${Fmt.priorityBadge(t.priority)}
              ${t.assigned_name ? `<span class="text-xs text-muted">${t.assigned_name.split(' ')[0]}</span>` : ''}
            </div>
            <div class="font-medium text-sm mb-1">${t.title}</div>
            ${t.due_date ? `<div class="text-xs text-muted mt-2">📅 ${Fmt.date(t.due_date)}</div>` : ''}
            ${t.estimated_hours ? `<div class="text-xs text-muted">⏱ ${t.estimated_hours}h est.</div>` : ''}
          </div>
        `).join('') || `<div style="padding:.5rem;text-align:center;color:var(--text-light);font-size:.75rem">No tasks</div>`}
      </div>
    </div>
  `;
}

function switchProjectTab(tab, btn) {
  ['kanban','bugs','tests','activity'].forEach(t => {
    const el = document.getElementById(`proj-tab-${t}`);
    if (el) el.style.display = t === tab ? '' : 'none';
  });
  document.querySelectorAll('#proj-tabs .tab-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
}

function openAddSectionModal(projectId) {
  Modal.open({
    id: 'add-section',
    title: 'Add Section',
    body: `
      <form id="add-section-form">
        <input type="hidden" name="project_id" value="${projectId}">
        <div class="form-group"><label class="form-label">Section Name <span class="required">*</span></label>
          <input name="name" class="form-control" required placeholder="e.g. Mobile App, Backend API, Dashboard">
        </div>
        <div class="form-group"><label class="form-label">Description</label>
          <textarea name="description" class="form-control" rows="2"></textarea>
        </div>
      </form>
    `,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
    <button class="btn btn-primary" onclick="submitAddSection(${projectId})"><span class="btn-text">Add Section</span></button>`
  });
}

async function submitAddSection(projectId) {
  const data = getFormData('add-section-form');
  const res = await API.post('projects/section_create', data);
  if (res.success) { Toast.show('Section added.', 'success'); Modal.close(); renderProjectDetail(projectId); }
  else Toast.show(res.message, 'error');
}

function openAddTodoModal(sectionId, projectId) {
  Modal.open({
    id: 'add-todo',
    title: 'Add Task',
    body: `
      <form id="add-todo-form">
        <input type="hidden" name="section_id" value="${sectionId}">
        <input type="hidden" name="project_id" value="${projectId}">
        <div class="form-group"><label class="form-label">Task Title <span class="required">*</span></label>
          <input name="title" class="form-control" required placeholder="Describe the task...">
        </div>
        <div class="form-group"><label class="form-label">Description</label>
          <textarea name="description" class="form-control" rows="3"></textarea>
        </div>
        <div class="form-row form-row-3">
          <div class="form-group"><label class="form-label">Priority</label>
            <select name="priority" class="form-control">
              <option value="low">Low</option><option value="medium" selected>Medium</option>
              <option value="high">High</option><option value="critical">Critical</option>
            </select>
          </div>
          <div class="form-group"><label class="form-label">Estimated Hours</label>
            <input type="number" name="estimated_hours" class="form-control" step="0.5" min="0" placeholder="0.0">
          </div>
          <div class="form-group"><label class="form-label">Due Date</label>
            <input type="date" name="due_date" class="form-control">
          </div>
        </div>
      </form>
    `,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
    <button class="btn btn-primary" onclick="submitAddTodo(${projectId})"><span class="btn-text">Add Task</span></button>`
  });
}

async function submitAddTodo(projectId) {
  const data = getFormData('add-todo-form');
  const res = await API.post('projects/todo_create', data);
  if (res.success) { Toast.show('Task added.', 'success'); Modal.close(); renderProjectDetail(projectId); }
  else Toast.show(res.message, 'error');
}

async function openTodoModal(todoId, projectId) {
  // Quick status update modal
  Modal.open({
    id: 'update-todo',
    title: 'Update Task',
    body: `
      <form id="update-todo-form">
        <input type="hidden" name="id" value="${todoId}">
        <div class="form-group"><label class="form-label">Status</label>
          <select name="status" class="form-control">
            <option value="todo">To Do</option>
            <option value="in_progress">In Progress</option>
            <option value="done">Done</option>
            <option value="blocked">Blocked</option>
          </select>
        </div>
        <div class="form-group"><label class="form-label">Actual Hours</label>
          <input type="number" name="actual_hours" class="form-control" step="0.5" min="0" placeholder="0.0">
        </div>
      </form>
    `,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
    <button class="btn btn-primary" onclick="submitTodoUpdate(${projectId})"><span class="btn-text">Update</span></button>`
  });
}

async function submitTodoUpdate(projectId) {
  const data = getFormData('update-todo-form');
  const res = await API.post('projects/todo_update', data);
  if (res.success) { Toast.show('Task updated.', 'success'); Modal.close(); renderProjectDetail(projectId); }
  else Toast.show(res.message, 'error');
}

function openTestRequestModal(projectId, sections) {
  const sectionOpts = sections.map(s => `<option value="${s.id}">${s.name}</option>`).join('');
  Modal.open({
    id: 'add-test-request',
    title: 'New Test Request',
    body: `
      <form id="test-request-form">
        <input type="hidden" name="project_id" value="${projectId}">
        <div class="form-group"><label class="form-label">Title <span class="required">*</span></label>
          <input name="title" class="form-control" required placeholder="e.g. Login flow - v1.2">
        </div>
        <div class="form-group"><label class="form-label">Section</label>
          <select name="section_id" class="form-control"><option value="">None</option>${sectionOpts}</select>
        </div>
        <div class="form-group"><label class="form-label">Description</label>
          <textarea name="description" class="form-control" rows="4" placeholder="What should be tested?"></textarea>
        </div>
      </form>
    `,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
    <button class="btn btn-primary" onclick="submitTestRequest(${projectId})"><span class="btn-text">Submit</span></button>`
  });
}

async function submitTestRequest(projectId) {
  const data = getFormData('test-request-form');
  data.requested_by = Auth.getCurrentUser()?.id;
  const res = await API.post('projects/test_request_create', data);
  if (res.success) { Toast.show('Test request submitted.', 'success'); Modal.close(); renderProjectDetail(projectId); }
  else Toast.show(res.message, 'error');
}

// ============================================================
// PROJECT FTP CONNECTIONS
// ============================================================

async function loadProjectFtp(projectId) {
  const wrap = document.getElementById('proj-ftp-list');
  if (!wrap) return;
  const res = await API.post('projects/ftp', { action:'list', project_id: projectId });
  if (!res.success) { wrap.innerHTML = `<p class="text-muted">${res.message}</p>`; return; }
  const conns = res.data.connections;
  if (!conns.length) {
    wrap.innerHTML = `<div class="empty-state"><div class="empty-icon">🔌</div><div class="empty-title">No FTP connections saved</div></div>`;
    return;
  }
  wrap.innerHTML = conns.map(c => `
    <div class="card mb-2">
      <div class="card-body-sm">
        <div class="d-flex justify-between align-center mb-2">
          <div>
            <span class="badge badge-muted">${c.protocol.toUpperCase()}</span>
            <strong class="ml-2">${c.label}</strong>
          </div>
          <div class="d-flex gap-1">
            <button class="btn btn-ghost btn-sm" onclick="openAddFtpModal(${projectId}, ${JSON.stringify(c).replace(/"/g,'&quot;')})">Edit</button>
            <button class="btn btn-ghost btn-sm" style="color:var(--danger)" onclick="deleteFtp(${c.id}, ${projectId})">Del</button>
          </div>
        </div>
        <div class="form-row form-row-2" style="gap:.5rem">
          <div><span class="text-xs text-muted">Host</span><p class="code text-xs">${c.host}:${c.port}</p></div>
          <div><span class="text-xs text-muted">Remote Path</span><p class="code text-xs">${c.remote_path||'/'}</p></div>
          <div><span class="text-xs text-muted">Username</span><p class="code text-xs">${c.username||'—'}</p></div>
          <div><span class="text-xs text-muted">Password</span>
            <div class="d-flex align-center gap-1">
              <span class="code text-xs" id="ftppw-${c.id}">••••••••</span>
              <button class="btn btn-ghost btn-icon-sm" onclick="toggleFtpPw(${c.id},'${(c.password_plain||'').replace(/'/g,"\\'")}')">👁</button>
              <button class="btn btn-ghost btn-icon-sm" onclick="copyToClipboard('${(c.password_plain||'').replace(/'/g,"\\'")}')">📋</button>
            </div>
          </div>
        </div>
        ${c.notes ? `<p class="text-xs text-muted mt-1">${c.notes}</p>` : ''}
      </div>
    </div>
  `).join('');
}

function toggleFtpPw(id, plain) {
  const el = document.getElementById(`ftppw-${id}`);
  if (!el) return;
  el.textContent = el.textContent === '••••••••' ? (plain||'(empty)') : '••••••••';
}

function copyToClipboard(text) {
  navigator.clipboard.writeText(text).then(() => Toast.show('Copied!', 'success'));
}

function openAddFtpModal(projectId, conn = null) {
  const c = conn;
  Modal.open({
    id: c ? 'edit-ftp' : 'add-ftp',
    title: c ? 'Edit FTP Connection' : 'Add FTP Connection',
    body: `
      <form id="ftp-form">
        <input type="hidden" name="action" value="save">
        <input type="hidden" name="project_id" value="${projectId}">
        ${c ? `<input type="hidden" name="id" value="${c.id}">` : ''}
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">Label</label>
            <input name="label" class="form-control" value="${c?.label||'Primary'}" placeholder="Primary / Staging / Live">
          </div>
          <div class="form-group"><label class="form-label">Protocol</label>
            <select name="protocol" class="form-control">
              <option value="ftp" ${!c||c.protocol==='ftp'?'selected':''}>FTP</option>
              <option value="sftp" ${c?.protocol==='sftp'?'selected':''}>SFTP</option>
              <option value="ftps" ${c?.protocol==='ftps'?'selected':''}>FTPS</option>
            </select>
          </div>
        </div>
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">Host / IP <span class="required">*</span></label>
            <input name="host" class="form-control" required value="${c?.host||''}" placeholder="ftp.domain.co.za or 192.168.1.1">
          </div>
          <div class="form-group"><label class="form-label">Port</label>
            <input type="number" name="port" class="form-control" value="${c?.port||21}">
          </div>
        </div>
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">Username</label>
            <input name="username" class="form-control" value="${c?.username||''}" autocomplete="off">
          </div>
          <div class="form-group"><label class="form-label">Password ${c?'(blank = keep)':''}</label>
            <input type="password" name="password_plain" class="form-control" autocomplete="new-password">
          </div>
        </div>
        <div class="form-group"><label class="form-label">Remote Path</label>
          <input name="remote_path" class="form-control" value="${c?.remote_path||''}" placeholder="/public_html/">
        </div>
        <div class="form-group"><label class="form-label">Notes</label>
          <textarea name="notes" class="form-control" rows="2">${c?.notes||''}</textarea>
        </div>
      </form>
    `,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
    <button class="btn btn-primary" onclick="submitFtp(${projectId})"><span class="btn-text">Save</span></button>`
  });
}

async function submitFtp(projectId) {
  const data = getFormData('ftp-form');
  const res = await API.post('projects/ftp', data);
  if (res.success) { Toast.show('Saved.', 'success'); Modal.close(); loadProjectFtp(projectId); }
  else Toast.show(res.message, 'error');
}

async function deleteFtp(id, projectId) {
  const ok = await Modal.confirm('Delete this connection?');
  if (!ok) return;
  const res = await API.post('projects/ftp', { action:'delete', id, project_id: projectId });
  if (res.success) { Toast.show('Deleted.', 'success'); loadProjectFtp(projectId); }
  else Toast.show(res.message, 'error');
}

// ============================================================
// PROJECT TEAM MEMBERS
// ============================================================

async function loadProjectTeam(projectId) {
  const wrap = document.getElementById('proj-team-list');
  if (!wrap) return;
  const res = await API.post('projects/members', { action:'list', project_id: projectId });
  if (!res.success) { wrap.innerHTML = `<p class="text-muted">${res.message}</p>`; return; }
  const members = res.data.members;
  if (!members.length) {
    wrap.innerHTML = `<div class="empty-state"><div class="empty-icon">👥</div><div class="empty-title">No team members added</div></div>`;
    return;
  }
  wrap.innerHTML = `<div class="grid-2" style="gap:.75rem">
    ${members.map(m => `
      <div class="d-flex align-center justify-between p-3" style="border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)">
        <div class="d-flex align-center gap-3">
          ${avatarHTML(m.full_name, 'lg')}
          <div>
            <div class="font-semi">${m.full_name}</div>
            <div class="text-xs text-muted">${m.role_name||''} · <span class="badge badge-muted">${m.role}</span></div>
          </div>
        </div>
        <button class="btn btn-ghost btn-sm" style="color:var(--danger)" onclick="removeMember(${m.user_id}, ${projectId})">Remove</button>
      </div>
    `).join('')}
  </div>`;
}

function openAddMemberModal(projectId) {
  Modal.open({
    id: 'add-member',
    title: 'Add Team Member',
    body: `
      <form id="member-form">
        <input type="hidden" name="action" value="add">
        <input type="hidden" name="project_id" value="${projectId}">
        <div class="form-group"><label class="form-label">User</label>
          <select name="user_id" class="form-control" id="member-user-select">
            <option value="">Loading...</option>
          </select>
        </div>
        <div class="form-group"><label class="form-label">Role on Project</label>
          <select name="role" class="form-control">
            <option value="manager">Manager</option>
            <option value="developer">Developer</option>
            <option value="tester">Tester / QA</option>
            <option value="member">Member</option>
            <option value="viewer">Viewer</option>
          </select>
        </div>
      </form>
    `,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
    <button class="btn btn-primary" onclick="submitAddMember(${projectId})"><span class="btn-text">Add</span></button>`
  });
  // Load users into select
  API.post('auth/users_list', {}).then(res => {
    const sel = document.getElementById('member-user-select');
    if (sel && res.success) {
      sel.innerHTML = res.data.users.map(u => `<option value="${u.id}">${u.full_name||u.username} (${u.role_name})</option>`).join('');
    }
  });
}

async function submitAddMember(projectId) {
  const data = getFormData('member-form');
  const res = await API.post('projects/members', data);
  if (res.success) { Toast.show('Member added.', 'success'); Modal.close(); loadProjectTeam(projectId); }
  else Toast.show(res.message, 'error');
}

async function removeMember(userId, projectId) {
  const ok = await Modal.confirm('Remove this member from the project?');
  if (!ok) return;
  const res = await API.post('projects/members', { action:'remove', user_id: userId, project_id: projectId });
  if (res.success) { Toast.show('Removed.', 'success'); loadProjectTeam(projectId); }
  else Toast.show(res.message, 'error');
}