{# Bill Brief card (ADR 0020). A self-contained, glanceable view of a bill:
   the LLM executive summary on top, then the deterministic fact pack
   (always shown, even before a summary is generated). HTMX-swappable: the
   generate form POSTs here and replaces this whole <section>.
   Context: facts (BriefFacts|None), brief (BriefView|None), brief_error
   (str|None), bill ({congress, bill_type, bill_number}). #}
<section id="bill-brief" class="border border-stone-200 rounded-lg p-4 bg-white space-y-4">
  <div class="flex items-center gap-2">
    <h2 class="text-sm uppercase tracking-wide text-stone-500">Brief</h2>
  </div>

  {# -- Executive summary (the only AI-generated part) ------------------ #}
  <div>
    <div class="flex items-center gap-2 mb-1">
      <span class="text-xs uppercase tracking-wide text-stone-400">Executive summary</span>
      <span class="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-amber-100 text-amber-800">
        AI-generated
      </span>
    </div>

    {% if brief_error %}
      <p class="text-sm text-red-700 mb-2">{{ brief_error }}</p>
    {% endif %}

    {% if brief %}
      {% if brief.stale %}
        <p class="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded px-2 py-1 mb-2">
          The underlying data changed since this summary was generated — regenerate for an up-to-date version.
        </p>
      {% endif %}
      {% if brief.lens %}
        <p class="text-xs text-stone-500 mb-1">
          Tailored for: <span class="italic">&ldquo;{{ brief.lens }}&rdquo;</span>
        </p>
      {% endif %}
      <div class="prose prose-sm max-w-none text-stone-800 whitespace-pre-line">{{ brief.executive_summary }}</div>
      <p class="mt-2 text-xs text-stone-400">
        Generated {{ brief.generated_at|humanize_age }} · model {{ brief.model }} ·
        AI-generated; the facts below are from the record.
      </p>
    {% elif not brief_error %}
      <p class="text-stone-500 text-sm">
        No executive summary yet — generate one to distill the facts below into a few sentences.
      </p>
    {% endif %}
  </div>

  {# -- Deterministic fact pack (always shown) -------------------------- #}
  {% if facts %}
    <div class="border-t border-stone-200 pt-4 space-y-3 text-sm text-stone-800">
      <dl class="grid grid-cols-2 gap-x-6 gap-y-2">
        <div>
          <dt class="text-xs uppercase tracking-wide text-stone-400">Sponsor</dt>
          <dd>{{ facts.sponsor_display_name or "—" }}</dd>
        </div>
        <div>
          <dt class="text-xs uppercase tracking-wide text-stone-400">Policy area</dt>
          <dd>{{ facts.policy_area or "—" }}</dd>
        </div>
        <div>
          <dt class="text-xs uppercase tracking-wide text-stone-400">Introduced</dt>
          <dd>{{ facts.introduced_date or "—" }}</dd>
        </div>
        <div>
          <dt class="text-xs uppercase tracking-wide text-stone-400">Chamber</dt>
          <dd>{{ facts.origin_chamber }}</dd>
        </div>
      </dl>

      <div>
        <div class="text-xs uppercase tracking-wide text-stone-400">Status</div>
        <div>
          {% if facts.latest_action_date %}<span class="font-medium">{{ facts.latest_action_date }}</span> — {% endif %}
          {{ facts.latest_action_text or "—" }}
        </div>
      </div>

      <div>
        <div class="text-xs uppercase tracking-wide text-stone-400">Coalition</div>
        <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
          <span>
            {{ facts.cosponsor_count }} cosponsor{{ "" if facts.cosponsor_count == 1 else "s" }}
            ({{ facts.original_cosponsor_count }} original{% if facts.withdrawn_cosponsor_count %}, {{ facts.withdrawn_cosponsor_count }} withdrawn{% endif %})
          </span>
          {% for party, n in facts.cosponsor_party_counts|dictsort %}
            <span class="inline-block px-2 py-0.5 rounded bg-stone-100 text-stone-700 text-xs">{{ party }}&nbsp;{{ n }}</span>
          {% endfor %}
        </div>
      </div>

      <div class="flex flex-wrap gap-x-4 text-xs text-stone-500">
        <span>{{ facts.action_count }} action{{ "" if facts.action_count == 1 else "s" }} on file</span>
        <span>{{ facts.vote_count }} recorded vote{{ "" if facts.vote_count == 1 else "s" }}</span>
      </div>

      {% if facts.subjects %}
        <div>
          <div class="text-xs uppercase tracking-wide text-stone-400 mb-1">Subjects</div>
          <div class="flex flex-wrap gap-1">
            {% for s in facts.subjects %}
              <span class="inline-block px-2 py-0.5 rounded bg-stone-100 text-stone-700 text-xs">{{ s }}</span>
            {% endfor %}
          </div>
        </div>
      {% endif %}

      {% if facts.latest_summary_text %}
        <details class="border border-stone-200 rounded p-3 bg-stone-50">
          <summary class="cursor-pointer text-xs uppercase tracking-wide text-stone-500">
            Latest CRS summary — {{ facts.latest_summary_stage or "—" }}{% if facts.latest_summary_date %} · {{ facts.latest_summary_date }}{% endif %}
          </summary>
          <p class="mt-2 text-sm text-stone-800">{{ facts.latest_summary_text }}</p>
        </details>
      {% else %}
        <div class="text-xs text-stone-400">No CRS summary available for this bill.</div>
      {% endif %}
    </div>
  {% endif %}

  {# -- Generate / tailor form ------------------------------------------ #}
  <form
    hx-post="/bills/{{ bill.congress }}/{{ bill.bill_type }}/{{ bill.bill_number }}/brief"
    hx-target="#bill-brief"
    hx-swap="outerHTML"
    hx-disabled-elt="find button"
    class="border-t border-stone-200 pt-3 space-y-2"
  >
    <label class="block text-xs uppercase tracking-wide text-stone-400" for="brief-lens">
      Tailor this brief (optional)
    </label>
    <textarea
      id="brief-lens"
      name="lens"
      rows="2"
      placeholder="e.g. Emphasize the fiscal impact for a budget-committee audience"
      class="w-full rounded border border-stone-300 px-2 py-1 text-sm focus:border-stone-500 focus:outline-none focus:ring-1 focus:ring-stone-500"
    >{{ brief.lens if brief else "" }}</textarea>
    <div class="flex items-center gap-3">
      <button
        type="submit"
        class="rounded bg-stone-900 px-3 py-1.5 text-white text-sm font-medium hover:bg-stone-700 disabled:opacity-50"
      >
        {{ "Regenerate brief" if brief else "Generate brief" }}
      </button>
      <span class="htmx-indicator text-xs text-stone-500">Generating…</span>
    </div>
  </form>
  {# Indicator CSS lives inside the swapped section so an outerHTML
     regenerate replaces it rather than accumulating copies. #}
  <style>
    #bill-brief .htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
    #bill-brief .htmx-request .htmx-indicator { opacity: 1; }
  </style>
</section>