{% extends "base.html" %}
{% block title %}{{ project_name }} · Harbormaster{% endblock %}
{% block content %}

<nav class="mb-4 text-sm text-gray-400">
  <a href="/" class="hover:text-cyan-400">← Dashboard</a>
  <span class="mx-2 text-gray-700">/</span>
  <span class="text-gray-300">{{ project_name }}</span>
  {% if host != "local" %}
    <span class="ml-2 text-xs px-2 py-0.5 bg-amber-900/40 text-amber-300 rounded">host: {{ host }}</span>
  {% endif %}
</nav>

<header class="mb-6 border border-gray-800 rounded-lg p-4 bg-gray-900/40">
  <div class="flex items-baseline justify-between gap-4 flex-wrap">
    <h2 class="text-xl font-bold text-cyan-400">{{ project_name }}</h2>
    {% if project %}
      <span class="text-xs text-gray-500">
        last commit:
        {% if project.last_commit %}
          <code class="text-gray-300">{{ project.last_commit.hash }}</code>
        {% else %}
          <span class="text-gray-600">(no git)</span>
        {% endif %}
      </span>
    {% endif %}
  </div>
  {% if project %}
    <p class="text-sm text-gray-300 mt-2">{{ project.brief or "(no description)" }}</p>
    <footer class="mt-3 flex flex-wrap gap-2 text-xs items-center">
      {% if project.has_serena %}
        <span class="bg-purple-900/50 text-purple-300 px-2 py-0.5 rounded">serena</span>
      {% endif %}
      {% if project.has_claude_md %}
        <span class="bg-cyan-900/50 text-cyan-300 px-2 py-0.5 rounded">claude.md</span>
      {% endif %}
      <span class="text-gray-500 truncate font-mono">{{ project.path }}</span>
    </footer>
  {% endif %}
</header>

<section class="mb-6">
  <header class="mb-3 flex items-baseline justify-between">
    <h3 class="text-base font-bold text-gray-300">Status</h3>
    <span class="text-xs text-gray-500">
      sourced from <code class="text-cyan-400">project_status</code>
    </span>
  </header>
  <pre class="text-sm whitespace-pre-wrap break-words border border-gray-800 rounded-lg p-4 bg-gray-900/40 text-gray-300 leading-relaxed">{{ status_markdown }}</pre>
</section>

{% include "_partials/ask_form.html" %}
{% include "_partials/delegate_form.html" %}

<!-- v2.1.0a6: trajectory history. Pulls from /api/trajectories
     filtered by this project. Each row is a collapsible Q&A pair. -->
<!-- v3.0.0a8: cross-section refresh — listen for hm:trajectory:dirty
     events dispatched on stream completion by ask/delegate forms,
     and reload trajectories when the dispatched project matches.
     v4.0.0a4: hm:trajectory:append prepends the just-streamed Q&A
     synthetically (instant feedback) before the dirty reload runs. -->
<section x-data="trajectoryList({
           project: {{ project_name | tojson }},
           host: {{ host | tojson }},
         })"
         x-init="load()"
         x-on:hm:trajectory:dirty.window="if ($event.detail && $event.detail.project === project) load()"
         x-on:hm:trajectory:append.window="if ($event.detail && $event.detail.project === project) prepend($event.detail.entry)"
         class="mb-6 border border-gray-800 rounded-lg p-4 bg-gray-900/40">
  <header class="mb-3 flex items-baseline justify-between gap-2 flex-wrap">
    <h3 class="text-base font-bold text-gray-300">Recent Q&amp;A</h3>
    <div class="flex items-center gap-3 text-xs text-gray-500">
      <label class="flex items-center gap-1.5">
        limit
        <input type="number" min="1" max="200" x-model.number="limit" @change="load()"
               class="w-16 bg-gray-950 border border-gray-800 rounded px-2 py-0.5">
      </label>
      <span x-show="trajectories.length > 0"
            x-text="`${trajectories.length} record${trajectories.length === 1 ? '' : 's'}`"></span>
    </div>
  </header>
  <p x-show="message" :aria-hidden="!message" role="status" aria-live="polite" class="text-xs text-amber-400" x-text="message"></p>
  <p x-show="error" :aria-hidden="!error" role="alert" aria-live="assertive" class="text-xs text-red-400" x-text="error"></p>
  <p x-show="!message && !error && trajectories.length === 0"
     :aria-hidden="!(!message && !error && trajectories.length === 0)"
     class="text-xs text-gray-400">
    No prior trajectories yet — ask or delegate something above and it will record here.
  </p>
  <ul class="space-y-2">
    <!-- v5.0.0a4: keyed by content tuple instead of t.id so the
         optimistic→real reconciliation preserves the DOM node and the
         CSS transition can cross-fade the border / bg colour cleanly. -->
    <template x-for="t in trajectories"
              :key="t.project + ':' + t.tool + ':' + t.question">
      <li x-data="{ open: false }"
          class="rounded border transition-colors duration-200"
          :class="optimisticBorderClass(t)">
        <button type="button" @click="open = !open"
                :aria-expanded="open"
                :aria-label="open ? 'Collapse trajectory details' : 'Expand trajectory details'"
                class="w-full text-left px-3 py-2 hover:bg-gray-900/50 transition flex items-baseline justify-between gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-950">
          <span class="text-sm text-gray-200 truncate" x-text="t.question"></span>
          <span class="text-xs text-gray-500 shrink-0 flex gap-2 items-center">
            <!-- v6.0.0a2: three escalation tiers driven by tier(t):
                   "fresh" → cyan "● new" badge
                   "stale" → amber spinner ("writing back…")
                   "stuck" → red badge ("writeback stuck?")
                 v8.0.0a2: each tier carries an explicit aria-label so
                 screen readers announce the writeback state clearly. -->
            <span x-show="tier(t) === 'stale'"
                  :aria-hidden="tier(t) !== 'stale'"
                  role="status"
                  aria-label="Writing back to FleetQ"
                  class="inline-block w-2 h-2 border border-amber-400 border-t-transparent rounded-full animate-spin"
                  title="writing back…"></span>
            <span x-show="tier(t) === 'stuck'"
                  :aria-hidden="tier(t) !== 'stuck'"
                  role="alert"
                  aria-label="Trajectory writeback stuck"
                  class="text-rose-400 font-bold"
                  title="server hasn't confirmed this entry — writeback may be stuck"><span aria-hidden="true">⚠</span>&nbsp;stuck?</span>
            <span x-show="tier(t) === 'fresh'"
                  :aria-hidden="tier(t) !== 'fresh'"
                  aria-label="New trajectory"
                  class="text-cyan-400 font-bold"><span aria-hidden="true">●</span>&nbsp;new</span>
            <span x-text="t.tool"></span>
            <span x-text="formatDate(t.created_at || t.timestamp_s)"></span>
            <span x-text="open ? '▾' : '▸'"></span>
          </span>
        </button>
        <div x-show="open" class="px-3 pb-3">
          <div class="text-xs text-gray-500 mb-1 flex gap-2">
            <span x-text="`host: ${t.host}`"></span>
            <span x-show="t.recall_count > 0" x-text="`recalled: ${t.recall_count}×`"></span>
          </div>
          <p class="text-sm text-gray-300 mb-2 font-bold">Q:</p>
          <p class="text-sm text-gray-200 whitespace-pre-wrap break-words mb-2" x-text="t.question"></p>
          <p class="text-sm text-gray-300 mb-2 font-bold">A:</p>
          <p class="text-sm text-gray-200 whitespace-pre-wrap break-words" x-text="t.answer"></p>
        </div>
      </li>
    </template>
  </ul>
</section>

<script>
  function trajectoryList(initial) {
    return {
      project: initial.project, host: initial.host,
      trajectories: [], message: '', error: '', limit: 20,
      // v5.0.0a4: tick used to flag stale optimistics; updated every
      // 1s. Bound to isStale() so the spinner appears live without a
      // full reload.
      now: Date.now() / 1000,
      _tickHandle: null,

      init() {
        this._tickHandle = setInterval(() => {
          this.now = Date.now() / 1000;
        }, 1000);
      },

      destroy() {
        if (this._tickHandle) clearInterval(this._tickHandle);
      },

      // v6.0.0a2: read configurable threshold from the meta tag emitted
      // by base.html. Falls back to 5s if the tag is missing (older
      // pages or unit tests).
      _staleThreshold() {
        const m = document.querySelector('meta[name="hm-optimistic-stale-seconds"]');
        const raw = m ? parseInt(m.getAttribute('content'), 10) : NaN;
        return Number.isFinite(raw) && raw > 0 ? raw : 5;
      },

      // Returns one of: "fresh" | "stale" | "stuck" | "" (non-optimistic).
      // The escalation tier is driven by age vs. configured threshold:
      //   age 0..N        → fresh
      //   age N..(N×6)    → stale
      //   age > N×6       → stuck
      // Default N=5 yields 0..5s fresh, 5..30s stale, >30s stuck.
      tier(entry) {
        if (!entry || !entry._optimistic) return '';
        const age = this.now - (entry.timestamp_s || 0);
        const threshold = this._staleThreshold();
        if (age <= threshold) return 'fresh';
        if (age <= threshold * 6) return 'stale';
        return 'stuck';
      },

      // Border + bg color class for a trajectory <li>. Non-optimistic
      // entries stay neutral; optimistic ones tint by tier.
      optimisticBorderClass(entry) {
        switch (this.tier(entry)) {
          case 'fresh':
          case 'stale':
            return 'border-cyan-700/40 bg-cyan-950/30';
          case 'stuck':
            return 'border-rose-700/50 bg-rose-950/30';
          default:
            return 'border-gray-800 bg-gray-950/50';
        }
      },

      // Kept for backward-compat with v5.0.0a4 callers; now derived
      // from tier(). Returns true when the entry is past the fresh
      // threshold (so spinner-or-stuck visual applies).
      isStale(entry) {
        const t = this.tier(entry);
        return t === 'stale' || t === 'stuck';
      },

      async load() {
        this.message = ''; this.error = '';
        try {
          const params = new URLSearchParams({
            project: this.project,
            limit: String(this.limit),
          });
          if (this.host && this.host !== 'local') params.set('host', this.host);
          const r = await hmFetch('/api/trajectories?' + params.toString());
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const data = await r.json();
          // v4.0.0a4 → v5.0.0a4: reconcile in-place when possible.
          // The DOM keys on (project, tool, question) so an optimistic
          // entry that gets a server match keeps its <li> mounted —
          // only the _optimistic flag flips, and Tailwind's
          // transition-colors animates the border / bg cross-fade.
          const fresh = data.trajectories || [];
          const optimistics = (this.trajectories || []).filter(t => t._optimistic);
          const reconciled = fresh.map((s) => {
            const match = optimistics.find(o =>
              o.project === s.project &&
              o.tool === s.tool &&
              o.question === s.question
            );
            if (match) {
              // In-place upgrade: keep DOM, drop the optimistic flag.
              return { ...match, ...s, _optimistic: false };
            }
            return s;
          });
          // Orphans (writeback in flight) bubble to the top.
          const orphans = optimistics.filter(o =>
            !fresh.some(s =>
              s.project === o.project &&
              s.tool === o.tool &&
              s.question === o.question
            )
          );
          this.trajectories = [...orphans, ...reconciled];
          if (data.message) this.message = data.message;
        } catch (e) {
          this.error = e.message;
        }
      },

      // v4.0.0a4: prepend an optimistic Q&A entry without a round-trip.
      // The next load() will reconcile (matching server entry replaces it).
      prepend(entry) {
        if (!entry) return;
        // Avoid duplicates if the same id is dispatched twice rapidly.
        const exists = this.trajectories.some(t => t.id === entry.id);
        if (exists) return;
        this.trajectories = [entry, ...this.trajectories];
      },

      formatDate(epoch_s) {
        const d = new Date(epoch_s * 1000);
        const now = new Date();
        if (now - d < 24 * 3600 * 1000) {
          return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        }
        return d.toLocaleDateString([], { month: 'short', day: 'numeric' });
      },
    };
  }
</script>

{% endblock %}