@props([
    'analyticsId' => config('cookie-consent.analytics_id'),
    'cookieName' => config('cookie-consent.cookie_name', 'cookie_consent'),
    'cookieLifetime' => config('cookie-consent.cookie_lifetime', 365),
    'showAnalyticsInfo' => true,
    'showCurrentSettings' => true,
    'showChangeButton' => true,
    'colors' => config('cookie-consent.colors', []),
])

@php
    $colors = array_merge(
        [
            'primary' => '#009bdd',
            'primary_hover' => '#0071a8',
        ],
        $colors ?? [],
    );
@endphp

<div x-data="cookiePrivacyInfo({ cookieName: '{{ $cookieName }}' })" x-init="init()"
    style="--cc-primary: {{ $colors['primary'] }}; --cc-primary-hover: {{ $colors['primary_hover'] }}"
    {{ $attributes->merge(['class' => 'cookie-privacy-info']) }}>
    {{-- Aktuelle Cookie-Einstellungen --}}
    @if ($showCurrentSettings)
        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
            <h4 class="font-semibold text-gray-900 mb-3 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                {{ __('cookie-consent::cookie-consent.privacy_info.current_settings_title') }}
            </h4>

            <div class="space-y-2">
                {{-- Technisch notwendig --}}
                <div class="flex items-center justify-between py-2 border-b border-gray-100">
                    <span class="text-gray-700">
                        {{ __('cookie-consent::cookie-consent.privacy_info.essential_cookies') }}
                    </span>
                    <span
                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                clip-rule="evenodd" />
                        </svg>
                        {{ __('cookie-consent::cookie-consent.status.active') }}
                    </span>
                </div>

                {{-- Analyse- und Marketing-Cookies (immer anzeigen) --}}
                <div class="flex items-center justify-between py-2 border-b border-gray-100 last:border-b-0">
                    <span class="text-gray-700">
                        {{ __('cookie-consent::cookie-consent.privacy_info.analytics_marketing_cookies') }}
                    </span>
                    <span x-show="settings.analytics"
                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                clip-rule="evenodd" />
                        </svg>
                        {{ __('cookie-consent::cookie-consent.status.active') }}
                    </span>
                    <span x-show="!settings.analytics"
                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                clip-rule="evenodd" />
                        </svg>
                        {{ __('cookie-consent::cookie-consent.status.inactive') }}
                    </span>
                </div>
            </div>

            {{-- Keine Einstellung vorhanden --}}
            <div x-show="!hasConsented" class="mt-3 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
                <p class="text-sm text-yellow-800">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline mr-1" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            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>
                    {{ __('cookie-consent::cookie-consent.status.no_consent') }}
                </p>
            </div>

            {{-- Button zum Ändern --}}
            @if ($showChangeButton)
                <div class="mt-4">
                    <button @click="$dispatch('open-cookie-settings')" type="button"
                        class="inline-flex items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200"
                        style="background-color: var(--cc-primary); border-color: var(--cc-primary); --tw-ring-color: var(--cc-primary)"
                        onmouseover="this.style.backgroundColor='var(--cc-primary-hover)'"
                        onmouseout="this.style.backgroundColor='var(--cc-primary)'">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                        </svg>
                        {{ __('cookie-consent::cookie-consent.buttons.change_settings') }}
                    </button>
                </div>
            @endif
        </div>
    @endif

    {{-- Google Analytics Informationen --}}
    @if ($showAnalyticsInfo && $analyticsId)
        <div class="prose prose-gray max-w-none">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                {{ __('cookie-consent::cookie-consent.google_analytics.title') }}
            </h3>

            <p class="text-gray-600 mb-4">
                {{ __('cookie-consent::cookie-consent.google_analytics.intro') }}
            </p>

            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                <h4 class="font-medium text-blue-900 mb-2">
                    {{ __('cookie-consent::cookie-consent.google_analytics.technical_details.title') }}
                </h4>
                <ul class="text-sm text-blue-800 space-y-1">
                    <li>
                        <strong>{{ __('cookie-consent::cookie-consent.google_analytics.technical_details.tracking_id') }}:</strong>
                        <code class="bg-blue-100 px-1 rounded">{{ $analyticsId }}</code>
                    </li>
                    <li>
                        <strong>{{ __('cookie-consent::cookie-consent.google_analytics.technical_details.ip_anonymization') }}:</strong>
                        {{ __('cookie-consent::cookie-consent.google_analytics.technical_details.ip_anonymization_value') }}
                    </li>
                    <li>
                        <strong>{{ __('cookie-consent::cookie-consent.google_analytics.technical_details.consent_mode') }}:</strong>
                        {{ __('cookie-consent::cookie-consent.google_analytics.technical_details.consent_mode_value') }}
                    </li>
                    <li>
                        <strong>{{ __('cookie-consent::cookie-consent.google_analytics.technical_details.cookie_duration') }}:</strong>
                        {{ __('cookie-consent::cookie-consent.google_analytics.technical_details.cookie_duration_value', ['days' => $cookieLifetime]) }}
                    </li>
                </ul>
            </div>

            <h4 class="font-medium text-gray-900 mt-4 mb-2">
                {{ __('cookie-consent::cookie-consent.google_analytics.purpose.title') }}
            </h4>
            <p class="text-gray-600 mb-4">
                {{ __('cookie-consent::cookie-consent.google_analytics.purpose.text') }}
            </p>

            <h4 class="font-medium text-gray-900 mt-4 mb-2">
                {{ __('cookie-consent::cookie-consent.google_analytics.ip_anonymization.title') }}
            </h4>
            <p class="text-gray-600 mb-4">
                {{ __('cookie-consent::cookie-consent.google_analytics.ip_anonymization.text') }}
            </p>

            <h4 class="font-medium text-gray-900 mt-4 mb-2">
                {{ __('cookie-consent::cookie-consent.google_analytics.legal_basis.title') }}
            </h4>
            <p class="text-gray-600 mb-4">
                {{ __('cookie-consent::cookie-consent.google_analytics.legal_basis.text') }}
            </p>

            <h4 class="font-medium text-gray-900 mt-4 mb-2">
                {{ __('cookie-consent::cookie-consent.google_analytics.cookies.title') }}
            </h4>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 border border-gray-200 rounded-lg overflow-hidden">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                {{ __('cookie-consent::cookie-consent.google_analytics.cookies.table.name') }}
                            </th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                {{ __('cookie-consent::cookie-consent.google_analytics.cookies.table.purpose') }}
                            </th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                {{ __('cookie-consent::cookie-consent.google_analytics.cookies.table.duration') }}
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach (__('cookie-consent::cookie-consent.google_analytics.cookies.list') as $cookieName => $cookie)
                            <tr>
                                <td class="px-4 py-3 text-sm font-mono text-gray-900">{{ $cookieName }}</td>
                                <td class="px-4 py-3 text-sm text-gray-600">{{ $cookie['purpose'] }}</td>
                                <td class="px-4 py-3 text-sm text-gray-600">{{ $cookie['duration'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <h4 class="font-medium text-gray-900 mt-6 mb-2">
                {{ __('cookie-consent::cookie-consent.google_analytics.objection.title') }}
            </h4>
            <p class="text-gray-600 mb-4">
                {{ __('cookie-consent::cookie-consent.google_analytics.objection.text') }}
            </p>
            <ul class="list-disc list-inside text-gray-600 mb-4 space-y-1">
                <li>{{ __('cookie-consent::cookie-consent.google_analytics.objection.options.revoke') }}</li>
                <li>
                    {{ __('cookie-consent::cookie-consent.google_analytics.objection.options.addon') }}
                    <a href="https://tools.google.com/dlpage/gaoptout" target="_blank" rel="noopener noreferrer"
                        class="text-blue-600 hover:text-blue-800 underline">
                        tools.google.com/dlpage/gaoptout
                    </a>
                </li>
            </ul>

            <h4 class="font-medium text-gray-900 mt-4 mb-2">
                {{ __('cookie-consent::cookie-consent.google_analytics.more_info.title') }}
            </h4>
            <p class="text-gray-600">
                {{ __('cookie-consent::cookie-consent.google_analytics.more_info.text') }}
                <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer"
                    class="text-blue-600 hover:text-blue-800 underline">
                    policies.google.com/privacy
                </a>
            </p>
        </div>
    @endif
</div>

<script>
    function cookiePrivacyInfo(config) {
        return {
            hasConsented: false,
            settings: {
                analytics: false,
            },
            config: config,

            init() {
                this.loadSettings();

                // Auf Änderungen lauschen (wenn Modal geschlossen wird)
                window.addEventListener('cookie-consent-updated', () => {
                    this.loadSettings();
                });
            },

            loadSettings() {
                const saved = this.getCookie(this.config.cookieName);

                if (saved) {
                    try {
                        this.settings = JSON.parse(saved);
                        this.hasConsented = true;
                    } catch (e) {
                        console.error('Cookie Privacy Info: Error parsing settings', e);
                    }
                } else {
                    this.hasConsented = false;
                    this.settings = {
                        analytics: false
                    };
                }
            },

            getCookie(name) {
                const nameEQ = name + "=";
                const ca = document.cookie.split(';');
                for (let i = 0; i < ca.length; i++) {
                    let c = ca[i].trim();
                    if (c.indexOf(nameEQ) === 0) {
                        return decodeURIComponent(c.substring(nameEQ.length));
                    }
                }
                return null;
            }
        }
    }
</script>