{% extends "base.html" %}

{% block title %}Self-Coding{% endblock %}

{% block content %}
<div class="container-fluid py-4">
  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h1 class="h3 mb-0">Self-Coding</h1>
      <p class="text-muted small mb-0">Self-modification of source code</p>
    </div>
    <div class="d-flex gap-2">
    </div>
  </div>

  <!-- Stats Cards -->
  <div id="stats-container">
    <div class="row g-3 mb-3">
      <div class="col-md-3">
        <div class="card border-0 shadow-sm stat-card">
          <div class="card-body text-center py-3">
            <div class="h4 mb-0">0</div>
            <small class="text-muted">Total Edits</small>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card border-0 shadow-sm stat-card">
          <div class="card-body text-center py-3">
            <div class="h4 mb-0 text-success">0</div>
            <small class="text-muted">Successful</small>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card border-0 shadow-sm stat-card">
          <div class="card-body text-center py-3">
            <div class="h4 mb-0 text-danger">0</div>
            <small class="text-muted">Failed</small>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card border-0 shadow-sm stat-card">
          <div class="card-body text-center py-3">
            <div class="h4 mb-0 text-warning">0</div>
            <small class="text-muted">Rolled Back</small>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Content Grid -->
  <div class="row g-4 mt-2">
    <!-- Left Column: Journal -->
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent border-secondary d-flex justify-content-between align-items-center">
          <h5 class="mb-0">Modification Journal</h5>
        </div>
        <div class="card-body p-0">
          <div id="journal-container" class="journal-list">
            <div class="text-center py-5 text-muted">
              <p class="mb-1">No modifications recorded yet.</p>
              <small>Self-coding tasks will appear here when executed.</small>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Right Column: Quick Actions & Info -->
    <div class="col-lg-4">
      <!-- Quick Actions -->
      <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-transparent border-secondary">
          <h5 class="mb-0">Quick Actions</h5>
        </div>
        <div class="card-body">
          <div class="d-grid gap-2">
            <button class="btn btn-outline-info" hx-post="/self-coding/api/codebase/reindex" hx-swap="none" hx-confirm="Reindex codebase? This may take a moment.">
              🔄 Reindex Codebase
            </button>
            <a href="/self-coding/api/codebase/summary" target="_blank" class="btn btn-outline-secondary">
              📄 View Codebase Summary
            </a>
          </div>
        </div>
      </div>

      <!-- Safety Info -->
      <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-transparent border-secondary">
          <h5 class="mb-0">Safety Constraints</h5>
        </div>
        <div class="card-body">
          <ul class="list-unstyled small mb-0">
            <li class="mb-2">✓ Max 3 files per commit</li>
            <li class="mb-2">✓ Max 100 lines changed</li>
            <li class="mb-2">✓ Only files with test coverage</li>
            <li class="mb-2">✓ Max 3 retries on failure</li>
            <li class="mb-2">✓ Protected files cannot be modified</li>
            <li>✓ All changes on feature branches</li>
          </ul>
        </div>
      </div>

      <!-- How It Works -->
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent border-secondary">
          <h5 class="mb-0">How It Works</h5>
        </div>
        <div class="card-body">
          <ol class="small mb-0">
            <li class="mb-2">Receive task description</li>
            <li class="mb-2">Find relevant files via indexer</li>
            <li class="mb-2">Check journal for similar attempts</li>
            <li class="mb-2">Create feature branch</li>
            <li class="mb-2">Plan edit with LLM</li>
            <li class="mb-2">Execute via Aider or direct edit</li>
            <li class="mb-2">Run tests</li>
            <li class="mb-2">Commit on success, rollback on failure</li>
            <li>Log attempt and reflect</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Execute Modal -->
<dialog id="execute-modal" class="rounded border-0 shadow-lg" style="max-width: 600px; width: 90%; background: var(--bs-body-bg);">
  <div class="p-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h5 class="mb-0">Execute Self-Edit Task</h5>
      <button type="button" class="btn-close" onclick="document.getElementById('execute-modal').close()"></button>
    </div>
    <div id="execute-modal-content">
      <!-- Form loaded via HTMX -->
    </div>
  </div>
</dialog>

<style>
.journal-list {
  max-height: 600px;
  overflow-y: auto;
}

.journal-entry {
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.journal-entry:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.journal-entry.success {
  border-left-color: #198754;
}

.journal-entry.failure {
  border-left-color: #dc3545;
}

.journal-entry.rollback {
  border-left-color: #fd7e14;
}

.stat-card {
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

/* Custom scrollbar for journal */
.journal-list::-webkit-scrollbar {
  width: 6px;
}

.journal-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.journal-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.journal-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
</style>
{% endblock %}
