@php
    $aiRepliesLimitVal = (int) ($aiRepliesLimit ?? 0);
    $aiRepliesUsedVal = (int) ($aiRepliesUsedTotal ?? 0);
    $isGuest = (bool) ($isGuest ?? false);
@endphp

<div class="dash-v2-status mb-4 flex flex-wrap items-start justify-between gap-3">
    <div class="flex gap-2.5">
        <span class="dash-v2-pulse" style="background:#F5B301"></span>
        <div>
            <template x-if="!replyLimitReached">
                <div>
                    <div class="font-sora text-xl font-extrabold tracking-[-0.02em]" x-text="unrepliedCount > 0 ? (unrepliedCount + ' reviews waiting for a reply.') : (autoReply ? 'Auto-reply is on.' : 'Reply to reviews yourself.')"></div>
                    <div class="mt-0.5 text-[13px] leading-relaxed text-muted" x-text="unrepliedCount > 0 ? 'Generate each one below — or switch on auto-reply and never see this screen again.' : (autoReply ? 'New Google reviews get an AI reply automatically.' : 'Generate a reply in one click, edit if you want, post to Google.')"></div>
                </div>
            </template>
            <template x-if="replyLimitReached">
                <div>
                    <div class="font-sora text-xl font-extrabold tracking-[-0.02em]"><span x-text="unrepliedCount">{{ (int) $unrepliedReviewsCount }}</span> reviews waiting — 0 replies left.</div>
                    <div class="mt-0.5 text-[13px] leading-relaxed text-muted">Your {{ $aiRepliesLimitVal }} free replies are used for {{ $monthLabel ?? now()->format('F') }}. New reviews will wait unanswered until {{ $resetLabel ?? now()->addMonthNoOverflow()->startOfMonth()->format('F') }}.</div>
                </div>
            </template>
        </div>
    </div>
    <div class="flex items-center gap-2.5 pt-1">
        <span
            x-show="aiRepliesLimit > 0"
            class="whitespace-nowrap rounded-full border px-[11px] py-[5px] text-[11px] font-bold"
            :class="replyLimitReached ? 'border-[#F2D793] bg-[#FFF8EB] text-[#B45309]' : 'border-line bg-[#FAFBFD] text-muted'"
            x-text="aiRepliesUsed + ' / ' + aiRepliesLimit + ' replies used'"
        >{{ $aiRepliesUsedVal }} / {{ $aiRepliesLimitVal }} replies used</span>
        <span class="text-[12.5px] font-semibold text-ink-2">Auto-reply</span>
        <button type="button" id="arSwitch" class="dash-v2-switch" :class="autoReply && 'on'" role="switch" :aria-checked="autoReply" @click="toggleAutoReply()"></button>
    </div>
</div>

<div x-show="replyLimitReached" class="mb-3.5 flex items-center gap-3 rounded-dash border-[1.5px] border-[#F2D793] bg-[#FFF8EB] px-4 py-[13px]">
    <div class="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[10px] bg-[#FDEBC8] text-base">⚠️</div>
    <div class="min-w-0 flex-1">
        <div class="text-[13px] font-bold text-[#92400E]">{{ $aiRepliesUsedVal }} / {{ $aiRepliesLimitVal }} free replies used</div>
        <div class="mt-0.5 text-[11.5px] leading-relaxed text-[#B45309]">New reviews will wait unanswered · resets {{ $resetLabel }}</div>
    </div>
    <button type="button" x-show="!guestExistingPaidUser" @click="goTab('plans')" class="shrink-0 rounded-[9px] bg-gradient-to-br from-[#2E64F0] to-brand-blue-deep px-[15px] py-2.5 text-xs font-bold text-white shadow-[0_4px_12px_rgba(36,86,230,.3)] transition hover:brightness-105">Upgrade</button>
</div>

<div class="mb-3.5 overflow-hidden rounded-dash border border-line bg-white shadow-[0_1px_2px_rgba(11,21,38,.04)]">
    <template x-if="!reviews.length">
        <div class="p-8 text-center">
            <div class="mb-2 font-sora text-[16px] font-extrabold" x-text="needsGbp ? 'Connect Google to load reviews' : 'No reviews yet'"></div>
            <div class="mb-4 text-[13px] text-muted" x-text="needsGbp ? 'Link your Google Business Profile to generate and post replies.' : 'New Google reviews will appear here.'"></div>
            <button type="button" x-show="needsGbp" @click="openModal('gbp')" class="rounded-[11px] bg-gradient-to-br from-[#2E64F0] to-brand-blue-deep px-5 py-3 text-[13px] font-bold text-white">Connect Google Business Profile</button>
        </div>
    </template>
    <div x-show="reviews.length">
    <div class="p-[18px]">
        <div class="mb-3 flex flex-wrap items-center justify-between gap-2.5">
            <div class="flex items-center gap-[11px]">
                <div
                    class="flex h-[38px] w-[38px] shrink-0 items-center justify-center rounded-xl font-sora text-[13px] font-bold text-white"
                    :style="'background:' + (currentReview?.grad || '#5B8DEF')"
                    x-text="currentReview?.init || '—'"
                ></div>
                <div>
                    <div class="flex flex-wrap items-center gap-2">
                        <div class="text-[14.5px] font-bold" x-text="currentReview?.name || 'No reviews'"></div>
                        <span
                            x-show="hasPublishedReply"
                            class="rounded-[5px] border border-[#F2D793] bg-[#FFF8EB] px-1.5 py-0.5 text-[9.5px] font-bold tracking-wide text-[#B45309]"
                        >Already replied</span>
                        <span
                            x-show="replyStatus === 'draft' && !genWorking"
                            class="rounded-[5px] border border-[#B9D4F5] bg-[#EBF4FF] px-1.5 py-0.5 text-[9.5px] font-bold tracking-wide text-[#1D4ED8]"
                        >Draft saved</span>
                    </div>
                    <div class="mt-0.5 flex items-center gap-2">
                        <span class="tracking-[1.5px] text-brand-gold text-[13px]" x-text="currentReview ? '★'.repeat(currentReview.stars) + '☆'.repeat(5 - currentReview.stars) : ''"></span>
                        <span class="text-[11.5px] text-faint" x-text="currentReview?.date || ''"></span>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-1.5">
                <button type="button" @click="prevReview()" class="flex h-8 w-8 items-center justify-center rounded-[9px] border border-line bg-white text-[14px] text-muted transition hover:border-[#B9C6D8] hover:text-ink" aria-label="Previous review">←</button>
                <span class="whitespace-nowrap px-1 text-[11.5px] text-faint"><span x-text="reviewIndex + 1">1</span> of <span x-text="reviews.length">3</span></span>
                <button type="button" @click="nextReview()" class="flex h-8 w-8 items-center justify-center rounded-[9px] border border-line bg-white text-[14px] text-muted transition hover:border-[#B9C6D8] hover:text-ink" aria-label="Next review">→</button>
            </div>
        </div>
        <div
            class="rounded-[11px] border border-line-soft bg-[#FAFBFD] px-[15px] py-[13px] text-[13.5px] leading-[1.65] text-ink-2"
            :class="currentReview?.empty && 'italic text-faint'"
            x-text="currentReview?.empty ? 'No review text — just the stars.' : (currentReview?.text || '')"
        ></div>
    </div>

    <div class="border-t border-line-soft px-[18px] pb-[18px] pt-4">
        <div class="relative mb-[11px] flex items-center justify-between">
            <div class="flex items-center gap-2 text-[13px] font-bold text-ink">
                <span class="rounded-[5px] bg-gradient-to-br from-[#9B7BF0] to-[#7B5BE0] px-1.5 py-0.5 text-[9.5px] font-bold tracking-[0.05em] text-white">AI</span>
                Your reply
            </div>
            <div class="relative">
                <select id="guestToneSelect" x-model="tone" class="dash-v2-tone-select cursor-pointer rounded-lg border-[1.5px] border-line bg-white px-[9px] py-1.5 text-xs font-bold text-ink-2 focus:outline-none focus:ring-2 focus:ring-brand-blue" aria-label="Reply tone">
                    @foreach(config('reply_tones.labels', []) as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
                <div class="tone-menu" id="toneMenu" aria-hidden="true" style="display:none">
                    @foreach(config('reply_tones.labels', []) as $value => $label)
                        <div class="tm-opt{{ $loop->first ? ' sel' : '' }}" data-tone="{{ $value }}">{{ $label }}</div>
                    @endforeach
                </div>
            </div>
        </div>
        <p
            x-show="hasPublishedReply"
            class="mb-2 text-[12px] font-semibold leading-relaxed text-[#B45309]"
        >Existing Google reply loaded. Edit below and re-post to replace it.</p>
        <textarea
            id="guestReplyBox"
            x-model="replyText"
            @input="scheduleDraftSave()"
            class="dash-v2-reply-box min-h-[110px] w-full resize-y rounded-[11px] border-[1.5px] px-[15px] py-[13px] text-[13.5px] leading-[1.65] text-ink focus:outline-none"
            :class="[
                hasPublishedReply
                    ? 'border-[#F2D793] bg-[#FFF8EB] focus:border-[#E8B84A] focus:ring-2 focus:ring-[#FDEBC8]'
                    : (replyStatus === 'draft'
                        ? 'border-[#B9D4F5] bg-[#F8FBFF] focus:border-[#5B8DEF] focus:ring-2 focus:ring-[#EBF4FF]'
                        : 'border-line focus:border-brand-blue')
            ]"
            placeholder="Click Generate and the reply writes itself…"
        ></textarea>
        <div class="mt-[11px] flex gap-[9px]">
            <button
                type="button"
                id="guestGenBtn"
                @click="generateReply()"
                :disabled="genWorking || replyLimitReached"
                class="dash-v2-reply-gen rounded-[11px] border-[1.5px] border-line bg-white px-5 py-3 text-[13px] font-bold text-ink-2 transition hover:border-[#B9C6D8] hover:bg-[#FAFBFD] disabled:pointer-events-none disabled:text-faint"
                :class="genWorking && 'working'"
                x-text="genWorking ? '✦ Writing…' : (replyText ? '✦ Regenerate' : '✦ Generate')"
            >✦ Generate</button>
            <button
                type="button"
                id="guestPostBtn"
                @click="postReply()"
                :disabled="postBtnPhase !== 'idle' || genWorking || !replyText.trim()"
                :class="postBtnAnimClass"
                class="flex-1 rounded-[11px] bg-gradient-to-br from-[#2E64F0] to-brand-blue-deep px-5 py-3 text-[13px] font-bold text-white shadow-[0_5px_15px_rgba(36,86,230,.3)] transition hover:brightness-105 disabled:pointer-events-none disabled:opacity-60"
                x-text="postBtnLabel"
            >Post reply to Google</button>
        </div>
    </div>

    <div class="flex flex-wrap items-center gap-[18px] border-t border-line-soft bg-[#FAFBFD] px-[18px] py-[13px]">
        <span class="flex items-center gap-2 text-xs font-semibold text-muted">
            Reply after
            <select
                x-model.number="delayHours"
                @change="guestMode ? null : saveDelayHours()"
                class="dash-v2-tone-select cursor-pointer rounded-lg border-[1.5px] border-line bg-white px-2 py-[5px] text-xs font-bold text-ink-2 focus:outline-none focus:ring-2 focus:ring-brand-blue"
                aria-label="Reply delay"
            >
                <option value="0">Immediately</option>
                <option value="1">1 hour</option>
                <option value="24">Same day</option>
            </select>
        </span>
        <span class="flex items-center gap-2 text-xs font-semibold text-muted">
            Email me a copy
            <button type="button" class="dash-v2-switch dash-v2-switch-sm" role="switch" aria-checked="false" aria-label="Email a copy" @click="guestMode ? requireLogin() : null"></button>
        </span>
    </div>

    <div class="border-t border-line-soft px-[18px] py-3.5">
        <div class="mb-[7px] text-[10.5px] font-bold uppercase tracking-[0.07em] text-faint">Signature — added to every reply</div>
        @if($isGuest)
            <input
                type="text"
                x-model="signature"
                @change="saveSignature()"
                class="dash-v2-sig-input w-full rounded-[9px] border-[1.5px] border-line px-3 py-[9px] text-[12.5px] text-ink-2 focus:border-brand-blue focus:outline-none"
                placeholder="Your name"
            />
        @else
            <textarea
                x-model="signature"
                @change="saveSignature()"
                rows="3"
                class="w-full resize-y rounded-[9px] border-[1.5px] border-line px-3 py-2.5 text-[12.5px] leading-relaxed text-ink-2 focus:border-brand-blue focus:outline-none"
                placeholder="Your name"
            ></textarea>
        @endif
    </div>
    </div>
</div>