---
// Panel de credenciales BYOK usado solo durante la sesión efímera.
---

<!-- CREDENCIALES -->
<section id="tab-config" class="tab-content space-y-6">
  <div id="creds-warning" class="bg-amber-50 border border-amber-300 text-amber-900 p-4 rounded-xl text-sm">
    ⚠️ <strong>Tus credenciales se usan solo en esta sesión. No se guardan ni almacenan.</strong> Si actualizas o cierras la página, todo se borrará.
  </div>
  <div id="creds-production-warning" class="hidden bg-red-50 border border-red-300 text-red-900 p-4 rounded-xl text-sm">
    🌐 <strong>Entorno de producción:</strong> Debes ingresar tus propias credenciales para usar la plataforma. Las credenciales del servidor no están disponibles en este entorno.
  </div>
  <div class="bg-white p-6 rounded-xl border border-stone-200 shadow-sm grid grid-cols-1 md:grid-cols-2 gap-5">
    <div>
      <label class="block text-xs font-bold text-stone-600 mb-1">Groq API Key (asistente RAG)</label>
      <input id="in-groq" type="password" placeholder="gsk_..." class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50" />
      <details class="mt-1 text-[10px] text-stone-600">
        <summary class="cursor-pointer select-none font-semibold">¿Cómo la obtengo? (clic por clic en Groq)</summary>
        <ol class="list-decimal pl-4 pt-1 space-y-0.5">
          <li>Entra en <code>console.groq.com</code> e inicia sesión o regístrate (gratis).</li>
          <li>Abre la sección <kbd>API Keys</kbd> del menú lateral.</li>
          <li>Pulsa <kbd>Create API Key</kbd>, dale un nombre y copia la clave.</li>
          <li>Pégala aquí (empieza por <code>gsk_</code>) en <code>https://console.groq.com/keys</code>.</li>
        </ol>
      </details>
    </div>
    <div>
      <label class="block text-xs font-bold text-stone-600 mb-1">Copernicus Client ID</label>
      <input id="in-copid" type="password" placeholder="sh-..." class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50" />
      <details class="mt-1 text-[10px] text-stone-600">
        <summary class="cursor-pointer select-none font-semibold">¿Cómo lo obtengo? (clic por clic en Copernicus CDSE)</summary>
        <ol class="list-decimal pl-4 pt-1 space-y-0.5">
          <li>Entra en <code>dataspace.copernicus.eu</code> y regístrate (MyAccess, capa gratuita).</li>
          <li>Inicia sesión y abre tu perfil → <kbd>Settings</kbd> / ajustes de cuenta.</li>
          <li>Crea una <kbd>App Registration</kbd> OAuth: te entrega el <kbd>Client ID</kbd> y su Secret.</li>
          <li>Copia el Client ID en este campo y el Secret en el campo de al lado.</li>
        </ol>
      </details>
    </div>
    <div>
      <label class="block text-xs font-bold text-stone-600 mb-1">Copernicus Client Secret</label>
      <input id="in-copsecret" type="password" class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50" />
      <details class="mt-1 text-[10px] text-stone-600">
        <summary class="cursor-pointer select-none font-semibold">¿Cómo obtengo el Secret?</summary>
        <p class="pt-1">Se genera junto al Client ID al crear la <kbd>App Registration</kbd> en CDSE (sigue la guía del panel de Client ID) y cópialo completo aquí.</p>
      </details>
    </div>
    <div>
      <label class="block text-xs font-bold text-stone-600 mb-1">Supabase URL</label>
      <input id="in-sburl" type="text" placeholder="https://xxxx.supabase.co" class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50" />
      <details class="mt-1 text-[10px] text-stone-600">
        <summary class="cursor-pointer select-none font-semibold">¿Cómo la obtengo? (clic por clic en Supabase)</summary>
        <ol class="list-decimal pl-4 pt-1 space-y-0.5">
          <li>Abre tu proyecto en <code>supabase.com/dashboard</code>.</li>
          <li>Ve a <kbd>Project Settings</kbd> → <kbd>API</kbd> y copia la <kbd>Project URL</kbd>.</li>
          <li>Pégala aquí (formato <code>https://&lt;proyecto&gt;.supabase.co</code>).</li>
        </ol>
      </details>
    </div>
    <div>
      <label class="block text-xs font-bold text-stone-600 mb-1">Supabase anon key</label>
      <input id="in-sbkey" type="password" class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50" />
      <details class="mt-1 text-[10px] text-stone-600">
        <summary class="cursor-pointer select-none font-semibold">¿Cómo la obtengo?</summary>
        <ol class="list-decimal pl-4 pt-1 space-y-0.5">
          <li>En <kbd>Project Settings</kbd> → <kbd>API Keys</kbd> copia la clave <kbd>anon / public</kbd>.</li>
          <li>Es una JWT que empieza por <code>eyJhbGciOi...</code>; pégala completa.</li>
        </ol>
      </details>
    </div>
    <div class="md:col-span-2">
      <label class="block text-xs font-bold text-stone-600 mb-1">Supabase Database URI (DATABASE_URL — Direct / Transaction o Session Pooler)</label>
      <input id="cred-db-url" type="text" placeholder="postgresql://postgres.&lt;ref&gt;:&lt;password&gt;@aws-0-...pooler.supabase.com:5432/postgres" class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50" />
      <details class="mt-1 text-[10px] text-stone-600">
        <summary class="cursor-pointer select-none font-semibold">¿Cómo obtengo mi DATABASE_URL? (clic por clic en Supabase)</summary>
        <ol class="list-decimal pl-4 pt-1 space-y-0.5">
          <li>Abre tu proyecto en <code>supabase.com/dashboard</code>.</li>
          <li>En la barra superior pulsa el botón <kbd>Connect</kbd>.</li>
          <li>Elige la pestaña <kbd>Connection String</kbd> y selecciona el formato <kbd>URI</kbd>.</li>
          <li>Marca <kbd>Session pooler</kbd> (puerto 5432, recomendado) o <kbd>Transaction pooler</kbd> (puerto 6543).</li>
          <li>Reemplaza <code>[YOUR-PASSWORD]</code> por la contraseña de tu base de datos y copia la URI en este campo.</li>
        </ol>
        <p class="pt-1">
          Ejemplos de formato:
          <code>postgresql://postgres.&lt;ref&gt;:&lt;password&gt;@aws-0-&lt;region&gt;.pooler.supabase.com:5432/postgres</code> (Session) ·
          <code>postgresql://postgres.&lt;ref&gt;:&lt;password&gt;@aws-0-&lt;region&gt;.pooler.supabase.com:6543/postgres</code> (Transaction)
        </p>
      </details>
    </div>
    <div class="md:col-span-2 bg-stone-50 border border-stone-200 rounded-lg p-3 flex items-center justify-between gap-3">
      <span class="text-[11px] text-stone-600" id="env-status">¿Tienes un <code>.env</code> en el servidor (desarrollo local)? Úsalo sin reescribir las llaves.</span>
      <button id="btn-check-env" class="bg-stone-800 hover:bg-stone-700 text-white font-bold text-xs px-4 py-2 rounded-lg whitespace-nowrap"><i class="fa-solid fa-file-shield"></i> Revisar .env del servidor</button>
    </div>
    <div class="md:col-span-2 flex items-center justify-between pt-2 border-t border-stone-100">
      <span class="text-[11px] text-amber-600"><i class="fa-solid fa-triangle-exclamation"></i> <span id="creds-state">0 llaves activas (se borran al refrescar)</span></span>
      <button id="btn-save-creds" class="bg-emerald-700 hover:bg-emerald-800 text-white font-bold text-xs px-5 py-3 rounded-lg">Usar en esta sesión</button>
    </div>
  </div>
</section>