{% extends "base.html" %}

{% block title %}Dashboard — Job Cannon{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto space-y-8">

  <!-- Page header -->
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-bold text-slate-100">Dashboard</h1>
    <span class="text-sm text-slate-400">At-a-glance overview</span>
  </div>

  {# F1 — Inbox wiring banner: shows only when status has been RED for ≥7 days #}
  {% if inbox_banner %}
  <div class="bg-red-900/60 border border-red-700 rounded-lg px-4 py-3 flex items-center justify-between">
    <div class="flex flex-col gap-1">
      <span class="text-red-200 text-sm font-semibold">Inbox wiring: {{ inbox_banner.summary }}</span>
      <span class="text-red-300 text-xs">{{ inbox_banner.reason }}</span>
    </div>
    <a href="{{ url_for('settings.index') }}#inbox-status-tile"
       class="text-red-300 hover:text-red-200 underline text-xs whitespace-nowrap">
      Review in Settings
    </a>
  </div>
  {% endif %}

  {# ── Stat Cards (incl. budget banner) — live-update ── #}
  {# Two refresh sources, no polling:                                          #}
  {#   • dashboard-refresh (from:body) — fired by sync/batch-scoring/scan      #}
  {#     completion in THIS tab (see _BATCH_HX_TRIGGER in batch_scoring).      #}
  {#   • sse:* — pushed by the /events stream when a background scheduler job  #}
  {#     mutates the underlying data (see job_finder/web/live_events.py).      #}
  {# Covers every datum on the cards: counts (jobs), today's cost (costs),     #}
  {# in-review (pipeline), pending-review (detections).                        #}
  <section aria-label="Key metrics">
    <div id="dashboard-stats"
         hx-get="{{ url_for('dashboard.stats_fragment') }}"
         hx-trigger="dashboard-refresh from:body, sse:jobs-changed, sse:costs-changed, sse:pipeline-changed, sse:detections-changed"
         hx-swap="innerHTML">
      {% include "dashboard/_stats_cards.html" %}
    </div>
  </section>

  <!-- ── Quick Actions ── -->
  <section aria-label="Quick actions">
    <h2 class="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-3">Quick Actions</h2>
    <div class="flex flex-wrap gap-3 items-start">
      {# Dynamic actions — auto-refresh on dashboard-refresh. 5s delay gives    #}
      {# the backend time to finalize session state (status='done', counts).   #}
      {# class="contents" makes the wrapper layout-transparent so its children #}
      {# participate in the parent flex row. #}
      <div id="dashboard-quick-actions"
           class="contents"
           hx-get="{{ url_for('dashboard.quick_actions_fragment') }}"
           hx-trigger="dashboard-refresh from:body delay:5s"
           hx-swap="innerHTML">
        {% include "dashboard/_quick_actions.html" %}
      </div>

      {# Static action — does not need to refresh on dashboard-refresh. #}
      <button type="button"
              onclick="(function(){ var d=document.getElementById('manual-job-dialog'); var f=document.getElementById('manual-job-form'); var r=document.getElementById('manual-job-dialog-result'); if(f) f.reset(); if(r) r.innerHTML=''; d.showModal(); })()"
              class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-slate-200 text-sm font-medium rounded-lg transition-colors">
        Add Job Manually
      </button>
    </div>
  </section>

  <dialog id="manual-job-dialog"
          class="max-w-lg w-[min(100%,28rem)] rounded-xl border border-slate-700 bg-slate-900 text-slate-100 shadow-2xl p-0 backdrop:bg-black/60">
    <div class="px-5 py-4 border-b border-slate-700 flex items-start justify-between gap-3">
      <div>
        <h2 class="text-lg font-semibold text-slate-100">Add job from listing</h2>
        <p class="text-xs text-slate-400 mt-1">Paste the job posting URL. Optional fields override or supplement what we fetch from the page.</p>
      </div>
      <button type="button"
              class="shrink-0 text-slate-400 hover:text-slate-200 text-xl leading-none px-1"
              aria-label="Close"
              onclick="document.getElementById('manual-job-dialog').close()">×</button>
    </div>
    <form id="manual-job-form"
          hx-post="{{ url_for('jobs.add_from_listing') }}"
          hx-target="#manual-job-dialog-result"
          hx-swap="innerHTML"
          class="px-5 py-4 space-y-3">
      <div>
        <label for="manual-listing-url" class="block text-xs font-medium text-slate-400 mb-1">Listing URL <span class="text-red-400">*</span></label>
        <input id="manual-listing-url" name="listing_url" type="url" required autocomplete="off"
               placeholder="https://…"
               class="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-100 focus:border-indigo-500 focus:outline-none">
      </div>
      <div>
        <label for="manual-job-title" class="block text-xs font-medium text-slate-400 mb-1">Job title <span class="text-slate-500">(optional)</span></label>
        <input id="manual-job-title" name="job_title" type="text" maxlength="512" autocomplete="off"
               class="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-100 focus:border-indigo-500 focus:outline-none"
               placeholder="Leave blank to infer from the page">
      </div>
      <div>
        <label for="manual-company" class="block text-xs font-medium text-slate-400 mb-1">Company <span class="text-slate-500">(optional)</span></label>
        <input id="manual-company" name="company" type="text" maxlength="256" autocomplete="organization"
               class="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-100 focus:border-indigo-500 focus:outline-none"
               placeholder="Leave blank to infer from the page">
      </div>
      <div>
        <label for="manual-location" class="block text-xs font-medium text-slate-400 mb-1">Location <span class="text-slate-500">(optional)</span></label>
        <input id="manual-location" name="location" type="text" maxlength="256" autocomplete="off"
               class="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-100 focus:border-indigo-500 focus:outline-none">
      </div>
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label for="manual-salary-min" class="block text-xs font-medium text-slate-400 mb-1">Salary min (USD)</label>
          <input id="manual-salary-min" name="salary_min" type="number" min="0" step="1000" inputmode="numeric"
                 class="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-100 focus:border-indigo-500 focus:outline-none">
        </div>
        <div>
          <label for="manual-salary-max" class="block text-xs font-medium text-slate-400 mb-1">Salary max (USD)</label>
          <input id="manual-salary-max" name="salary_max" type="number" min="0" step="1000" inputmode="numeric"
                 class="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-100 focus:border-indigo-500 focus:outline-none">
        </div>
      </div>
      <div>
        <label for="manual-description" class="block text-xs font-medium text-slate-400 mb-1">Description / notes <span class="text-slate-500">(optional)</span></label>
        <textarea id="manual-description" name="description" rows="4" maxlength="32000"
                  class="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-100 focus:border-indigo-500 focus:outline-none font-mono"
                  placeholder="Optional — pasted JD or notes"></textarea>
      </div>
      <div id="manual-job-dialog-result" class="min-h-0"></div>
      <div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-700/80">
        <button type="button"
                class="px-3 py-2 text-sm text-slate-400 hover:text-slate-200"
                onclick="document.getElementById('manual-job-dialog').close()">Cancel</button>
        <button type="submit"
                class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium rounded-lg transition-colors">
          Save &amp; enrich
        </button>
      </div>
    </form>
  </dialog>

  {# ── Parser Health widget — live-update ── #}
  {# Re-fetches on dashboard-refresh (this tab's sync/scoring runs) and on    #}
  {# sse:jobs-changed so a source newly flagged DEGRADED surfaces without a   #}
  {# full page reload. Inline render on full page load avoids a layout shift. #}
  <section aria-label="Parser health">
    <div id="degraded-sources"
         hx-get="{{ url_for('dashboard.degraded_sources_fragment') }}"
         hx-trigger="dashboard-refresh from:body, sse:jobs-changed"
         hx-swap="innerHTML">
      {% include "dashboard/_degraded_sources.html" %}
    </div>
  </section>

  {# ── Heal Activity panel (autoheal Phase D / D5) ── #}
  {# Server-rendered on full page load only: heal events are post-ingestion / #}
  {# daily-sweep cadence, so a live refetch hook would be noise. #}
  <section aria-label="Heal activity">
    {% include "dashboard/_heal_activity.html" %}
  </section>

  <!-- ── Pipeline Review Queue ── -->
  {# The container refetches on sse:detections-changed so detections surfaced  #}
  {# by the background pipeline-detection job appear live. It deliberately     #}
  {# does NOT listen to dashboard-refresh: user confirm/dismiss has its own    #}
  {# card-level swap + "confirmed!" animation (see blueprints/detections.py),  #}
  {# and a competing innerHTML refetch would blow that animation away. The     #}
  {# fragment also OOB-refreshes the header badge below.                       #}
  <section aria-label="Pipeline review queue">
    {% include "dashboard/_pipeline_review_header.html" %}
    <div id="review-queue-container"
         hx-get="{{ url_for('dashboard.review_queue_fragment') }}"
         hx-trigger="sse:detections-changed"
         hx-swap="innerHTML">
      {% include "dashboard/_review_queue.html" %}
    </div>
  </section>

  {# ── History block (pipeline summary + activity tables) — live-update ── #}
  {# Re-fetches on dashboard-refresh (this tab's sync/scoring/scan runs) and   #}
  {# on the SSE events whose data these tables surface — no polling. Partial   #}
  {# is shared with the full-page render above and dashboard.history_fragment. #}
  <div id="dashboard-history"
       hx-get="{{ url_for('dashboard.history_fragment') }}"
       hx-trigger="dashboard-refresh from:body, sse:jobs-changed, sse:pipeline-changed, sse:detections-changed"
       hx-swap="innerHTML">
    {% include "dashboard/_dashboard_history.html" %}
  </div>

</div>
{% endblock %}