{{--
    Variables:
    $integration   – CalendarIntegration|null
    $provider      – 'google' | 'outlook'
    $name          – Display name
    $connectRoute  – OAuth redirect URL
    $canSync       – bool (plan has calendar_sync feature)
--}}

{{-- HEADER --}}
<div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
    <div class="flex items-center gap-3">
        @if($provider === 'google')
            <div class="w-9 h-9 rounded-lg bg-red-50 flex items-center justify-center">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
                    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
                    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                </svg>
            </div>
        @else
            <div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
                    <rect x="2" y="2" width="10" height="10" rx="1" fill="#0078D4"/>
                    <rect x="13" y="2" width="9" height="10" rx="1" fill="#50C2FF"/>
                    <rect x="2" y="13" width="10" height="9" rx="1" fill="#50C2FF"/>
                    <rect x="13" y="13" width="9" height="9" rx="1" fill="#0078D4"/>
                </svg>
            </div>
        @endif
        <div>
            <p class="font-semibold text-gray-800 text-sm">{{ $name }}</p>
            @if($integration)
                <p class="text-xs text-gray-400">{{ $integration->provider_email }}</p>
            @else
                <p class="text-xs text-gray-400">{{ t('integrations.not_connected') }}</p>
            @endif
        </div>
    </div>

    <button wire:click="closeModal"
            class="w-7 h-7 flex items-center justify-center rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors">
        <x-heroicon-o-x-mark class="w-4 h-4"/>
    </button>
</div>


{{-- BODY --}}
<div class="px-5 py-5 space-y-5">

    @if($integration)

        {{-- STATUS --}}
        <div class="bg-green-50 border border-green-200 rounded-xl px-4 py-3 flex items-center gap-3">
            <x-heroicon-o-check-circle class="w-5 h-5 text-green-600 shrink-0"/>
            <div>
                <p class="text-sm font-medium text-green-700">{{ t('integrations.connected') }}</p>
                <p class="text-xs text-green-600 mt-0.5">{{ $integration->calendar_name }}</p>
            </div>
        </div>

        {{-- TOKEN STATUS --}}
        @if($integration->isExpired())
            <div class="bg-amber-50 border border-amber-200 rounded-xl px-4 py-3 flex items-center gap-3">
                <x-heroicon-o-exclamation-triangle class="w-5 h-5 text-amber-600 shrink-0"/>
                <div>
                    <p class="text-sm font-medium text-amber-700">{{ t('integrations.token_expired') }}</p>
                    <p class="text-xs text-amber-600 mt-0.5">{{ t('integrations.reconnect_hint') }}</p>
                </div>
            </div>
        @endif

        {{-- SYNC MODE --}}
        <div>
            <div class="flex items-center justify-between mb-2">
                <p class="text-sm font-medium text-gray-700">{{ t('integrations.sync_mode') }}</p>
                @if(!$canSync)
                    <span class="text-[10px] font-semibold bg-indigo-50 text-indigo-600 border border-indigo-200 px-2 py-0.5 rounded-full uppercase tracking-wide">
                        Pro
                    </span>
                @endif
            </div>

            <div class="grid grid-cols-3 gap-2">
                @foreach(['read' => t('integrations.read_only'), 'write' => t('integrations.write_only'), 'both' => t('integrations.bidirectional')] as $mode => $label)
                    <button
                        @if($canSync)
                            wire:click="updateSyncMode('{{ $mode }}')"
                        @endif
                        class="py-2 px-2 rounded-lg border text-xs font-medium text-center transition-all
                            @if($syncMode === $mode)
                                border-indigo-400 bg-indigo-50 text-indigo-700
                            @else
                                border-gray-200 text-gray-500 {{ $canSync ? 'hover:bg-gray-50 cursor-pointer' : 'opacity-50 cursor-not-allowed' }}
                            @endif">
                        {{ $label }}
                    </button>
                @endforeach
            </div>

            @if(!$canSync)
                <p class="text-xs text-gray-400 mt-2 flex items-center gap-1">
                    <x-heroicon-o-lock-closed class="w-3 h-3"/>
                    {{ t('integrations.sync_pro_hint') }}
                    <a href="{{ route('plans.index') }}" class="text-indigo-600 hover:underline">Upgrade</a>
                </p>
            @endif
        </div>

        {{-- SYNC-STATUS & MANUELLER SYNC --}}
        @if($provider === 'google' && in_array($integration->sync_mode, ['read', 'both']))
            <div class="flex items-center justify-between bg-gray-50 border border-gray-100 rounded-xl px-3 py-2.5">
                <div class="flex items-center gap-2 text-xs text-gray-500">
                    <x-heroicon-o-clock class="w-3.5 h-3.5 shrink-0"/>
                    <span>
                        @if($integration->last_synced_at)
                            {{ t('integrations.last_sync') }} {{ $integration->last_synced_at->diffForHumans() }}
                        @else
                            {{ t('integrations.not_synced') }}
                        @endif
                    </span>
                </div>
                <button wire:click="syncNow"
                        wire:loading.attr="disabled"
                        class="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors disabled:opacity-50">
                    <span wire:loading.remove wire:target="syncNow">
                        <x-heroicon-o-arrow-path class="w-3 h-3"/>
                    </span>
                    <span wire:loading wire:target="syncNow">
                        <x-heroicon-o-arrow-path class="w-3 h-3 animate-spin"/>
                    </span>
                    <span wire:loading.remove wire:target="syncNow">{{ t('integrations.sync_now') }}</span>
                    <span wire:loading wire:target="syncNow">{{ t('integrations.syncing') }}</span>
                </button>
            </div>

            {{-- Watch-Status (Push-Benachrichtigungen) --}}
            <div class="flex items-center justify-between text-xs text-gray-400">
                <div class="flex items-center gap-1.5">
                    @if($integration->watch_channel_id && $integration->watch_expires_at?->isFuture())
                        <span class="w-1.5 h-1.5 rounded-full bg-green-400 inline-block"></span>
                        {{ t('integrations.push_active') }}
                        <span class="text-gray-300">·</span>
                        <span>{{ t('integrations.push_expires') }} {{ $integration->watch_expires_at->diffForHumans() }}</span>
                    @else
                        <span class="w-1.5 h-1.5 rounded-full bg-gray-300 inline-block"></span>
                        {{ t('integrations.push_inactive') }}
                    @endif
                </div>
                @if(!$integration->watch_channel_id || $integration->watch_expires_at?->isPast())
                    <button wire:click="registerWatch"
                            class="text-indigo-500 hover:text-indigo-700 hover:underline transition-colors">
                        {{ t('integrations.activate') }}
                    </button>
                @endif
            </div>
        @else
            <div class="text-xs text-gray-400 flex items-center gap-1.5">
                <x-heroicon-o-clock class="w-3.5 h-3.5"/>
                {{ t('integrations.connected_since') }} {{ $integration->created_at->diffForHumans() }}
            </div>
        @endif

    @else

        {{-- NICHT VERBUNDEN --}}
        <div class="text-center py-4">
            <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-3">
                <x-heroicon-o-link class="w-6 h-6 text-gray-400"/>
            </div>
            <p class="text-sm font-medium text-gray-700 mb-1">{{ t('integrations.not_connected') }}</p>
            <p class="text-xs text-gray-400 leading-relaxed max-w-[260px] mx-auto">
                {{ t('integrations.connect_desc', ['name' => $name]) }}
            </p>
        </div>

        {{-- SYNC INFO wenn kein Pro --}}
        @if(!$canSync)
            <div class="bg-indigo-50 border border-indigo-100 rounded-xl px-4 py-3">
                <div class="flex items-start gap-2">
                    <x-heroicon-o-information-circle class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0"/>
                    <p class="text-xs text-indigo-600 leading-relaxed">
                        {{ t('integrations.free_hint') }} <a href="{{ route('plans.index') }}" class="font-semibold hover:underline">{{ t('integrations.pro_plan') }}</a> {{ t('integrations.required') }}
                    </p>
                </div>
            </div>
        @endif

    @endif

</div>


{{-- FOOTER --}}
<div class="px-5 py-4 border-t border-gray-100 flex justify-between items-center">

    @if($integration)
        <button wire:click="disconnect"
                wire:confirm="{{ t('integrations.confirm_disconnect') }}"
                class="flex items-center gap-1.5 text-xs text-red-400 hover:text-red-600 font-medium transition-colors">
            <x-heroicon-o-link-slash class="w-4 h-4"/>
            {{ t('integrations.disconnect_btn') }}
        </button>
    @else
        <div></div>
    @endif

    <div class="flex gap-2">
        <button wire:click="closeModal"
                class="px-3 py-1.5 text-xs rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors">
            {{ t('common.close') }}
        </button>

        @if($integration)
            <a href="{{ $connectRoute }}"
               class="px-3 py-1.5 text-xs rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors font-medium">
                {{ t('integrations.reconnect') }}
            </a>
        @else
            <a href="{{ $connectRoute }}"
               onclick="openCenteredWindow(this.href, 'popup', 800, 600); return false;"
{{--               onclick="window.open(this.href, 'newwindow', 'width=600,height=400,resizable=yes,scrollbars=yes'); return false;"--}}
                class="px-3 py-1.5 text-xs rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors font-medium flex items-center gap-1.5">
                <x-heroicon-o-arrow-right-circle class="w-3.5 h-3.5"/>
                {{ t('common.connect') }}
            </a>
        @endif
    </div>
</div>
