{% extends "layout.html" %}

{% block content %}
{% set current_sort = sort | default('created_at') %}
{% set current_direction = direction | default('desc') %}
{% set current_job_status = job_status_filter | default('all') %}
{% set current_window = window_filter | default('all') %}

{# Macro for sort link #}
{% macro sort_link(label, col_name) %}
  {% set is_active = current_sort == col_name %}
  {% set next_dir = 'asc' if (is_active and current_direction == 'desc') else 'desc' %}
  <a href="?page=1&sort={{ col_name }}&direction={{ next_dir }}{% if current_job_status != 'all' %}&job_status={{ current_job_status }}{% endif %}{% if current_window != 'all' %}&window={{ current_window }}{% endif %}"
     class="hover:text-slate-700 dark:hover:text-slate-200 transition-colors {{ 'text-slate-700 dark:text-slate-200 font-medium' if is_active else '' }}">
    {{ label }}{% if is_active %} {{ '▲' if current_direction == 'asc' else '▼' }}{% endif %}
  </a>
{% endmacro %}

{% macro filter_link(label, job_status, window='all') %}
  {% set is_active = current_job_status == job_status and current_window == window %}
  <a href="?page=1{% if job_status != 'all' %}&job_status={{ job_status }}{% endif %}{% if window != 'all' %}&window={{ window }}{% endif %}"
     class="inline-flex items-center rounded-full px-3 py-1.5 text-[13px] transition-colors {% if is_active %}bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900{% else %}bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700{% endif %}">
    {{ label }}
  </a>
{% endmacro %}

<section class="ui-shell">
<div class="space-y-5">
  <div class="ui-page-header">
    <p class="ui-eyebrow">Admin Only</p>
  </div>

  {# Header with re-generate button #}
  <div class="flex items-center justify-between">
    <div>
      <h1 class="ui-page-title mt-0">Solutions</h1>
      <p class="ui-page-subtitle">{{ active_filter_label }}.</p>
    </div>
    <form method="post" action="/admin/solutions/regenerate" onsubmit="return confirm('This will delete all existing solutions and re-queue them for generation. Continue?')">
      <button type="submit" class="ui-btn-primary transition-colors">
        Re-generate All
      </button>
    </form>
  </div>

  {# Queue metrics #}
  <div class="grid gap-3 grid-cols-4">
    <a href="/admin/solutions?job_status=queued" class="ui-stat-card px-3 py-2.5 hover:border-amber-300 dark:hover:border-amber-500/40 transition-colors">
      <p class="ui-card-label">Pending</p>
      <p class="ui-card-value-lg">{{ solution_metrics.pending }}</p>
    </a>
    <a href="/admin/solutions?job_status=in_progress" class="ui-stat-card px-3 py-2.5 hover:border-amber-300 dark:hover:border-amber-500/40 transition-colors">
      <p class="ui-card-label">Running</p>
      <p class="ui-card-value-lg text-amber-600 dark:text-amber-400">{{ solution_metrics.running }}</p>
    </a>
    <a href="/admin/solutions?job_status=completed" class="ui-stat-card px-3 py-2.5 hover:border-brand-300 dark:hover:border-brand-500/40 transition-colors">
      <p class="ui-card-label">Completed</p>
      <p class="ui-card-value-lg text-brand-500 dark:text-brand-300">{{ solution_metrics.completed }}</p>
    </a>
    <a href="/admin/solutions?job_status=failed" class="ui-stat-card px-3 py-2.5 hover:border-red-300 dark:hover:border-red-500/40 transition-colors">
      <p class="ui-card-label">Failed</p>
      <p class="ui-card-value-lg text-red-500 dark:text-red-400">{{ solution_metrics.failed }}</p>
    </a>
  </div>

  <div class="flex flex-wrap items-center gap-2">
    {{ filter_link('All', 'all') }}
    {{ filter_link('Pending', 'queued') }}
    {{ filter_link('Running', 'in_progress') }}
    {{ filter_link('Completed', 'completed') }}
    {{ filter_link('Completed (24h)', 'completed', '24h') }}
    {{ filter_link('Failed', 'failed') }}
    {{ filter_link('Failed (24h)', 'failed', '24h') }}
  </div>

  {# Processing banner #}
  {% if solution_metrics.pending > 0 or solution_metrics.running > 0 %}
  <div class="flex items-center gap-3 border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950 px-4 py-3">
    <svg class="animate-spin h-5 w-5 text-amber-600 dark:text-amber-400 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    <div>
      <p class="text-[14px] font-medium text-amber-800 dark:text-amber-200">Processing solutions...</p>
      <p class="text-[13px] text-amber-600 dark:text-amber-400">
        {{ solution_metrics.pending }} pending, {{ solution_metrics.running }} running. Refresh the page to see updates.
      </p>
    </div>
  </div>
  {% endif %}

  {# Sort controls #}
  {% if not show_solution_jobs and solutions and solutions | length > 0 %}
  <div class="flex items-center gap-3 ui-type-caption">
    <span>Sort by:</span>
    {{ sort_link('Created', 'created_at') }}
    <span class="text-slate-300 dark:text-slate-700">|</span>
    {{ sort_link('Risk Level', 'risk_level') }}
    <span class="text-slate-300 dark:text-slate-700">|</span>
    {{ sort_link('Category', 'resolution_category') }}
  </div>
  {% endif %}

  {# Solutions list #}
  {% if show_solution_jobs %}
    {% if solution_jobs and solution_jobs | length > 0 %}
      {% for job in solution_jobs %}
      <div class="ui-pane p-4 space-y-3">
        <div class="flex items-start justify-between gap-3">
          <div>
            <p class="text-[15px] font-medium text-slate-800 dark:text-slate-200">
              {{ job.opportunity_type }} &rarr; <code class="text-sm font-mono">{{ job.affected_table }}</code>
            </p>
            <p class="ui-card-meta mt-0.5">
              Job {{ job.id[:8] }} · queued {{ job.queued_at or '-' }}
              {% if job.started_at %} · started {{ job.started_at }}{% endif %}
              {% if job.completed_at %} · completed {{ job.completed_at }}{% endif %}
            </p>
          </div>
          <div class="flex items-center gap-2 text-[13px]">
            <span class="ui-pill
              {% if job.status == 'failed' %}ui-pill-danger
              {% elif job.status == 'in_progress' %}ui-pill-warning
              {% else %}ui-pill-blue{% endif %}
            ">{{ job.status_label }}</span>
            {% if job.resolution_category %}
            <span class="text-indigo-600 dark:text-indigo-400">{{ job.resolution_category }}</span>
            {% endif %}
          </div>
        </div>

        {% if job.error_message %}
        <div class="border border-red-200 dark:border-red-900/60 bg-red-50 dark:bg-red-950/30 px-3 py-2">
          <p class="ui-card-label text-red-700 dark:text-red-300">Failure</p>
          <p class="mt-1 text-[14px] text-red-700 dark:text-red-200">{{ job.error_message }}</p>
        </div>
        {% endif %}

        <div class="flex flex-wrap gap-x-4 gap-y-1 text-[13px] text-slate-500 dark:text-slate-400">
          <span>retries: {{ job.retry_count }}</span>
          <span>lifetime retries: {{ job.lifetime_retry_count }}</span>
          <span>solutions generated: {{ job.solutions_generated_count }}</span>
          {% if job.llm_model %}<span>model: <code class="font-mono">{{ job.llm_model }}</code></span>{% endif %}
          {% if job.error_stage %}<span>stage: {{ job.error_stage }}</span>{% endif %}
        </div>

        {% if job.config_id and job.opp_id %}
        <div class="text-[13px]">
          <a href="/projects/{{ job.config_id }}/opportunities/{{ job.opp_id }}" class="text-brand-500 dark:text-brand-300 hover:underline">View opportunity &rarr;</a>
        </div>
        {% endif %}
      </div>
      {% endfor %}

      {% if job_pagination and job_pagination.total_items > 0 %}
      <div class="flex items-center justify-between">
        <p class="ui-type-body-sm">
          Showing <span class="text-slate-900 dark:text-slate-100">{{ job_pagination.start_index }}</span>
          to <span class="text-slate-900 dark:text-slate-100">{{ job_pagination.end_index }}</span>
          of <span class="text-slate-900 dark:text-slate-100">{{ job_pagination.total_items }}</span> results
        </p>
        {% if job_pagination.total_pages > 1 %}
        <nav class="ui-pagination" aria-label="Solution jobs pagination">
          {% if job_pagination.has_prev %}
            <a href="?page={{ job_pagination.page - 1 }}&job_status={{ current_job_status }}{% if current_window != 'all' %}&window={{ current_window }}{% endif %}"
              class="ui-page-link">Prev</a>
          {% else %}
            <span class="ui-page-link ui-page-link-disabled">Prev</span>
          {% endif %}
          {% for p in job_pagination.page_range(2) %}
            {% if p == job_pagination.page %}
              <span class="ui-page-link ui-page-link-active" aria-current="page">{{ p }}</span>
            {% else %}
              <a href="?page={{ p }}&job_status={{ current_job_status }}{% if current_window != 'all' %}&window={{ current_window }}{% endif %}"
                class="ui-page-link">{{ p }}</a>
            {% endif %}
          {% endfor %}
          {% if job_pagination.has_next %}
            <a href="?page={{ job_pagination.page + 1 }}&job_status={{ current_job_status }}{% if current_window != 'all' %}&window={{ current_window }}{% endif %}"
              class="ui-page-link">Next</a>
          {% else %}
            <span class="ui-page-link ui-page-link-disabled">Next</span>
          {% endif %}
        </nav>
        {% endif %}
      </div>
      {% endif %}
    {% else %}
      <div class="ui-pane p-4">
        <p class="text-[14px] text-slate-500 dark:text-slate-400">No solution jobs match this filter.</p>
      </div>
    {% endif %}
  {% elif solutions and solutions | length > 0 %}
    {% for sol in solutions %}
    <div class="ui-pane p-4 space-y-3">
      <div class="flex flex-wrap items-start justify-between gap-3">
        <div class="space-y-1">
          <p class="text-[15px] font-medium text-slate-800 dark:text-slate-200">
            {{ sol.opportunity_type | replace('_', ' ') | title }}
          </p>
          <p class="ui-card-meta">
            <code class="text-sm font-mono">{{ sol.affected_table }}</code>
            {% if sol.file_path %} · <code class="font-mono">{{ sol.file_path }}</code>{% endif %}
            {% if sol.created_at %} · {{ sol.created_at }}{% endif %}
          </p>
        </div>
        {% if sol.config_id and sol.opp_id %}
        <a href="/projects/{{ sol.config_id }}/opportunities/{{ sol.opp_id }}"
           class="text-[13px] text-brand-500 dark:text-brand-300 hover:underline">
          View opportunity &rarr;
        </a>
        {% endif %}
      </div>

      {% set create_pr_route_prefix = '/app' %}
      {% include "components/solution_detail_content.html" %}
    </div>
    {% endfor %}

    {# Pagination #}
    {% if pagination and pagination.total_items > 0 %}
    <div class="flex items-center justify-between">
      <p class="ui-type-body-sm">
        Showing <span class="text-slate-900 dark:text-slate-100">{{ pagination.start_index }}</span>
        to <span class="text-slate-900 dark:text-slate-100">{{ pagination.end_index }}</span>
        of <span class="text-slate-900 dark:text-slate-100">{{ pagination.total_items }}</span> results
      </p>
      {% if pagination.total_pages > 1 %}
      <nav class="ui-pagination" aria-label="Solutions pagination">
        {% if pagination.has_prev %}
          <a href="?page={{ pagination.page - 1 }}&sort={{ current_sort }}&direction={{ current_direction }}{% if current_job_status != 'all' %}&job_status={{ current_job_status }}{% endif %}{% if current_window != 'all' %}&window={{ current_window }}{% endif %}"
            class="ui-page-link">Prev</a>
        {% else %}
          <span class="ui-page-link ui-page-link-disabled">Prev</span>
        {% endif %}
        {% for p in pagination.page_range(2) %}
          {% if p == pagination.page %}
            <span class="ui-page-link ui-page-link-active" aria-current="page">{{ p }}</span>
          {% else %}
            <a href="?page={{ p }}&sort={{ current_sort }}&direction={{ current_direction }}{% if current_job_status != 'all' %}&job_status={{ current_job_status }}{% endif %}{% if current_window != 'all' %}&window={{ current_window }}{% endif %}"
              class="ui-page-link">{{ p }}</a>
          {% endif %}
        {% endfor %}
        {% if pagination.has_next %}
          <a href="?page={{ pagination.page + 1 }}&sort={{ current_sort }}&direction={{ current_direction }}{% if current_job_status != 'all' %}&job_status={{ current_job_status }}{% endif %}{% if current_window != 'all' %}&window={{ current_window }}{% endif %}"
            class="ui-page-link">Next</a>
        {% else %}
          <span class="ui-page-link ui-page-link-disabled">Next</span>
        {% endif %}
      </nav>
      {% endif %}
    </div>
    {% endif %}
  {% else %}
    <div class="ui-pane p-4">
      <p class="text-[14px] text-slate-500 dark:text-slate-400">No solutions generated yet. Solutions are created automatically after opportunity detection.</p>
    </div>
  {% endif %}
</div>
</section>
{% endblock %}