@props([
    'pix',
    'title'    => __('Pague com Pix'),
    'subtitle' => __('Conclua o pagamento para ativar o acesso.'),
    'note'     => null,
    'action'   => null,
    'actionLabel' => __('Voltar'),
])

@php $pix = (array) $pix; @endphp

<div class="rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm p-8">

    <div class="text-center mb-7">
        <div class="w-12 h-12 rounded-xl bg-brand-green/10 border border-brand-green/20 flex items-center justify-center mx-auto mb-4">
            <i class="fa-brands fa-pix text-brand-green text-xl"></i>
        </div>
        <h1 class="font-heading font-bold text-white text-2xl mb-1">{{ $title }}</h1>
        <p class="text-gray-400 text-sm">{{ $subtitle }}</p>
    </div>

    <div class="flex items-center justify-between gap-3 px-4 py-3 rounded-xl bg-black/30 border border-white/10 mb-5">
        <div class="min-w-0">
            <p class="text-[11px] uppercase tracking-wider text-gray-500 m-0">{{ __('Plano') }}</p>
            <p class="text-white font-semibold text-sm truncate m-0">{{ $pix['plan_name'] ?? __('Assinatura Lined') }}</p>
        </div>
        <span class="font-heading font-extrabold text-brand-green text-xl shrink-0">
            R$ {{ number_format((float) ($pix['amount'] ?? 0), 2, ',', '.') }}
        </span>
    </div>

    @if (!empty($pix['qr_code_base64']))
        <div class="bg-white rounded-2xl p-4 mb-5 flex items-center justify-center">
            <img src="data:image/png;base64,{{ $pix['qr_code_base64'] }}"
                 alt="{{ __('QR Code Pix') }}"
                 class="w-full max-w-[240px] h-auto block">
        </div>
    @endif

    @if (!empty($pix['qr_code']))
        <div class="flex flex-col gap-1.5 mb-5">
            <label class="text-sm font-medium text-gray-300">{{ __('Pix copia e cola') }}</label>
            <div class="relative">
                <textarea id="pixCode" readonly rows="3"
                    class="w-full px-4 py-3 pr-12 rounded-xl bg-black/30 border border-white/10 text-gray-400 text-xs outline-none resize-none font-mono break-all">{{ $pix['qr_code'] }}</textarea>
                <button type="button" onclick="copyPixCode()"
                    class="absolute right-2.5 top-2.5 p-2 rounded-lg bg-white/5 border border-white/10 text-gray-400 hover:text-brand-green hover:border-brand-green/30 transition-all cursor-pointer">
                    <i id="pixCopyIcon" class="fa-regular fa-copy text-xs"></i>
                </button>
            </div>
        </div>
    @endif

    @if (!empty($pix['expires_at']))
        <div class="flex items-center justify-center gap-2 mb-5 text-xs text-gray-500">
            <i class="fa-regular fa-clock text-[11px]"></i>
            <span>{{ __('Expira em') }}</span>
            <span id="pixCountdown" class="text-amber-400 font-semibold tabular-nums">--:--:--</span>
        </div>
    @endif

    @if ($note)
        <div class="flex items-start gap-2.5 px-4 py-3 rounded-xl bg-brand-green/5 border border-brand-green/15 mb-5">
            <i class="fa-solid fa-circle-info text-brand-green text-xs mt-0.5 shrink-0"></i>
            <p class="text-xs text-gray-400 leading-relaxed m-0">{!! $note !!}</p>
        </div>
    @endif

    @if ($action)
        <a href="{{ $action }}"
            class="w-full block text-center py-3 rounded-xl bg-brand-green text-white font-semibold text-sm hover:bg-brand-green-dark transition-all no-underline">
            {{ $actionLabel }}
        </a>
    @endif

</div>

<script>
    function copyPixCode() {
        const field = document.getElementById('pixCode');
        const icon  = document.getElementById('pixCopyIcon');

        navigator.clipboard.writeText(field.value).then(() => {
            icon.className = 'fa-solid fa-check text-xs text-brand-green';
            showToast("{{ __('Código Pix copiado!') }}", 'success', 3000);
            setTimeout(() => { icon.className = 'fa-regular fa-copy text-xs'; }, 2500);
        }).catch(() => {
            field.select();
            document.execCommand('copy');
            showToast("{{ __('Código Pix copiado!') }}", 'success', 3000);
        });
    }

    @if (!empty($pix['expires_at']))
    const PIX_EXPIRES_AT = new Date(@json($pix['expires_at'])).getTime();

    function tickPixCountdown() {
        const el = document.getElementById('pixCountdown');
        if (!el) return;

        const diff = PIX_EXPIRES_AT - Date.now();

        if (diff <= 0) {
            el.textContent = "{{ __('expirado') }}";
            el.className = 'text-red-400 font-semibold';
            return;
        }

        const pad = (n) => String(n).padStart(2, '0');
        const h = Math.floor(diff / 3600000);
        const m = Math.floor((diff % 3600000) / 60000);
        const s = Math.floor((diff % 60000) / 1000);

        el.textContent = pad(h) + ':' + pad(m) + ':' + pad(s);
        setTimeout(tickPixCountdown, 1000);
    }

    document.addEventListener('DOMContentLoaded', tickPixCountdown);
    @endif
</script>