{% extends "admin_base.html" %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/domain-mapper/assets/css/domain_mapper.ui.css">
{% endblock %}

{% block page_title %}Custom Domain Mapper{% endblock %}
{% block admin_content %}
<div id="domain-mapper-config" hidden
    data-has-cf-config="{{ has_cf_config | default(value=false) }}"
    data-tenant-name="{{ tenant_name }}"
    data-base-url="{{ base_url }}"
    data-fetch-zones-url="/plugins/domain-mapper/fetch_zones"
    data-map-domain-url="/plugins/domain-mapper/map_domain"
    data-unmap-domain-url="/plugins/domain-mapper/unmap_domain"
    data-get-bot-management-url="/plugins/domain-mapper/get_bot_management"
    data-update-bot-management-url="/plugins/domain-mapper/update_bot_management">
</div>

<div class="dm-container">
    <div class="dm-header">
        <div class="dm-header-content">
            <p class="dm-subtitle">Connect custom domains and control Cloudflare AI crawl access for tenant zones.</p>
        </div>
        <div class="dm-status-badge {% if has_cf_config %}status-active{% else %}status-warning{% endif %}">
            <i class="fas {% if has_cf_config %}fa-check-circle{% else %}fa-exclamation-triangle{% endif %}"></i>
            {% if has_cf_config %}Cloudflare Connected{% else %}Configuration Required{% endif %}
        </div>
    </div>

    {% if not has_cf_config %}
    <div class="dm-card dm-setup-card">
        <div class="dm-card-icon"><i class="fas fa-cog"></i></div>
        <div class="dm-card-body">
            <h3>Setup Required</h3>
            <p>Please configure your Cloudflare API Token in the plugin settings to begin mapping domains and managing AI crawl access.</p>
            <a href="/admin/settings" class="blocks-button blocks-button-primary">Go to Settings</a>
        </div>
    </div>
    {% else %}
    <div class="dm-card dm-card-stack">
        <div class="dm-card-body dm-card-block">
            <h3 class="dm-section-title">AI Access Presets</h3>
            <p class="dm-subtitle dm-subtitle-tight">Use per-zone presets after fetching zones. These update Cloudflare Bot Management, not Blocks SEO settings.</p>
            <div class="dm-preset-grid">
                <div class="dm-info-box dm-info-box-block">
                    <strong>AI discoverable</strong>
                    <p class="dm-subtitle">Turns off Cloudflare AI blocking so answer engines can fetch content.</p>
                </div>
                <div class="dm-info-box dm-info-box-block">
                    <strong>Training blocked</strong>
                    <p class="dm-subtitle">Keeps managed robots policy signals while avoiding hard AI bot blocks.</p>
                </div>
                <div class="dm-info-box dm-info-box-block">
                    <strong>Strict AI block</strong>
                    <p class="dm-subtitle">Asks and enforces that AI crawlers stay out.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="dm-actions-bar">
        <button id="btn-fetch-zones" class="blocks-button blocks-button-primary">
            <i class="fas fa-sync-alt"></i> Fetch Domains from Cloudflare
        </button>
    </div>

    <div id="dm-loader" class="dm-loader" hidden>
        <div class="spinner"></div>
        <p>Fetching your Cloudflare zones...</p>
    </div>

    <div id="dm-zones-container" class="dm-zones-grid">
        <div class="dm-empty-state">
            <i class="fas fa-search"></i>
            <p>Click the button above to load your Cloudflare domains.</p>
        </div>
    </div>
    {% endif %}
</div>

<div id="dm-modal" class="dm-modal" data-blocks-overlay role="dialog" aria-modal="true" aria-labelledby="dm-modal-heading" aria-hidden="true" hidden>
    <div class="dm-modal-content">
        <div class="dm-modal-header">
            <h3 id="dm-modal-heading">Confirm Domain Mapping</h3>
            <button type="button" class="dm-modal-close" aria-label="Close domain mapping dialog">&times;</button>
        </div>
        <div class="dm-modal-body">
            <p id="dm-modal-desc-map">You are about to map <strong id="modal-domain-name"></strong> to your tenant.</p>
            <p id="dm-modal-desc-unmap" hidden>Remove the custom domain <strong id="modal-domain-name-unmap"></strong> from this tenant. Visitors will no longer reach your site on that host.</p>
            <div id="dm-modal-map-details" class="dm-info-box">
                <i class="fas fa-info-circle"></i>
                <div>
                    <p><strong>Cloudflare Action:</strong> A CNAME record will be created pointing to:</p>
                    <code id="modal-target-cname"></code>
                </div>
            </div>
            <p id="dm-modal-warning" class="dm-warning-text">This will update your DNS settings in Cloudflare. Ensure you have the necessary permissions.</p>
        </div>
        <div class="dm-modal-footer">
            <button id="btn-confirm-map" type="button" class="blocks-button blocks-button-primary">Confirm &amp; Map</button>
            <button id="btn-cancel-map" type="button" class="blocks-button blocks-button-secondary">Cancel</button>
        </div>
    </div>
</div>

<div id="dm-ai-modal" class="dm-modal" data-blocks-overlay role="dialog" aria-modal="true" aria-labelledby="dm-ai-modal-heading" aria-hidden="true" hidden>
    <div class="dm-modal-content dm-modal-content-wide">
        <div class="dm-modal-header">
            <h3 id="dm-ai-modal-heading">Cloudflare AI Access</h3>
            <button type="button" id="dm-ai-modal-close" class="dm-modal-close" aria-label="Close AI access dialog">&times;</button>
        </div>
        <div class="dm-modal-body">
            <p class="dm-subtitle dm-subtitle-tight" id="dm-ai-modal-subtitle">Read current Cloudflare bot settings, then apply a safe preset.</p>
            <div id="dm-ai-modal-loading" class="dm-loader dm-loader-compact" hidden>
                <div class="spinner"></div>
                <p>Loading Cloudflare bot management...</p>
            </div>
            <div id="dm-ai-modal-content" hidden>
                <div class="dm-info-box dm-info-box-block dm-info-box-tight">
                    <strong>Current status</strong>
                    <div id="dm-ai-status-grid" class="dm-ai-status-grid"></div>
                </div>
                <div class="dm-preset-button-grid">
                    <button type="button" class="blocks-button blocks-button-secondary dm-ai-preset" data-preset="discoverable">AI discoverable</button>
                    <button type="button" class="blocks-button blocks-button-secondary dm-ai-preset" data-preset="training_blocked">Training blocked</button>
                    <button type="button" class="blocks-button blocks-button-secondary dm-ai-preset" data-preset="strict_block">Strict AI block</button>
                </div>
                <div class="dm-info-box dm-info-box-block dm-info-box-tight">
                    <strong>What the presets do</strong>
                    <ul class="dm-list">
                        <li><code>AI discoverable</code>: disables Cloudflare-managed AI blocking for this zone.</li>
                        <li><code>Training blocked</code>: keeps policy signals while removing hard AI blocking.</li>
                        <li><code>Strict AI block</code>: keeps Cloudflare-managed robots and blocks AI bots.</li>
                    </ul>
                </div>
                <p class="dm-warning-text dm-warning-spaced">Requires a Cloudflare token with Bot Management Read/Edit plus Zone Read for the target zone.</p>
            </div>
        </div>
        <div class="dm-modal-footer">
            <button id="dm-ai-close-btn" type="button" class="blocks-button blocks-button-secondary">Close</button>
        </div>
    </div>
</div>

<div id="dm-toast" class="dm-toast" role="status" aria-live="polite" aria-atomic="true"></div>
{% endblock %}

{% block scripts %}
<script src="/plugins/domain-mapper/assets/js/domain_mapper.js"></script>
{% endblock %}