{% extends "base.html" %}
{% block title %}Settings — ComplyForm Dashboard{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto px-4 py-6">
  <h1 class="text-xl font-semibold mb-6" style="color: var(--text-primary);">Settings</h1>

  {# Status banners #}
  {% if status == "expired" %}
  <div class="mb-4 p-3 rounded text-sm" style="background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;">
    Expired on {{ subscription_expires_at }}. Dashboard read-only for 30 days.
  </div>
  {% endif %}

  {% if status == "past_due" %}
  <div class="mb-4 p-3 rounded text-sm" style="background: #fffbeb; color: #854d0e; border: 1px solid #fde68a;">
    Payment failed. <a href="{{ paddle_portal_url }}" style="color: var(--accent); text-decoration: underline;">Update payment method</a>.
  </div>
  {% endif %}

  {% if cancellation_pending %}
  <div class="mb-4 p-3 rounded text-sm" style="background: #fffbeb; color: #854d0e; border: 1px solid #fde68a;">
    Subscription ends on {{ subscription_expires_at }}. Full access until then.
  </div>
  {% endif %}

  {# Account section #}
  <section class="mb-8 p-4 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
    <h2 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">Account</h2>
    <dl class="space-y-2 text-sm">
      <div class="flex justify-between">
        <dt style="color: var(--text-secondary);">Email</dt>
        <dd style="color: var(--text-primary);">{{ customer_email }}</dd>
      </div>
      <div class="flex justify-between">
        <dt style="color: var(--text-secondary);">Tier</dt>
        <dd><span class="px-2 py-0.5 rounded text-xs font-medium" style="background: var(--bg-surface-hover); color: var(--text-secondary);">{{ tier }}</span></dd>
      </div>
      <div class="flex justify-between">
        <dt style="color: var(--text-secondary);">Status</dt>
        <dd style="color: var(--text-primary);">{{ status }}</dd>
      </div>
      <div class="flex justify-between">
        <dt style="color: var(--text-secondary);">Expires</dt>
        <dd style="color: var(--text-primary);">{{ subscription_expires_at }}</dd>
      </div>
    </dl>
  </section>

  {# API Key section #}
  <section class="mb-8 p-4 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
    <h2 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">API Key</h2>
    <div class="flex items-center gap-3">
      <code class="text-sm px-2 py-1 rounded" style="background: var(--bg-surface-hover); color: var(--text-primary);"
            x-data="{ copied: false }"
            @click="navigator.clipboard.writeText('sk_****{{ api_key_last4 }}'); copied = true; setTimeout(() => copied = false, 2000)">
        sk_****{{ api_key_last4 }}
      </code>
      <button hx-post="/dashboard/settings/regenerate-api-key"
              class="text-xs px-3 py-1 rounded"
              style="background: var(--bg-surface-hover); color: var(--text-secondary); border: 1px solid var(--border-default);">
        Regenerate
      </button>
    </div>
  </section>

  {# Downloads section #}
  <section class="mb-8 p-4 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
    <h2 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">Downloads</h2>
    <div class="space-y-2">
      <a href="{{ license_download_url }}" class="block text-sm" style="color: var(--accent);">
        Download License File
      </a>
      <a href="{{ bundle_download_url }}" class="block text-sm" style="color: var(--accent);">
        Download Bundle ({{ bundle_version }})
      </a>
    </div>
  </section>

  {# Billing section #}
  <section class="mb-8 p-4 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
    <h2 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">Billing</h2>
    <a href="{{ paddle_portal_url }}" class="text-sm" style="color: var(--accent);">
      Manage Billing
    </a>
  </section>

  {# Phase 17: Team, Webhooks, Audit links #}
  {% if "team_members" in features %}
  <section class="mb-8 p-4 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
    <h2 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">Team</h2>
    <a href="/dashboard/settings/members" class="text-sm" style="color: var(--accent);">
      Manage Members
    </a>
  </section>
  {% endif %}

  {% if "webhooks" in features %}
  <section class="mb-8 p-4 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
    <h2 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">Webhooks</h2>
    <a href="/dashboard/settings/webhooks" class="text-sm" style="color: var(--accent);">
      Manage Webhooks
    </a>
  </section>
  {% endif %}

  {% if "audit_log" in features %}
  <section class="p-4 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
    <h2 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">Audit Log</h2>
    <a href="/dashboard/audit-log" class="text-sm" style="color: var(--accent);">
      View Audit Log
    </a>
  </section>
  {% endif %}

</div>
{% endblock %}