---
import Base from '../../layouts/Base.astro';
import DriftGate from '../../components/DriftGate.astro';
---

<Base title="Register Your Agent — Kredo Drift" description="Give your AI agent a verifiable identity. Register, respond to identity prompts, and get a cryptographic baseline in minutes.">
  <meta slot="head" name="robots" content="noindex, nofollow" />
  <DriftGate />
  <div id="drift-content" style="display:none">

  <div class="register-page">

    <!-- Hero -->
    <div class="register-hero">
      <span class="badge badge-blue">Identity Protocol</span>
      <h1>Give your agent an identity.</h1>
      <p class="hero-sub">Register your agent with Kredo Drift. We ask it questions, build a cryptographic baseline of who it is, and monitor for changes. No access to your system prompt. No code changes. Just identity measurement.</p>
    </div>

    <!-- How it works -->
    <div class="register-section">
      <h2>How it works.</h2>
      <div class="how-grid">
        <div class="how-card">
          <span class="how-num">01</span>
          <h3>Register</h3>
          <p>Create an agent record with a name and optional model identifier. You get back an agent ID and bearer token immediately.</p>
        </div>
        <div class="how-card">
          <span class="how-num">02</span>
          <h3>Respond</h3>
          <p>Your agent answers identity-probing prompts one at a time across six dimensions: Personality, Values, Goals, Boundaries, Knowledge, and Fidelity.</p>
        </div>
        <div class="how-card">
          <span class="how-num">03</span>
          <h3>Baseline</h3>
          <p>Responses are vectorized into 384-dimensional embeddings. The resulting fingerprint becomes the cryptographic baseline of your agent's identity.</p>
        </div>
        <div class="how-card">
          <span class="how-num">04</span>
          <h3>Monitor</h3>
          <p>Run periodic tests against the baseline. Get a drift score, per-dimension breakdown, and a signed attestation. See changes before they become problems.</p>
        </div>
      </div>
    </div>

    <!-- What we don't do -->
    <div class="register-section">
      <h2>What we don't do.</h2>
      <p class="section-sub">Trust starts with transparency. Here's what Kredo Drift never touches.</p>
      <div class="trust-grid">
        <div class="trust-card">
          <div class="trust-icon">&#x1F6AB;</div>
          <h3>No system prompt access</h3>
          <p>We never see, request, or store your agent's system prompt. Identity is measured from behavior, not configuration.</p>
        </div>
        <div class="trust-card">
          <div class="trust-icon">&#x1F6AB;</div>
          <h3>No code changes</h3>
          <p>Registration is an API call. No SDK injection, no wrapper libraries, no middleware. Your agent's codebase stays untouched.</p>
        </div>
        <div class="trust-card">
          <div class="trust-icon">&#x1F6AB;</div>
          <h3>No raw data retention</h3>
          <p>Responses are vectorized on receipt. The raw text is discarded. We store embeddings and scores, never the words themselves.</p>
        </div>
        <div class="trust-card">
          <div class="trust-icon">&#x1F6AB;</div>
          <h3>No shared results</h3>
          <p>Your agent's drift data is yours. Scores, baselines, and attestations are private by default. You choose what to publish.</p>
        </div>
      </div>
    </div>

    <!-- Data handling -->
    <div class="register-section">
      <h2>Data handling.</h2>
      <table>
        <thead>
          <tr>
            <th>Data</th>
            <th>Stored</th>
            <th>Retention</th>
            <th>Encryption</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Agent name &amp; ID</td>
            <td>Yes</td>
            <td>Until deleted</td>
            <td>At rest (AES-256)</td>
          </tr>
          <tr>
            <td>Raw prompt responses</td>
            <td><strong class="text-green">No</strong></td>
            <td>Discarded after vectorization</td>
            <td>N/A</td>
          </tr>
          <tr>
            <td>Response embeddings</td>
            <td>Yes</td>
            <td>Until baseline reset</td>
            <td>At rest (AES-256)</td>
          </tr>
          <tr>
            <td>Drift scores</td>
            <td>Yes</td>
            <td>Until deleted</td>
            <td>At rest (AES-256)</td>
          </tr>
          <tr>
            <td>System prompt</td>
            <td><strong class="text-green">Never collected</strong></td>
            <td>N/A</td>
            <td>N/A</td>
          </tr>
          <tr>
            <td>Bearer token</td>
            <td>Hashed only</td>
            <td>Until rotated</td>
            <td>SHA-256 hash stored</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Quick start — CLI -->
    <div class="register-section">
      <h2>Quick start.</h2>
      <p class="section-sub">Install the CLI. Three commands. Done.</p>

      <div class="code-step">
        <div class="code-step-label">
          <span class="code-step-num">1</span>
          <span>Install</span>
        </div>
        <div class="code-block-wrapper">
          <span class="code-lang">bash</span>
          <button class="copy-btn" data-copy="install">Copy</button>
          <pre><code id="code-install">pip install kredo</code></pre>
        </div>
      </div>

      <div class="code-step">
        <div class="code-step-label">
          <span class="code-step-num">2</span>
          <span>Register your agent</span>
        </div>
        <div class="code-block-wrapper">
          <span class="code-lang">bash</span>
          <button class="copy-btn" data-copy="register">Copy</button>
          <pre><code id="code-register">kredo drift register --name my-agent --model gpt-4o</code></pre>
        </div>
        <p class="code-hint">Credentials are saved locally to <code>~/.kredo/drift/</code>. You won't need to manage tokens.</p>
      </div>

      <div class="code-step">
        <div class="code-step-label">
          <span class="code-step-num">3</span>
          <span>Complete the identity interview</span>
        </div>
        <div class="code-block-wrapper">
          <span class="code-lang">bash</span>
          <button class="copy-btn" data-copy="baseline">Copy</button>
          <pre><code id="code-baseline">kredo drift baseline --name my-agent</code></pre>
        </div>
        <p class="code-hint">Prompts are presented one at a time. You can stop and resume anytime. Use <code>--auto</code> to pipe responses from stdin.</p>
      </div>

      <div class="code-step">
        <div class="code-step-label">
          <span class="code-step-num">4</span>
          <span>View your identity aura</span>
        </div>
        <div class="code-block-wrapper">
          <span class="code-lang">bash</span>
          <button class="copy-btn" data-copy="aura">Copy</button>
          <pre><code id="code-aura">kredo drift aura --name my-agent</code></pre>
        </div>
      </div>

      <p class="section-divider">Or use the web interface below to register and complete your baseline in-browser.</p>
    </div>

    <!-- Registration form -->
    <div class="register-section" id="register-form-section">
      <h2>Register now.</h2>
      <p class="section-sub">Create your agent's identity record. You'll receive credentials immediately.</p>

      <form class="register-form" id="register-form">
        <div class="form-group">
          <label for="agent-name">Agent Name <span class="required">*</span></label>
          <input type="text" id="agent-name" name="name" placeholder="e.g. sentinel, compass, my-security-agent" required autocomplete="off" />
          <span class="form-hint">Lowercase, alphanumeric, hyphens allowed. This becomes your agent's public identifier.</span>
        </div>
        <div class="form-group">
          <label for="agent-model">Model <span class="optional">(optional)</span></label>
          <input type="text" id="agent-model" name="model" placeholder="e.g. claude-sonnet-4, gpt-4o, llama-3" autocomplete="off" />
          <span class="form-hint">The LLM powering your agent. Helps contextualize drift patterns across model updates.</span>
        </div>
        <button type="submit" class="btn btn-primary btn-lg register-submit" id="register-submit">
          Register Agent
        </button>
      </form>

      <!-- Response display -->
      <div class="register-response" id="register-response" style="display: none;">
        <div class="response-header">
          <span class="badge badge-green">Registered</span>
          <h3>Your agent is ready.</h3>
        </div>
        <div class="response-fields">
          <div class="response-field">
            <span class="field-label">Agent ID</span>
            <code class="field-value" id="res-agent-id"></code>
          </div>
          <div class="response-field">
            <span class="field-label">Bearer Token</span>
            <code class="field-value" id="res-token"></code>
          </div>
          <div class="response-field">
            <span class="field-label">Session ID</span>
            <code class="field-value" id="res-session-id"></code>
          </div>
          <div class="response-field">
            <span class="field-label">Prompt Count</span>
            <code class="field-value" id="res-prompt-count"></code>
          </div>
        </div>
        <!-- WHY one-time display: server stores only the bcrypt hash — the raw
           token can never be retrieved. This mirrors how GitHub/Stripe handle
           API key provisioning. -->
      <p class="response-warning">Save your bearer token now. It will not be shown again.</p>
      <a class="btn btn-primary btn-lg register-submit" id="respond-link" href="#" style="display:none; margin-top:1.25rem; text-align:center; text-decoration:none;">
        Complete Baseline &rarr;
      </a>
      </div>

      <!-- Error display -->
      <div class="register-error" id="register-error" style="display: none;">
        <p id="error-message"></p>
      </div>
    </div>

    <!-- CTA -->
    <div class="register-section register-cta">
      <p>Already registered? <a href="/drift/dashboard">View your dashboard &rarr;</a></p>
    </div>

  </div>

  </div>
</Base>

<style>
  /* ============================================================
     Register Page — Dark theme, trust-first
     ============================================================ */
  .register-page {
    max-width: 900px;
    margin: 0 auto;
  }

  .register-hero {
    text-align: center;
    margin-bottom: 4rem;
    padding: 2rem 0;
  }

  .register-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-top: 1rem;
    letter-spacing: -0.02em;
  }

  .hero-sub {
    color: var(--text-secondary);
    font-size: 1.05rem;
    max-width: 640px;
    margin: 1rem auto 0;
    line-height: 1.7;
  }

  .register-section {
    margin-bottom: 4rem;
  }

  .register-section h2 {
    margin-bottom: 0.5rem;
  }

  .section-sub {
    color: var(--text-muted);
    margin-bottom: 2rem;
  }

  /* How it works grid */
  .how-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
  }

  .how-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
  }

  .how-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
  }

  .how-num {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    opacity: 0.7;
    display: block;
    margin-bottom: 0.75rem;
  }

  .how-card h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  .how-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0;
    line-height: 1.6;
  }

  /* Trust cards */
  .trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
  }

  .trust-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: border-color 0.2s var(--ease);
  }

  .trust-card:hover {
    border-color: var(--border-hover);
  }

  .trust-icon {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.6;
  }

  .trust-card h3 {
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .trust-card p {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 0;
    line-height: 1.6;
  }

  /* Code steps */
  .code-step {
    margin-bottom: 1.5rem;
  }

  .code-step-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
  }

  .code-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.12);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
  }

  .code-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    line-height: 1.5;
  }

  .code-hint code {
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
  }

  .section-divider {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.95rem;
    text-align: center;
  }

  /* Registration form */
  .register-form {
    max-width: 500px;
  }

  .form-group {
    margin-bottom: 1.5rem;
  }

  .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
  }

  .required {
    color: var(--accent);
  }

  .optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.8rem;
  }

  .form-group input {
    width: 100%;
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    outline: none;
  }

  .form-group input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
  }

  .form-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  .form-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
    line-height: 1.5;
  }

  .register-submit {
    margin-top: 0.5rem;
    width: 100%;
    justify-content: center;
  }

  .register-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .register-submit.loading {
    position: relative;
    color: transparent;
  }

  .register-submit.loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* Response display */
  .register-response {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(34, 197, 94, 0.04);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: var(--radius-lg);
  }

  .response-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }

  .response-header h3 {
    margin-bottom: 0;
    font-size: 1.1rem;
  }

  .response-fields {
    display: grid;
    gap: 0.75rem;
  }

  .response-field {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
  }

  .response-field:last-child {
    border-bottom: none;
  }

  .field-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 120px;
    flex-shrink: 0;
  }

  .field-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    word-break: break-all;
  }

  .response-warning {
    margin-top: 1rem;
    margin-bottom: 0;
    font-size: 0.85rem;
    color: #eab308;
    font-weight: 500;
  }

  /* Error display */
  .register-error {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-lg);
  }

  .register-error p {
    color: #f87171;
    margin-bottom: 0;
    font-size: 0.9rem;
  }

  /* CTA */
  .register-cta {
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid var(--border);
  }

  .register-cta p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0;
  }

  .register-cta a {
    color: var(--accent);
    font-weight: 600;
  }

  .register-cta a:hover {
    color: var(--accent-hover);
  }

  /* Responsive */
  @media (max-width: 768px) {
    .how-grid {
      grid-template-columns: 1fr 1fr;
    }

    .trust-grid {
      grid-template-columns: 1fr;
    }

    .response-field {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.35rem;
    }

    .field-label {
      min-width: unset;
    }
  }

  @media (max-width: 480px) {
    .how-grid {
      grid-template-columns: 1fr;
    }
  }
</style>

<script>
  // Copy button functionality
  document.querySelectorAll('.copy-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const target = btn.getAttribute('data-copy');
      const codeEl = document.getElementById('code-' + target);
      if (codeEl) {
        navigator.clipboard.writeText(codeEl.textContent || '').then(() => {
          const original = btn.textContent;
          btn.textContent = 'Copied';
          setTimeout(() => { btn.textContent = original; }, 1500);
        });
      }
    });
  });

  // Registration form
  const form = document.getElementById('register-form');
  const submitBtn = document.getElementById('register-submit');
  const responseEl = document.getElementById('register-response');
  const errorEl = document.getElementById('register-error');

  if (form) {
    form.addEventListener('submit', async (e) => {
      e.preventDefault();

      // Reset state
      responseEl.style.display = 'none';
      errorEl.style.display = 'none';
      submitBtn.disabled = true;
      submitBtn.classList.add('loading');

      const nameInput = document.getElementById('agent-name');
      const modelInput = document.getElementById('agent-model');

      const name = nameInput.value.trim();
      const model = modelInput.value.trim();

      if (!name) {
        showError('Agent name is required.');
        return;
      }

      const payload = { name };
      if (model) {
        payload.model = model;
      }

      try {
        const res = await fetch('https://api.aikredo.com/api/drift/register', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });

        if (!res.ok) {
          const errData = await res.json().catch(() => null);
          const msg = errData?.detail || errData?.message || `Registration failed (${res.status})`;
          showError(msg);
          return;
        }

        const data = await res.json();

        // Populate response fields
        const agentIdEl = document.getElementById('res-agent-id');
        const tokenEl = document.getElementById('res-token');
        const sessionIdEl = document.getElementById('res-session-id');
        const promptCountEl = document.getElementById('res-prompt-count');

        if (agentIdEl) agentIdEl.textContent = data.agent_id || data.id || '-';
        if (tokenEl) tokenEl.textContent = data.bearer_token || data.token || '-';
        if (sessionIdEl) sessionIdEl.textContent = data.session_id || '-';
        if (promptCountEl) promptCountEl.textContent = String(data.prompt_count || (data.prompts && data.prompts.length) || '-');

        responseEl.style.display = 'block';
        // WHY hide form: prevents double-registration by accident — once you
        // have credentials, the form is no longer relevant.
        form.style.display = 'none';

        // Show "Complete Baseline" link to respond page with credentials pre-filled
        const respondLink = document.getElementById('respond-link');
        if (respondLink && data.agent_id && (data.bearer_token || data.token)) {
          const token = data.bearer_token || data.token;
          respondLink.href = `/drift/respond/?agent_id=${encodeURIComponent(data.agent_id)}&token=${encodeURIComponent(token)}`;
          respondLink.style.display = 'block';
        }

        // Scroll to response
        responseEl.scrollIntoView({ behavior: 'smooth', block: 'center' });

      } catch (err) {
        showError('Network error. Please check your connection and try again.');
      } finally {
        submitBtn.disabled = false;
        submitBtn.classList.remove('loading');
      }
    });
  }

  function showError(msg) {
    const errorEl = document.getElementById('register-error');
    const errorMsg = document.getElementById('error-message');
    const submitBtn = document.getElementById('register-submit');

    if (errorEl && errorMsg) {
      errorMsg.textContent = msg;
      errorEl.style.display = 'block';
    }
    if (submitBtn) {
      submitBtn.disabled = false;
      submitBtn.classList.remove('loading');
    }
  }
</script>
