@props([
    'tool',
    'title' => 'Save & download your report',
    'description' => 'Keep this plan in your free Money-Wise dashboard and download a printable PDF.',
    'disabled' => 'false',
    'excel' => false,
])

<div class="card p-6" x-data="{ email: '', busy: false, saved: false, error: '',
    run(format) {
        @guest if (!this.email.includes('@')) { this.error = 'Enter a valid email'; return } @endguest
        this.busy = true; this.error = '';
        Promise.resolve(savePlan(@guest this.email @endguest))
            .then(() => { this.saved = true; return format === 'xlsx' ? window.downloadToolXlsx('{{ $tool }}', pdfPayload()) : window.downloadToolPdf('{{ $tool }}', pdfPayload()) })
            .catch(() => { this.error = 'We could not prepare your download. Try again.' })
            .finally(() => this.busy = false)
    } }">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
            <h2 class="flex items-center gap-2 font-display font-bold text-navy-900">
                <x-icon name="download" class="h-5 w-5 text-wise-600" /> {{ $title }}
            </h2>
            <p class="mt-1 text-sm text-navy-500">{{ $description }}</p>
            @guest
                <p class="mt-2 text-xs font-semibold text-navy-400">Enter your email to save this plan and start your free dashboard.</p>
            @else
                <p class="mt-2 text-xs font-semibold text-navy-400">We will save this to the email on your account before downloading.</p>
            @endguest
        </div>

        <div class="w-full shrink-0 sm:w-80">
            @guest
                <input
                    type="email"
                    x-model="email"
                    placeholder="you@example.com"
                    class="w-full rounded-full border-navy-200 px-4 py-2 text-sm focus:border-wise-400 focus:ring-wise-400"
                >
            @endguest

            @if ($excel)
                <div class="{{ auth()->check() ? '' : 'mt-2 ' }}grid grid-cols-2 gap-2">
                    <button type="button" @click="run('pdf')" class="btn-primary btn-sm justify-center" :disabled="busy || {{ $disabled }}">
                        <span x-show="!busy">Save as PDF</span><span x-cloak x-show="busy">Preparing...</span>
                    </button>
                    <button type="button" @click="run('xlsx')" class="btn-ghost btn-sm justify-center" :disabled="busy || {{ $disabled }}">
                        <span x-show="!busy">Save as Excel</span><span x-cloak x-show="busy">Preparing...</span>
                    </button>
                </div>
                <p class="mt-2 text-[11px] leading-relaxed text-navy-400">Excel gives you an editable sheet you can adjust by hand.</p>
            @else
                <button type="button" @click="run('pdf')" class="btn-primary btn-sm {{ auth()->check() ? '' : 'mt-2 ' }}w-full justify-center" :disabled="busy || {{ $disabled }}">
                    <span x-show="!busy">Save and download</span><span x-cloak x-show="busy">Preparing...</span>
                </button>
            @endif

            @guest
                <p class="mt-2 text-[11px] leading-relaxed text-navy-400">
                    By submitting, you consent to receive your report and the occasional Money-Wise Minute newsletter. You can unsubscribe at any time.
                </p>
            @endguest

            <p x-show="error" x-text="error" class="mt-2 text-sm font-medium text-rose-600"></p>
            <p x-cloak x-show="saved && !error" class="mt-2 text-sm font-semibold text-emerald-600">
                Saved. Your report is downloading now.
            </p>
        </div>
    </div>

    <div class="mt-5 border-t border-navy-100 pt-4 text-center">
        <p class="text-xs font-semibold text-navy-400">Not sure what to work on next?</p>
        <a href="{{ route('assessments.show', 'financial-health') }}" class="mt-2 inline-flex items-center gap-1.5 text-sm font-bold text-wise-600 hover:text-wise-700">
            Take the free Financial Health Check <x-icon name="arrow-right" class="h-4 w-4" />
        </a>
    </div>
</div>