{% extends "base.html" %}
{% block title %}Feature Requests — ICDEV™{% endblock %}

{% block extra_css %}
<style>
.fr-layout {
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  gap: 0;
  height: calc(100vh - 120px);
  overflow: hidden;
}
.fr-sidebar {
  border-right: 1px solid var(--border-color, #2a2d35);
  overflow-y: auto;
  padding: 1rem;
  background: var(--bg-secondary, #1a1d23);
}
.fr-main {
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fr-preview {
  border-left: 1px solid var(--border-color, #2a2d35);
  overflow-y: auto;
  padding: 1rem;
  background: var(--bg-secondary, #1a1d23);
}
.fr-session-item {
  padding: .5rem .75rem;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: .25rem;
  border: 1px solid transparent;
  font-size: .85rem;
}
.fr-session-item:hover { border-color: var(--accent, #4a9eff); }
.fr-session-item.active { background: var(--accent-bg, #1e3a5f); border-color: var(--accent, #4a9eff); }
.fr-session-status {
  display: inline-block;
  font-size: .7rem;
  padding: .1rem .4rem;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.status-drafting    { background:#333; color:#aaa; }
.status-streams_complete { background:#1a3a1a; color:#6bcb6b; }
.status-suggested   { background:#1a2a4a; color:#6aacff; }
.status-approved    { background:#1a3a1a; color:#4caf50; }
.status-rejected    { background:#3a1a1a; color:#f44336; }

.fr-new-form { background: var(--bg-card, #1e2228); border-radius: 8px; padding: 1rem; }
.fr-new-form textarea {
  width: 100%; min-height: 100px; resize: vertical;
  background: var(--bg-input, #13161b); color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-color, #2a2d35); border-radius: 6px;
  padding: .6rem; font-size: .9rem; font-family: inherit;
}
.fr-new-form textarea:focus { outline: none; border-color: var(--accent, #4a9eff); }
.stream-card {
  background: var(--bg-card, #1e2228);
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid var(--border-color, #2a2d35);
}
.stream-card h4 {
  margin: 0 0 .5rem;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted, #888);
}
.stream-content {
  font-size: .82rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  color: var(--text-secondary, #ccc);
}
.stream-pulse {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, #4a9eff);
  animation: pulse 1.2s infinite;
  margin-right: .4rem;
}
@keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} }

.alignment-badge {
  display: inline-block;
  padding: .2rem .7rem;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.align-EXTENDS_EXISTING  { background:#1a3a1a; color:#6bcb6b; }
.align-NEW_FUNCTIONALITY { background:#2a1a3a; color:#c39cff; }
.align-CROSS_CUTTING     { background:#3a2a1a; color:#ffb74d; }
.align-DUPLICATE         { background:#3a1a1a; color:#ff7043; }

.kanban-preview-card {
  background: var(--bg-card, #1e2228);
  border-radius: 8px;
  border: 1px solid var(--border-color, #2a2d35);
  padding: 1rem;
  font-size: .82rem;
}
.kanban-preview-card .ktag {
  display: inline-block;
  padding: .1rem .4rem;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 600;
  background: #1e3a5f;
  color: #6aacff;
  margin-right: .3rem;
  text-transform: uppercase;
}

.fr-chat-bar {
  display: flex;
  gap: .5rem;
  margin-top: auto;
}
.fr-chat-bar input {
  flex: 1;
  background: var(--bg-input, #13161b);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-color, #2a2d35);
  border-radius: 6px;
  padding: .5rem .75rem;
  font-size: .85rem;
  font-family: inherit;
}
.fr-chat-bar input:focus { outline: none; border-color: var(--accent, #4a9eff); }
.btn-sm { padding: .3rem .75rem; font-size: .82rem; }
.fr-action-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.tree-node { margin-left: 1rem; font-size: .8rem; color: var(--text-secondary, #ccc); }
.tree-node-epic { color: var(--accent, #4a9eff); font-weight: 600; margin-top: .4rem; }
.tree-node-feature { color: #b0bec5; }
.tree-node-task { color: #90a4ae; font-size: .78rem; }
</style>
{% endblock %}

{% block content %}
<div style="padding:.5rem 1.5rem .25rem; display:flex; align-items:center; justify-content:space-between;">
  <div>
    <h2 style="margin:0; font-size:1.2rem;">Feature Requests</h2>
    <p style="margin:.2rem 0 0; font-size:.8rem; color:var(--text-muted,#888);">
      Formalize, analyze, and queue feature requests for ICDEV core development.
    </p>
  </div>
</div>

<div class="fr-layout">

  {# ── Left sidebar: session list ── #}
  <div class="fr-sidebar">
    <div style="margin-bottom:.75rem;">
      <strong style="font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted,#888);">Sessions</strong>
    </div>

    {% for s in sessions %}
    <a href="{{ url_for('fr.fr_session', session_id=s.id) }}" style="text-decoration:none; color:inherit;">
      <div class="fr-session-item {% if active_session and active_session.id == s.id %}active{% endif %}">
        <div style="font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ s.title[:50] }}</div>
        <div style="margin-top:.2rem;">
          <span class="fr-session-status status-{{ s.status }}">{{ s.status.replace('_',' ') }}</span>
          {% if s.alignment %}
          <span class="alignment-badge align-{{ s.alignment }}" style="font-size:.65rem; padding:.05rem .3rem;">
            {{ s.alignment[:3] }}
          </span>
          {% endif %}
        </div>
      </div>
    </a>
    {% else %}
    <div style="font-size:.8rem; color:var(--text-muted,#888); padding:.5rem 0;">No sessions yet.</div>
    {% endfor %}
  </div>

  {# ── Center: form / stream outputs / chat ── #}
  <div class="fr-main">

    {% if not active_session %}
    {# New FR submission form #}
    <div class="fr-new-form">
      <h3 style="margin:0 0 .75rem; font-size:1rem;">New Feature Request</h3>
      <form method="POST" action="{{ url_for('fr.fr_new') }}">
        <textarea name="raw_input"
                  placeholder="Describe your feature request in plain language. Be as specific or as high-level as you like — the engine will decompose it..."
                  required></textarea>
        <div style="display:flex; align-items:center; gap:.75rem; margin-top:.5rem;">
          <button type="submit" class="btn btn-primary">Analyze &amp; Queue</button>
          <label style="font-size:.8rem; color:var(--text-muted,#888); display:flex; align-items:center; gap:.3rem;">
            <input type="checkbox" name="auto_submit" value="true"> Auto-submit to Kanban
          </label>
        </div>
      </form>
    </div>

    {% else %}
    {# Active session view #}
    <div style="display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:.5rem;">
      <div>
        <h3 style="margin:0; font-size:1rem;">{{ active_session.title }}</h3>
        <div style="margin-top:.25rem;">
          <span class="fr-session-status status-{{ active_session.status }}">{{ active_session.status.replace('_',' ') }}</span>
          {% if active_session.alignment %}
          <span class="alignment-badge align-{{ active_session.alignment }}" style="margin-left:.4rem;">
            {{ active_session.alignment.replace('_',' ') }}
          </span>
          {% endif %}
        </div>
        <div style="font-size:.75rem; color:var(--text-muted,#888); margin-top:.3rem;">{{ active_session.id }}</div>
      </div>
    </div>

    {# Stream cards #}
    {% set alignment_stream = namespace(content=None) %}
    {% set decomp_stream = namespace(content=None) %}
    {% set effort_stream = namespace(content=None) %}
    {% set clarif_stream = namespace(content=None) %}
    {% set chat_turns = [] %}

    {% for s in streams %}
      {% if s.stream == 'alignment' and s.turn == 1 %}{% set alignment_stream.content = s.content %}{% endif %}
      {% if s.stream == 'decomposition' and s.turn == 1 %}{% set decomp_stream.content = s.content %}{% endif %}
      {% if s.stream == 'effort' and s.turn == 1 %}{% set effort_stream.content = s.content %}{% endif %}
      {% if s.stream == 'clarification' %}{% set clarif_stream.content = s.content %}{% endif %}
    {% endfor %}

    <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:.75rem;">
      {# Alignment stream #}
      <div class="stream-card">
        <h4>
          {% if not alignment_stream.content and active_session.status == 'drafting' %}
          <span class="stream-pulse"></span>
          {% endif %}
          Alignment
        </h4>
        {% if alignment_stream.content %}
          {% set a = alignment_stream.content | tojson | safe %}
          <div class="stream-content">{{ alignment_stream.content }}</div>
        {% else %}
          <div class="stream-content" style="color:var(--text-muted,#888); font-style:italic;">
            {% if active_session.status == 'drafting' %}Analyzing…{% else %}No data{% endif %}
          </div>
        {% endif %}
      </div>

      {# Decomposition stream #}
      <div class="stream-card">
        <h4>
          {% if not decomp_stream.content and active_session.status == 'drafting' %}
          <span class="stream-pulse"></span>
          {% endif %}
          Decomposition
        </h4>
        {% if decomp_stream.content %}
          <div class="stream-content">{{ decomp_stream.content }}</div>
        {% else %}
          <div class="stream-content" style="color:var(--text-muted,#888); font-style:italic;">
            {% if active_session.status == 'drafting' %}Decomposing…{% else %}No data{% endif %}
          </div>
        {% endif %}
      </div>

      {# Effort stream #}
      <div class="stream-card">
        <h4>
          {% if not effort_stream.content and active_session.status == 'drafting' %}
          <span class="stream-pulse"></span>
          {% endif %}
          Effort
        </h4>
        {% if effort_stream.content %}
          <div class="stream-content">{{ effort_stream.content }}</div>
        {% else %}
          <div class="stream-content" style="color:var(--text-muted,#888); font-style:italic;">
            {% if active_session.status == 'drafting' %}Estimating…{% else %}No data{% endif %}
          </div>
        {% endif %}
      </div>
    </div>

    {# Clarification questions (if any) #}
    {% if clarif_stream.content %}
    <div class="stream-card">
      <h4>Clarifying Questions</h4>
      <div class="stream-content">{{ clarif_stream.content }}</div>
    </div>
    {% endif %}

    {# Chat history #}
    {% set user_turns = streams | selectattr('stream', 'eq', 'user') | list %}
    {% if user_turns | length > 1 %}
    <div class="stream-card">
      <h4>Conversation</h4>
      {% for t in user_turns %}
      {% if t.turn > 0 %}
      <div style="background:var(--bg-input,#13161b); border-radius:6px; padding:.4rem .6rem; margin-bottom:.3rem; font-size:.8rem;">
        <strong style="color:var(--accent,#4a9eff);">You:</strong> {{ t.content }}
      </div>
      {% endif %}
      {% endfor %}
    </div>
    {% endif %}

    {# Chat + action bar #}
    <div style="margin-top:auto; display:flex; flex-direction:column; gap:.5rem;">
      <form method="POST" action="{{ url_for('fr.fr_chat', session_id=active_session.id) }}" class="fr-chat-bar">
        <input type="text" name="message" placeholder="Refine your request or answer a clarifying question…">
        <button type="submit" class="btn btn-secondary btn-sm">Send</button>
      </form>

      <div class="fr-action-row">
        {% if active_session.status in ('streams_complete', 'drafting') %}
        <form method="POST" action="{{ url_for('fr.fr_submit', session_id=active_session.id) }}">
          <button type="submit" class="btn btn-primary btn-sm">Submit to Kanban (SUGGESTED)</button>
        </form>
        {% endif %}

        {% if active_session.status == 'suggested' and not active_session.kanban_task_id %}
        <form method="POST" action="{{ url_for('fr.fr_submit', session_id=active_session.id) }}">
          <button type="submit" class="btn btn-secondary btn-sm">Re-submit</button>
        </form>
        {% endif %}

        {% if active_session.status == 'suggested' %}
        <form method="POST" action="{{ url_for('fr.fr_approve', session_id=active_session.id) }}">
          <button type="submit" class="btn btn-primary btn-sm">Approve &amp; Expand to Backlog</button>
        </form>
        <form method="POST" action="{{ url_for('fr.fr_approve', session_id=active_session.id) }}">
          <input type="hidden" name="dry_run" value="true">
          <button type="submit" class="btn btn-secondary btn-sm">Preview Plan</button>
        </form>
        {% endif %}
      </div>
    </div>
    {% endif %}

  </div>

  {# ── Right panel: Kanban preview ── #}
  <div class="fr-preview">
    <strong style="font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted,#888);">Kanban Preview</strong>

    {% if active_session %}
    <div style="margin-top:.75rem;">
      <div class="kanban-preview-card">
        <div style="font-size:.75rem; color:var(--text-muted,#888); margin-bottom:.3rem;">SUGGESTED TASK</div>
        <div style="font-weight:600; font-size:.85rem; margin-bottom:.4rem;">[FR] {{ active_session.title[:60] }}</div>
        <div>
          <span class="ktag">research</span>
          {% if active_session.alignment %}
          <span class="ktag align-{{ active_session.alignment }}">{{ active_session.alignment[:4] }}</span>
          {% endif %}
        </div>
        {% if active_session.kanban_task_id %}
        <div style="margin-top:.5rem; font-size:.75rem; color:var(--text-muted,#888);">
          Kanban ID: <a href="/kanban" style="color:var(--accent,#4a9eff);">{{ active_session.kanban_task_id }}</a>
        </div>
        {% endif %}
      </div>

      {# Decomposition summary (rendered server-side) #}
      {% if decomp_summary %}
      <div style="margin-top:1rem;">
        <div style="font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted,#888); margin-bottom:.4rem;">Task Tree</div>
        {% for node in decomp_summary %}
        <div class="tree-node tree-node-{{ node.level }}" style="margin-left:{{ node.indent }}rem;">{{ node.icon }} {{ node.title }}</div>
        {% endfor %}
      </div>
      {% endif %}
    </div>
    {% else %}
    <div style="margin-top:1rem; font-size:.8rem; color:var(--text-muted,#888);">
      Submit a new feature request to see the Kanban preview here.
    </div>
    {% endif %}
  </div>

</div>

{% if active_session and active_session.status == 'drafting' %}
<script>
  // Auto-refresh while streams are running
  (function() {
    var interval = setInterval(function() {
      fetch(window.location.href, {headers: {'X-Requested-With': 'XMLHttpRequest'}})
        .then(function(r) {
          if (r.ok) {
            window.location.reload();
          }
        });
    }, {{ config.get('dashboard', {}).get('stream_poll_interval_ms', 1500) if config else 1500 }});
    // Stop after 3 minutes
    setTimeout(function() { clearInterval(interval); }, 180000);
  })();
</script>
{% endif %}
{% endblock %}