@extends('layouts.admin', [
    'title' => 'WhatsApp Settings',
    'pageTitle' => 'WhatsApp Settings',
    'active' => 'reminders',
])

@section('content')
    <div class="space-y-5">
        <div class="flex min-w-0 flex-col gap-3 2xl:flex-row 2xl:items-center 2xl:justify-between">
            <p class="text-sm font-medium text-booklio-muted">Configure WhatsApp Business API credentials for booking confirmations, reminders, and invoice notifications.</p>
            @include('admin.reminders.partials.nav', ['activeTab' => 'whatsapp'])
        </div>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
            <div class="space-y-5">
                <x-ui.card title="WhatsApp API Settings">
                    <div class="mb-5 flex items-center justify-between gap-4 rounded-lg border border-booklio-border bg-slate-50 p-4">
                        <div>
                            <p class="text-sm font-extrabold text-booklio-dark">WhatsApp enabled</p>
                            <p class="mt-1 text-xs font-medium text-booklio-muted">Allow Booklio to send automated WhatsApp reminders.</p>
                        </div>
                        <label class="relative inline-flex cursor-pointer items-center">
                            <input type="checkbox" checked class="peer sr-only">
                            <span class="h-6 w-11 rounded-full bg-slate-300 transition peer-checked:bg-booklio-primary"></span>
                            <span class="absolute left-1 h-4 w-4 rounded-full bg-white transition peer-checked:translate-x-5"></span>
                        </label>
                    </div>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-form.input name="phone_number_id" label="Phone Number ID" value="109876543210987" />
                        <x-form.input name="business_account_id" label="Business Account ID" value="987654321098765" />
                        <x-form.input name="access_token" label="Access Token" type="password" value="booklio-whatsapp-token" />
                        <x-form.input name="webhook_verify_token" label="Webhook Verify Token" value="booklio_verify_2026" />
                        <x-form.input name="test_phone_number" label="Test phone number" value="+1 555 123 4567" class="sm:col-span-2" />
                    </div>

                    <div class="mt-5 flex flex-col gap-3 sm:flex-row sm:justify-end">
                        <x-ui.button variant="secondary" data-booklio-placeholder="WhatsApp reminder settings are represented here; save persistence lives in Settings > WhatsApp.">Save Settings</x-ui.button>
                        <x-ui.button data-booklio-placeholder="WhatsApp test message delivery will be connected to the reminder gateway service.">
                            <x-ui.icon name="send" class="h-4 w-4" />
                            Send Test Message
                        </x-ui.button>
                    </div>
                </x-ui.card>
            </div>

            <div class="space-y-5">
                <x-ui.card title="Connection Status">
                    <div class="flex items-center gap-3">
                        <span class="flex h-11 w-11 items-center justify-center rounded-full bg-emerald-50 text-emerald-600">
                            <x-ui.icon name="check" class="h-5 w-5" />
                        </span>
                        <div>
                            <p class="text-sm font-extrabold">Connected</p>
                            <p class="text-xs font-medium text-booklio-muted">Last checked 5 minutes ago</p>
                        </div>
                    </div>
                    <div class="mt-5 space-y-3 text-sm">
                        <div class="flex justify-between"><span class="font-bold text-booklio-muted">Template sync</span><span class="font-extrabold text-emerald-600">Healthy</span></div>
                        <div class="flex justify-between"><span class="font-bold text-booklio-muted">Webhook</span><span class="font-extrabold text-emerald-600">Verified</span></div>
                        <div class="flex justify-between"><span class="font-bold text-booklio-muted">Daily limit</span><span class="font-extrabold">8,000</span></div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Setup Notes">
                    <div class="space-y-4 text-sm leading-6 text-slate-600">
                        <p>Use the Meta Business dashboard to copy the phone number ID, business account ID, permanent access token, and webhook verification token.</p>
                        <p>Test messages are sent to the configured test phone number only. Production delivery will be wired during backend integration.</p>
                    </div>
                </x-ui.card>
            </div>
        </section>
    </div>
@endsection