{% extends "base.html" %}

{% block title %}Cross-Auth FastAPI Hybrid Example{% endblock %}

{% block content %}
  <div class="hero">
    <div class="eyebrow">FastAPI Hybrid Demo</div>
    <h1>Session and auth-server flows on one backend</h1>
    <p class="lead">
      This backend demonstrates all three Cross-Auth configurations at once:
      a same-origin session app, a standalone auth-server flow for a separate SPA,
      and the hybrid case where one backend supports both. The local login form and
      GitHub session button end in a browser cookie, while the separate SPA uses the
      generic auth-code + <code>/auth/token</code> flow.
    </p>
    {% if error_message %}
      <div class="notice">{{ error_message }}</div>
    {% endif %}
  </div>

  <div class="grid">
    <div class="stack">
      <h2>Session App</h2>
      {% if user %}
        <p>
          Signed in as <strong>{{ user.email }}</strong>
        </p>
        <p>User ID <code>{{ user.id }}</code></p>
        <div class="meta">
          <span class="pill ok">session active</span>
          <span class="pill">same-origin web app</span>
        </div>
        <div class="actions">
          <a class="button primary" href="/profile">Profile</a>
          <a class="button" href="/api/me">/api/me</a>
          <form action="/logout" method="post">
            <button type="submit">Log out</button>
          </form>
        </div>
      {% else %}
        <p>Sign in locally or use GitHub to create a browser session.</p>
        <form action="/login" method="post" class="stack">
          <label class="field">
            <span class="label">Email</span>
            <input type="email" name="email" value="{{ demo_email }}" required />
          </label>
          <label class="field">
            <span class="label">Password</span>
            <input type="password" name="password" value="{{ demo_password }}" required />
          </label>
          <div class="actions">
            <button class="primary" type="submit">Sign in with password</button>
          </div>
        </form>
        <div class="actions">
          <a class="button" href="{{ github_login_url }}">Continue with GitHub</a>
        </div>
      {% endif %}
    </div>

    <div class="stack">
      <h2>Separate SPA Client</h2>
      <p>
        A second app in <code>examples/spa</code> can authenticate against this backend
        as if Cross-Auth were a standalone authentication server.
      </p>
      <ul>
        <li>Default SPA URL: <code>{{ spa_demo_url }}</code></li>
        <li>Client ID: <code>{{ spa_client_id }}</code></li>
        <li>Token endpoint: <code>/auth/token</code></li>
      </ul>
      <div class="actions">
        <a class="button" href="{{ spa_demo_url }}" target="_blank" rel="noreferrer">Open SPA demo</a>
      </div>
      <p>
        The SPA generates PKCE in the browser, redirects to
        <code>/auth/github/authorize</code>, receives a local auth code at its own
        callback URL, exchanges it at <code>/auth/token</code>, and then calls
        <code>/api/me</code> with a bearer token.
      </p>
    </div>

    <div class="stack">
      <h2>Demo Accounts</h2>
      <p>The backend seeds one in-memory password user at startup.</p>
      <ul>
        <li>Password login email: <code>{{ demo_email }}</code></li>
        <li>Password login password: <code>{{ demo_password }}</code></li>
        <li>Restarting the app resets the user store, social accounts, sessions, and tokens.</li>
      </ul>
      <p>
        The GitHub button uses
        <a href="{{ github_mock_base_url }}" target="_blank" rel="noreferrer">a public mock GitHub OAuth server</a>.
        Enter <code>{{ demo_email }}</code> there to link the seeded demo user, or any other email to create a new in-memory local user.
      </p>
      <p>
        Emails starting with <code>unverified</code> are treated as unverified by the mock.
      </p>
    </div>

    <div class="stack">
      <h2>How The Flow Is Chosen</h2>
      <ul>
        <li><code>/auth/github/login</code> starts the session-social flow and ends with a browser cookie.</li>
        <li><code>/auth/github/authorize</code> starts the generic auth-code flow and ends with a local auth code for the SPA.</li>
        <li>The same backend supports both without changing provider configuration.</li>
      </ul>
    </div>

    <div class="stack">
      <h2>Hook Activity</h2>
      <p>
        This example registers hooks for password authentication, session login/logout,
        OAuth callbacks, and token exchange.
      </p>
      {% if hook_events %}
        <ul>
          {% for event in hook_events %}
            <li>
              <code>{{ event.time }}</code>
              <strong>{{ event.name }}</strong>
              {% for key, value in event.items() %}
                {% if key not in ["time", "name"] and value %}
                  · {{ key }}=<code>{{ value }}</code>
                {% endif %}
              {% endfor %}
            </li>
          {% endfor %}
        </ul>
      {% else %}
        <span class="pill">no hook events yet</span>
      {% endif %}
      <div class="actions">
        <a class="button" href="/hooks">View hook example</a>
      </div>
    </div>

    <div class="full stack">
      <h2>Flow Summary</h2>
      <ul>
        <li><strong>Session app:</strong> <code>POST /login</code> calls <code>CrossAuth.authenticate(...)</code> and <code>CrossAuth.login(...)</code>.</li>
        <li><strong>Social session login:</strong> <code>/auth/github/login</code> redirects to GitHub, then <code>/auth/github/callback</code> resolves the local user and sets the session cookie.</li>
        <li><strong>Auth-server login:</strong> the SPA calls <code>/auth/github/authorize</code>, receives a local auth code at its own callback URL, then exchanges it at <code>/auth/token</code>.</li>
      </ul>
    </div>
  </div>
{% endblock %}