{% extends "base.html" %}

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

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

  <!-- Page header -->
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-2xl font-bold text-slate-100">Companies</h1>
      <p class="text-slate-400 text-sm mt-1">Tracked companies with ATS discovery and careers page scraping.</p>
    </div>
    <div class="flex items-center gap-3">
      {# Scan ATS button. The POST returns a polling-progress fragment that
         lives in #scan-result and re-fetches /companies/scan/status every
         2s. hx-disabled-elt only blocks the button for the duration of the
         POST itself (~ms); polling keeps the user informed without blocking. #}
      <button
        hx-post="{{ url_for('companies.scan') }}"
        hx-target="#scan-result"
        hx-swap="outerHTML"
        hx-disabled-elt="this"
        class="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 disabled:bg-indigo-800 disabled:cursor-wait text-white text-sm font-medium rounded-lg transition-colors">
        <svg class="htmx-indicator w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
        </svg>
        <span>Scan ATS</span>
      </button>
      <!-- Add Company toggle -->
      <button
        aria-label="Toggle add company form"
        aria-expanded="false"
        onclick="this.setAttribute('aria-expanded', document.getElementById('add-company-form').classList.toggle('hidden') ? 'false' : 'true')"
        class="flex items-center gap-2 px-4 py-2 bg-slate-700 hover:bg-slate-600 text-slate-100 text-sm font-medium rounded-lg transition-colors">
        <svg class="w-4 h-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
        </svg>
        Add Company
      </button>
    </div>
  </div>

  {# Scan result slot. The Scan ATS button replaces this div with either the
     progress fragment (which polls every 2s) or the terminal done/error
     fragment. Both fragments keep id="scan-result" so subsequent polls
     swap into the same slot.

     If a scan is already running when the page loads (e.g. user clicked
     Scan ATS, navigated away, came back), inline the polling progress
     fragment so they immediately see "Scanned X of N" instead of an
     empty card. #}
  {% if running_scan %}
    {% with session_id=running_scan.session_id, total=running_scan.total, scanned=running_scan.scanned %}
      {% include "companies/_scan_ats_progress.html" %}
    {% endwith %}
  {% else %}
    <div id="scan-result"></div>
  {% endif %}

  <!-- Pipeline health metrics — live-refresh on background company changes -->
  {# Read-only stat cards, so an SSE-driven innerHTML swap is non-disruptive   #}
  {# (nothing here holds focus/scroll). The companies TABLE below is           #}
  {# deliberately NOT wired to SSE: it has search + infinite-scroll            #}
  {# pagination, and an auto-refetch would reset the user's scroll position.   #}
  <div id="companies-health"
       hx-get="{{ url_for('companies.health_fragment') }}"
       hx-trigger="sse:companies-changed, sse:jobs-changed"
       hx-swap="innerHTML">
    {% include "companies/_health_metrics.html" %}
  </div>

  <!-- Add company form (hidden by default) -->
  <div id="add-company-form" class="hidden bg-slate-800 rounded-xl border border-slate-700 p-5">
    <h3 class="text-sm font-semibold text-slate-200 mb-4">Add Company</h3>
    <form action="{{ url_for('companies.add') }}" method="post" class="flex items-end gap-3">
      <div class="flex-1">
        <label class="block text-xs font-medium text-slate-400 mb-1">Company Name</label>
        <input type="text" name="company_name" required placeholder="e.g. Stripe"
               class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
      </div>
      <div class="flex-1">
        <label class="block text-xs font-medium text-slate-400 mb-1">Homepage URL <span class="text-slate-600">(optional)</span></label>
        <input type="url" name="homepage_url" placeholder="https://stripe.com"
               class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
      </div>
      <button type="submit"
              class="px-4 py-2 bg-violet-600 hover:bg-violet-500 text-white text-sm font-medium rounded-lg transition-colors">
        Add
      </button>
    </form>
  </div>

  {# Suggested companies (WP6) — feed-frequent, untracked. Omitted entirely
     when empty. Each Track button swaps itself to the ✓ state in place. #}
  {% if suggested_companies %}
  <div class="bg-slate-800 rounded-xl border border-slate-700 p-5">
    <h3 class="text-sm font-semibold text-slate-200 mb-1">Companies in your feed</h3>
    <p class="text-xs text-slate-400 mb-4">
      These show up often in your ingested jobs but aren't tracked yet. Track one and
      Job Cannon will try to find its job board (Greenhouse / Lever / Ashby / Workday / SmartRecruiters)
      and scan it on every sync.
    </p>
    <ul class="grid grid-cols-1 sm:grid-cols-2 gap-2">
      {% for s in suggested_companies %}
      <li class="flex items-center justify-between gap-3 px-3 py-2 rounded-lg bg-slate-900/60 border border-slate-700/60">
        <div class="min-w-0">
          <span class="block text-sm text-slate-200 truncate">{{ s.company }}</span>
          <span class="block text-xs text-slate-500">
            {{ s.job_cnt }} job{{ 's' if s.job_cnt != 1 }}{% if s.good_cnt %} ({{ s.good_cnt }} good fit{{ 's' if s.good_cnt != 1 }}){% endif %}
          </span>
        </div>
        {% with company_name = s.company, dedup_key = None, ui = 'card', tracked = False %}
          {% include "companies/_track_button.html" %}
        {% endwith %}
      </li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}

  <!-- Filters row -->
  <div class="flex items-center gap-3">
    <form class="flex items-center gap-3 flex-1">
      <input type="text" name="search" value="{{ search }}"
             placeholder="Search companies..."
             hx-get="{{ url_for('companies.index') }}"
             hx-trigger="input changed delay:300ms"
             hx-target="#companies-table"
             hx-swap="innerHTML"
             hx-include=".filter-input"
             class="filter-input flex-1 max-w-xs bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 placeholder-slate-500 focus:border-violet-500 focus:outline-none">

      <select name="ats_platform"
              hx-get="{{ url_for('companies.index') }}"
              hx-trigger="change"
              hx-target="#companies-table"
              hx-swap="innerHTML"
              hx-include=".filter-input"
              class="filter-input appearance-auto bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
        <option value="" {% if not ats_platform %}selected{% endif %}>All Platforms</option>
        <option value="lever" {% if ats_platform == 'lever' %}selected{% endif %}>Lever</option>
        <option value="greenhouse" {% if ats_platform == 'greenhouse' %}selected{% endif %}>Greenhouse</option>
        <option value="ashby" {% if ats_platform == 'ashby' %}selected{% endif %}>Ashby</option>
        <option value="none" {% if ats_platform == 'none' %}selected{% endif %}>No ATS</option>
      </select>

      <span class="text-xs text-slate-500">{{ total_count }} companies</span>
    </form>
  </div>

  <!-- Companies table -->
  <div id="companies-table">
    {% include "companies/_table.html" %}
  </div>

</div>
{% endblock %}