{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<section class="ops-hero">
  <div class="container">
    <div class="row align-items-end g-4">
      <div class="col-lg-8">
        <span class="eyebrow">Operator cockpit</span>
        <h1>Connector readiness and intake queue</h1>
        <p class="lead">Track source status, latest offers, and coverage by connector family before automated scraping is introduced.</p>
      </div>
      <div class="col-lg-4 text-lg-end">
        <a class="btn btn-accent btn-lg rounded-pill px-4" href="{% url 'source_create' %}">Register source</a>
      </div>
    </div>
  </div>
</section>

<section class="section-pad pt-0">
  <div class="container">
    <form class="filter-bar glass-card mb-4" method="get" role="search">
      <div class="row g-3 align-items-end">
        <div class="col-lg-5">
          <label class="form-label" for="q">Search source</label>
          <input class="form-control" id="q" type="search" name="q" value="{{ query }}" placeholder="Name, owner, or URL…">
        </div>
        <div class="col-lg-3">
          <label class="form-label" for="family">Family</label>
          <select class="form-select" id="family" name="family">
            <option value="">All families</option>
            {% for value,label in family_choices %}<option value="{{ value }}" {% if family == value %}selected{% endif %}>{{ label }}</option>{% endfor %}
          </select>
        </div>
        <div class="col-lg-3">
          <label class="form-label" for="status">Status</label>
          <select class="form-select" id="status" name="status">
            <option value="">All statuses</option>
            {% for value,label in status_choices %}<option value="{{ value }}" {% if status == value %}selected{% endif %}>{{ label }}</option>{% endfor %}
          </select>
        </div>
        <div class="col-lg-3">
          <label class="form-label" for="sort">Sort</label>
          <select class="form-select" id="sort" name="sort">
            <option value="family_name" {% if sort == "family_name" %}selected{% endif %}>Family + name</option>
            <option value="name_az" {% if sort == "name_az" %}selected{% endif %}>Name A-Z</option>
            <option value="name_za" {% if sort == "name_za" %}selected{% endif %}>Name Z-A</option>
            <option value="status" {% if sort == "status" %}selected{% endif %}>Status</option>
            <option value="offers_high" {% if sort == "offers_high" %}selected{% endif %}>Offers high-low</option>
            <option value="offers_low" {% if sort == "offers_low" %}selected{% endif %}>Offers low-high</option>
          </select>
        </div>
        <div class="col-lg-1 d-grid">
          <button class="btn btn-dark" type="submit">Go</button>
        </div>
        <div class="col-lg-12">
          <a class="small text-decoration-none" href="{% url 'ops_dashboard' %}">Clear filters</a>
        </div>
      </div>
    </form>

    <div class="ops-grid mb-4">
      <article class="metric-tile ops-tile"><span>{{ total_sources }}</span><small>Total sources</small></article>
      <article class="metric-tile ops-tile"><span>{{ active_jobs }}</span><small>Active offers</small></article>
      <article class="metric-tile ops-tile"><span>{{ needs_attention }}</span><small>Need attention</small></article>
      <article class="metric-tile ops-tile"><span>{{ stale_sources }}</span><small>Never checked</small></article>
    </div>

    <div class="row g-4">
      <div class="col-lg-8">
        <div class="glass-card ops-panel">
          <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
            <div>
              <p class="card-kicker mb-1">Source registry</p>
              <h2 class="h4 mb-0">Connector queue</h2>
            </div>
            <span class="status-pill">{{ sources|length }} tracked</span>
          </div>
          {% if sources %}
          <div class="table-responsive">
            <table class="table align-middle ops-table">
              <thead><tr><th>Source</th><th>Family</th><th>Status</th><th>Offers</th><th>Last checked</th></tr></thead>
              <tbody>
                {% for source in sources %}
                <tr>
                  <td><strong>{{ source.name }}</strong><br><a href="{{ source.url }}" target="_blank" rel="noopener">Open source</a></td>
                  <td>{{ source.get_family_display }}</td>
                  <td><span class="status-chip status-{{ source.status }}">{{ source.get_status_display }}</span></td>
                  <td>{{ source.job_total }}</td>
                  <td>{% if source.last_checked_at %}{{ source.last_checked_at|date:"M d, H:i" }}{% else %}<span class="text-muted">Not checked</span>{% endif %}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% if sources.has_other_pages %}
          <nav class="mt-3" aria-label="Sources pagination">
            <ul class="pagination mb-0">
              {% if sources.has_previous %}
                <li class="page-item"><a class="page-link" href="?{% if current_filters_qs %}{{ current_filters_qs }}&{% endif %}page={{ sources.previous_page_number }}">Previous</a></li>
              {% endif %}
              <li class="page-item disabled"><span class="page-link">Page {{ sources.number }} of {{ sources.paginator.num_pages }}</span></li>
              {% if sources.has_next %}
                <li class="page-item"><a class="page-link" href="?{% if current_filters_qs %}{{ current_filters_qs }}&{% endif %}page={{ sources.next_page_number }}">Next</a></li>
              {% endif %}
            </ul>
          </nav>
          {% endif %}
          {% else %}
          <div class="empty-state">No sources yet. Register the first portal, agency, or company careers page.</div>
          {% endif %}
        </div>
      </div>

      <div class="col-lg-4">
        <div class="glass-card ops-panel mb-4">
          <p class="card-kicker mb-1">Coverage</p>
          <h2 class="h5">By family</h2>
          {% for row in family_breakdown %}
          <div class="breakdown-row"><span>{{ row.family|title }}</span><strong>{{ row.total }} sources · {{ row.jobs }} offers</strong></div>
          {% empty %}<p class="text-muted mb-0">No family data yet.</p>{% endfor %}
        </div>
        <div class="glass-card ops-panel">
          <p class="card-kicker mb-1">Health</p>
          <h2 class="h5">By status</h2>
          {% for row in status_breakdown %}
          <div class="breakdown-row"><span>{{ row.status|title }}</span><strong>{{ row.total }}</strong></div>
          {% empty %}<p class="text-muted mb-0">No status data yet.</p>{% endfor %}
        </div>
      </div>
    </div>

    <div class="glass-card ops-panel mt-4">
      <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
        <div><p class="card-kicker mb-1">Review queue</p><h2 class="h4 mb-0">Latest normalized offers</h2></div>
        <a class="btn btn-outline-dark rounded-pill px-3" href="{% url 'job_list' %}">View all</a>
      </div>
      <div class="row g-3">
        {% for job in recent_jobs %}
        <div class="col-md-6 col-xl-3">
          <article class="queue-card">
            <span class="source-chip">{{ job.source.get_family_display }}</span>
            <h3 class="h6 mt-3"><a href="{% url 'job_detail' job.pk %}">{{ job.title }}</a></h3>
            <p class="mb-1">{{ job.company }}</p>
            <small class="text-muted">{{ job.location }} · {{ job.created_at|date:"M d" }}</small>
          </article>
        </div>
        {% empty %}
        <div class="col-12"><div class="empty-state">No offers in the queue yet.</div></div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>
{% endblock %}