{% extends "dashboard_base.html" %}

{% block title %}Settings — {{ config.APP_NAME }}{% endblock %}

{% block content %}
  <!-- Page Header -->
  <div class="page-header">
    <h1>Settings</h1>
  </div>

  <!-- Profile Section -->
  <div class="card">
    <div class="card-header">Profile</div>
    <form method="post">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <div class="mb-4">
        <label for="email" class="form-label">Email</label>
        <input type="email" id="email" class="form-input bg-latte" value="{{ user.email }}" disabled>
        <p class="form-hint">Email cannot be changed</p>
      </div>

      <div class="mb-4">
        <label for="name" class="form-label">Name</label>
        <input type="text" id="name" name="name" class="form-input" value="{{ user.name or '' }}" placeholder="Your name">
      </div>

      <button type="submit" class="btn">Save Changes</button>
    </form>
  </div>

  <!-- Subscription Section -->
  <div class="card">
    <div class="card-header">Subscription</div>
    <div class="grid-3 mb-4">
      <div>
        <span class="text-xs text-stone uppercase tracking-wider">Current Plan</span>
        <p class="font-semibold text-espresso">{{ (user.plan or 'free') | title }}</p>
      </div>
      <div>
        <span class="text-xs text-stone uppercase tracking-wider">Status</span>
        <p class="font-semibold text-espresso">{{ (user.sub_status or 'active') | title }}</p>
      </div>
      {% if user.current_period_end %}
      <div>
        <span class="text-xs text-stone uppercase tracking-wider">Renews</span>
        <p class="font-semibold text-espresso">{{ user.current_period_end[:10] }}</p>
      </div>
      {% endif %}
    </div>

    <div>
      {% if subscription %}
      <form method="post" action="{{ url_for('billing.manage') }}" class="inline">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="btn-secondary">Manage Subscription</button>
      </form>
      {% else %}
      <a href="{{ url_for('billing.pricing') }}" class="btn">Upgrade Plan</a>
      {% endif %}
    </div>
  </div>

  <!-- API Keys Section -->
  <div class="card" id="api-keys">
    <div class="card-header">API Keys</div>
    <p class="text-sm text-stone mb-4">API keys allow you to access the API programmatically.</p>

    {% if api_keys %}
    <div class="overflow-x-auto mb-4">
      <table class="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Key</th>
            <th>Scopes</th>
            <th>Created</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for key in api_keys %}
          <tr>
            <td>{{ key.name }}</td>
            <td><code>{{ key.key_prefix }}...</code></td>
            <td>{{ key.scopes }}</td>
            <td>{{ key.created_at[:10] }}</td>
            <td>
              <form method="post" action="{{ url_for('dashboard.delete_key', key_id=key.id) }}" class="inline">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn-danger btn-sm">Delete</button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-sm text-stone italic mb-4">No API keys yet.</p>
    {% endif %}

    <details class="faq-item">
      <summary>Create New API Key</summary>
      <div class="pt-2 pb-4">
        <form method="post" action="{{ url_for('dashboard.create_key') }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

          <div class="mb-4">
            <label for="key-name" class="form-label">Key Name <span class="text-stone font-normal">(optional)</span></label>
            <input type="text" id="key-name" name="name" class="form-input" placeholder="My API Key">
          </div>

          <input type="hidden" name="scopes" value="read">

          <button type="submit" class="btn">Create Key</button>
        </form>
      </div>
    </details>
  </div>

  <!-- Danger Zone -->
  <div class="danger-card">
    <h2 class="text-xl text-danger mb-2">Danger Zone</h2>
    <p class="text-sm text-stone mb-4">Once you delete your account, there is no going back. Please be certain.</p>

    <details class="faq-item border-danger/30">
      <summary class="text-danger">Delete Account</summary>
      <div class="pt-2 pb-4">
        <p class="text-sm text-stone mb-2">Are you sure? This will:</p>
        <ul class="list-disc pl-5 space-y-1 text-sm text-stone mb-4">
          <li>Delete all your data</li>
          <li>Cancel your subscription</li>
          <li>Remove your API keys</li>
        </ul>
        <form method="post" action="{{ url_for('dashboard.delete_account') }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn-danger">Yes, Delete My Account</button>
        </form>
      </div>
    </details>
  </div>
{% endblock %}
