<div x-data="{ modalOpen: @entangle('modalOpen') }" class="space-y-8">

    {{-- HEADER --}}
    <div>
        <h2 class="text-xl font-semibold text-gray-800">{{ t('integrations.title') }}</h2>
        <p class="text-sm text-gray-500 mt-1">{{ t('integrations.subtitle') }}</p>
    </div>

    {{-- Flash: Verbindung erfolgreich --}}
    @if($justConnected)
        <div class="flex items-center gap-3 bg-green-50 border border-green-200 text-green-700 rounded-xl px-4 py-3 text-sm">
            <x-heroicon-o-check-circle class="w-5 h-5 shrink-0"/>
            <span>
                @if($justConnected === 'google') {{ t('integrations.google') }} @else {{ t('integrations.outlook') }} @endif
                {{ t('integrations.connected_msg') }}
            </span>
        </div>
    @endif

    @if($connectionError)
        <div class="flex items-center gap-3 bg-red-50 border border-red-200 text-red-700 rounded-xl px-4 py-3 text-sm">
            <x-heroicon-o-exclamation-circle class="w-5 h-5 shrink-0"/>
            <span>{{ $connectionError }}</span>
        </div>
    @endif

    {{-- KALENDER-KARTEN --}}
    <div>
        <p class="text-xs uppercase text-gray-400 tracking-wider mb-4 px-1">{{ t('integrations.calendar') }}</p>

        <div class="grid md:grid-cols-2 gap-5">

            {{-- GOOGLE --}}
            @php $g = $google; @endphp
            <div class="relative">
                <div class="bg-white border border-gray-100 rounded-xl p-5 shadow-sm {{ $canSync ? 'hover:shadow-md' : '' }} transition-shadow {{ !$canSync && !$g ? 'opacity-50 pointer-events-none' : '' }}">

                    {{-- Kopfzeile: Icon + Name + Badge --}}
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center shrink-0">
                                <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>
                            <p class="font-medium text-gray-800 text-sm">{{ t('integrations.google') }}</p>
                        </div>

                        @if($g)
                            <span class="text-[11px] font-medium bg-green-50 text-green-600 border border-green-200 px-2 py-0.5 rounded-full shrink-0">
                                {{ t('integrations.connected') }}
                            </span>
                        @else
                            <span class="text-[11px] font-medium bg-gray-100 text-gray-400 px-2 py-0.5 rounded-full shrink-0">
                                {{ t('integrations.disconnected') }}
                            </span>
                        @endif
                    </div>

                    {{-- Details --}}
                    @if($g)
                        <div class="flex items-center gap-2 text-xs text-gray-500 mb-4">
                            <x-heroicon-o-envelope class="w-3.5 h-3.5 text-gray-400 shrink-0"/>
                            <span class="truncate">{{ $g->provider_email }}</span>
                            <span class="text-gray-300">·</span>
                            <span class="capitalize shrink-0">
                                @if($g->sync_mode === 'read') {{ t('integrations.read_only') }}
                                @elseif($g->sync_mode === 'write') {{ t('integrations.write_only') }}
                                @else {{ t('integrations.bidirectional') }}
                                @endif
                            </span>
                        </div>
                    @else
                        <p class="text-xs text-gray-400 mb-4">{{ t('integrations.not_connected') }}</p>
                    @endif

                    <div class="flex justify-end">
                        <button wire:click="openModal('google')"
                                class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors">
                            {{ $g ? t('integrations.manage') : t('common.connect') }}
                        </button>
                    </div>
                </div>

                @if(!$canSync && !$g)
                    <a href="{{ route('subscription.index') }}"
                       class="absolute inset-0 flex items-center justify-center pointer-events-auto">
                        <span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-lg px-3 py-1.5 shadow-sm">
                            <x-heroicon-o-lock-closed class="w-3 h-3 text-indigo-600"/>
                            <span class="text-xs font-medium text-indigo-600">{{ t('integrations.pro_required') }}</span>
                        </span>
                    </a>
                @endif
            </div>


            {{-- OUTLOOK --}}
            @php $o = $outlook; @endphp
            <div class="relative">
                <div class="bg-white border border-gray-100 rounded-xl p-5 shadow-sm {{ $canSync ? 'hover:shadow-md' : '' }} transition-shadow {{ !$canSync && !$o ? 'opacity-50 pointer-events-none' : '' }}">

                    {{-- Kopfzeile: Icon + Name + Badge --}}
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center shrink-0">
                                <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>
                            <p class="font-medium text-gray-800 text-sm">{{ t('integrations.outlook') }}</p>
                        </div>

                        @if($o)
                            <span class="text-[11px] font-medium bg-green-50 text-green-600 border border-green-200 px-2 py-0.5 rounded-full shrink-0">
                                {{ t('integrations.connected') }}
                            </span>
                        @else
                            <span class="text-[11px] font-medium bg-gray-100 text-gray-400 px-2 py-0.5 rounded-full shrink-0">
                                {{ t('integrations.disconnected') }}
                            </span>
                        @endif
                    </div>

                    {{-- Details --}}
                    @if($o)
                        <div class="flex items-center gap-2 text-xs text-gray-500 mb-4">
                            <x-heroicon-o-envelope class="w-3.5 h-3.5 text-gray-400 shrink-0"/>
                            <span class="truncate">{{ $o->provider_email }}</span>
                            <span class="text-gray-300">·</span>
                            <span class="capitalize shrink-0">
                                @if($o->sync_mode === 'read') {{ t('integrations.read_only') }}
                                @elseif($o->sync_mode === 'write') {{ t('integrations.write_only') }}
                                @else {{ t('integrations.bidirectional') }}
                                @endif
                            </span>
                        </div>
                    @else
                        <p class="text-xs text-gray-400 mb-4">{{ t('integrations.not_connected') }}</p>
                    @endif

                    <div class="flex justify-end">
                        <button wire:click="openModal('outlook')"
                                class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors">
                            {{ $o ? t('integrations.manage') : t('common.connect') }}
                        </button>
                    </div>
                </div>

                @if(!$canSync && !$o)
                    <a href="{{ route('subscription.index') }}"
                       class="absolute inset-0 flex items-center justify-center pointer-events-auto">
                        <span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-lg px-3 py-1.5 shadow-sm">
                            <x-heroicon-o-lock-closed class="w-3 h-3 text-indigo-600"/>
                            <span class="text-xs font-medium text-indigo-600">{{ t('integrations.pro_required') }}</span>
                        </span>
                    </a>
                @endif
            </div>

        </div>
    </div>


    {{-- ══════════════════════════════════════════════════════════════ --}}
    {{-- INTEGRATION MODAL                                             --}}
    {{-- ══════════════════════════════════════════════════════════════ --}}
    <div x-show="modalOpen"
         x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4">

        {{-- Backdrop --}}
        <div class="absolute inset-0 bg-black/20"
             x-on:click="$wire.closeModal()"></div>

        {{-- Panel --}}
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md border border-gray-100"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-95">

            {{-- GOOGLE INHALT --}}
            @if($activeProvider === 'google')
                @include('livewire.integration.modals.provider', [
                    'integration' => $google,
                    'provider'    => 'google',
                    'name'        => t('integrations.google'),
                    'connectRoute'=> route('integrations.google.redirect'),
                    'canSync'     => $canSync,
                ])
            @elseif($activeProvider === 'outlook')
                @include('livewire.integration.modals.provider', [
                    'integration' => $outlook,
                    'provider'    => 'outlook',
                    'name'        => t('integrations.outlook'),
                    'connectRoute'=> route('integrations.outlook.redirect'),
                    'canSync'     => $canSync,
                ])
            @endif

        </div>
    </div>

</div>
