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

{% block content %}
<div class="ui-pane p-6">
  <div class="mb-5">
    <p class="ui-eyebrow">Step 2 of 6</p>
    <h1 class="ui-page-title">GCP Authentication</h1>
    <p class="ui-page-subtitle">Choose your installation mode and how Governor authenticates with Google Cloud.</p>
  </div>

  {% set selected_installation_mode = installation_mode if installation_mode is defined else (state.installation_mode if state and state.installation_mode else "cloud") %}
  <div class="mb-6 mx-auto max-w-2xl">
    <p class="mb-3 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Installation Mode</p>
    <div class="grid grid-cols-2 gap-3 sm:gap-4" id="installation-mode-picker">
      <label class="installation-option cursor-pointer rounded-xl border-2 p-4 sm:p-5 transition-colors {% if selected_installation_mode == 'cloud' %}border-brand-500 bg-brand-50 dark:bg-brand-900/20{% else %}border-slate-200 dark:border-slate-700{% endif %}">
        <input type="radio" name="installation_mode_pick" value="cloud" class="sr-only" {% if selected_installation_mode == 'cloud' %}checked{% endif %}>
        <div>
          <p class="text-sm font-semibold text-slate-800 dark:text-slate-100 leading-tight">Cloud</p>
          <p class="mt-1 text-sm text-slate-400 dark:text-slate-500 leading-tight">Prefer managed runtime credentials and shared infrastructure.</p>
        </div>
      </label>
      <label class="installation-option cursor-pointer rounded-xl border-2 p-4 sm:p-5 transition-colors {% if selected_installation_mode == 'local_dev' %}border-brand-500 bg-brand-50 dark:bg-brand-900/20{% else %}border-slate-200 dark:border-slate-700{% endif %}">
        <input type="radio" name="installation_mode_pick" value="local_dev" class="sr-only" {% if selected_installation_mode == 'local_dev' %}checked{% endif %}>
        <div>
          <p class="text-sm font-semibold text-slate-800 dark:text-slate-100 leading-tight">Local Dev</p>
          <p class="mt-1 text-sm text-slate-400 dark:text-slate-500 leading-tight">Use your own service account and configure projects manually.</p>
        </div>
      </label>
    </div>
  </div>

  {# ── Auth method toggle — 60% width, centered, compact ── #}
  {% set selected_method = auth_method if auth_method is defined else "json" %}
  <div class="mb-5 mx-auto max-w-2xl">
    <div class="grid grid-cols-2 gap-3 sm:gap-4" id="auth-method-picker">

      <label class="auth-option cursor-pointer rounded-xl border-2 p-4 sm:p-5 transition-colors
        {% if selected_method == 'json' %}border-brand-500 bg-brand-50 dark:bg-brand-900/20{% else %}border-slate-200 dark:border-slate-700{% endif %}">
        <input type="radio" name="auth_method_pick" value="json" class="sr-only" {% if selected_method == 'json' %}checked{% endif %}>
        <div class="flex items-start gap-3">
          <svg class="mt-0.5 w-5 h-5 shrink-0 {% if selected_method == 'json' %}text-brand-500{% else %}text-slate-400{% endif %}" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
          <div>
            <p class="text-sm font-semibold text-slate-800 dark:text-slate-100 leading-tight">Service Account JSON</p>
            <p class="text-sm text-slate-400 dark:text-slate-500 leading-tight">Key file. Works everywhere.</p>
          </div>
        </div>
      </label>

      <label class="auth-option cursor-pointer rounded-xl border-2 p-4 sm:p-5 transition-colors
        {% if selected_method == 'adc' %}border-brand-500 bg-brand-50 dark:bg-brand-900/20{% else %}border-slate-200 dark:border-slate-700{% endif %}">
        <input type="radio" name="auth_method_pick" value="adc" class="sr-only" {% if selected_method == 'adc' %}checked{% endif %}>
        <div class="flex items-start gap-3">
          <svg class="mt-0.5 w-5 h-5 shrink-0 {% if selected_method == 'adc' %}text-brand-500{% else %}text-slate-400{% endif %}" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
          <div>
            <p class="text-sm font-semibold text-slate-800 dark:text-slate-100 leading-tight">Workload Identity</p>
            <p class="text-sm text-slate-400 dark:text-slate-500 leading-tight">Cloud Run ADC, no key.</p>
          </div>
        </div>
      </label>

    </div>
  </div>

  {# ── Required roles ── #}
  <div class="mb-5 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 p-4">
    <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-3">Required IAM Roles</p>
    <ul class="space-y-1 text-xs">
      {% set role_display = [
        ("roles/bigquery.resourceViewer", "BigQuery Resource Viewer"),
        ("roles/bigquery.jobUser", "BigQuery Job User"),
        ("roles/storage.objectViewer", "Storage Object Viewer"),
        ("roles/resourcemanager.projectViewer", "Project Viewer"),
      ] %}
      {% for role_id, role_name in role_display %}
        {% if role_results is defined and role_results %}
          {% if role_results.get(role_id) %}
            <li class="flex items-center gap-2 text-emerald-700 dark:text-emerald-400">
              <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
              <code>{{ role_id }}</code><span class="text-slate-400">— {{ role_name }}</span>
            </li>
          {% else %}
            <li class="flex items-center gap-2 text-rose-600 dark:text-rose-400">
              <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
              <code>{{ role_id }}</code><span class="text-slate-400">— {{ role_name }}</span><strong class="text-rose-600 dark:text-rose-400">MISSING</strong>
            </li>
          {% endif %}
        {% else %}
          <li class="flex items-center gap-2 text-slate-500 dark:text-slate-400">
            <span class="w-3.5 h-3.5 shrink-0 text-center text-slate-300 dark:text-slate-600">·</span>
            <code>{{ role_id }}</code><span class="text-slate-400">— {{ role_name }}</span>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>

  {% if errors and errors.credentials %}
    <div class="mb-4 ui-alert border-rose-300 dark:border-rose-500/60 bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-200 text-sm">
      {{ errors.credentials }}
    </div>
  {% endif %}

  {% if errors and errors.network %}
    <div class="mb-4 ui-alert border-amber-300 dark:border-amber-500/60 bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300 text-sm">
      GCP API unreachable: {{ errors.network }}
    </div>
  {% endif %}

  <form method="post" action="/setup/2" enctype="multipart/form-data" class="space-y-4">
    <input type="hidden" name="installation_mode" id="installation_mode_hidden" value="{{ selected_installation_mode }}">
    <input type="hidden" name="auth_method" id="auth_method_hidden" value="{{ selected_method }}">

    {# ── JSON inputs ── #}
    <div id="json-fields" {% if selected_method == 'adc' %}class="hidden"{% endif %}>
      <div>
        <label class="ui-form-label" for="credentials_json">Service account JSON</label>
        <textarea
          class="ui-form-input mt-1.5 px-3 py-2 font-mono text-xs h-32 resize-none"
          name="credentials_json"
          id="credentials_json"
          placeholder='{ "type": "service_account", "project_id": "...", ... }'
          spellcheck="false"
        ></textarea>
      </div>
      <div class="flex items-center gap-3 my-3">
        <div class="h-px flex-1 bg-slate-200 dark:bg-slate-700"></div>
        <span class="text-xs text-slate-400">or upload</span>
        <div class="h-px flex-1 bg-slate-200 dark:bg-slate-700"></div>
      </div>
      <div>
        <label class="ui-form-label" for="credentials_file">Upload JSON file</label>
        <input
          class="mt-1.5 block w-full text-sm text-slate-600 dark:text-slate-300 file:mr-3 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:font-medium file:bg-slate-100 dark:file:bg-slate-800 file:text-slate-700 dark:file:text-slate-300"
          type="file" name="credentials_file" id="credentials_file" accept=".json,application/json"
        />
      </div>
    </div>

    {# ── ADC notice ── #}
    <div id="adc-notice" {% if selected_method != 'adc' %}class="hidden"{% endif %}>
      <div class="rounded-xl border border-brand-200 dark:border-brand-700 bg-brand-50 dark:bg-brand-900/20 p-4 text-sm">
        <p class="font-semibold text-brand-800 dark:text-brand-200 mb-1">No key file needed.</p>
        <p class="text-brand-700 dark:text-brand-300 mb-2">Governor uses the service account attached to this Cloud Run service. Ensure it has all four IAM roles above.</p>
        <div class="flex items-center gap-1.5 text-brand-700 dark:text-brand-300 bg-brand-100 dark:bg-brand-900/40 rounded-lg px-3 py-2">
          <svg class="w-3 h-3 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
          <span class="font-medium">Service account:</span>
          <code id="sa-email-display" class="truncate">detecting…</code>
        </div>
      </div>
    </div>

    <div class="flex justify-center pt-1">
      <button type="submit" class="ui-btn-primary px-8 py-2">
        <span class="btn-label">Verify and continue</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>
    </div>
  </form>
</div>

<script>
  (function () {
    var installationOptions = document.querySelectorAll('.installation-option');
    var installationHidden = document.getElementById('installation_mode_hidden');
    var radios = document.querySelectorAll('input[name="auth_method_pick"]');
    var hidden = document.getElementById('auth_method_hidden');
    var jsonFields = document.getElementById('json-fields');
    var adcNotice = document.getElementById('adc-notice');
    var saEmailDisplay = document.getElementById('sa-email-display');
    var options = document.querySelectorAll('.auth-option');
    var saFetched = false;

    function applyInstallationMode(mode) {
      installationHidden.value = mode;
      installationOptions.forEach(function (label) {
        var radio = label.querySelector('input[type="radio"]');
        var isSelected = radio.value === mode;
        label.classList.toggle('border-brand-500', isSelected);
        label.classList.toggle('bg-brand-50', isSelected);
        label.classList.toggle('border-slate-200', !isSelected);
        label.classList.toggle('dark:border-slate-700', !isSelected);
      });
    }

    function fetchSaEmail() {
      if (saFetched) return;
      saFetched = true;
      fetch('/setup/2/detect-sa')
        .then(function (r) { return r.json(); })
        .then(function (d) { saEmailDisplay.textContent = d.email || ('error: ' + (d.error || 'unknown')); })
        .catch(function () { saEmailDisplay.textContent = 'could not detect'; });
    }

    function applyMethod(method) {
      hidden.value = method;
      if (method === 'adc') {
        jsonFields.classList.add('hidden');
        adcNotice.classList.remove('hidden');
        fetchSaEmail();
      } else {
        jsonFields.classList.remove('hidden');
        adcNotice.classList.add('hidden');
      }
      options.forEach(function (label) {
        var radio = label.querySelector('input[type="radio"]');
        var icon = label.querySelector('svg');
        var isSelected = radio.value === method;
        label.classList.toggle('border-brand-500', isSelected);
        label.classList.toggle('bg-brand-50', isSelected);
        label.classList.toggle('border-slate-200', !isSelected);
        label.classList.toggle('dark:border-slate-700', !isSelected);
        if (icon) {
          icon.classList.toggle('text-brand-500', isSelected);
          icon.classList.toggle('text-slate-400', !isSelected);
        }
      });
    }

    options.forEach(function (label) {
      label.addEventListener('click', function () {
        var radio = this.querySelector('input[type="radio"]');
        radio.checked = true;
        applyMethod(radio.value);
      });
    });

    installationOptions.forEach(function (label) {
      label.addEventListener('click', function () {
        var radio = this.querySelector('input[type="radio"]');
        radio.checked = true;
        applyInstallationMode(radio.value);
      });
    });

    if (hidden.value === 'adc') fetchSaEmail();
    applyInstallationMode(installationHidden.value);
  })();
</script>
{% endblock %}