{% extends "base.html" %}

{% block title %}Ustawienia firmy - {{ company.name }} - Norda Biznes Partner{% endblock %}

{% block extra_css %}
    .settings-header {
        margin-bottom: var(--spacing-xl);
    }

    .settings-header h1 {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
        margin: 0;
    }

    .settings-header .breadcrumb {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-sm);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .settings-header .breadcrumb a {
        color: var(--primary);
        text-decoration: none;
    }

    .settings-header .breadcrumb a:hover {
        text-decoration: underline;
    }

    .settings-header .breadcrumb svg {
        width: 14px;
        height: 14px;
        color: var(--text-muted);
    }

    .settings-subtitle {
        margin: var(--spacing-xs) 0 0 0;
        color: var(--text-secondary);
    }

    /* OAuth Cards Grid */
    .oauth-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
    }

    .oauth-card {
        background: white;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        padding: var(--spacing-lg);
        border: 1px solid var(--border);
        transition: var(--transition);
    }

    .oauth-card:hover {
        box-shadow: var(--shadow);
    }

    .oauth-card-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }

    .oauth-card-icon {
        width: 44px;
        height: 44px;
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .oauth-card-icon.google {
        background: #f0f7ff;
        color: #4285F4;
    }

    .oauth-card-icon.meta {
        background: #f0f0ff;
        color: #1877F2;
    }

    .oauth-card-icon svg {
        width: 24px;
        height: 24px;
    }

    .oauth-card-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .oauth-card-desc {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin: 0 0 var(--spacing-md) 0;
        line-height: 1.5;
    }

    /* Status badges */
    .oauth-status {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        font-weight: 500;
        margin-bottom: var(--spacing-md);
    }

    .oauth-status.connected {
        background: var(--success-light, #dcfce7);
        color: var(--success, #16a34a);
    }

    .oauth-status.unavailable {
        background: var(--surface);
        color: var(--text-muted);
    }

    .oauth-status.expired {
        background: var(--warning-light, #fef3c7);
        color: var(--warning, #d97706);
    }

    .oauth-status svg {
        width: 14px;
        height: 14px;
    }

    .oauth-account-name {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin-bottom: var(--spacing-md);
    }

    .oauth-card-actions {
        display: flex;
        gap: var(--spacing-sm);
        flex-wrap: wrap;
    }

    .btn-oauth {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition);
        border: none;
        text-decoration: none;
    }

    .btn-oauth.connect {
        background: var(--primary);
        color: white;
    }

    .btn-oauth.connect:hover {
        opacity: 0.9;
    }

    .btn-oauth.disconnect {
        background: transparent;
        color: var(--error, #dc2626);
        border: 1px solid var(--error, #dc2626);
    }

    .btn-oauth.disconnect:hover {
        background: var(--error, #dc2626);
        color: white;
    }

    .btn-oauth.discover {
        background: transparent;
        color: var(--primary);
        border: 1px solid var(--primary);
    }

    .btn-oauth.discover:hover {
        background: var(--primary);
        color: white;
    }

    .btn-oauth:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-oauth svg {
        width: 16px;
        height: 16px;
    }

    /* Toast notification */
    .toast {
        position: fixed;
        top: var(--spacing-lg);
        right: var(--spacing-lg);
        padding: var(--spacing-md) var(--spacing-lg);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        font-weight: 500;
        z-index: 9999;
        animation: toastIn 0.3s ease-out;
        box-shadow: var(--shadow-lg);
    }

    .toast.success {
        background: var(--success, #16a34a);
        color: white;
    }

    .toast.error {
        background: var(--error, #dc2626);
        color: white;
    }

    @keyframes toastIn {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Section title */
    .section-title {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--spacing-md) 0;
    }

    .section-desc {
        color: var(--text-secondary);
        margin: 0 0 var(--spacing-lg) 0;
        font-size: var(--font-size-sm);
    }

    /* Back link */
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        color: var(--primary);
        text-decoration: none;
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-md);
    }

    .back-link:hover {
        text-decoration: underline;
    }

    .back-link svg {
        width: 16px;
        height: 16px;
    }

    /* Disconnect confirm modal */
    .disconnect-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        align-items: center;
        justify-content: center;
    }
    .disconnect-modal.active { display: flex; }
    .disconnect-modal-content {
        background: var(--surface);
        padding: var(--spacing-xl);
        border-radius: var(--radius-lg);
        max-width: 420px;
        width: 90%;
        box-shadow: var(--shadow-lg);
        text-align: center;
    }
    .disconnect-modal-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto var(--spacing-md);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #FEF3C7;
        color: #F59E0B;
    }
    .disconnect-modal-icon svg { width: 24px; height: 24px; }
    .disconnect-modal-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }
    .disconnect-modal-desc {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        line-height: 1.5;
        margin-bottom: var(--spacing-lg);
    }
    .disconnect-modal-footer {
        display: flex;
        justify-content: center;
        gap: var(--spacing-sm);
    }
{% endblock %}

{% block content %}
<div class="container">
    <!-- Breadcrumb -->
    <div class="settings-header">
        <div class="breadcrumb">
            {% if is_user_view %}
            <a href="{{ url_for('auth.konto_dane') }}">Moje konto</a>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
            <span>Integracje</span>
            {% else %}
            <a href="{{ url_for('admin.admin_companies') }}">Firmy</a>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
            <a href="{{ url_for('admin.admin_company_get', company_id=company.id) }}">{{ company.name }}</a>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
            <span>Ustawienia</span>
            {% endif %}
        </div>
        <h1>{% if is_user_view %}Integracje{% else %}Ustawienia firmy{% endif %}</h1>
        <p class="settings-subtitle">{{ company.name }} — integracje z zewnętrznymi serwisami</p>
    </div>

    <!-- OAuth Integrations Section -->
    <h2 class="section-title">Połączenia OAuth</h2>
    <p class="section-desc">Połącz konta zewnętrznych serwisów, aby wzbogacić audyty o dodatkowe dane. Każdy serwis wymaga osobnej autoryzacji.</p>

    <div class="oauth-cards">
        <!-- Google Business Profile -->
        {% set gbp_conn = connections.get('google/gbp', {}) %}
        <div class="oauth-card" data-provider="google" data-service="gbp">
            <div class="oauth-card-header">
                <div class="oauth-card-icon google">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
                </div>
                <h3 class="oauth-card-title">Google Business Profile</h3>
            </div>
            <p class="oauth-card-desc">Opinie z odpowiedziami właściciela, posty, zdjęcia, Q&A i statystyki widoczności wizytówki Google.</p>

            {% if gbp_conn.get('connected') %}
                {% if gbp_conn.get('is_expired') %}
                    <div class="oauth-status expired">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                        {% if gbp_conn.get('refresh_failed') %}
                        Automatyczne odświeżenie nie powiodło się — połącz ponownie
                        {% else %}
                        Token wygasł — wymagane ponowne połączenie
                        {% endif %}
                    </div>
                {% else %}
                    <div class="oauth-status connected">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        Połączono
                    </div>
                {% endif %}
                {% if gbp_conn.get('account_name') %}
                    <p class="oauth-account-name">Konto: {{ gbp_conn.account_name }}</p>
                {% endif %}
                <div class="oauth-card-actions">
                    <button class="btn-oauth discover" onclick="discoverGBPLocations()">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                        Wykryj lokalizacje
                    </button>
                    <button class="btn-oauth disconnect" onclick="disconnectOAuth('google', 'gbp')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" y1="2" x2="12" y2="12"/></svg>
                        Rozłącz
                    </button>
                </div>
            {% elif oauth_available.get('google') %}
                <div class="oauth-card-actions">
                    <button class="btn-oauth connect" onclick="connectOAuth('google', 'gbp')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
                        Połącz konto
                    </button>
                </div>
            {% else %}
                <div class="oauth-status unavailable">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                    Niedostępne — wymaga konfiguracji administratora
                </div>
            {% endif %}
        </div>

        <!-- Google Search Console -->
        {% set sc_conn = connections.get('google/search_console', {}) %}
        <div class="oauth-card" data-provider="google" data-service="search_console">
            <div class="oauth-card-header">
                <div class="oauth-card-icon google">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
                </div>
                <h3 class="oauth-card-title">Google Search Console</h3>
            </div>
            <p class="oauth-card-desc">Zapytania wyszukiwania, CTR, średnia pozycja, indeksowanie stron i dane o wydajności w Google.</p>

            {% if sc_conn.get('connected') %}
                {% if sc_conn.get('is_expired') %}
                    <div class="oauth-status expired">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                        {% if sc_conn.get('refresh_failed') %}
                        Automatyczne odświeżenie nie powiodło się — połącz ponownie
                        {% else %}
                        Token wygasł — wymagane ponowne połączenie
                        {% endif %}
                    </div>
                {% else %}
                    <div class="oauth-status connected">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        Połączono
                    </div>
                {% endif %}
                {% if sc_conn.get('account_name') %}
                    <p class="oauth-account-name">Konto: {{ sc_conn.account_name }}</p>
                {% endif %}
                <div style="margin: 8px 0; padding: 10px 12px; background: #eff6ff; border-radius: 8px; font-size: 12px; color: #1e40af; line-height: 1.6;">
                    <strong>Wazne:</strong> Twoja strona musi byc dodana i zweryfikowana w
                    <a href="https://search.google.com/search-console" target="_blank" rel="noopener" style="color: #2563eb; font-weight: 600;">Google Search Console</a>.
                    Po weryfikacji dane pojawia sie w audycie SEO po 2-3 dniach.
                </div>
                <div class="oauth-card-actions">
                    <button class="btn-oauth disconnect" onclick="disconnectOAuth('google', 'search_console')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" y1="2" x2="12" y2="12"/></svg>
                        Rozłącz
                    </button>
                </div>
            {% elif oauth_available.get('google') %}
                <div class="oauth-card-actions">
                    <button class="btn-oauth connect" onclick="connectOAuth('google', 'search_console')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
                        Połącz konto
                    </button>
                </div>
            {% else %}
                <div class="oauth-status unavailable">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                    Niedostępne — wymaga konfiguracji administratora
                </div>
            {% endif %}
        </div>

        <!-- Facebook -->
        {% set fb_conn = connections.get('meta/facebook', {}) %}
        <div class="oauth-card" data-provider="meta" data-service="facebook">
            <div class="oauth-card-header">
                <div class="oauth-card-icon meta">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                </div>
                <h3 class="oauth-card-title">Facebook</h3>
            </div>
            <p class="oauth-card-desc">Zasięg strony, impressions, engagement, dane demograficzne odbiorców i statystyki postów.</p>

            {% if fb_conn.get('connected') %}
                {% if fb_conn.get('is_expired') %}
                    <div class="oauth-status expired">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                        {% if fb_conn.get('refresh_failed') %}
                        Automatyczne odświeżenie nie powiodło się — połącz ponownie
                        {% else %}
                        Token wygasł — wymagane ponowne połączenie
                        {% endif %}
                    </div>
                {% else %}
                    <div class="oauth-status connected">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        Połączono
                    </div>
                {% endif %}
                {% if fb_conn.get('account_name') %}
                    <p class="oauth-account-name">Strona: {{ fb_conn.account_name }}</p>
                {% endif %}
                <div class="oauth-card-actions">
                    <button class="btn-oauth disconnect" onclick="disconnectOAuth('meta', 'facebook')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" y1="2" x2="12" y2="12"/></svg>
                        Rozłącz
                    </button>
                </div>
            {% elif oauth_available.get('meta') %}
                <div class="oauth-card-actions">
                    <button class="btn-oauth connect" onclick="connectOAuth('meta', 'facebook')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
                        Połącz konto
                    </button>
                </div>
            {% else %}
                <div class="oauth-status unavailable">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                    Niedostępne — wymaga konfiguracji administratora
                </div>
            {% endif %}
        </div>

        <!-- Instagram -->
        {% set ig_conn = connections.get('meta/instagram', {}) %}
        <div class="oauth-card" data-provider="meta" data-service="instagram">
            <div class="oauth-card-header">
                <div class="oauth-card-icon meta">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                </div>
                <h3 class="oauth-card-title">Instagram</h3>
            </div>
            <p class="oauth-card-desc">Stories, reels, engagement, zasięg postów i dane demograficzne obserwujących konto firmowe.</p>

            {% if ig_conn.get('connected') %}
                {% if ig_conn.get('is_expired') %}
                    <div class="oauth-status expired">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                        {% if ig_conn.get('refresh_failed') %}
                        Automatyczne odświeżenie nie powiodło się — połącz ponownie
                        {% else %}
                        Token wygasł — wymagane ponowne połączenie
                        {% endif %}
                    </div>
                {% else %}
                    <div class="oauth-status connected">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        Połączono
                    </div>
                {% endif %}
                {% if ig_conn.get('account_name') %}
                    <p class="oauth-account-name">Konto: {{ ig_conn.account_name }}</p>
                {% endif %}
                <div class="oauth-card-actions">
                    <button class="btn-oauth disconnect" onclick="disconnectOAuth('meta', 'instagram')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" y1="2" x2="12" y2="12"/></svg>
                        Rozłącz
                    </button>
                </div>
            {% elif oauth_available.get('meta') %}
                <div class="oauth-card-actions">
                    <button class="btn-oauth connect" onclick="connectOAuth('meta', 'instagram')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
                        Połącz konto
                    </button>
                </div>
            {% else %}
                <div class="oauth-status unavailable">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                    Niedostępne — wymaga konfiguracji administratora
                </div>
            {% endif %}
        </div>
    </div>

    <a href="{{ url_for('admin.admin_company_get', company_id=company.id) }}" class="back-link">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
        Powrót do szczegółów firmy
    </a>
</div>

<!-- Disconnect Confirm Modal -->
<div id="disconnectModal" class="disconnect-modal">
    <div class="disconnect-modal-content">
        <div class="disconnect-modal-icon">
            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
            </svg>
        </div>
        <div class="disconnect-modal-title">Rozłączyć serwis?</div>
        <div class="disconnect-modal-desc">Po rozłączeniu audyty nie będą mogły pobierać rozszerzonych danych z tego serwisu. Możesz połączyć go ponownie w dowolnym momencie.</div>
        <div class="disconnect-modal-footer">
            <button class="btn btn-secondary" onclick="closeDisconnectModal()">Anuluj</button>
            <button id="disconnectConfirmBtn" class="btn btn-danger" onclick="executeDisconnect()">Rozłącz</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
    // OAuth Settings JS
    var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    function showToast(message, type) {
        var existing = document.querySelector('.toast');
        if (existing) existing.remove();

        var toast = document.createElement('div');
        toast.className = 'toast ' + (type || 'success');
        toast.textContent = message;
        document.body.appendChild(toast);

        setTimeout(function() {
            toast.style.opacity = '0';
            toast.style.transition = 'opacity 0.3s';
            setTimeout(function() { toast.remove(); }, 300);
        }, 4000);
    }

    function connectOAuth(provider, service) {
        fetch('/api/oauth/connect/' + provider + '/' + service, {
            method: 'POST',
            headers: {
                'X-CSRFToken': csrfToken,
                'Content-Type': 'application/json'
            }
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.auth_url) {
                window.location.href = data.auth_url;
            } else {
                showToast(data.error || 'Nie udało się rozpocząć autoryzacji', 'error');
            }
        })
        .catch(function(err) {
            showToast('Błąd połączenia: ' + err.message, 'error');
        });
    }

    var pendingDisconnect = null;

    function disconnectOAuth(provider, service) {
        pendingDisconnect = { provider: provider, service: service };
        document.getElementById('disconnectModal').classList.add('active');
        return;
    }

    function closeDisconnectModal() {
        document.getElementById('disconnectModal').classList.remove('active');
        pendingDisconnect = null;
    }

    function executeDisconnect() {
        if (!pendingDisconnect) return;
        var provider = pendingDisconnect.provider;
        var service = pendingDisconnect.service;
        closeDisconnectModal();

        fetch('/api/oauth/disconnect/' + provider + '/' + service, {
            method: 'POST',
            headers: {
                'X-CSRFToken': csrfToken
            }
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success) {
                showToast('Serwis rozłączony pomyślnie');
                setTimeout(function() { location.reload(); }, 1000);
            } else {
                showToast(data.error || 'Nie udało się rozłączyć', 'error');
            }
        })
        .catch(function(err) {
            showToast('Błąd: ' + err.message, 'error');
        });
    }

    function discoverGBPLocations() {
        var btn = document.querySelector('.btn-oauth.discover');
        if (btn) {
            btn.disabled = true;
            btn.innerHTML = '<svg class="spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;animation:spin 1s linear infinite"><circle cx="12" cy="12" r="10" opacity="0.3"/><path d="M12 2a10 10 0 0 1 10 10"/></svg> Szukam...';
        }

        fetch('/api/oauth/google/discover-locations', {
            method: 'POST',
            headers: {
                'X-CSRFToken': csrfToken,
                'Content-Type': 'application/json'
            }
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success) {
                var count = data.locations ? data.locations.length : 0;
                showToast('Znaleziono ' + count + ' lokalizacji GBP');
            } else {
                showToast(data.error || 'Nie udało się wyszukać lokalizacji', 'error');
            }
            if (btn) {
                btn.disabled = false;
                btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> Wykryj lokalizacje';
            }
        })
        .catch(function(err) {
            showToast('Błąd: ' + err.message, 'error');
            if (btn) {
                btn.disabled = false;
                btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> Wykryj lokalizacje';
            }
        });
    }

    // Handle URL params for OAuth callback results
    (function() {
        var params = new URLSearchParams(window.location.search);
        if (params.get('oauth_success')) {
            showToast('Pomyślnie połączono: ' + params.get('oauth_success'));
            // Clean URL
            window.history.replaceState({}, document.title, window.location.pathname);
        }
        if (params.get('oauth_error')) {
            var errorMap = {
                'missing_params': 'Brak wymaganych parametrów',
                'invalid_state': 'Nieprawidłowy token sesji',
                'invalid_state_format': 'Nieprawidłowy format tokenu',
                'unauthorized': 'Brak uprawnień',
                'token_exchange_failed': 'Wymiana tokenu nie powiodła się',
                'save_failed': 'Nie udało się zapisać tokenu'
            };
            var error = params.get('oauth_error');
            showToast(errorMap[error] || 'Błąd OAuth: ' + error, 'error');
            window.history.replaceState({}, document.title, window.location.pathname);
        }
    })();
{% endblock %}
