{% extends 'administration/base.html.twig' %}

{% block title %}{{ title_key|trans }}{% endblock %}

{% block body %}
{% set ptype = entity is defined ? entity.providerType : form.vars.value.providerType %}
{% set slug_for_redirect = ptype != 'custom' ? ptype : (form.slug.vars.value|default('')) %}
{% set oauth_callback_url_tpl = absolute_url(path('storefront_oauth_callback', { slug: '__SLUG__' })) %}

<div class="container-fluid px-3 px-lg-4 py-4 pb-5">
    <div class="admin-card p-4 mb-4" style="max-width: 920px; margin-inline: auto;">
        <a href="{{ path('app_admin_module_oauth') }}" class="btn btn-outline-secondary btn-sm mb-3">
            <i class="bi bi-arrow-left me-1"></i>{{ 'admin.back'|trans }}
        </a>
        <h1 class="h3 gradient-text fw-bold mb-2">
            <i class="bi bi-key-fill me-2"></i>{{ title_key|trans }}
        </h1>
        <p class="text-muted small mb-0">{{ 'admin.oauth_inbound.form.page_intro'|trans }}</p>
    </div>

    {% if not oauthOperational %}
        <div class="alert alert-warning rounded-4 mb-4" style="max-width: 920px; margin-inline: auto;">{{ 'admin.oauth_module.license_inactive'|trans }}</div>
    {% endif %}

    <div class="admin-card p-4 p-lg-5" style="max-width: 920px; margin-inline: auto;">
        {{ form_start(form, { attr: { class: 'needs-validation oauth-inbound-form', novalidate: 'novalidate', 'data-oauth-form': '1' } }) }}
        {{ form_errors(form) }}

        {# ——— Schritt 1: Vorlage (nur Neu) ——— #}
        {% if is_new %}
            <div class="mb-4 pb-3 border-bottom border-secondary border-opacity-25">
                <span class="badge bg-primary-subtle text-primary-emphasis rounded-pill mb-2">1</span>
                <h2 class="h5 fw-semibold mb-2">{{ 'admin.oauth_inbound.form.step_provider'|trans }}</h2>
                <p class="text-muted small mb-3">{{ 'admin.oauth_inbound.form.step_provider_help'|trans }}</p>
                <div class="row g-3">
                    <div class="col-12 col-lg-8">
                        {{ form_row(form.providerType) }}
                    </div>
                </div>
            </div>
        {% else %}
            <div class="d-flex align-items-center gap-2 mb-4 pb-3 border-bottom border-secondary border-opacity-25">
                <span class="badge bg-secondary rounded-pill">{{ ('admin.oauth_inbound.preset.' ~ ptype)|trans }}</span>
                <span class="text-muted small">{{ 'admin.oauth_inbound.form.edit_type_locked'|trans }}</span>
            </div>
        {% endif %}

        {# ——— Redirect-URL (zentrale Orientierung) ——— #}
        <div class="alert alert-light border rounded-4 mb-4" role="region" aria-label="{{ 'admin.oauth_inbound.form.redirect_aria'|trans }}">
            <h3 class="h6 fw-semibold mb-2">
                <i class="bi bi-arrow-return-left me-2 text-primary"></i>{{ 'admin.oauth_inbound.form.redirect_title'|trans }}
            </h3>
            <p class="small text-muted mb-2">{{ 'admin.oauth_inbound.form.redirect_body'|trans }}</p>
            <div class="d-flex flex-wrap align-items-center gap-2 mb-0">
                <code id="oauth-redirect-url" class="small user-select-all flex-grow-1 p-2 bg-body-secondary rounded text-break">{{ absolute_url(path('storefront_oauth_callback', { slug: slug_for_redirect ?: '…' })) }}</code>
                <button type="button" class="btn btn-sm btn-outline-primary flex-shrink-0" id="oauth-copy-redirect" data-copy-target="oauth-redirect-url">
                    <i class="bi bi-clipboard me-1"></i>{{ 'admin.oauth_inbound.form.copy_redirect'|trans }}
                </button>
            </div>
            <p class="small text-muted mt-2 mb-0" id="oauth-redirect-slug-hint" data-custom-hint="{{ 'admin.oauth_inbound.form.redirect_hint_custom'|trans|e('html_attr') }}" data-preset-hint="{{ 'admin.oauth_inbound.form.redirect_hint_preset'|trans|e('html_attr') }}">
                {% if ptype == 'custom' %}
                    {{ 'admin.oauth_inbound.form.redirect_hint_custom'|trans }}
                {% else %}
                    {{ 'admin.oauth_inbound.form.redirect_hint_preset'|trans }}
                {% endif %}
            </p>
        </div>

        {% if is_new or ptype == 'terraflow' %}
            <div class="alert alert-secondary border-0 rounded-4 small mb-4" id="oauth-terraflow-hint" role="note"{% if is_new %} hidden{% endif %}>
                {{ 'admin.oauth_inbound.form.terraflow_setup_hint'|trans|raw }}
            </div>
        {% endif %}

        {# ——— Schritt 2: Sichtbarkeit & Name ——— #}
        <div class="mb-4">
            <span class="badge bg-primary-subtle text-primary-emphasis rounded-pill mb-2">{{ is_new ? '2' : '1' }}</span>
            <h2 class="h5 fw-semibold mb-3">{{ 'admin.oauth_inbound.form.step_identity'|trans }}</h2>
            <div class="row g-3">
                {% if form.slug is defined %}
                    <div class="col-12 oauth-field-slug" data-oauth-custom-only-block="1">
                        {{ form_row(form.slug) }}
                    </div>
                {% endif %}
                <div class="col-12 col-md-8">
                    {{ form_row(form.displayName) }}
                </div>
                <div class="col-12 col-md-4 d-flex align-items-end pb-1">
                    {{ form_row(form.enabled) }}
                </div>
            </div>
        </div>

        {# ——— Schritt 3: App-Zugangsdaten ——— #}
        <div class="mb-2">
            <span class="badge bg-primary-subtle text-primary-emphasis rounded-pill mb-2">{{ is_new ? '3' : '2' }}</span>
            <h2 class="h5 fw-semibold mb-2">{{ 'admin.oauth_inbound.form.step_credentials'|trans }}</h2>
            <p class="text-muted small mb-3">{{ 'admin.oauth_inbound.form.step_credentials_help'|trans }}</p>
            <div class="row g-3">
                <div class="col-12">
                    {{ form_row(form.clientId) }}
                </div>
                <div class="col-12">
                    {{ form_row(form.plainClientSecret) }}
                </div>
                {% if form.terraflowRemoteBaseUrl is defined %}
                    <div class="col-12" data-oauth-terraflow-base-block="1"{% if is_new %} hidden{% elseif ptype != 'terraflow' %} hidden{% endif %}>
                        {{ form_row(form.terraflowRemoteBaseUrl) }}
                    </div>
                {% endif %}
            </div>
        </div>

        {# ——— Nur eigener Anbieter: Scopes ——— #}
        {% if form.scopesText is defined %}
            <div class="oauth-custom-advanced mt-4 pt-4 border-top border-secondary border-opacity-25" data-oauth-custom-only-block="1"{% if is_new %} hidden{% endif %}>
                <h2 class="h6 text-uppercase letter-spacing text-body-secondary mb-2">
                    <i class="bi bi-shield-check me-2 text-primary"></i>{{ 'admin.oauth_inbound.form.step_scopes'|trans }}
                </h2>
                <p class="small text-muted mb-3">{{ 'admin.oauth_inbound.form.step_scopes_help'|trans }}</p>
                <div class="row g-3">
                    <div class="col-12">
                        {{ form_row(form.scopesText) }}
                        <p class="form-text small mb-0">{{ 'admin.oauth_inbound.form.scopes_examples'|trans }}</p>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if ptype == 'custom' or is_new %}
            <div class="rounded-4 border bg-body-tertiary bg-opacity-50 p-3 p-md-4 mt-4 oauth-custom-endpoints" data-oauth-custom-only-block="1"{% if is_new %} hidden{% endif %}>
                <h2 class="h6 text-uppercase letter-spacing text-body-secondary mb-3 pb-2 border-bottom border-secondary border-opacity-25">
                    <i class="bi bi-link-45deg me-2 text-primary"></i>{{ 'admin.oauth_inbound.custom_endpoints'|trans }}
                </h2>
                <div class="row g-3">
                    {% if form.authorizationUrl is defined %}
                        <div class="col-12">{{ form_row(form.authorizationUrl) }}</div>
                        <div class="col-12">{{ form_row(form.tokenUrl) }}</div>
                        <div class="col-12">{{ form_row(form.userInfoUrl) }}</div>
                        <div class="col-12 col-md-4">{{ form_row(form.userIdField) }}</div>
                        <div class="col-12 col-md-4">{{ form_row(form.userEmailField) }}</div>
                        <div class="col-12 col-md-4">{{ form_row(form.userNameField) }}</div>
                    {% endif %}
                </div>
            </div>
        {% endif %}

        {% if form.iconClass is defined %}
            <div class="row g-3 mt-2 oauth-field-icon" data-oauth-custom-only-block="1">
                <div class="col-12 col-md-6 col-lg-5">
                    {{ form_row(form.iconClass) }}
                </div>
            </div>
        {% endif %}

        {# Preset: kurzinfo statt Scope-Felder #}
        {% if ptype != 'custom' and not is_new %}
            <div class="alert alert-secondary border-0 rounded-4 small mt-4 mb-0" role="note">
                <strong class="d-block mb-1">{{ 'admin.oauth_inbound.form.preset_auto_title'|trans }}</strong>
                <span class="text-body-secondary">{{ 'admin.oauth_inbound.form.preset_auto_body'|trans }}</span>
            </div>
        {% endif %}

        <div class="mt-4 pt-4 border-top d-flex flex-wrap gap-2">
            <button type="submit" class="btn btn-primary rounded-pill px-4">
                <i class="bi bi-check-lg me-1"></i>{{ 'admin.save'|trans }}
            </button>
            <a href="{{ path('app_admin_module_oauth') }}" class="btn btn-outline-secondary rounded-pill px-4">{{ 'admin.cancel'|trans }}</a>
        </div>
        {{ form_end(form) }}
    </div>
</div>

{% if is_new %}
<script>
(function () {
    var form = document.querySelector('form[data-oauth-form]');
    if (!form) return;
    var typeSelect = form.querySelector('[data-oauth-provider-type]');
    var slugInput = form.querySelector('[data-oauth-slug-field]');
    var redirectEl = document.getElementById('oauth-redirect-url');
    var hintEl = document.getElementById('oauth-redirect-slug-hint');
    var customBlocks = form.querySelectorAll('[data-oauth-custom-only-block]');
    var terraflowBaseBlocks = form.querySelectorAll('[data-oauth-terraflow-base-block]');
    var PRESET_SLUG = { google: 'google', facebook: 'facebook', microsoft: 'microsoft', atlassian: 'atlassian', terraflow: 'terraflow' };
    var terraflowHint = document.getElementById('oauth-terraflow-hint');

    var URL_TPL = {{ oauth_callback_url_tpl|json_encode|raw }};
    function baseUrlForSlug(slug) {
        return URL_TPL.split('__SLUG__').join(slug);
    }

    function sync() {
        var v = typeSelect ? typeSelect.value : 'custom';
        var isCustom = v === 'custom';
        customBlocks.forEach(function (el) {
            el.hidden = !isCustom;
        });
        terraflowBaseBlocks.forEach(function (el) {
            el.hidden = v !== 'terraflow';
        });
        if (slugInput) {
            slugInput.required = isCustom;
        }
        var slug = isCustom ? (slugInput && slugInput.value ? slugInput.value.trim() : '…') : (PRESET_SLUG[v] || v);
        if (redirectEl) {
            redirectEl.textContent = isCustom && slugInput && slugInput.value.trim()
                ? baseUrlForSlug(slugInput.value.trim())
                : (isCustom ? baseUrlForSlug('…') : baseUrlForSlug(PRESET_SLUG[v] || v));
        }
        if (hintEl) {
            hintEl.textContent = isCustom
                ? hintEl.getAttribute('data-custom-hint') || ''
                : hintEl.getAttribute('data-preset-hint') || '';
        }
        if (terraflowHint) {
            terraflowHint.hidden = v !== 'terraflow';
        }
    }

    typeSelect && typeSelect.addEventListener('change', sync);
    slugInput && slugInput.addEventListener('input', sync);
    sync();
})();
</script>
{% endif %}
<script>
(function () {
    var btn = document.getElementById('oauth-copy-redirect');
    if (!btn) return;
    btn.addEventListener('click', function () {
        var id = btn.getAttribute('data-copy-target');
        var el = id ? document.getElementById(id) : null;
        if (!el) return;
        var text = el.textContent || '';
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function () {
                var prev = btn.innerHTML;
                btn.innerHTML = '<i class="bi bi-check2 me-1"></i>{{ 'admin.oauth_inbound.form.copied'|trans|e('js') }}';
                setTimeout(function () { btn.innerHTML = prev; }, 2000);
            });
        }
    });
})();
</script>
{% endblock %}