@php
    $resolvedGate = array_merge(
        ['plan' => 'starter', 'expired' => false],
        is_array($resolvedGate ?? null) ? $resolvedGate : []
    );
    $isGated = $isGated ?? false;
    $logoUrl = $logoUrl ?? asset('img/yourlogo.png');
    $landerUrl = $landerUrl ?? '#';
    $audioSrc = $audioSrc ?? asset('audio/defaultInstructions.mp3');
@endphp

<div>
<div class="w-full text-center bg-white border border-gray-200 rounded-lg shadow sm:px-8 sm:py-2 dark:bg-gray-800 dark:border-gray-700">

    <form wire:submit.prevent="save" class="businessDetails"
          data-bid="{{ $encodedId }}"
          data-bslug="{{ \Illuminate\Support\Str::slug($business->name) }}"
          data-owner_plan="{{ $resolvedGate['plan'] }}"
          data-is_expired_subscription="{{ ($resolvedGate['expired'] ?? false) ? 1 : 0 }}">
        @csrf
        <input type="hidden" name="bid" value="{{ $encodedId }}" />

        <div class="flex justify-center flex-wrap">
            <div class="form w-full mb-2">
                <h3 class="font-semibold text-gray-900 dark:text-white">
                    {{ $business->name }}
                    <small class="text-gray-500 font-normal">
                        {{ $isOwner ? '(you own this business)' : '(you manage this business)' }}
                    </small>
                </h3>
            </div>

            @if ($showGoogleReconnectBanner ?? false)
                <div class="w-full mb-4">
                    <div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-left">
                        <div class="flex items-start gap-3">
                            <div class="mt-0.5 text-amber-700">
                                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
                                </svg>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-extrabold text-amber-900">Action needed: reconnect Google</p>
                                <p class="mt-0.5 text-sm font-semibold text-amber-800">
                                    {{ $googleReconnectMessage ?: 'To enable Google Business features, reconnect your Google account and accept the requested business permissions.' }}
                                </p>
                                <div class="mt-3 flex flex-wrap gap-2">
                                    <button
                                        type="button"
                                        wire:click="openGoogleAuthPopup"
                                        class="inline-flex items-center rounded-lg bg-amber-700 px-4 py-2 text-sm font-extrabold text-white hover:bg-amber-800"
                                    >
                                        Reconnect Google
                                    </button>
                                    <button
                                        type="button"
                                        wire:click="$set('showGoogleReconnectBanner', false)"
                                        class="inline-flex items-center rounded-lg bg-white px-4 py-2 text-sm font-extrabold text-amber-800 border border-amber-200 hover:bg-amber-100"
                                    >
                                        Dismiss
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Section headers --}}
            <div class="form w-full mb-5 flex bg-blue-600 rounded-lg">
                <div class="w-6/12 pr-4"><h3 class="font-medium text-white">Customer Experience Setup</h3></div>
                <div class="w-6/12 pr-4"><h3 class="font-medium text-white">Auto Invite & Reply Setup</h3></div>
            </div>

            {{-- Column 1: Email & Invite Lander Settings --}}
            <div class="setting-box w-full md:w-6/12 pr-0 md:pr-4 mb-4 md:mb-0">
                <div class="w-full relative h-full text-center bg-white border border-gray-200 rounded-lg shadow sm:px-8 sm:py-2 dark:bg-gray-800 dark:border-gray-700">
                    <div class="flex flex-col gap-3">
                        <div class="text-left">
                            <label class="block text-sm font-medium mb-2">Lander Logo</label>
                            
                            {{-- Custom Styled Logo Upload Input --}}
                            <div class="space-y-3">
                                <div>
                                    <div class="relative w-full">
                                        <input type="file" 
                                               id="logoFileInput-{{ $encodedId }}"
                                               wire:model="qr_logo"
                                               wire:target="qr_logo"
                                               wire:loading.attr="disabled"
                                               accept="image/jpeg,image/jpg,image/png,image/gif,image/webp"
                                               class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
                                               onchange="document.getElementById('logoFileName-{{ $encodedId }}').textContent = this.files.length > 0 ? this.files[0].name : 'No file chosen'">
                                        <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded overflow-hidden bg-white dark:bg-gray-700" style="height: 42px; border-radius: 6px; border-color: #E0E0E0;">
                                            <div class="flex-shrink-0 px-4 py-2 text-sm font-medium cursor-pointer flex items-center justify-center h-full" style="background-color: #2C333A; color: #D3D3D3; border-top-left-radius: 6px; border-bottom-left-radius: 6px; min-width: 120px; font-family: sans-serif;">
                                                Choose file
                                            </div>
                                            <div class="flex-1 px-4 py-2 text-sm bg-white dark:bg-gray-700 flex items-center h-full overflow-hidden" id="logoFileName-{{ $encodedId }}" style="color: #808080; border-top-right-radius: 6px; border-bottom-right-radius: 6px; font-family: sans-serif;">
                                                No file chosen
                                            </div>
                                        </div>
                                    </div>
                                    @error('qr_logo') 
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div> 
                                    @enderror
                                </div>
                                
                                {{-- QR Code Section --}}
                                <div class="mt-6 text-center">
                                    <div x-data="qrCodeInit('{{ $encodedId }}', @js($logoUrl), {{ $isGated ? 'true' : 'false' }}, @js(\Illuminate\Support\Str::slug($business->name)))"
                                         class="qr-container">
                                        <span class="text-xs font-bold block mb-2 text-center">SCAN FOR FEEDBACK</span>
                                        <div class="flex justify-center">
                                            <div x-ref="qrbox" wire:ignore></div>
                                        </div>
                                        <button type="button" class="underline mt-2 text-xs block mx-auto" x-ref="qrdownload">Download QR</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                <div class="mt-2 flex flex-wrap items-center justify-center gap-3">
                    <div class="flex items-center gap-3">
                        <button type="button" wire:click="openEmailPreview"
                                class="emailPreviewBtn relative inline-flex items-center justify-center p-0.5 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 hover:text-white">
                            <span class="px-5 py-2.5 bg-white rounded-md group-hover:bg-opacity-0">Email Preview</span>
                        </button>
                        <a href="{{ $landerUrl }}" target="_blank"
                           class="relative inline-flex items-center justify-center p-0.5 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-600 hover:text-white">
                            <span class="px-5 py-2.5 bg-white rounded-md group-hover:bg-opacity-0">Lander Preview</span>
                        </a>
                    </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Column 2: Reply Reviews Settings --}}
            <div class="setting-box w-full md:w-6/12 pr-0">
                <div class="w-full h-full text-center bg-white border border-gray-200 rounded-lg shadow sm:px-8 sm:py-2 dark:bg-gray-800 dark:border-gray-700">
                    <div class="flex flex-col gap-3">
                        <div class="text-left">
                            <label class="block text-sm font-medium mb-2">Business Short Name</label>
                            <div class="relative">
                                <input type="text" wire:model.blur="shortname" 
                                       wire:target="shortname"
                                       wire:loading.attr="disabled"
                                       class="mt-1 w-full rounded-lg border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed" />
                                <div wire:loading wire:target="shortname" class="absolute right-3 top-1/2 -translate-y-1/2">
                                    <svg class="animate-spin h-4 w-4 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <div class="text-left">
                            <label class="block text-sm font-medium mb-2">Signature</label>
                        <div class="relative">
                            <textarea wire:model.blur="signature" 
                                      wire:target="signature"
                                      wire:loading.attr="disabled"
                                      rows="5" 
                                      class="mt-1 w-full rounded-lg border-gray-300 h-32 disabled:opacity-50 disabled:cursor-not-allowed"></textarea>
                            <div wire:loading wire:target="signature" class="absolute right-3 top-3">
                                <svg class="animate-spin h-4 w-4 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                            </div>
                        </div>

                    <div class="flex flex-col items-center gap-2 mt-[2.91rem] w-full">
                        <div class="flex flex-wrap items-center justify-center gap-3">
                            <button type="button"
                                    wire:click="openReplyModal"
                                    wire:loading.attr="disabled"
                                    wire:target="openReplyModal"
                                    class="relative inline-flex items-center justify-center p-0.5 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 hover:text-white disabled:opacity-50 disabled:cursor-not-allowed min-w-[140px]">
                                <span class="px-5 py-2.5 bg-white rounded-md group-hover:bg-opacity-0 transition-all whitespace-nowrap w-full flex items-center justify-center">
                                    <span wire:loading.remove wire:target="openReplyModal">Auto Reply</span>
                                    <span wire:loading wire:target="openReplyModal" class="inline-flex items-center gap-2">
                                        <svg class="animate-spin h-4 w-4 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                        </svg>
                                        Loading...
                                    </span>
                                </span>
                            </button>

                            <button type="button"
                                    wire:click="openInviteReviews"
                                    wire:loading.attr="disabled"
                                    wire:target="openInviteReviews"
                                    class="relative inline-flex items-center justify-center p-0.5 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 hover:text-white disabled:opacity-50 disabled:cursor-not-allowed min-w-[140px]">
                                <span class="px-5 py-2.5 bg-white rounded-md group-hover:bg-opacity-0 transition-all whitespace-nowrap w-full flex items-center justify-center">
                                    <span wire:loading.remove wire:target="openInviteReviews">Auto Invite</span>
                                    <span wire:loading wire:target="openInviteReviews" class="inline-flex items-center gap-2">
                                        <svg class="animate-spin h-4 w-4 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                        </svg>
                                        Loading...
                                    </span>
                                </span>
                            </button>
                        </div>
                        @if($autoReplyLastError || $isGated)
                            <p class="text-center text-xs w-full">
                                @if($autoReplyLastError)
                                    <span class="text-red-600">{{ $autoReplyLastError }}</span>
                                @endif
                                @if($isGated)
                                    <span class="{{ $autoReplyLastError ? 'block mt-0.5' : '' }} text-amber-600">Upgrade your plan to enable auto-reply.</span>
                                @endif
                            </p>
                        @endif
                    </div>
                </div>
            </div>

        </div>

        {{-- Footer: Users Link and Save Button --}}
        <div class="w-full flex items-center justify-end pt-4 pb-3 mt-5 -mx-8 px-8">
            <div class="flex items-center mr-4">
                @if ($isOwner)
                    <button type="button"
                            class="underline text-blue-600 hover:text-blue-800 transition-colors duration-200"
                            wire:click="openInviteManager">
                        Users
                    </button>
                @else
                    <button type="button" 
                            class="underline text-gray-400 cursor-not-allowed relative group"
                            disabled>
                        Users
                        <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs rounded py-1 px-2 whitespace-nowrap shadow">
                            Managers can't add users
                        </span>
                    </button>
                @endif
            </div>
            
            <button type="submit"
                    wire:loading.attr="disabled"
                    wire:target="save"
                    class="businessSaveBtn relative text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 font-medium rounded-lg text-sm px-5 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity">
                <span wire:loading.remove wire:target="save">Save</span>
                <span wire:loading wire:target="save" class="flex items-center gap-2">
                    <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Saving...
                </span>
            </button>
        </div>
    </form>
</div>

    @if ($showEmailPreview)
        <livewire:business.invite-email-editor
            :encoded-id="$encodedId"
            :is-owner="$isOwner"
            :key="'invite-email-editor-'.$encodedId" />
    @endif

    {{-- AI Reply to Google Reviews Modal --}}
    <div x-data="{
        open: @entangle('showReplyModal'),
        review: @entangle('currentReview'),
        reply: @entangle('aiReply'),
        tone: @entangle('replyTone'),
        loading: false,
        generating: false,
        posting: false,
        restoringDraft: false,
        storagePrefix: 'rr_ai_reply_draft_',
        autoGeneratedFor: null,
        reviewChangedHandler: null,
        reviewPostedHandler: null,
        reviewGeneratedHandler: null,
        
        get hasPublishedReply() {
            return !!(this.review?.reply && this.review.reply.trim());
        },

        get isEditingExistingReply() {
            if (!this.hasPublishedReply) return false;
            const current = (this.reply || '').trim();
            const original = (this.review?.reply || '').trim();
            return current !== '' && current !== original;
        },
        
        get rating() {
            return Number(this.review?.rating || 0);
        },
        
        init() {
            // Keyboard shortcuts
            this.$watch('open', (isOpen) => {
                if (isOpen) {
                    document.addEventListener('keydown', this.handleKeydown);
                } else {
                    document.removeEventListener('keydown', this.handleKeydown);
                }
            });

            // Track review changes
            this.$watch('review', () => {
                this.restoringDraft = true;
                this.handleReviewChange();
            });

            // Persist drafts
            this.$watch('reply', (value) => {
                if (this.restoringDraft) {
                    return;
                }
                const isGenerated = this.review?.id && this.autoGeneratedFor === this.review.id;
                this.persistDraft(value, { generated: isGenerated });
            });

            this.reviewChangedHandler = (event) => this.handleReviewChange(event?.detail);
            this.reviewPostedHandler = (event) => this.handleReviewPosted(event?.detail);
            this.reviewGeneratedHandler = (event) => this.handleReviewGenerated(event?.detail);

            window.addEventListener('review-changed', this.reviewChangedHandler);
            window.addEventListener('review-reply-posted', this.reviewPostedHandler);
            window.addEventListener('review-reply-generated', this.reviewGeneratedHandler);

            this.$nextTick(() => {
                this.restoringDraft = true;
                this.handleReviewChange();
            });
        },

        destroy() {
            if (this.reviewChangedHandler) {
                window.removeEventListener('review-changed', this.reviewChangedHandler);
            }
            if (this.reviewPostedHandler) {
                window.removeEventListener('review-reply-posted', this.reviewPostedHandler);
            }
            if (this.reviewGeneratedHandler) {
                window.removeEventListener('review-reply-generated', this.reviewGeneratedHandler);
            }
        },
        
        handleKeydown(e) {
            // Ctrl/Cmd + Enter to post
            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                e.preventDefault();
                if (this.reply && this.reply.trim() && !this.posting) {
                    this.postReply();
                }
                return;
            }
            
            // Arrow keys for navigation (only if not typing in textarea/input)
            if (e.target.tagName !== 'TEXTAREA' && e.target.tagName !== 'INPUT' && !e.target.isContentEditable) {
                if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
                    e.preventDefault();
                    $wire.navigateReview('prev');
                } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
                    e.preventDefault();
                    $wire.navigateReview('next');
                }
            }
        },
        
        closeModal() {
            this.open = false;
        },

        storageKey(reviewId = null) {
            const id = reviewId ?? this.review?.id;
            return id ? `${this.storagePrefix}${id}` : null;
        },

        clearDraft(reviewId) {
            const key = this.storageKey(reviewId);
            if (!key) return;
            try {
                localStorage.removeItem(key);
            } catch (e) {
                // Ignore storage errors
            }
        },

        persistDraft(value, options = {}) {
            const { generated } = options;
            if (!this.review || !this.review.id) return;
            if (this.posting || this.generating) return;
            if (this.restoringDraft) return;

            const key = this.storageKey();
            if (!key) return;

            const hasPublishedReply = this.hasPublishedReply;
            const trimmedValue = value ? value.trim() : '';
            const originalReply = (this.review?.reply || '').trim();

            if (!trimmedValue || (hasPublishedReply && trimmedValue === originalReply)) {
                this.clearDraft(this.review?.id);
                return;
            }

            let existingGenerated = false;
            try {
                const existing = localStorage.getItem(key);
                if (existing) {
                    const parsed = JSON.parse(existing);
                    existingGenerated = !!parsed?.generated;
                }
            } catch (e) {
                existingGenerated = false;
            }

            try {
                localStorage.setItem(key, JSON.stringify({
                    reply: value,
                    generated: generated !== undefined ? generated : existingGenerated,
                    updatedAt: Date.now(),
                }));
            } catch (e) {
                // Ignore storage errors
            }
        },

        handleReviewChange(detail) {
            const reviewId = detail?.reviewId ?? this.review?.id;
            const hasExistingReply = detail?.hasReply ?? !!(this.review?.reply && this.review.reply.trim());

            this.restoringDraft = true;

            if (this.autoGeneratedFor && this.autoGeneratedFor !== reviewId) {
                this.autoGeneratedFor = null;
            }

            if (!reviewId) {
                this.reply = this.review?.reply || '';
                this.restoringDraft = false;
                return;
            }

            const key = this.storageKey(reviewId);
            let restored = false;
            let storedDraft = null;

            if (key) {
                try {
                    const stored = localStorage.getItem(key);
                    if (stored) {
                        storedDraft = JSON.parse(stored);
                        if (storedDraft?.reply) {
                            this.reply = storedDraft.reply;
                            restored = true;
                            if (storedDraft.generated) {
                                this.autoGeneratedFor = reviewId;
                            }
                        }
                    }
                } catch (e) {
                    storedDraft = null;
                }
            }

            if (!restored && hasExistingReply) {
                if (this.review?.reply !== undefined) {
                    this.reply = this.review.reply || '';
                    restored = true;
                }
                this.autoGeneratedFor = reviewId;
            }

            if (!restored) {
                if (this.review?.reply && this.review.reply.trim()) {
                    this.reply = this.review.reply;
                } else if (!this.reply || !this.reply.trim()) {
                    this.reply = '';
                }
            }

            if (!hasExistingReply && !restored && (!this.reply || !this.reply.trim())) {
                this.autoGeneratedFor = null;
            }

            this.$nextTick(() => {
                this.restoringDraft = false;
                this.maybeAutoGenerate(hasExistingReply);
            });
        },

        maybeAutoGenerate(hasExistingReply) {
            if (!this.open) return;
            if (!this.review || !this.review.id) return;
            if (this.loading || this.posting || this.generating) return;

            if (hasExistingReply === undefined) {
                hasExistingReply = !!(this.review?.reply && this.review.reply.trim());
            }

            if (hasExistingReply) return;
            if (this.reply && this.reply.trim()) return;

            const reviewId = this.review.id;
            if (this.autoGeneratedFor === reviewId) return;

            this.autoGeneratedFor = reviewId;
            this.generateReply();
        },

        handleReviewGenerated(detail) {
            if (!detail) return;
            const reviewId = detail.reviewId;
            const reply = detail.reply ?? '';
            if (!reviewId || !reply) return;

            const key = this.storageKey(reviewId);
            if (key) {
                try {
                    localStorage.setItem(key, JSON.stringify({
                        reply: reply,
                        generated: true,
                        updatedAt: Date.now(),
                    }));
                } catch (e) {
                    // Ignore storage errors
                }
            }

            if (this.review?.id === reviewId) {
                this.autoGeneratedFor = reviewId;
                if (!this.reply || !this.reply.trim()) {
                    this.restoringDraft = true;
                    this.reply = reply;
                    this.$nextTick(() => {
                        this.restoringDraft = false;
                    });
                }
            }
        },

        handleReviewPosted(detail) {
            const reviewId = detail?.reviewId;
            if (!reviewId) return;
            this.clearDraft(reviewId);
            if (this.review?.id === reviewId) {
                this.restoringDraft = true;
                this.reply = this.review?.reply || '';
                this.autoGeneratedFor = reviewId;
                this.$nextTick(() => {
                    this.restoringDraft = false;
                });
            }
        },
        
        async generateReply() {
            if (!this.review || !this.review.id) return;
            const reviewId = this.review.id;
            this.autoGeneratedFor = reviewId;
            this.generating = true;
            try {
                await $wire.generateReply(reviewId, this.tone);
            } finally {
                this.generating = false;
            }
        },
        
        async postReply() {
            if (!this.reply || !this.reply.trim() || !this.review || !this.review.id) return;
            
            // Check if review already has a reply
            if (this.review?.reply && this.review.reply.trim()) {
                const confirmed = confirm('This review already has a reply. Posting a new reply will replace the existing one. Do you want to continue?');
                if (!confirmed) {
                    return;
                }
            }
            
            this.posting = true;
            try {
                await $wire.postReply(this.review.id, this.reply);
                this.clearDraft(this.review?.id);
            } finally {
                this.posting = false;
            }
        }
    }"
    x-cloak
    x-show="open"
    @keydown.escape.window="closeModal()"
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
    wire:ignore.self>
        <div class="relative w-full max-w-6xl bg-white rounded-lg shadow-xl max-h-[90vh] overflow-y-auto">
            {{-- Modal header --}}
            <div class="sticky top-0 z-10 border-b border-gray-200 bg-white p-4 space-y-4">
                <div class="relative">
                    <button type="button"
                            @click="closeModal()"
                            class="absolute right-0 top-0 w-9 h-9 grid place-items-center rounded hover:bg-gray-100 transition-colors text-lg"
                            aria-label="Close">
                        ✕
                    </button>
                    <div class="text-center px-12">
                        <h3 class="text-xl font-semibold text-gray-900 leading-tight">AI Reply to Google Reviews <span  <p class="text-base font-medium text-gray-600 mt-1 truncate"> ({{ $business->name ?? 'Business' }})</span></h3>
                        
                    </div>
                </div>

                <div class="flex flex-wrap items-center justify-center gap-x-3 gap-y-2 pt-1 border-t border-gray-100">
                    <button type="button"
                            wire:click="navigateReview('prev')"
                            wire:loading.attr="disabled"
                            class="px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded transition-colors disabled:opacity-50">
                        ← Previous review
                    </button>
                    <button type="button"
                            wire:click="navigateReview('next')"
                            wire:loading.attr="disabled"
                            class="px-3 py-1.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded transition-colors disabled:opacity-50">
                        Next review →
                    </button>
                    <button type="button"
                            wire:click="navigateBranch('prev')"
                            wire:loading.attr="disabled"
                            :disabled="!@entangle('canNavigatePrevBranch')"
                            class="px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                        ← Previous branch
                    </button>
                    <button type="button"
                            wire:click="navigateBranch('next')"
                            wire:loading.attr="disabled"
                            :disabled="!@entangle('canNavigateNextBranch')"
                            class="px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                        Next branch →
                    </button>

                    @include('livewire.business.partials.modal-automation-toolbar')
                </div>
            </div>

            {{-- Review Display Card --}}
            <div class="p-6">
                {{-- No Reviews Message --}}
                <div x-show="!review || !review.id || @entangle('reviews').length === 0" 
                     x-cloak
                     class="mb-6 bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center">
                    <svg class="w-12 h-12 text-yellow-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <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>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">No Google Reviews</h3>
                    <p class="text-gray-600 mb-1">This business doesn't have any Google reviews yet.</p>
                    <p class="text-sm text-gray-500">Reviews will appear here once customers leave feedback on Google.</p>
                </div>
                
                <div x-show="review && review.id" 
                     class="mb-6 bg-white border border-gray-200 rounded-lg p-5 shadow-sm text-left">
                    <div class="flex items-start justify-between mb-3">
                        <div class="flex-1">
                            <h4 class="font-semibold text-gray-900 text-lg" x-text="review?.author_name || 'Unknown Reviewer'"></h4>
                            <div class="flex items-center gap-3 mt-2">
                                <div class="flex space-x-0.5">
                                    <svg class="w-5 h-5 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path x-bind:fill="rating >= 1 ? '#FFBF00' : '#e5e7eb'" d="M10 1.3l2.388 6.722H18.8l-5.232 3.948 1.871 6.928L10 14.744l-5.438 4.154 1.87-6.928-5.233-3.948h6.412L10 1.3z"/>
                                    </svg>
                                    <svg class="w-5 h-5 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path x-bind:fill="rating >= 2 ? '#FFBF00' : '#e5e7eb'" d="M10 1.3l2.388 6.722H18.8l-5.232 3.948 1.871 6.928L10 14.744l-5.438 4.154 1.87-6.928-5.233-3.948h6.412L10 1.3z"/>
                                    </svg>
                                    <svg class="w-5 h-5 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path x-bind:fill="rating >= 3 ? '#FFBF00' : '#e5e7eb'" d="M10 1.3l2.388 6.722H18.8l-5.232 3.948 1.871 6.928L10 14.744l-5.438 4.154 1.87-6.928-5.233-3.948h6.412L10 1.3z"/>
                                    </svg>
                                    <svg class="w-5 h-5 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path x-bind:fill="rating >= 4 ? '#FFBF00' : '#e5e7eb'" d="M10 1.3l2.388 6.722H18.8l-5.232 3.948 1.871 6.928L10 14.744l-5.438 4.154 1.87-6.928-5.233-3.948h6.412L10 1.3z"/>
                                    </svg>
                                    <svg class="w-5 h-5 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path x-bind:fill="rating >= 5 ? '#FFBF00' : '#e5e7eb'" d="M10 1.3l2.388 6.722H18.8l-5.232 3.948 1.871 6.928L10 14.744l-5.438 4.154 1.87-6.928-5.233-3.948h6.412L10 1.3z"/>
                                    </svg>
                                </div>
                                <span class="text-sm text-gray-500" x-text="review?.relative_time_description || ''"></span>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-700 mt-3 leading-relaxed" x-text="review?.text || 'No review text available'"></p>
                    
                    {{-- Existing Reply Section --}}
                    <div x-show="review?.reply && review?.reply.trim()" class="mt-4 pt-4 border-t border-gray-200">
                        <div class="flex items-start gap-3">
                            <div class="flex-shrink-0">
                                <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                </div>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center gap-2 mb-1">
                                    <span class="font-semibold text-gray-900">{{ $business->name ?? 'Business' }}</span>
                                    <span class="text-xs text-gray-500" x-text="review?.reply_time || ''"></span>
                                </div>
                                <p class="text-gray-700 text-sm leading-relaxed" x-text="review?.reply"></p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- AI Reply Section --}}
                <div class="space-y-4">
                    <div class="flex items-center justify-between">
                        <label class="text-sm font-medium text-gray-700">AI Reply</label>
                        <select x-model="tone" 
                                class="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="friendly">Friendly</option>
                            <option value="professional">Professional</option>
                            <option value="warm">Warm</option>
                            <option value="empathetic">Empathetic</option>
                            <option value="informative">Informative</option>
                            <option value="creative">Creative</option>
                        </select>
                    </div>
                    
                    <p x-show="hasPublishedReply" class="text-xs font-semibold text-amber-600">
                        Existing Google reply loaded. Any changes below will replace the published reply when you re-post.
                    </p>

                    <div class="relative">
                        <textarea x-model="reply"
                                  placeholder="Generate or type your reply..."
                                  rows="6"
                                  class="w-full px-4 py-3 border rounded-lg resize-none transition-colors"
                                  :class="hasPublishedReply ? 'bg-amber-50 border-amber-500 outline outline-2 outline-amber-300 focus:ring-amber-500 focus:border-amber-500' : 'bg-white border-gray-300 focus:ring-blue-500 focus:border-blue-500'"></textarea>
                        <button type="button"
                                @click="generateReply()"
                                :disabled="generating || !review || !review.id"
                                class="absolute bottom-3 right-3 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-blue-600">
                            <span x-show="!generating">Create Reply</span>
                            <span x-show="generating" class="flex items-center gap-2">
                                <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                Generating...
                            </span>
                        </button>
                    </div>
                </div>
            </div>

            {{-- Footer with Post Button --}}
            <div class="flex items-center justify-between p-4 border-t">
                <button type="button" 
                        @click="postReply()"
                        :disabled="posting || !reply || !reply.trim()"
                        class="relative text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 font-medium rounded-lg text-sm px-5 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity">
                    <span x-show="!posting" x-text="hasPublishedReply ? 'Re-post Reply' : 'Post Reply'"></span>
                    <span x-show="posting" class="flex items-center gap-2">
                        <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <span x-text="hasPublishedReply ? 'Re-posting...' : 'Posting...'"></span>
                    </span>
                </button>
                <div class="flex flex-col items-end gap-1">
                    <span class="text-xs text-gray-500">Shortcut: Ctrl + Enter to post</span>
                    <span class="text-xs text-gray-400">← → Arrow keys to navigate</span>
                </div>
            </div>
        </div>
    </div>

</div>

    <style wire:ignore>
    [x-cloak] { 
        display: none !important; 
    }

    /* Smooth transitions for modals */
    .fixed {
        transition: opacity 0.3s ease;
    }

    /* Better button hover effects */
    button {
        transition: all 0.2s ease-in-out;
    }

    /* Improved modal backdrop */
    .bg-black\/40 {
        backdrop-filter: blur(4px);
    }

    /* Center file input text vertically to match other inputs */
    input[type="file"] {
        padding: 0.5rem 0.75rem;
        line-height: 1.5;
        min-height: 2.5rem;
    }

    input[type="file"]::file-selector-button {
        vertical-align: middle;
        line-height: 1.5;
        margin-right: 1rem;
    }
    </style>
</div>