<% layout = 'layouts/main' %>
<% title = project.name %>

<div class="page-header">
  <h1><%= project.name %></h1>
  <div class="header-actions">
    <a href="/stories?project=<%= project.id %>" class="btn">Stories</a>
    <a href="/runs?project=<%= project.id %>" class="btn">Runs</a>
    <a href="/analytics?project=<%= project.id %>" class="btn">Analytics</a>
    <a href="/data?project=<%= project.id %>" class="btn">Test Data</a>
  </div>
</div>

<div class="project-detail" style="margin-bottom:2rem;">
  <p class="project-path" style="font-family:var(--font-mono);color:var(--text-disabled);font-size:0.88rem;"><%= project.path %></p>
</div>

<div class="row" style="margin-bottom:2rem;">
  <div class="col">
    <div class="card card-lavender">
      <h3>📝 User Stories</h3>
      <div class="big-number"><%= list.stories.length %></div>
      <a href="/stories?project=<%= project.id %>" class="btn btn-sm" style="margin-top:1rem;">View Stories</a>
    </div>
  </div>
  <div class="col">
    <div class="card card-peach">
      <h3>📋 Test Plans</h3>
      <div class="big-number"><%= list.plans.length %></div>
    </div>
  </div>
  <div class="col">
    <div class="card card-ochre">
      <h3>🧪 Test Specs</h3>
      <div class="big-number"><%= list.specs.length %></div>
    </div>
  </div>
</div>

<div class="card">
  <h3>⚡ Pipeline Execution</h3>
  <form id="pipeline-form" data-project="<%= project.id %>" class="form">
    <div class="form-group">
      <label>Select User Story to Run</label>
      <select name="storyName" class="form-input">
        <option value="">— Run status check / full suite —</option>
        <% list.stories.forEach(s => { %>
        <option value="<%= s %>"><%= s %></option>
        <% }) %>
      </select>
    </div>
    <button type="submit" class="btn btn-primary">Run Pipeline</button>
  </form>
  <div id="pipeline-output" class="output-box" style="display:none;"></div>
</div>

<div class="card">
  <h3>⚙️ Quick Actions</h3>
  <p style="color:var(--text-muted);font-size:0.9rem;margin-bottom:1rem;">Manage, execute, or build standard reports for this project instantly.</p>
  <div class="action-buttons">
    <button class="btn btn-sm" onclick="runAction('<%= project.id %>', 'status')">Status</button>
    <button class="btn btn-sm" onclick="runAction('<%= project.id %>', 'execute')">Execute All Tests</button>
    <button class="btn btn-sm" onclick="runAction('<%= project.id %>', 'report')">Generate Report</button>
  </div>
  <div id="quick-output" class="output-box" style="display:none;"></div>
</div>

<script>
document.getElementById('pipeline-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const form = e.target;
  const projectId = form.dataset.project;
  const formData = new FormData(form);
  const output = document.getElementById('pipeline-output');
  
  output.style.display = 'block';
  output.textContent = 'Running pipeline...';
  output.className = 'output-box output-running';

  try {
    const res = await fetch(`/projects/${projectId}/run-pipeline`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ storyName: formData.get('storyName') })
    });
    if (!res.ok) throw new Error(`HTTP Error ${res.status}`);
    const data = await res.json();
    output.textContent = data.output || data.error || 'Done';
    output.className = `output-box ${data.success ? 'output-success' : 'output-error'}`;
  } catch (err) {
    output.textContent = 'Network or server error: ' + err.message;
    output.className = 'output-box output-error';
  }
});

async function runAction(projectId, action) {
  const output = document.getElementById('quick-output');
  output.style.display = 'block';
  output.textContent = `Running ${action}...`;
  output.className = 'output-box output-running';

  try {
    const res = await fetch(`/projects/${projectId}/${action}`, { 
      method: 'POST', 
      headers: { 'Content-Type': 'application/json' }, 
      body: '{}' 
    });
    if (!res.ok) throw new Error(`HTTP Error ${res.status}`);
    const data = await res.json();
    output.textContent = data.output || data.error || 'Done';
    output.className = `output-box ${data.success ? 'output-success' : 'output-error'}`;
  } catch (err) {
    output.textContent = 'Network or server error: ' + err.message;
    output.className = 'output-box output-error';
  }
}
</script>
