{% extends "base.html" %}
{% block title %}SSO 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);">SSO Configuration</h1>

  <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);">SAML / OIDC Single Sign-On</h2>

    <form method="POST" action="/dashboard/settings/sso">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">

      <div class="space-y-4">
        <div>
          <label class="block text-sm mb-1" style="color: var(--text-secondary);">Email Domain</label>
          <input type="text" name="email_domain" value="{{ sso_config.email_domain if sso_config else '' }}"
            class="w-full px-3 py-2 rounded text-sm" style="background: var(--bg-default); border: 1px solid var(--border-default); color: var(--text-primary);"
            placeholder="company.com" {% if sso_config %}readonly{% endif %} required>
          {% if sso_config %}
          <p class="text-xs mt-1" style="color: var(--text-secondary);">Domain cannot be changed. Delete and recreate to use a different domain.</p>
          {% endif %}
        </div>

        <div>
          <label class="block text-sm mb-1" style="color: var(--text-secondary);">Provider</label>
          <select name="provider_name" class="w-full px-3 py-2 rounded text-sm" style="background: var(--bg-default); border: 1px solid var(--border-default); color: var(--text-primary);">
            <option value="okta" {% if sso_config and sso_config.provider_name == 'okta' %}selected{% endif %}>Okta</option>
            <option value="entra_id" {% if sso_config and sso_config.provider_name == 'entra_id' %}selected{% endif %}>Entra ID (Azure AD)</option>
            <option value="google_workspace" {% if sso_config and sso_config.provider_name == 'google_workspace' %}selected{% endif %}>Google Workspace</option>
            <option value="ping" {% if sso_config and sso_config.provider_name == 'ping' %}selected{% endif %}>Ping Identity</option>
            <option value="custom" {% if sso_config and sso_config.provider_name == 'custom' %}selected{% endif %}>Custom</option>
          </select>
        </div>

        <div>
          <label class="block text-sm mb-1" style="color: var(--text-secondary);">Protocol</label>
          <div class="flex gap-4">
            <label class="flex items-center gap-1.5 text-sm" style="color: var(--text-primary);">
              <input type="radio" name="provider_type" value="saml" {% if not sso_config or sso_config.provider_type == 'saml' %}checked{% endif %}>
              SAML
            </label>
            <label class="flex items-center gap-1.5 text-sm" style="color: var(--text-primary);">
              <input type="radio" name="provider_type" value="oidc" {% if sso_config and sso_config.provider_type == 'oidc' %}checked{% endif %}>
              OIDC
            </label>
          </div>
        </div>

        <div>
          <label class="block text-sm mb-1" style="color: var(--text-secondary);">WorkOS Connection ID</label>
          <input type="text" name="connection_id" value="{{ sso_config.broker_connection_id if sso_config else '' }}"
            class="w-full px-3 py-2 rounded text-sm" style="background: var(--bg-default); border: 1px solid var(--border-default); color: var(--text-primary);"
            placeholder="conn_..." required>
        </div>

        {% if can_enforce %}
        <div class="flex items-center gap-2">
          <input type="checkbox" name="enforce_sso" id="enforce_sso" {% if sso_config and sso_config.enforce_sso %}checked{% endif %}>
          <label for="enforce_sso" class="text-sm" style="color: var(--text-primary);">Enforce SSO (block Google sign-in for this domain)</label>
        </div>
        {% endif %}

        <div>
          <label class="block text-sm mb-1" style="color: var(--text-secondary);">Group Mapping (optional)</label>
          <div class="space-y-2">
            <input type="text" name="admin_group" placeholder="Admin group name"
              class="w-full px-3 py-2 rounded text-sm" style="background: var(--bg-default); border: 1px solid var(--border-default); color: var(--text-primary);">
            <input type="text" name="viewer_group" placeholder="Viewer group name"
              class="w-full px-3 py-2 rounded text-sm" style="background: var(--bg-default); border: 1px solid var(--border-default); color: var(--text-primary);">
          </div>
        </div>

        <div class="flex items-center gap-2">
          <input type="checkbox" name="enabled" id="sso_enabled" {% if sso_config and sso_config.enabled %}checked{% endif %}>
          <label for="sso_enabled" class="text-sm" style="color: var(--text-primary);">Enable SSO</label>
        </div>

        <button type="submit" class="px-4 py-2 rounded text-sm font-medium text-white" style="background: var(--accent);">Save SSO Configuration</button>
      </div>
    </form>
  </section>

  {% if sso_config %}
  <section class="p-4 rounded-lg" style="background: #fef2f2; border: 1px solid #fecaca;">
    <h2 class="text-lg font-semibold mb-3" style="color: #dc2626;">Danger Zone</h2>
    <p class="text-sm mb-3" style="color: #991b1b;">Deleting SSO configuration will force all SSO users to sign in with Google.</p>
    <form method="POST" action="/dashboard/settings/sso/delete">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <button type="submit" class="px-4 py-2 rounded text-sm font-medium text-white" style="background: #dc2626;">Delete SSO Configuration</button>
    </form>
  </section>
  {% endif %}
</div>
{% endblock %}