<% layout = 'layouts/main' %>
<% title = 'User Stories' %>

<div class="page-header">
  <h1>User Stories</h1>
  <span class="badge badge-project"><%= project.name %></span>
</div>

<% if (stories.length === 0) { %>
<div class="empty-state">
  <div style="font-size: 3rem; margin-bottom: 1rem;">📝</div>
  <h3>Aucune User Story</h3>
  <p>Ajoutez des fichiers Markdown <code>.md</code> dans le dossier <code>user-story/</code> de votre projet pour commencer.</p>
</div>
<% } else { %>
<div class="story-list">
  <% const cardColors = ['card-lavender', 'card-peach', 'card-cream']; %>
  <% stories.forEach((s, idx) => { %>
  <div class="story-card <%= cardColors[idx % cardColors.length] %>" style="margin-bottom:1.25rem;">
    <div class="story-header">
      <a href="/stories/<%= s.name %>?project=<%= project.id %>" class="story-title" style="text-decoration:none;font-weight:600;"><%= s.name %></a>
      <div class="story-badges">
        <% if (s.hasPlan) { %><span class="badge badge-plan">Planned</span><% } %>
        <% if (s.hasSpec) { %><span class="badge badge-spec">Tested</span><% } %>
        <% if (!s.hasPlan) { %><span class="badge badge-draft">Draft</span><% } %>
      </div>
    </div>
    <div class="story-preview" style="margin:1rem 0;">
      <% if (s.content) { %>
      <% const lines = s.content.split('\n').filter(l => l.startsWith('##') || l.startsWith('**') || l.startsWith('-') || l.trim().length > 0) %>
      <% lines.slice(0, 3).forEach(l => { %>
        <p style="margin:0.25rem 0;font-size:0.9rem;opacity:0.85;"><%= l.replace(/\*\*|##/g, '').substring(0, 100) %></p>
      <% }) %>
      <% } %>
    </div>
    <div class="story-actions" style="border-top:1px solid var(--border);padding-top:1rem;display:flex;align-items:center;">
      <button class="btn btn-sm btn-primary" onclick="runPipeline('<%= project.id %>', '<%= s.name %>')">▶ Execute Tests</button>
      <a href="/stories/<%= s.name %>?project=<%= project.id %>" class="btn btn-sm" style="margin-left:0.5rem;">View Details</a>
      <span class="story-action-output"></span>
    </div>
  </div>
  <% }) %>
</div>
<% } %>

<script>
async function runPipeline(projectId, storyName) {
  // Rediriger vers la page de détail avec l'instruction de lancement automatique
  window.location.href = `/stories/${encodeURIComponent(storyName)}?project=${projectId}&autoRun=true`;
}
</script>
