@extends('layouts.main')

@section('title')
    {{ __('settings.title') }}
@endsection

@section('page_title')
    {{ __('settings.title') }}
@endsection

@php
    $breadcrumbs = [['url' => '', 'label' => __('settings.title')]];
@endphp

@section('content')
    <div class="w-full space-y-6">
        <!-- Header Section -->
        <div
            class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 p-4 sm:p-6 shadow-front-box-shadow-glow">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex items-center space-x-3 sm:space-x-4">
                    <div
                        class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-lg flex items-center justify-center shadow-sm flex-shrink-0">
                        <i class="fas fa-cog text-white text-lg sm:text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h1 class="text-xl sm:text-2xl font-semibold text-gray-700">{{ __('settings.title') }}</h1>
                        <p class="text-sm sm:text-base text-gray-600 mt-1">{{ __('settings.configure_preferences') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Success Message -->
        @if (Session::has('message'))
            <div
                class="bg-green-50/80 backdrop-blur-sm p-4 rounded-24 border border-white/50 shadow-front-box-shadow-glow flex items-center space-x-3">
                <i class="fas fa-check-circle text-green-600"></i>
                <span class="text-green-700">{{ Session::get('message') }}</span>
            </div>
        @endif

        <!-- Settings Form Card -->
        <div class="">
            <div class="">
                <form method="post" action="{{ route('settings.store') }}" id="settings-form" class="space-y-8">
                    @csrf
                    @isset($setting)
                        <input type="hidden" name="id" value="{{ $setting->id }}">
                    @endisset

                    @php
                        $currentThemeColor = old('theme_color', $setting->theme_color ?? $defaultThemeColor);
                        $footerToggleRaw = old('enable_footer_message', $setting->enable_footer_message ?? true);
                        $footerToggleEnabled = in_array($footerToggleRaw, [1, '1', true, 'true'], true);
                        $footerMessage = old('footer_message', $setting->footer_message ?? '');
                        $reminderDefaults = $defaultReminderMinutes ?? \App\Models\Setting::DEFAULT_REMINDER_MINUTES;
                        $reminderToggleRaw = old(
                            'invitation_reminder_enabled',
                            $setting->invitation_reminder_enabled ?? true,
                        );
                        $reminderToggleEnabled = in_array($reminderToggleRaw, [1, '1', true, 'true'], true);
                        $reminderValues = [
                            'invitation_reminder_first_minutes' => old(
                                'invitation_reminder_first_minutes',
                                $setting->invitation_reminder_first_minutes ??
                                    ($reminderDefaults['reminder_first'] ?? 7200),
                            ),
                            'invitation_reminder_second_minutes' => old(
                                'invitation_reminder_second_minutes',
                                $setting->invitation_reminder_second_minutes ??
                                    ($reminderDefaults['reminder_second'] ?? 1440),
                            ),
                            'invitation_reminder_third_minutes' => old(
                                'invitation_reminder_third_minutes',
                                $setting->invitation_reminder_third_minutes ??
                                    ($reminderDefaults['reminder_third'] ?? 300),
                            ),
                            'invitation_reminder_final_minutes' => old(
                                'invitation_reminder_final_minutes',
                                $setting->invitation_reminder_final_minutes ??
                                    ($reminderDefaults['reminder_final'] ?? 60),
                            ),
                        ];
                    @endphp

                    <!-- Theme Color Section -->
                    <div
                        class="space-y-5 border border-white/40 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow">
                        <div class="flex items-center space-x-3">
                            <div
                                class="min-w-10 h-10 bg-primary/10 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                                <i class="fas fa-palette text-primary"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-700">{{ __('settings.theme_color') }}</h3>
                                <p class="text-sm text-gray-600">{{ __('settings.theme_color_description') }}</p>
                            </div>
                        </div>

                        <input type="hidden" name="theme_color" id="themeColorInput" value="{{ $currentThemeColor }}"
                            data-original="{{ $setting->theme_color ?? $defaultThemeColor }}">

                        <div class="flex flex-wrap gap-3">
                            @foreach ($themeOptions as $color)
                                <button type="button"
                                    class="theme-color-option relative w-10 h-10 rounded-full border-4 border-white shadow-md transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary"
                                    style="background: {{ $color }}" data-color="{{ strtoupper($color) }}"
                                    data-theme-color-option role="radio" aria-checked="false"
                                    aria-label="{{ __('settings.theme_color_option', ['color' => $color]) }}">
                                    <span
                                        class="absolute inset-0 rounded-full border border-black/10 pointer-events-none"></span>
                                </button>
                            @endforeach
                        </div>

                        <p class="text-sm text-gray-500 flex items-start gap-2">
                            <i class="fas fa-bolt text-primary mt-0.5"></i>
                            {{ __('settings.theme_preview_hint') }}
                        </p>
                        @error('theme_color')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    @role('admin')
                        <!-- Reminder Settings Section -->
                        <div
                            class="border border-white/40 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow">
                            <div class="flex items-center space-x-3">
                                <div
                                    class="min-w-10 h-10 bg-primary/10 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                                    <i class="fas fa-bell text-primary"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-semibold text-gray-700">{{ __('settings.reminder_section_title') }}
                                    </h3>
                                    <p class="text-sm text-gray-600">{{ __('settings.reminder_section_description') }}</p>
                                </div>
                            </div>

                            <div class="space-y-3 mt-8">
                                <div class="flex items-start justify-between gap-4">
                                    <div>
                                        <h4 class="text-base font-semibold text-gray-700">
                                            {{ __('settings.reminder_toggle_label') }}</h4>
                                        <p class="text-sm text-gray-600">{{ __('settings.reminder_toggle_hint') }}</p>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="hidden" name="invitation_reminder_enabled" value="0">
                                        <label class="inline-flex items-center cursor-pointer" data-reminder-toggle>
                                            <input type="checkbox" class="sr-only" name="invitation_reminder_enabled"
                                                value="1" {{ $reminderToggleEnabled ? 'checked' : '' }}>
                                            <span
                                                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 bg-gray-300"
                                                data-reminder-toggle-track>
                                                <span
                                                    class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-200"
                                                    data-reminder-toggle-thumb></span>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="reminder-intervals-panel transition-all duration-300 ease-in-out overflow-hidden"
                                data-reminder-section>
                                <div class="space-y-3 p-1 mt-8 ">
                                    <div class="flex items-start justify-between gap-2">
                                        <div>
                                            <h4 class="text-base font-semibold text-gray-700">
                                                {{ __('settings.reminder_interval_label') }}</h4>
                                            <p class="text-sm text-gray-600">{{ __('settings.reminder_interval_helper') }}</p>
                                        </div>
                                    </div>

                                    <div class="grid md:grid-cols-2 gap-4">
                                        <div class="space-y-2">
                                            <label class="form-label" for="invitation_reminder_first_minutes">
                                                {{ __('settings.reminder_first_label') }}
                                            </label>
                                            <div class="relative">
                                                <input type="number" min="1"
                                                    class="form-control @error('invitation_reminder_first_minutes') is-invalid @enderror"
                                                    id="invitation_reminder_first_minutes"
                                                    name="invitation_reminder_first_minutes"
                                                    value="{{ $reminderValues['invitation_reminder_first_minutes'] }}"
                                                    data-reminder-input>
                                                <span
                                                    class="absolute inset-y-0 right-3 flex items-center text-xs text-gray-500">
                                                    {{ __('settings.reminder_minutes_suffix') }}
                                                </span>
                                            </div>
                                            @error('invitation_reminder_first_minutes')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="space-y-2">
                                            <label class="form-label" for="invitation_reminder_second_minutes">
                                                {{ __('settings.reminder_second_label') }}
                                            </label>
                                            <div class="relative">
                                                <input type="number" min="1"
                                                    class="form-control @error('invitation_reminder_second_minutes') is-invalid @enderror"
                                                    id="invitation_reminder_second_minutes"
                                                    name="invitation_reminder_second_minutes"
                                                    value="{{ $reminderValues['invitation_reminder_second_minutes'] }}"
                                                    data-reminder-input>
                                                <span
                                                    class="absolute inset-y-0 right-3 flex items-center text-xs text-gray-500">
                                                    {{ __('settings.reminder_minutes_suffix') }}
                                                </span>
                                            </div>
                                            @error('invitation_reminder_second_minutes')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="space-y-2">
                                            <label class="form-label" for="invitation_reminder_third_minutes">
                                                {{ __('settings.reminder_third_label') }}
                                            </label>
                                            <div class="relative">
                                                <input type="number" min="1"
                                                    class="form-control @error('invitation_reminder_third_minutes') is-invalid @enderror"
                                                    id="invitation_reminder_third_minutes"
                                                    name="invitation_reminder_third_minutes"
                                                    value="{{ $reminderValues['invitation_reminder_third_minutes'] }}"
                                                    data-reminder-input>
                                                <span
                                                    class="absolute inset-y-0 right-3 flex items-center text-xs text-gray-500">
                                                    {{ __('settings.reminder_minutes_suffix') }}
                                                </span>
                                            </div>
                                            @error('invitation_reminder_third_minutes')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="space-y-2">
                                            <label class="form-label" for="invitation_reminder_final_minutes">
                                                {{ __('settings.reminder_final_label') }}
                                            </label>
                                            <div class="relative">
                                                <input type="number" min="1"
                                                    class="form-control @error('invitation_reminder_final_minutes') is-invalid @enderror"
                                                    id="invitation_reminder_final_minutes"
                                                    name="invitation_reminder_final_minutes"
                                                    value="{{ $reminderValues['invitation_reminder_final_minutes'] }}"
                                                    data-reminder-input>
                                                <span
                                                    class="absolute inset-y-0 right-3 flex items-center text-xs text-gray-500">
                                                    {{ __('settings.reminder_minutes_suffix') }}
                                                </span>
                                            </div>
                                            @error('invitation_reminder_final_minutes')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endrole

                    <!-- Message Template Section -->
                    <div
                        class="border border-white/40 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow">
                        <div class="flex items-center space-x-3">
                            <div
                                class="min-w-10 h-10 bg-primary/10 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                                <i class="fas fa-file-text text-primary"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-700">
                                    {{ __('settings.default_message_template') }}</h3>
                                <p class="text-sm text-gray-600">{{ __('settings.set_default_invitation_message') }}</p>
                            </div>
                        </div>

                        <div class="space-y-3 mt-8">
                            <label class="form-label" for="default_message">
                                <i class="fas fa-edit mr-2"></i>
                                {{ __('settings.message_template') }}
                            </label>
                            <textarea class="form-control !mt-0 @error('default_message') is-invalid @enderror" id="default_message"
                                name="default_message" rows="6" placeholder="{{ __('settings.enter_default_message_template') }}">{{ $setting->default_message ?? '' }}</textarea>
                            <div class="flex items-start space-x-2">
                                <i class="fas fa-info-circle text-blue-500 mt-0.5"></i>
                                <p class="text-sm text-gray-600">
                                    {{ __('settings.default_template_info') }}
                                </p>
                            </div>
                            @error('default_message')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Live Preview Section -->
                        <div
                            class="border border-white/40 mt-6 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow">
                            <div class="flex items-center space-x-3 mb-4">
                                <div
                                    class="min-w-10 h-10 bg-primary/10 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                                    <i class="fas fa-eye text-primary"></i>
                                </div>
                                <div>
                                    <h4 class="text-lg font-semibold text-gray-700">{{ __('settings.live_preview') }}</h4>
                                    <p class="text-sm text-gray-600">{{ __('settings.see_how_message_will_appear') }}</p>
                                </div>
                            </div>

                            <div
                                class="bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 border border-white/30 p-4 shadow-front-box-shadow-glow">
                                <div class="flex items-start space-x-3">
                                    <div
                                        class="min-w-10 h-10 bg-green-100/80 backdrop-blur-sm rounded-full flex items-center justify-center flex-shrink-0 border border-white/50">
                                        <i class="fab fa-whatsapp text-green-600"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div
                                            class="border border-gray-300 rounded-lg bg-fl-gray-extra-light/70 backdrop-blur-sm rounded-16 py-2 px-4">
                                            <div class="text-sm text-gray-800" id="message-preview">
                                                @if (isset($setting->default_message) && $setting->default_message)
                                                    {!! nl2br(e($setting->default_message)) !!}
                                                @else
                                                    {{ __('settings.your_default_message_will_appear_here') }}
                                                @endif
                                            </div>
                                        </div>
                                        <div class="flex items-center justify-between mt-2">
                                            <p class="text-xs text-gray-500">{{ __('settings.whatsapp_message_preview') }}
                                            </p>
                                            <div class="flex items-center space-x-1 text-xs text-gray-500">
                                                <i class="fas fa-clock"></i>
                                                <span>{{ __('settings.now') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="space-y-3 mt-8">
                            <div class="flex items-start justify-between gap-4 mb-4">
                                <div>
                                    <h4 class="text-base font-semibold text-gray-700">
                                        {{ __('settings.footer_toggle_title') }}</h4>
                                    <p class="text-sm text-gray-600">{{ __('settings.footer_toggle_description') }}</p>
                                </div>
                                <div class="flex items-center">
                                    <input type="hidden" name="enable_footer_message" value="0">
                                    <label class="inline-flex items-center cursor-pointer" data-footer-toggle>
                                        <input type="checkbox" class="sr-only" name="enable_footer_message"
                                            value="1" aria-label="{{ __('settings.footer_toggle_label') }}"
                                            {{ $footerToggleEnabled ? 'checked' : '' }}>
                                        <span
                                            class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200"
                                            data-footer-toggle-track>
                                            <span
                                                class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-200"
                                                data-footer-toggle-thumb></span>
                                        </span>
                                    </label>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500">{{ __('settings.footer_toggle_helper') }}</p>
                        </div>
                        <div class="footer-message-panel transition-all duration-300 ease-in-out overflow-hidden"
                            data-footer-section>
                            <div class="space-y-3 p-1 mt-8">
                                <div class="flex items-start justify-between gap-2 mb-4">
                                    <div>
                                        <h4 class="text-base font-semibold text-gray-700">
                                            {{ __('settings.footer_editor_title') }}</h4>
                                        <p class="text-sm text-gray-600">{{ __('settings.footer_editor_description') }}
                                        </p>
                                    </div>
                                </div>

                                <textarea class="form-control !mt-0 @error('footer_message') is-invalid @enderror" id="footer_message"
                                    name="footer_message" rows="4" placeholder="{{ __('settings.enter_footer_message_placeholder') }}">{{ $footerMessage }}</textarea>
                                <p class="text-xs text-gray-500 flex items-start gap-2">
                                    <i class="fas fa-info-circle text-blue-500 mt-0.5"></i>
                                    {{ __('settings.footer_editor_helper_plain') }}
                                </p>
                            </div>
                        </div>
                    </div>



                    <!-- Action Buttons -->
                    <div class="flex flex-col sm:flex-row justify-end gap-3 border-t border-white/30">
                        <button type="button"
                            class="btn btn-outline-secondary border border-white/50 backdrop-blur-sm rounded-24"
                            onclick="resetForm()">
                            <i class="fas fa-undo mr-2"></i>
                            {{ __('settings.reset') }}
                        </button>
                        <button type="submit" class="btn btn-primary rounded-24">
                            <i class="fas fa-save mr-2"></i>
                            {{ __('settings.save_settings') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Quick Tips Card -->
        <div class="bg-blue-50/80 border border-white/50 backdrop-blur-sm rounded-24 p-6 shadow-front-box-shadow-glow">
            <div class="flex items-start space-x-4">
                <div
                    class="min-w-12 h-12 bg-blue-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center flex-shrink-0 border border-white/50">
                    <i class="fas fa-lightbulb text-blue-600"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 mb-3">{{ __('settings.message_template_tips') }}</h3>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li class="flex items-center">
                            <i class="fas fa-check text-blue-500 mr-2"></i>
                            {{ __('settings.tip_use_placeholders') }}
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check text-blue-500 mr-2"></i>
                            {{ __('settings.tip_keep_messages_concise') }}
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check text-blue-500 mr-2"></i>
                            {{ __('settings.tip_include_call_to_action') }}
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check text-blue-500 mr-2"></i>
                            {{ __('settings.tip_test_message') }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        [data-reminder-section] {
            overflow: hidden;
            transition:
                max-height 0.35s ease,
                opacity 0.25s ease,
                padding 0.25s ease,
                margin 0.25s ease,
                border-width 0.25s ease;
        }

        [data-reminder-section].reminder-section-hidden {
            opacity: 0;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            border-width: 0 !important;
            pointer-events: none;
        }

        [data-reminder-section].reminder-section-no-transition {
            transition: none !important;
        }

        [data-footer-section] {
            overflow: hidden;
            transition:
                max-height 0.35s ease,
                opacity 0.25s ease,
                padding 0.25s ease,
                margin 0.25s ease,
                border-width 0.25s ease;
        }

        [data-footer-section].footer-section-hidden {
            opacity: 0;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            border-width: 0 !important;
            pointer-events: none;
        }

        [data-footer-section].footer-section-no-transition {
            transition: none !important;
        }
    </style>
@endpush

@push('custom_scripts')
    <script>
        const themeColorField = document.getElementById('themeColorInput');
        const footerMessageField = document.getElementById('footer_message');

        if (themeColorField) {
            const themeColorButtons = document.querySelectorAll('[data-theme-color-option]');
            const originalThemeColor = themeColorField.dataset.original || themeColorField.value;

            const normalizeHex = (value) => {
                if (!value) {
                    return null;
                }

                let hex = value.trim();

                if (!hex.startsWith('#')) {
                    hex = `#${hex}`;
                }

                if (/^#[0-9a-fA-F]{3}$/.test(hex)) {
                    hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
                }

                if (/^#[0-9A-Fa-f]{6}$/.test(hex)) {
                    return hex.toUpperCase();
                }

                return null;
            };

            const clamp = (value, min, max) => Math.min(Math.max(value, min), max);

            const adjustBrightness = (hex, amount) => {
                const normalized = normalizeHex(hex);
                if (!normalized) {
                    return null;
                }

                const color = normalized.slice(1);
                const r = clamp(parseInt(color.slice(0, 2), 16) + amount, 0, 255);
                const g = clamp(parseInt(color.slice(2, 4), 16) + amount, 0, 255);
                const b = clamp(parseInt(color.slice(4, 6), 16) + amount, 0, 255);

                return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
                    .toUpperCase();
            };

            const hexToRgbString = (hex) => {
                const normalized = normalizeHex(hex);

                if (!normalized) {
                    return null;
                }

                const color = normalized.slice(1);
                const r = parseInt(color.slice(0, 2), 16);
                const g = parseInt(color.slice(2, 4), 16);
                const b = parseInt(color.slice(4, 6), 16);

                return `${r} ${g} ${b}`;
            };

            const applyThemePreview = (hex) => {
                const normalized = normalizeHex(hex);

                if (!normalized) {
                    return;
                }

                const lighter = adjustBrightness(normalized, 35) || normalized;
                const darker = adjustBrightness(normalized, -45) || normalized;

                const root = document.documentElement;
                root.style.setProperty('--color-primary', normalized);
                root.style.setProperty('--color-primary-400', lighter);
                root.style.setProperty('--color-primary-700', darker);

                const baseRgb = hexToRgbString(normalized);
                const lighterRgb = hexToRgbString(lighter);
                const darkerRgb = hexToRgbString(darker);

                if (baseRgb) {
                    root.style.setProperty('--twc-primary', baseRgb);
                }
                if (lighterRgb) {
                    root.style.setProperty('--twc-primary-400', lighterRgb);
                }
                if (darkerRgb) {
                    root.style.setProperty('--twc-primary-700', darkerRgb);
                }

                const purpleVariants = {
                    '--color-brand-purple-bright': normalized,
                    '--color-brand-purple': adjustBrightness(normalized, 25) || normalized,
                    '--color-brand-purple-light': adjustBrightness(normalized, 45) || normalized,
                    '--color-brand-purple-extra-light': adjustBrightness(normalized, 80) || normalized,
                    '--color-brand-purple-dark': adjustBrightness(normalized, -45) || normalized,
                    '--color-brand-purple-extra-dark': adjustBrightness(normalized, -90) || normalized,
                    '--color-brand-purple-accent': adjustBrightness(normalized, 35) || normalized,
                    '--color-brand-purple-deep-accent': adjustBrightness(normalized, -60) || normalized,
                    '--color-brand-purple-bleak': adjustBrightness(normalized, -25) || normalized,
                    '--color-brand-purple-bleak-alt': adjustBrightness(normalized, -20) || normalized,
                    '--color-brand-purple-muted': adjustBrightness(normalized, -10) || normalized,
                };

                Object.entries(purpleVariants).forEach(([cssVar, value]) => {
                    root.style.setProperty(cssVar, value);
                    const rgbValue = hexToRgbString(value);
                    if (rgbValue) {
                        root.style.setProperty(cssVar.replace('--color-', '--twc-'), rgbValue);
                    }
                });
            };

            const highlightSelectedButton = (hex) => {
                themeColorButtons.forEach((button) => {
                    const buttonColor = normalizeHex(button.dataset.color);
                    const isActive = hex && buttonColor === hex;

                    button.classList.toggle('ring-2', isActive);
                    button.classList.toggle('ring-offset-2', isActive);
                    button.classList.toggle('ring-primary', isActive);
                    button.setAttribute('aria-checked', isActive ? 'true' : 'false');
                });
            };

            const selectThemeColor = (hex, options = {}) => {
                const normalized = normalizeHex(hex) || normalizeHex(themeColorField.value) || normalizeHex(
                    originalThemeColor);

                if (!normalized) {
                    return;
                }

                themeColorField.value = normalized;

                highlightSelectedButton(normalized);
                applyThemePreview(normalized);
            };

            themeColorButtons.forEach((button) => {
                button.addEventListener('click', () => {
                    selectThemeColor(button.dataset.color);
                });
            });

            selectThemeColor(themeColorField.value || originalThemeColor);

            window.themeSettingsManager = {
                selectTheme: (hex, options = {}) => selectThemeColor(hex, options),
                originalColor: normalizeHex(originalThemeColor) || null,
            };
        }

        // Live preview functionality
        document.getElementById('default_message').addEventListener('input', function() {
            const preview = document.getElementById('message-preview');
            const value = this.value;

            if (value.trim()) {
                // Preserve line breaks and spaces by using innerHTML with <br> tags
                const formattedValue = value
                    .replace(/\n/g, '<br>') // Convert line breaks to <br> tags
                    .replace(/  /g, '&nbsp;&nbsp;'); // Convert double spaces to non-breaking spaces

                preview.innerHTML = formattedValue;
                preview.classList.remove('text-gray-500');
                preview.classList.add('text-gray-800');
            } else {
                preview.textContent = @json(__('settings.your_default_message_will_appear_here'));
                preview.classList.remove('text-gray-800');
                preview.classList.add('text-gray-500');
            }
        });

        // Footer toggle interaction
        (() => {
            const footerToggleLabel = document.querySelector('[data-footer-toggle]');
            if (!footerToggleLabel) {
                return;
            }

            const checkbox = footerToggleLabel.querySelector('input[name="enable_footer_message"]');
            const track = footerToggleLabel.querySelector('[data-footer-toggle-track]');
            const thumb = footerToggleLabel.querySelector('[data-footer-toggle-thumb]');
            const footerSection = document.querySelector('[data-footer-section]');
            const footerTextarea = document.getElementById('footer_message');

            if (!checkbox || !track || !thumb) {
                return;
            }

            const setSectionHeight = (height) => {
                if (!footerSection) {
                    return;
                }
                footerSection.style.maxHeight = height;
            };

            const applyState = (checked, {
                immediate = false
            } = {}) => {
                // Update switch visual state
                track.classList.toggle('bg-primary', checked);
                track.classList.toggle('bg-gray-300', !checked);
                thumb.classList.toggle('translate-x-5', checked);

                // Disable/enable textarea
                if (footerTextarea) {
                    footerTextarea.disabled = !checked;
                    footerTextarea.classList.toggle('opacity-60', !checked);
                }

                // Show/hide footer section
                if (footerSection) {
                    const runImmediately = () => {
                        footerSection.classList.toggle('footer-section-hidden', !checked);
                        footerSection.setAttribute('aria-hidden', (!checked).toString());
                        setSectionHeight(checked ? `${footerSection.scrollHeight}px` : '0px');
                        if (checked) {
                            requestAnimationFrame(() => {
                                setSectionHeight(`${footerSection.scrollHeight}px`);
                                setTimeout(() => footerSection.style.removeProperty('max-height'), 350);
                            });
                        }
                    };

                    if (immediate) {
                        footerSection.classList.add('footer-section-no-transition');
                        runImmediately();
                        requestAnimationFrame(() => footerSection.classList.remove('footer-section-no-transition'));
                    } else if (checked) {
                        footerSection.classList.remove('footer-section-hidden');
                        footerSection.setAttribute('aria-hidden', 'false');
                        setSectionHeight('0px');
                        requestAnimationFrame(() => {
                            setSectionHeight(`${footerSection.scrollHeight}px`);
                            setTimeout(() => footerSection.style.removeProperty('max-height'), 400);
                        });
                    } else {
                        const currentHeight = footerSection.scrollHeight;
                        setSectionHeight(`${currentHeight}px`);
                        requestAnimationFrame(() => {
                            footerSection.classList.add('footer-section-hidden');
                            footerSection.setAttribute('aria-hidden', 'true');
                            setSectionHeight('0px');
                        });
                    }
                }
            };

            applyState(checkbox.checked, {
                immediate: true
            });
            checkbox.addEventListener('change', (event) => applyState(event.target.checked));

            window.addEventListener('resize', () => {
                if (!footerSection || footerSection.classList.contains('footer-section-hidden')) {
                    return;
                }
                footerSection.style.maxHeight = `${footerSection.scrollHeight}px`;
            });
        })();

        // Reminder toggle interaction
        (() => {
            const reminderToggleLabel = document.querySelector('[data-reminder-toggle]');
            if (!reminderToggleLabel) {
                return;
            }

            const checkbox = reminderToggleLabel.querySelector('input[name="invitation_reminder_enabled"]');
            const track = reminderToggleLabel.querySelector('[data-reminder-toggle-track]');
            const thumb = reminderToggleLabel.querySelector('[data-reminder-toggle-thumb]');
            const inputs = document.querySelectorAll('[data-reminder-input]');
            const reminderSection = document.querySelector('[data-reminder-section]');

            if (!checkbox) {
                return;
            }

            const setSectionHeight = (height) => {
                if (!reminderSection) {
                    return;
                }
                reminderSection.style.maxHeight = height;
            };

            const applyState = (checked, {
                immediate = false
            } = {}) => {
                inputs.forEach((input) => {
                    input.disabled = !checked;
                    input.classList.toggle('opacity-60', !checked);
                });

                if (reminderSection) {
                    const runImmediately = () => {
                        reminderSection.classList.toggle('reminder-section-hidden', !checked);
                        reminderSection.setAttribute('aria-hidden', (!checked).toString());
                        setSectionHeight(checked ? `${reminderSection.scrollHeight}px` : '0px');
                        if (checked) {
                            requestAnimationFrame(() => {
                                setSectionHeight(`${reminderSection.scrollHeight}px`);
                                setTimeout(() => reminderSection.style.removeProperty('max-height'),
                                    350);
                            });
                        }
                    };

                    if (immediate) {
                        reminderSection.classList.add('reminder-section-no-transition');
                        runImmediately();
                        requestAnimationFrame(() => reminderSection.classList.remove(
                            'reminder-section-no-transition'));
                    } else if (checked) {
                        reminderSection.classList.remove('reminder-section-hidden');
                        reminderSection.setAttribute('aria-hidden', 'false');
                        setSectionHeight('0px');
                        requestAnimationFrame(() => {
                            setSectionHeight(`${reminderSection.scrollHeight}px`);
                            setTimeout(() => reminderSection.style.removeProperty('max-height'), 400);
                        });
                    } else {
                        const currentHeight = reminderSection.scrollHeight;
                        setSectionHeight(`${currentHeight}px`);
                        requestAnimationFrame(() => {
                            reminderSection.classList.add('reminder-section-hidden');
                            reminderSection.setAttribute('aria-hidden', 'true');
                            setSectionHeight('0px');
                        });
                    }
                }

                if (track && thumb) {
                    track.classList.toggle('bg-primary', checked);
                    track.classList.toggle('bg-gray-300', !checked);
                    thumb.classList.toggle('translate-x-5', checked);
                }
            };

            applyState(checkbox.checked, {
                immediate: true
            });
            checkbox.addEventListener('change', (event) => applyState(event.target.checked));

            window.addEventListener('resize', () => {
                if (!reminderSection || reminderSection.classList.contains('reminder-section-hidden')) {
                    return;
                }
                reminderSection.style.maxHeight = `${reminderSection.scrollHeight}px`;
            });
        })();

        // Reset form functionality
        function resetForm() {
            const textarea = document.getElementById('default_message');
            const preview = document.getElementById('message-preview');
            const themeManager = window.themeSettingsManager;

            textarea.value = '';
            preview.textContent = @json(__('settings.your_default_message_will_appear_here'));
            preview.classList.remove('text-gray-800');
            preview.classList.add('text-gray-500');

            if (footerMessageField) {
                footerMessageField.value = '';
            }

            if (themeManager?.selectTheme) {
                const original = themeManager.originalColor || themeColorField?.dataset?.original || themeColorField?.value;
                themeManager.selectTheme(original, {
                    skipCustomUpdate: false
                });
            }
        }

        // Form validation and auto-save indication
        document.getElementById('settings-form').addEventListener('submit', function(e) {
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;

            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>' + @json(__('common.saving'));
            submitBtn.disabled = true;

            // Re-enable after 3 seconds (in case of slow response)
            setTimeout(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }, 3000);
        });
    </script>
@endpush