{% extends "layout.html" %}

{% block content %}
<section class="ui-shell"
  data-signals='{"expSearch": "{{ signals.search }}", "expStatus": "{{ signals.status }}", "expProjects": "{{ signals.projects }}", "expTypes": "{{ signals.types }}", "expSort": "{{ signals.sort }}", "expDirection": "{{ signals.direction }}", "expGroup": "{{ signals.group }}", "expSmartView": "{{ signals.smart_view }}", "expDateStart": "{{ signals.date_start }}", "expDateEnd": "{{ signals.date_end }}", "expDays": {{ signals.days }}, "expPage": {{ signals.page }}, "expFetching": false}'>

  {# Page header #}
  <div class="ui-page-header">
    <div class="flex flex-wrap items-start justify-between gap-3">
      <div>
        <p class="ui-eyebrow">Recommendation Workspace</p>
        <div class="mt-2 flex items-center gap-2">
          <h1 class="ui-page-title mt-0">Opportunities</h1>
          <details class="ui-help">
            <summary class="ui-help-button" aria-label="How to read this page">!</summary>
            <div class="ui-help-panel ui-help-panel-left">
              <p><span class="font-medium text-slate-900 dark:text-slate-100">Observed</span> uses the latest known cost basis.</p>
              <p class="mt-2"><span class="font-medium text-amber-700 dark:text-amber-300">Estimated</span> uses heuristic or workload savings.</p>
              <p class="mt-2"><span class="font-medium text-emerald-700 dark:text-emerald-300">Validated</span> uses dry-run confirmation.</p>
            </div>
          </details>
        </div>
      </div>
    </div>
  </div>

  {# Summary cards #}
  {% include "opportunities/_summary_cards.html" %}

  {# Background jobs banner #}
  {% if background_jobs_running %}
  <div id="bg-jobs-banner" class="mt-4 flex items-center gap-3 rounded-none border border-brand-200 dark:border-brand-700 bg-brand-50 dark:bg-brand-700/20 px-4 py-3">
    <svg class="animate-spin h-4 w-4 text-blue-500 dark:text-blue-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>
    <span class="text-[14px] text-brand-700 dark:text-brand-200">
      Background work:
      {% set parts = [] %}
      {% if running_syncs %}{% set _ = parts.append(running_syncs ~ ' sync' ~ ('s' if running_syncs != 1 else '')) %}{% endif %}
      {% if running_detections %}{% set _ = parts.append(running_detections ~ ' detection' ~ ('s' if running_detections != 1 else '')) %}{% endif %}
      {% if running_solutions %}{% set _ = parts.append(running_solutions ~ ' solution' ~ ('s' if running_solutions != 1 else '')) %}{% endif %}
      {{ parts | join(', ') }}
      · auto-refresh on
    </span>
  </div>
<script>
(function() {
  function readExplorerSignals() {
    var ds = document.querySelector('[data-signals]');
    if (!ds) return {};
    if (ds.__datastar && ds.__datastar.signals) {
      var s = ds.__datastar.signals;
      return {
        expSearch: s.expSearch && s.expSearch.value,
        expStatus: s.expStatus && s.expStatus.value,
        expProjects: s.expProjects && s.expProjects.value,
        expTypes: s.expTypes && s.expTypes.value,
        expSort: s.expSort && s.expSort.value,
        expDirection: s.expDirection && s.expDirection.value,
        expGroup: s.expGroup && s.expGroup.value,
        expSmartView: s.expSmartView && s.expSmartView.value,
        expDateStart: s.expDateStart && s.expDateStart.value,
        expDateEnd: s.expDateEnd && s.expDateEnd.value,
        expDays: s.expDays && s.expDays.value,
        expPage: s.expPage && s.expPage.value,
        expFetching: s.expFetching && s.expFetching.value
      };
    }
    try {
      return JSON.parse(ds.getAttribute('data-signals') || '{}');
    } catch (e) {
      return {};
    }
  }

  function buildExplorerUrl(overrides) {
    var s = readExplorerSignals();
    overrides = overrides || {};
    var merged = Object.assign({}, s, overrides);
    var params = new URLSearchParams();
    if (merged.expSearch) params.set('search', merged.expSearch);
    if (merged.expStatus && merged.expStatus !== 'all') params.set('status', merged.expStatus);
    if (merged.expProjects) params.set('projects', merged.expProjects);
    if (merged.expTypes) params.set('types', merged.expTypes);
    if (merged.expSort && merged.expSort !== 'cost') params.set('sort', merged.expSort);
    if (merged.expDirection && merged.expDirection !== 'desc') params.set('direction', merged.expDirection);
    if (merged.expGroup && merged.expGroup !== 'flat') params.set('group', merged.expGroup);
    if (merged.expSmartView) params.set('view', merged.expSmartView);
    if (merged.expDateStart) params.set('date_start', merged.expDateStart);
    if (merged.expDateEnd) params.set('date_end', merged.expDateEnd);
    if (merged.expDays && Number(merged.expDays) > 0) params.set('days', merged.expDays);
    if (merged.expPage && Number(merged.expPage) > 1) params.set('page', merged.expPage);
    var qs = params.toString();
    return window.location.pathname + (qs ? '?' + qs : '');
  }

  function refreshExplorerPreservingState() {
    var s = readExplorerSignals();
    if (s.expFetching) return;
    // Use SSE trigger to preserve sort order instead of full page reload
    var trigger = document.getElementById('_auto-refresh-trigger');
    if (trigger) {
      trigger.click();
      return;
    }
    // Fallback: full page reload
    var url = buildExplorerUrl();
    window.location.assign(url);
  }

  function stopAutoRefreshIfAvailable() {
    if (typeof window.stopOpportunitiesAutoRefresh === 'function') {
      window.stopOpportunitiesAutoRefresh();
    }
  }

  function pollBgJobs() {
    var banner = document.getElementById('bg-jobs-banner');
    if (!banner) return;
    setTimeout(function() {
      fetch('/opportunities/bg-jobs-status')
          .then(function(res) { return res.json(); })
          .then(function(data) {
            if (data.solutions > 0) {
              refreshExplorerPreservingState();
              return;
            }
            if (data.total === 0) {
              banner.remove();
              stopAutoRefreshIfAvailable();
              // All jobs done — do one final full page reload to update banner state
              var url = buildExplorerUrl();
              window.location.assign(url);
            } else {
              pollBgJobs();
            }
          })
          .catch(function() { pollBgJobs(); });
      }, 5000);
    }
    pollBgJobs();
  })();
  </script>
  {% endif %}

  {# Hidden trigger for SSE-based auto-refresh (preserves sort order).
     Use absolute + invisible (not display:none) so programmatic .click()
     still fires datastar event handlers and sends signals correctly. #}
  <button id="_auto-refresh-trigger"
    class="absolute w-0 h-0 overflow-hidden opacity-0 pointer-events-none"
    aria-hidden="true" tabindex="-1"
    data-on:click="@get('/opportunities/filter')"></button>

  {# Filter controls #}
  <div class="mt-6 mb-4 ui-surface p-4">
    {% include "opportunities/_filter_controls.html" %}
  </div>

  {# Loading indicator #}
  <div data-show="$expFetching" class="hidden flex items-center justify-center py-4">
    <div class="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
      <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
        <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>
      Loading...
    </div>
  </div>

  {# Content area (table or grouped view) #}
  <div class="mt-4 ui-surface overflow-hidden">
    {% if signals.group in ('project', 'type') %}
      {% include "opportunities/_grouped.html" %}
    {% else %}
      {% include "opportunities/_table.html" %}
    {% endif %}
  </div>

  {# Storage billing opportunities — dedicated table with DDL #}
  {% include "opportunities/_storage_billing_table.html" %}

</section>

{# URL state sync #}
<script>
(function() {
  function readExplorerSignals() {
    var ds = document.querySelector('[data-signals]');
    if (!ds) return {};
    if (ds.__datastar && ds.__datastar.signals) {
      var s = ds.__datastar.signals;
      return {
        expSearch: s.expSearch && s.expSearch.value,
        expStatus: s.expStatus && s.expStatus.value,
        expProjects: s.expProjects && s.expProjects.value,
        expTypes: s.expTypes && s.expTypes.value,
        expSort: s.expSort && s.expSort.value,
        expDirection: s.expDirection && s.expDirection.value,
        expGroup: s.expGroup && s.expGroup.value,
        expSmartView: s.expSmartView && s.expSmartView.value,
        expDateStart: s.expDateStart && s.expDateStart.value,
        expDateEnd: s.expDateEnd && s.expDateEnd.value,
        expDays: s.expDays && s.expDays.value,
        expPage: s.expPage && s.expPage.value,
        expFetching: s.expFetching && s.expFetching.value
      };
    }
    try {
      return JSON.parse(ds.getAttribute('data-signals') || '{}');
    } catch (e) {
      return {};
    }
  }

  function buildExplorerUrl(overrides) {
    var s = readExplorerSignals();
    overrides = overrides || {};
    var merged = Object.assign({}, s, overrides);
    var params = new URLSearchParams();
    if (merged.expSearch) params.set('search', merged.expSearch);
    if (merged.expStatus && merged.expStatus !== 'all') params.set('status', merged.expStatus);
    if (merged.expProjects) params.set('projects', merged.expProjects);
    if (merged.expTypes) params.set('types', merged.expTypes);
    if (merged.expSort && merged.expSort !== 'cost') params.set('sort', merged.expSort);
    if (merged.expDirection && merged.expDirection !== 'desc') params.set('direction', merged.expDirection);
    if (merged.expGroup && merged.expGroup !== 'flat') params.set('group', merged.expGroup);
    if (merged.expSmartView) params.set('view', merged.expSmartView);
    if (merged.expDateStart) params.set('date_start', merged.expDateStart);
    if (merged.expDateEnd) params.set('date_end', merged.expDateEnd);
    if (merged.expDays && Number(merged.expDays) > 0) params.set('days', merged.expDays);
    if (merged.expPage && Number(merged.expPage) > 1) params.set('page', merged.expPage);
    var qs = params.toString();
    return window.location.pathname + (qs ? '?' + qs : '');
  }

  function syncExplorerUrl() {
    try {
      history.replaceState(null, '', buildExplorerUrl());
    } catch (e) {
      /* ignore URL sync errors */
    }
  }

  function refreshExplorerPreservingState() {
    var s = readExplorerSignals();
    if (s.expFetching) return;
    // Use a hidden Datastar trigger to do an SSE refresh instead of a
    // full page reload. This preserves sort order and all client state.
    var trigger = document.getElementById('_auto-refresh-trigger');
    if (trigger) {
      trigger.click();
      return;
    }
    // Fallback: full page reload preserving URL params
    var url = buildExplorerUrl();
    window.location.assign(url);
  }
  var autoRefreshTimerId = null;

  function startOpportunitiesAutoRefresh() {
    if (autoRefreshTimerId !== null) return;
    autoRefreshTimerId = window.setInterval(function() {
      if (document.visibilityState === 'visible') {
        refreshExplorerPreservingState();
      }
    }, 5000);
  }

  function stopOpportunitiesAutoRefresh() {
    if (autoRefreshTimerId === null) return;
    window.clearInterval(autoRefreshTimerId);
    autoRefreshTimerId = null;
  }

  window.startOpportunitiesAutoRefresh = startOpportunitiesAutoRefresh;
  window.stopOpportunitiesAutoRefresh = stopOpportunitiesAutoRefresh;
  window.buildExplorerUrl = buildExplorerUrl;
  window.goToExplorerPage = function(page) {
    window.location.assign(buildExplorerUrl({ expPage: page }));
  };

  if (document.getElementById('bg-jobs-banner') || {{ "true" if running_solutions > 0 else "false" }}) {
    startOpportunitiesAutoRefresh();
  }

  window.addEventListener('pageshow', function(event) {
    var navEntries = performance.getEntriesByType && performance.getEntriesByType('navigation');
    var isBackForward = !!(navEntries && navEntries[0] && navEntries[0].type === 'back_forward');
    if (event.persisted || isBackForward) {
      refreshExplorerPreservingState();
    }
  });

  // After each SSE update, sync filter state to URL
  document.addEventListener('datastar-sse-message', function() {
    syncExplorerUrl();
  });
})();
</script>
{% endblock %}