<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Admin</p>
                <h2 class="text-2xl font-bold text-slate-950 dark:text-white">{{ $gateway->name }}</h2>
            </div>
            <a href="{{ route('admin.payment-gateways.index') }}" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">All Gateways</a>
        </div>
    </x-slot>

    <div class="grid gap-6 xl:grid-cols-[1fr_22rem]">
        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <div class="flex flex-wrap items-center gap-3">
                <span class="rounded-full px-3 py-1 text-xs font-bold {{ $gateway->isActive() ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-200' : 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200' }}">
                    {{ $gateway->isActive() ? 'Enabled' : 'Disabled' }}
                </span>
                <span class="rounded-full bg-blue-100 px-3 py-1 text-xs font-bold text-blue-700 dark:bg-blue-950 dark:text-blue-200">
                    {{ $gateway->is_test_mode ? 'Test mode' : 'Live mode' }}
                </span>
            </div>

            <dl class="mt-8 grid gap-5 md:grid-cols-2">
                <div>
                    <dt class="text-sm font-semibold text-slate-500 dark:text-slate-400">Gateway</dt>
                    <dd class="mt-1 text-lg font-bold text-slate-950 dark:text-white">{{ $gateway->name }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-semibold text-slate-500 dark:text-slate-400">Priority</dt>
                    <dd class="mt-1 text-lg font-bold text-slate-950 dark:text-white">{{ $gateway->priority }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-semibold text-slate-500 dark:text-slate-400">Public Key</dt>
                    <dd class="mt-1 break-all text-sm font-bold text-slate-950 dark:text-white">{{ $gateway->public_key ?: 'Not set' }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-semibold text-slate-500 dark:text-slate-400">Secret Key</dt>
                    <dd class="mt-1 text-sm font-bold text-slate-950 dark:text-white">{{ $maskedCredentials['secret_key'] }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-semibold text-slate-500 dark:text-slate-400">Webhook Secret</dt>
                    <dd class="mt-1 text-sm font-bold text-slate-950 dark:text-white">{{ $maskedCredentials['webhook_secret'] }}</dd>
                </div>
            </dl>
        </section>

        <aside class="space-y-4">
            <a href="{{ route('admin.payment-gateways.edit', $gateway) }}" class="block rounded-lg border border-blue-100 bg-white px-4 py-3 text-center text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900/50 dark:bg-slate-900 dark:text-blue-300 dark:hover:bg-blue-950/60">Edit Gateway</a>

            <form method="POST" action="{{ route('admin.payment-gateways.toggle-status', $gateway) }}">
                @csrf
                @method('PATCH')
                <button class="w-full rounded-lg border border-blue-100 bg-white px-4 py-3 text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900/50 dark:bg-slate-900 dark:text-blue-300 dark:hover:bg-blue-950/60">
                    {{ $gateway->isActive() ? 'Disable Gateway' : 'Enable Gateway' }}
                </button>
            </form>

            <form method="POST" action="{{ route('admin.payment-gateways.test', $gateway) }}">
                @csrf
                <button class="w-full rounded-lg bg-blue-600 px-4 py-3 text-sm font-bold text-white transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">
                    Test Connection
                </button>
            </form>

            <section class="rounded-lg border border-blue-100 bg-blue-50/70 p-5 dark:border-blue-900/50 dark:bg-blue-950/30">
                <p class="text-sm font-bold text-blue-700 dark:text-blue-200">Placeholder</p>
                <p class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">
                    Test Connection does not call a real provider yet. It confirms the button and backend route are ready.
                </p>
            </section>
        </aside>
    </div>
</x-app-layout>
