{% extends "setup/layout.html" %}

{% block content %}
<div class="ui-pane p-6">
  <div class="mb-8 text-center">
    <div class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 mb-4">
      <svg class="w-7 h-7 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
    </div>
    <h1 class="ui-page-title">Governor is ready</h1>
    <p class="ui-page-subtitle">Review your configuration below, then launch the dashboard.</p>
  </div>

  <div class="space-y-3 mb-8">

    {# Step 1: Admin account (always present) #}
    <div class="flex items-start gap-3 rounded-lg border border-emerald-200 dark:border-emerald-800/60 bg-emerald-50 dark:bg-emerald-900/20 p-4">
      <svg class="w-4 h-4 mt-0.5 shrink-0 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
      <div>
        <p class="text-sm font-medium text-emerald-800 dark:text-emerald-200">Admin account created</p>
      </div>
    </div>

    {# Step 2: GCP credentials #}
    <div class="flex items-start gap-3 rounded-lg border border-emerald-200 dark:border-emerald-800/60 bg-emerald-50 dark:bg-emerald-900/20 p-4">
      <svg class="w-4 h-4 mt-0.5 shrink-0 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
      <div>
        <p class="text-sm font-medium text-emerald-800 dark:text-emerald-200">GCP service account configured</p>
        <p class="text-xs text-emerald-700 dark:text-emerald-400 mt-0.5">All 4 required IAM roles verified</p>
      </div>
    </div>

    {# Step 3: BigQuery region #}
    {% if state and state.bigquery_region %}
    <div class="flex items-start gap-3 rounded-lg border border-emerald-200 dark:border-emerald-800/60 bg-emerald-50 dark:bg-emerald-900/20 p-4">
      <svg class="w-4 h-4 mt-0.5 shrink-0 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
      <div>
        <p class="text-sm font-medium text-emerald-800 dark:text-emerald-200">BigQuery region: <code class="font-mono">{{ state.bigquery_region }}</code></p>
      </div>
    </div>
    {% endif %}

    {# Step 4: GitHub App #}
    {% if state %}
      {% if state.github_skipped %}
        <div class="flex items-start gap-3 rounded-lg border border-amber-200 dark:border-amber-800/60 bg-amber-50 dark:bg-amber-900/20 p-4">
          <svg class="w-4 h-4 mt-0.5 shrink-0 text-amber-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
          <div>
            <p class="text-sm font-medium text-amber-800 dark:text-amber-200">GitHub App — skipped</p>
            <p class="text-xs text-amber-700 dark:text-amber-400 mt-0.5">Detection-only mode. Configure in Admin → Settings to enable PR creation.</p>
          </div>
        </div>
      {% elif state.github_app_id %}
        <div class="flex items-start gap-3 rounded-lg border border-emerald-200 dark:border-emerald-800/60 bg-emerald-50 dark:bg-emerald-900/20 p-4">
          <svg class="w-4 h-4 mt-0.5 shrink-0 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
          <div>
            <p class="text-sm font-medium text-emerald-800 dark:text-emerald-200">GitHub App connected</p>
          </div>
        </div>
      {% endif %}
    {% endif %}

    {# Step 5: LLM #}
    {% if state %}
      {% if state.llm_skipped %}
        <div class="flex items-start gap-3 rounded-lg border border-amber-200 dark:border-amber-800/60 bg-amber-50 dark:bg-amber-900/20 p-4">
          <svg class="w-4 h-4 mt-0.5 shrink-0 text-amber-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
          <div>
            <p class="text-sm font-medium text-amber-800 dark:text-amber-200">LLM (Gemini) — skipped</p>
            <p class="text-xs text-amber-700 dark:text-amber-400 mt-0.5">Solution generation disabled. Configure in Admin → Settings to enable.</p>
          </div>
        </div>
      {% elif state.llm_api_key %}
        <div class="flex items-start gap-3 rounded-lg border border-emerald-200 dark:border-emerald-800/60 bg-emerald-50 dark:bg-emerald-900/20 p-4">
          <svg class="w-4 h-4 mt-0.5 shrink-0 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
          <div>
            <p class="text-sm font-medium text-emerald-800 dark:text-emerald-200">Gemini API key verified</p>
          </div>
        </div>
      {% endif %}
    {% endif %}

    {# Step 6: GCS bucket #}
    {% if state %}
      {% if state.gcs_skipped %}
        <div class="flex items-start gap-3 rounded-lg border border-amber-200 dark:border-amber-800/60 bg-amber-50 dark:bg-amber-900/20 p-4">
          <svg class="w-4 h-4 mt-0.5 shrink-0 text-amber-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
          <div>
            <p class="text-sm font-medium text-amber-800 dark:text-amber-200">GCS manifest bucket — skipped</p>
            <p class="text-xs text-amber-700 dark:text-amber-400 mt-0.5">Manifest-dependent features unavailable. Configure in Admin → Settings.</p>
          </div>
        </div>
      {% elif state.gcs_bucket_path %}
        <div class="flex items-start gap-3 rounded-lg border border-emerald-200 dark:border-emerald-800/60 bg-emerald-50 dark:bg-emerald-900/20 p-4">
          <svg class="w-4 h-4 mt-0.5 shrink-0 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
          <div>
            <p class="text-sm font-medium text-emerald-800 dark:text-emerald-200">GCS bucket access verified</p>
            <p class="text-xs text-emerald-700 dark:text-emerald-400 font-mono mt-0.5">{{ state.gcs_bucket_path }}</p>
          </div>
        </div>
      {% endif %}
    {% endif %}

  </div>

  <form method="post" action="/setup/complete">
    <button type="submit" class="w-full ui-btn-primary py-3 text-base font-semibold">
      <span class="btn-label">Launch Governor</span>
      <svg class="btn-spinner w-4 h-4 mx-auto" 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"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/></svg>
    </button>
  </form>
</div>
{% endblock %}