{% extends "base.html" %}
{% block title %}Get Started — Ageri{% endblock %}

{% block body %}
<div class="min-h-screen flex items-center justify-center px-4">
  <div class="w-full max-w-md">

    <!-- Logo -->
    <div class="text-center mb-10">
      <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-br from-accent to-teal mb-4">
        <span class="text-white font-bold text-2xl">A</span>
      </div>
      <h1 class="text-2xl font-bold text-white">Welcome to Ageri</h1>
      <p class="text-slate-400 text-sm mt-1">Your personal AI operating system is running.</p>
    </div>

    <!-- Step indicator -->
    {% set steps = ['namespace', 'key', 'password'] %}
    {% set current_idx = steps.index(step) if step in steps else 0 %}
    <div class="flex items-center justify-center gap-2 mb-8">
      {% for i in range(steps|length) %}
        {% if i == current_idx %}
          <div class="w-2 h-2 rounded-full bg-accent"></div>
        {% elif i < current_idx %}
          <div class="w-2 h-2 rounded-full bg-teal"></div>
        {% else %}
          <div class="w-2 h-2 rounded-full bg-slate-600"></div>
        {% endif %}
      {% endfor %}
    </div>

    <!-- Error banner -->
    {% if error %}
    <div class="mb-4 px-4 py-3 rounded-lg bg-red-900/30 border border-red-700/50 text-red-300 text-sm">
      {{ error }}
    </div>
    {% endif %}

    <!-- ── Step: namespace ── -->
    {% if step == 'namespace' %}
    <div class="bg-panel border border-border rounded-2xl p-8">
      <h2 class="text-lg font-semibold text-white mb-1">Claim your namespace</h2>
      <p class="text-slate-400 text-sm mb-6">
        Your Ageri instance will be reachable at <span class="text-accent">you.ageri.ai</span>.
      </p>
      <form method="POST" action="/get-started/namespace" class="space-y-4">
        <div>
          <div class="flex items-center rounded-lg border border-border bg-surface overflow-hidden focus-within:ring-2 focus-within:ring-accent">
            <input
              type="text"
              name="namespace"
              value="{{ namespace }}"
              placeholder="yourname"
              autocomplete="off"
              autofocus
              class="flex-1 bg-transparent px-4 py-3 text-white placeholder-slate-500 text-sm"
              hx-get="/get-started/check-namespace"
              hx-trigger="keyup changed delay:400ms"
              hx-target="#ns-status"
              hx-include="[name='namespace']"
              hx-vals='{"value": event.target.value}'
            >
            <span class="px-3 text-slate-500 text-sm select-none">.ageri.ai</span>
          </div>
          <div id="ns-status" class="mt-2 h-4"></div>
        </div>
        <button type="submit"
          class="w-full py-3 rounded-lg bg-accent hover:bg-indigo-500 text-white font-semibold text-sm transition-colors">
          Continue
        </button>
      </form>
    </div>

    <!-- ── Step: key ── -->
    {% elif step == 'key' %}
    <div class="bg-panel border border-border rounded-2xl p-8"
         x-data="{
           mode: 'hosted',
           provider: 'anthropic',
           placeholders: {
             anthropic: 'sk-ant-...',
             openai: 'sk-proj-...',
             google: 'AIza...',
             ollama: '',
             custom: ''
           }
         }">
      <h2 class="text-lg font-semibold text-white mb-1">AI model access</h2>
      <p class="text-slate-400 text-sm mb-6">How should Ageri access AI models?</p>
      <form method="POST" action="/get-started/key" class="space-y-4">

        <!-- Hosted credits -->
        <label class="flex items-start gap-3 p-4 rounded-lg border cursor-pointer transition-colors"
          :class="mode === 'hosted' ? 'border-accent bg-accent/10' : 'border-border hover:border-slate-500'">
          <input type="radio" name="key_mode" value="hosted" x-model="mode" class="mt-0.5 accent-indigo-400">
          <div>
            <div class="text-white font-medium text-sm">Use Ageri credits</div>
            <div class="text-slate-400 text-xs mt-0.5">$1.00 free to start · pay as you go · no card required</div>
          </div>
        </label>

        <!-- BYOK -->
        <label class="flex items-start gap-3 p-4 rounded-lg border cursor-pointer transition-colors"
          :class="mode === 'byok' ? 'border-accent bg-accent/10' : 'border-border hover:border-slate-500'">
          <input type="radio" name="key_mode" value="byok" x-model="mode" class="mt-0.5 accent-indigo-400">
          <div>
            <div class="text-white font-medium text-sm">Use my own API key</div>
            <div class="text-slate-400 text-xs mt-0.5">BYOK — any provider, you control costs directly</div>
          </div>
        </label>

        <!-- BYOK details (provider + key/url) -->
        <div x-show="mode === 'byok'" x-transition class="space-y-3 pl-1">

          <!-- Provider selector -->
          <div class="grid grid-cols-3 gap-2">
            {% for p, label in [('anthropic','Anthropic'),('openai','OpenAI'),('google','Google'),('ollama','Ollama'),('custom','Custom')] %}
            <label class="flex items-center justify-center gap-1.5 px-2 py-2 rounded-lg border text-xs cursor-pointer transition-colors"
              :class="provider === '{{ p }}' ? 'border-accent bg-accent/10 text-white' : 'border-border text-slate-400 hover:border-slate-500'">
              <input type="radio" name="llm_provider" value="{{ p }}" x-model="provider" class="sr-only">
              {{ label }}
            </label>
            {% endfor %}
          </div>

          <!-- API key field (not Ollama) -->
          <div x-show="provider !== 'ollama'" x-transition>
            <input
              type="password"
              name="api_key"
              :placeholder="placeholders[provider] || 'API key'"
              class="w-full bg-surface border border-border rounded-lg px-4 py-3 text-white text-sm placeholder-slate-500"
            >
          </div>

          <!-- URL field (Ollama + Custom) -->
          <div x-show="provider === 'ollama' || provider === 'custom'" x-transition>
            <input
              type="text"
              name="llm_url"
              :placeholder="provider === 'ollama' ? 'http://localhost:11434' : 'https://api.example.com/v1'"
              class="w-full bg-surface border border-border rounded-lg px-4 py-3 text-white text-sm placeholder-slate-500"
            >
            <p x-show="provider === 'ollama'" class="text-xs text-slate-500 mt-1">Leave blank to use the default local Ollama endpoint.</p>
          </div>

        </div>

        <button type="submit"
          class="w-full py-3 rounded-lg bg-accent hover:bg-indigo-500 text-white font-semibold text-sm transition-colors">
          Continue
        </button>
      </form>
    </div>

    <!-- ── Step: password ── -->
    {% elif step == 'password' %}
    <div class="bg-panel border border-border rounded-2xl p-8">
      <h2 class="text-lg font-semibold text-white mb-1">Set a password</h2>
      <p class="text-slate-400 text-sm mb-6">
        Protects your Ageri instance. Required for remote access.
      </p>
      <form method="POST" action="/get-started/password" class="space-y-4">
        <input
          type="password"
          name="password"
          placeholder="Password (min. 8 characters)"
          autofocus
          class="w-full bg-surface border border-border rounded-lg px-4 py-3 text-white text-sm placeholder-slate-500"
        >
        <input
          type="password"
          name="confirm"
          placeholder="Confirm password"
          class="w-full bg-surface border border-border rounded-lg px-4 py-3 text-white text-sm placeholder-slate-500"
        >
        <button type="submit"
          class="w-full py-3 rounded-lg bg-accent hover:bg-indigo-500 text-white font-semibold text-sm transition-colors">
          Finish setup
        </button>
      </form>
      <p class="text-center text-slate-500 text-xs mt-4">
        <a href="/" class="hover:text-slate-300 underline">Skip for now</a>
        — you can set a password in settings later
      </p>
    </div>
    {% endif %}

  </div>
</div>
{% endblock %}