<div class="max-w-4xl mx-auto space-y-8">

    {{-- HEADER --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-semibold text-gray-800">{{ t('invoices.title') }}</h1>
            <p class="text-sm text-gray-400 mt-0.5">{{ t('invoices.subtitle') }}</p>
        </div>
        @if($subscription)
            <a href="{{ route('subscription.index') }}"
               class="text-xs font-medium text-indigo-600 hover:bg-indigo-50 px-3 py-2 rounded-lg transition-colors">
                {{ t('invoices.manage_plan') }}
            </a>
        @else
            <a href="{{ route('plans.index') }}"
               class="text-xs font-medium bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-2 rounded-lg transition-colors">
                {{ t('invoices.choose_plan') }}
            </a>
        @endif
    </div>


    {{-- ABRECHNUNGSÜBERSICHT --}}
    @if($subscription)
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

            {{-- Aktuelles Abo --}}
            <div class="sm:col-span-2 bg-white border border-gray-100 rounded-xl shadow-sm p-5">
                <p class="text-[11px] font-medium text-gray-400 uppercase tracking-wide mb-2">{{ t('invoices.current_sub') }}</p>
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <div class="flex items-center gap-2 mb-1">
                            <p class="text-base font-semibold text-gray-800">{{ $subscription->plan_name }}</p>
                            <span class="text-[10px] font-bold {{ $subscription->status->badgeBg() }} {{ $subscription->status->badgeText() }} px-2 py-0.5 rounded-full">
                                {{ $subscription->status->label() }}
                            </span>
                        </div>
                        <p class="text-sm text-gray-500">
                            {{ $subscription->interval === 'yearly' ? t('subscription.yearly') : t('subscription.monthly') }}
                            @if($subscription->starts_at)
                                · {{ t('common.since') }} {{ $subscription->starts_at->format('d.m.Y') }}
                            @endif
                        </p>
                    </div>
                    <div class="text-right shrink-0">
                        <p class="text-xl font-bold text-gray-800 tabular-nums">
                            {{ number_format($subscription->price / 100, 2, ',', '.') }} €
                        </p>
                        <p class="text-[11px] text-gray-400">
                            / {{ $subscription->interval === 'yearly' ? t('common.year') : t('common.month') }}
                        </p>
                    </div>
                </div>
            </div>

            {{-- Nächste Abrechnung --}}
            <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-5 flex flex-col gap-1">
                <p class="text-[11px] font-medium text-gray-400 uppercase tracking-wide">{{ t('invoices.next_billing') }}</p>

                @if($subscription->ends_at && $daysLeft > 0)
                    <div class="mt-auto">
                        <p class="text-3xl font-bold text-gray-800 tabular-nums leading-none">
                            {{ $daysLeft }}
                            <span class="text-sm font-normal text-gray-400">{{ t('invoices.days') }}</span>
                        </p>
                        <p class="text-xs text-gray-400 mt-1.5">
                            am {{ $subscription->ends_at->format('d.m.Y') }}
                        </p>
                    </div>
                @elseif($subscription->ends_at && $daysLeft <= 0)
                    <div class="mt-auto">
                        <p class="text-sm font-semibold text-red-600">{{ t('invoices.due_now') }}</p>
                        <p class="text-xs text-gray-400 mt-1">
                            {{ t('common.since') }} {{ $subscription->ends_at->format('d.m.Y') }}
                        </p>
                    </div>
                @elseif($subscription->status === \App\Enums\SubscriptionStatus::Canceled && $subscription->ends_at)
                    <div class="mt-auto">
                        <p class="text-sm font-semibold text-amber-600">{{ t('invoices.ends_at') }}</p>
                        <p class="text-xs text-gray-400 mt-1">
                            {{ $subscription->ends_at->format('d.m.Y') }}
                        </p>
                    </div>
                @else
                    <p class="text-sm text-gray-400 mt-auto">—</p>
                @endif
            </div>

        </div>
    @else
        <div class="bg-white border border-gray-100 rounded-xl shadow-sm px-6 py-10 flex flex-col items-center gap-3 text-center">
            <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
                <x-heroicon-o-credit-card class="w-6 h-6 text-gray-400"/>
            </div>
            <div>
                <p class="text-sm font-semibold text-gray-700">{{ t('invoices.no_sub') }}</p>
                <p class="text-xs text-gray-400 mt-0.5">{{ t('invoices.no_sub_hint') }}</p>
            </div>
            <a href="{{ route('plans.index') }}"
               class="text-xs font-medium bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors mt-1">
                {{ t('invoices.view_plans') }}
            </a>
        </div>
    @endif


    {{-- OFFENE / FEHLGESCHLAGENE ZAHLUNGEN --}}
    @if($openPayments->isNotEmpty())
        <div class="space-y-2">
            @foreach($openPayments as $openPayment)
                <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 flex items-center justify-between gap-4"
                     wire:key="open-{{ $openPayment->id }}">

                    <div class="flex items-center gap-3 min-w-0">
                        <div class="w-9 h-9 rounded-full bg-amber-100 flex items-center justify-center shrink-0">
                            <x-heroicon-o-exclamation-triangle class="w-5 h-5 text-amber-600"/>
                        </div>
                        <div class="min-w-0">
                            <p class="text-sm font-semibold text-amber-800">
                                {{ $openPayment->status === \App\Enums\PaymentStatus::Failed
                                    ? t('invoices.payment_failed')
                                    : t('invoices.payment_pending') }}
                            </p>
                            <p class="text-xs text-amber-600 truncate">
                                {{ number_format($openPayment->amount / 100, 2, ',', '.') }} €
                                @if($openPayment->subscription?->plan_name)
                                    · {{ $openPayment->subscription->plan_name }}
                                @endif
                                · {{ t('invoices.due_since') }} {{ $openPayment->created_at->format('d.m.Y') }}
                            </p>
                        </div>
                    </div>

                    <button class="shrink-0 text-xs font-semibold bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-lg transition-colors whitespace-nowrap">
                        {{ t('invoices.pay_now') }}
                    </button>
                </div>
            @endforeach
        </div>
    @endif


    {{-- RECHNUNGSLISTE --}}
    <div>
        <p class="text-sm font-semibold text-gray-700 mb-3">{{ t('invoices.all') }}</p>

        @if($payments->isEmpty())
            <div class="bg-white border border-gray-100 rounded-xl shadow-sm py-14 flex flex-col items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
                    <x-heroicon-o-document-text class="w-5 h-5 text-gray-400"/>
                </div>
                <p class="text-sm text-gray-500">{{ t('invoices.no_invoices') }}</p>
            </div>
        @else

            <div class="bg-white border border-gray-100 rounded-xl shadow-sm divide-y divide-gray-50">
                @foreach($payments as $payment)
                    <div class="flex items-center gap-4 px-5 py-3.5 hover:bg-gray-50/60 transition-colors"
                         wire:key="inv-{{ $payment->id }}">

                        {{-- STATUS ICON --}}
                        <div class="w-8 h-8 rounded-lg {{ $payment->status->badgeBg() }} flex items-center justify-center shrink-0">
                            @if($payment->status->icon() === 'check')
                                <x-heroicon-o-check class="w-4 h-4 {{ $payment->status->badgeText() }}"/>
                            @elseif($payment->status->icon() === 'x-mark')
                                <x-heroicon-o-x-mark class="w-4 h-4 {{ $payment->status->badgeText() }}"/>
                            @elseif($payment->status->icon() === 'arrow-uturn-left')
                                <x-heroicon-o-arrow-uturn-left class="w-4 h-4 {{ $payment->status->badgeText() }}"/>
                            @else
                                <x-heroicon-o-clock class="w-4 h-4 {{ $payment->status->badgeText() }}"/>
                            @endif
                        </div>

                        {{-- SHORTCUTS: MONAT + AKTION + INTERVAL --}}
                        <div class="flex items-center gap-1.5 flex-1 min-w-0">
                            <span class="text-[11px] font-medium bg-gray-100 text-gray-600 px-2 py-0.5 rounded-md shrink-0 tabular-nums">
                                {{ ($payment->paid_at ?? $payment->created_at)->locale('de')->isoFormat('MMM YYYY') }}
                            </span>
                            @php
                                $reason = $payment->billing_reason ?? '';
                                $badgeBg = str_starts_with($reason, 'upgrade:')   ? 'bg-green-50 text-green-700'
                                         : (str_starts_with($reason, 'downgrade:') ? 'bg-amber-50 text-amber-700'
                                         : (str_starts_with($reason, 'refund:')    ? 'bg-blue-50 text-blue-600'
                                         : ($reason === 'subscription_create'      ? 'bg-indigo-50 text-indigo-600'
                                         : 'bg-gray-100 text-gray-600')));
                            @endphp
                            <span class="text-[11px] font-medium {{ $badgeBg }} px-2 py-0.5 rounded-md truncate max-w-[160px]">
                                {{ $payment->actionLabel() }}
                            </span>
                            @if($payment->subscription?->interval)
                                <span class="text-[11px] text-gray-400 shrink-0 hidden sm:block">
                                    {{ $payment->subscription->interval === 'yearly' ? t('subscription.yearly') : t('subscription.monthly') }}
                                </span>
                            @endif
                        </div>

                        {{-- STATUS BADGE + BETRAG --}}
                        @php $isRefund = str_starts_with($payment->billing_reason ?? '', 'refund:'); @endphp
                        <div class="flex items-center gap-3 shrink-0">
                            <span class="hidden sm:inline-block text-[10px] font-semibold {{ $payment->status->badgeBg() }} {{ $payment->status->badgeText() }} px-2 py-0.5 rounded-md">
                                {{ $payment->status->label() }}
                            </span>
                            <p class="text-sm font-semibold tabular-nums w-20 text-right {{ $isRefund ? 'text-blue-600' : 'text-gray-800' }}">
                                {{ $isRefund ? '−' : '' }}{{ number_format($payment->amount / 100, 2, ',', '.') }} €
                            </p>
                        </div>

                    </div>
                @endforeach
            </div>

            {{-- PAGINATION --}}
            @if($payments->hasPages())
                <div class="flex items-center justify-between text-xs text-gray-500 pt-3">
                    <span>{{ $payments->firstItem() }}–{{ $payments->lastItem() }} {{ t('common.of') }} {{ $payments->total() }}</span>
                    <div class="flex gap-1">
                        @if($payments->onFirstPage())
                            <span class="px-3 py-1.5 rounded-lg border border-gray-100 text-gray-300 cursor-default">‹</span>
                        @else
                            <button wire:click="previousPage"
                                    class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors">‹</button>
                        @endif
                        @if($payments->hasMorePages())
                            <button wire:click="nextPage"
                                    class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors">›</button>
                        @else
                            <span class="px-3 py-1.5 rounded-lg border border-gray-100 text-gray-300 cursor-default">›</span>
                        @endif
                    </div>
                </div>
            @endif

        @endif
    </div>

</div>
