{% extends "base.html" %}
{% block title %}Configuration — ABREKA{% endblock %}

{% block breadcrumb %}
<div class="breadcrumb"><a href="/">Dashboard</a> / Configuration</div>
{% endblock %}

{% block extra_css %}
    .prompt-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }
    .prompt-tab {
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      background: none;
      color: var(--muted);
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
    }
    .prompt-tab:hover { color: var(--text); }
    .prompt-tab.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }
    .prompt-tab-panel { display: none; }
    .prompt-tab-panel.active { display: block; }

{% endblock %}

{% block content %}
<h1 class="mb-2">Configuration</h1>

<div class="grid grid-2">
  <div class="card">
    <h3>Project</h3>
    <table>
      <tr><td style="width: 140px; font-weight: 600;">Name</td><td>{{ config.project.name }}</td></tr>
      <tr><td style="font-weight: 600;">Library</td><td class="text-mono">{{ config.project.lib }}</td></tr>
      <tr><td style="font-weight: 600;">Test Command</td><td class="text-mono">{{ config.project.test_command }}</td></tr>
    </table>
  </div>

  <div class="card">
    <h3>Experiment</h3>
    <table>
      <tr><td style="width: 140px; font-weight: 600;">Primary Metric</td><td class="text-mono">{{ config.experiment.primary_metric }}</td></tr>
      <tr><td style="font-weight: 600;">Direction</td><td>{{ config.experiment.metric_direction }}</td></tr>
      <tr><td style="font-weight: 600;">Run Template</td><td class="text-mono">{{ config.experiment.run_template }}</td></tr>
    </table>
  </div>

  <div class="card">
    <h3>Agent</h3>
    <table>
      <tr><td style="width: 140px; font-weight: 600;">Provider</td><td>{{ config.agent.provider }}</td></tr>
      <tr><td style="font-weight: 600;">Model</td><td class="text-mono">{{ config.agent.model }}</td></tr>
      <tr><td style="font-weight: 600;">Thinking Level</td><td>{{ config.agent.thinking_level }}</td></tr>
      {% if config.agent.propose_model %}
      <tr><td style="font-weight: 600;">Propose Model</td><td class="text-mono">{{ config.agent.propose_model }}</td></tr>
      {% endif %}
      {% if config.agent.implement_model %}
      <tr><td style="font-weight: 600;">Implement Model</td><td class="text-mono">{{ config.agent.implement_model }}</td></tr>
      {% endif %}
      {% if config.agent.evaluate_model %}
      <tr><td style="font-weight: 600;">Evaluate Model</td><td class="text-mono">{{ config.agent.evaluate_model }}</td></tr>
      {% endif %}
    </table>
  </div>

  <div class="card">
    <h3>Run</h3>
    <table>
      <tr><td style="width: 140px; font-weight: 600;">Mode</td><td>{{ config.run.mode }}</td></tr>
      <tr><td style="font-weight: 600;">Timeout</td><td>{{ config.run.timeout_minutes }} minutes</td></tr>
      <tr><td style="font-weight: 600;">Require Tests</td><td>{{ "Yes" if config.run.require_tests else "No" }}</td></tr>
      {% if config.run.mode == "remote" %}
      <tr><td style="font-weight: 600;">Remote Host</td><td class="text-mono">{{ config.run.remote.host }}</td></tr>
      <tr><td style="font-weight: 600;">Remote Project Dir</td><td class="text-mono">{{ config.run.remote.project_dir }}</td></tr>
      {% if config.run.remote.bootstrap_command %}
      <tr><td style="font-weight: 600;">Bootstrap</td><td class="text-mono">{{ config.run.remote.bootstrap_command }}</td></tr>
      {% endif %}
      <tr><td style="font-weight: 600;">Poll Interval</td><td>{{ config.run.remote.poll_seconds }} seconds</td></tr>
      {% if config.run.remote.startup_command %}
      <tr><td style="font-weight: 600;">Startup Hook</td><td class="text-mono">{{ config.run.remote.startup_command }}</td></tr>
      {% endif %}
      {% if config.run.remote.teardown_command %}
      <tr><td style="font-weight: 600;">Teardown Hook</td><td class="text-mono">{{ config.run.remote.teardown_command }}</td></tr>
      {% endif %}
      {% endif %}
    </table>
  </div>
</div>

{% if goal %}
<div class="card mt-2 editable-card" data-endpoint="/api/goal">
  <div class="file-path">abreka/goal.md</div>
  <h3>Research Goal</h3>
  <div class="view-mode">
    <div class="md-content">{{ goal | md }}</div>
  </div>
  <div class="edit-mode">
    <textarea class="edit-area">{{ goal }}</textarea>
    <div class="edit-actions">
      <button class="btn btn-primary btn-save">Save</button>
      <button class="btn btn-discard">Discard</button>
    </div>
  </div>
  <script type="text/plain" class="raw-content">{{ goal }}</script>
</div>
{% endif %}

<div class="card mt-2">
  <h3>Project Wiki</h3>
  <p class="text-muted text-sm mb-2">Durable cross-experiment knowledge — facts, EDA, methodology, prior findings. Stored under <code>abreka/wiki/pages/</code>. Browse, search, and edit pages on the dedicated wiki view.</p>
  <p><strong>{{ wiki_count }}</strong> page{{ "s" if wiki_count != 1 else "" }} indexed. <a class="btn btn-primary" href="/wiki" style="margin-left: 8px;">Open wiki</a></p>
</div>

{% if prompts.get("propose_exploit") or prompts.get("propose_explore") %}
<div class="card mt-2">
  <h3>Prompt: Propose</h3>
  <div class="prompt-tabs">
    {% if prompts.get("propose_explore") %}
    <button class="prompt-tab active" data-tab="propose_explore">Explore</button>
    {% endif %}
    {% if prompts.get("propose_exploit") %}
    <button class="prompt-tab{% if not prompts.get('propose_explore') %} active{% endif %}" data-tab="propose_exploit">Exploit</button>
    {% endif %}
  </div>
  {% for variant in ["propose_explore", "propose_exploit"] %}
  {% if prompts.get(variant) %}
  <div class="prompt-tab-panel{% if variant == 'propose_explore' or (variant == 'propose_exploit' and not prompts.get('propose_explore')) %} active{% endif %}" data-tab-panel="{{ variant }}">
    <div class="editable-card" data-endpoint="/api/prompts/{{ variant }}">
      <div class="file-path">abreka/prompts/{{ variant }}.md</div>
      <div class="view-mode">
        <div class="md-content">{{ prompts[variant] | md }}</div>
      </div>
      <div class="edit-mode">
        <textarea class="edit-area">{{ prompts[variant] }}</textarea>
        <div class="edit-actions">
          <button class="btn btn-primary btn-save">Save</button>
          <button class="btn btn-discard">Discard</button>
        </div>
      </div>
      <script type="text/plain" class="raw-content">{{ prompts[variant] }}</script>
    </div>
  </div>
  {% endif %}
  {% endfor %}
</div>
{% endif %}

{% for name, content in prompts.items() %}
{% if name not in ("propose_exploit", "propose_explore") %}
<div class="card mt-2 editable-card" data-endpoint="/api/prompts/{{ name }}">
  <div class="file-path">abreka/prompts/{{ name }}.md</div>
  <h3>Prompt: {{ name | capitalize }}</h3>
  <div class="view-mode">
    <div class="md-content">{{ content | md }}</div>
  </div>
  <div class="edit-mode">
    <textarea class="edit-area">{{ content }}</textarea>
    <div class="edit-actions">
      <button class="btn btn-primary btn-save">Save</button>
      <button class="btn btn-discard">Discard</button>
    </div>
  </div>
  <script type="text/plain" class="raw-content">{{ content }}</script>
</div>
{% endif %}
{% endfor %}

<script>
document.querySelectorAll('.prompt-tab').forEach(tab => {
  tab.addEventListener('click', () => {
    const target = tab.dataset.tab;
    const card = tab.closest('.card');
    card.querySelectorAll('.prompt-tab').forEach(t => t.classList.remove('active'));
    card.querySelectorAll('.prompt-tab-panel').forEach(p => p.classList.remove('active'));
    tab.classList.add('active');
    card.querySelector(`[data-tab-panel="${target}"]`).classList.add('active');
  });
});
</script>
{% endblock %}