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

{% block body %}
<div class="min-h-screen flex items-center justify-center px-4">
  <div class="w-full max-w-sm">
    <div class="text-center mb-8">
      <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>
      {% if setup_done %}
        <h1 class="text-xl font-bold text-white">Welcome back</h1>
      {% elif partial_setup %}
        <h1 class="text-xl font-bold text-white">Set a new password</h1>
        <p class="text-slate-400 text-sm mt-1">Your password was reset. Choose a new one to continue.</p>
      {% else %}
        <h1 class="text-xl font-bold text-white">Welcome to Ageri</h1>
        <p class="text-slate-400 text-sm mt-1">Your personal AI is almost ready.</p>
      {% endif %}
    </div>

    {% 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 %}

    {% if setup_done %}
    <!-- ── Returning user: password form ── -->
    <div class="bg-panel border border-border rounded-2xl p-8">
      {% if device_label %}
      <!-- Device name as the visual anchor inside the card — Windows
           lock-screen pattern. The ? icon uses the shared `tooltip-btn` /
           `tooltip-popup` pattern from base.html so it matches every
           other ? affordance in the app (Settings → General, Settings →
           Devices, etc.). -->
      <div class="text-center mb-5">
        <div class="inline-flex items-center justify-center gap-1.5">
          <span class="text-white text-lg font-semibold">{{ device_label }}</span>
          <span x-data="tooltip('Each device in your namespace runs its own Ageri instance with its own password — like a separate user account on a separate PC. The password you enter here works only for {{ device_label }}.')" class="relative inline-flex items-center">
            <button type="button" x-bind="trigger" class="tooltip-btn"></button>
            <div x-bind="popup" class="tooltip-popup">
              Each device in your namespace runs its own Ageri instance with its own password — like a separate user account on a separate PC. The password you enter here works only for <span class="text-white font-medium">{{ device_label }}</span>.
            </div>
          </span>
        </div>
      </div>
      {% endif %}
      <form method="POST" action="/login" class="space-y-4"
        x-data="{ submitting: false }"
        @submit="submitting = true">
        <input type="hidden" name="next" value="{{ next }}">
        <div x-data="{ show: false }" class="relative">
          <input
            :type="show ? 'text' : 'password'"
            name="password"
            placeholder="Password"
            autofocus
            class="w-full bg-surface border border-border rounded-lg px-4 py-3 pr-11 text-white text-sm placeholder-slate-500"
          >
          <button type="button" @click="show = !show"
            class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300 transition-colors">
            <svg x-show="!show" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
            </svg>
            <svg x-show="show" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.477 0-8.268-2.943-9.542-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l18 18"/>
            </svg>
          </button>
        </div>
        <button type="submit"
          :disabled="submitting"
          :class="submitting ? 'opacity-60 cursor-not-allowed' : 'hover:bg-indigo-500'"
          class="w-full py-3 rounded-lg bg-accent text-white font-semibold text-sm transition-colors">
          <span x-show="!submitting">Sign in</span>
          <span x-show="submitting" class="flex items-center justify-center gap-2">
            <svg class="w-4 h-4 animate-spin" 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-8v8H4z"/>
            </svg>
            Signing in…
          </span>
        </button>
      </form>
      <div class="mt-4 text-center">
        <a href="/forgot-password" class="text-slate-500 hover:text-slate-300 text-xs transition-colors">Forgot password?</a>
      </div>
    </div>
    {% elif partial_setup %}
    <!-- ── Password was deleted: go set a new one ── -->
    <div class="bg-panel border border-border rounded-2xl p-8 text-center space-y-4">
      <p class="text-slate-300 text-sm">
        Your namespace and API key are already configured. You just need a new password.
      </p>
      <a href="/get-started"
        class="block w-full py-3 rounded-lg bg-accent hover:bg-indigo-500 text-white font-semibold text-sm transition-colors">
        Set Password →
      </a>
    </div>
    {% else %}
    <!-- ── Fresh install: full setup wizard ── -->
    <div class="bg-panel border border-border rounded-2xl p-8 text-center space-y-4">
      <p class="text-slate-300 text-sm">
        Finish setting up your Ageri instance to get started.
      </p>
      <a href="/get-started"
        class="block w-full py-3 rounded-lg bg-accent hover:bg-indigo-500 text-white font-semibold text-sm transition-colors">
        Get Started →
      </a>
    </div>
    {% endif %}

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