@extends('layouts.app')
@section('title', __('Plan & billing'))
@section('page-title', __('Plan & billing'))

@section('content')
@php
    $currentPlanId = $subscription?->plan_id;
    $currentCycle  = $subscription?->cycle ?? 'monthly';
    $currentPrice  = (float) ($subscription?->effectivePrice() ?? 0);
@endphp

<div class="mb-4 sm:mb-6">
    <h1 class="text-xl sm:text-2xl font-semibold">{{ __('Plan & billing') }}</h1>
    <p class="text-sm text-slate-500">{{ __('View your current plan and switch — upgrade or downgrade — at any time.') }}</p>
</div>

@if(session('status'))
    <div class="mb-4 px-4 py-3 rounded-lg bg-emerald-50 text-emerald-800 text-sm">{{ session('status') }}</div>
@endif

@if($errors->any())
    <div class="mb-4 px-4 py-3 rounded-lg bg-rose-50 text-rose-800 text-sm">
        <ul class="list-disc ms-5">
            @foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach
        </ul>
    </div>
@endif

@php
    $anyGatewayEnabled = ($gateways['stripe'] ?? false) || ($gateways['paypal'] ?? false);
    $anyPaidPlan = $plans->contains(fn($p) => ((float) ($p->currentVersion->price_monthly ?? 0)) > 0
                                            || ((float) ($p->currentVersion->price_yearly  ?? 0)) > 0);
@endphp
@if($anyPaidPlan && ! $anyGatewayEnabled)
    <div class="mb-4 px-4 py-3 rounded-lg bg-amber-50 border border-amber-200 text-amber-800 text-sm flex items-start gap-2">
        <x-icon name="alert" class="w-4 h-4 mt-0.5 shrink-0"/>
        <div>
            <div class="font-medium">{{ __('Online payments are not available right now.') }}</div>
            <div class="text-xs">{{ __('No payment gateway is configured. Paid plan changes are temporarily disabled — please contact support to upgrade.') }}</div>
        </div>
    </div>
@endif

{{-- Current subscription summary --}}
<div class="card-pad mb-6">
    <div class="flex flex-col lg:flex-row lg:items-start gap-4 lg:gap-8">
        <div class="lg:w-72 shrink-0">
            <h3 class="font-semibold flex items-center gap-2">
                <span class="w-8 h-8 rounded-lg bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 flex items-center justify-center">
                    <x-icon name="trending-up" class="w-4 h-4"/>
                </span>
                {{ __('Current plan') }}
            </h3>
            <p class="text-xs text-slate-500 mt-1 ms-10">{{ __('Your active subscription details.') }}</p>
        </div>
        <div class="flex-1">
            @if($subscription)
                <div class="grid sm:grid-cols-2 gap-4 text-sm">
                    <div>
                        <div class="text-xs text-slate-500">{{ __('Plan') }}</div>
                        <div class="font-medium text-base">
                            {{ $subscription->plan?->displayName() ?? '—' }}
                            <span class="text-xs text-slate-400 font-normal">v{{ $subscription->planVersion?->version }}</span>
                        </div>
                        @if($subscription->plan?->displayTagline())
                            <div class="text-xs text-slate-500">{{ $subscription->plan->displayTagline() }}</div>
                        @endif
                    </div>
                    <div>
                        <div class="text-xs text-slate-500">{{ __('State') }}</div>
                        <div class="font-medium">{{ __($subscription->state) }}</div>
                    </div>
                    <div>
                        <div class="text-xs text-slate-500">{{ __('Cycle') }}</div>
                        <div class="font-medium">{{ __($subscription->cycle) }}</div>
                    </div>
                    <div>
                        <div class="text-xs text-slate-500">{{ __('Price') }}</div>
                        <div class="font-mono font-medium">{{ number_format($currentPrice, 2) }} {{ $subscription->currency }}</div>
                    </div>
                    @if($subscription->trial_ends_at)
                        <div>
                            <div class="text-xs text-slate-500">{{ __('Trial ends') }}</div>
                            <div>{{ $subscription->trial_ends_at->format('Y-m-d') }}</div>
                        </div>
                    @endif
                    @if($subscription->current_period_ends_at)
                        <div>
                            <div class="text-xs text-slate-500">{{ __('Renews on') }}</div>
                            <div>{{ $subscription->current_period_ends_at->format('Y-m-d') }}</div>
                        </div>
                    @endif
                </div>
            @else
                <p class="text-sm text-slate-500">{{ __('You don\'t have an active subscription yet. Pick a plan below to get started.') }}</p>
            @endif
        </div>
    </div>
</div>

{{-- Cycle toggle for the plan grid --}}
<div x-data="{ cycle: '{{ $currentCycle }}' }" class="space-y-4">
    <div class="flex items-center justify-between">
        <h2 class="text-lg font-semibold">{{ __('Available plans') }}</h2>
        <div class="inline-flex rounded-lg border border-slate-200 dark:border-slate-800 p-0.5 text-xs">
            <button type="button" @click="cycle = 'monthly'"
                    :class="cycle === 'monthly' ? 'bg-brand-600 text-white' : 'text-slate-600 dark:text-slate-300'"
                    class="px-3 py-1.5 rounded-md transition">{{ __('Monthly') }}</button>
            <button type="button" @click="cycle = 'yearly'"
                    :class="cycle === 'yearly' ? 'bg-brand-600 text-white' : 'text-slate-600 dark:text-slate-300'"
                    class="px-3 py-1.5 rounded-md transition">{{ __('Yearly') }}</button>
        </div>
    </div>

    @if($plans->isEmpty())
        <div class="card-pad text-sm text-slate-500">{{ __('No plans are available right now. Please contact support.') }}</div>
    @else
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($plans as $plan)
                @php
                    $version = $plan->currentVersion;
                    $monthly = (float) ($version->price_monthly ?? 0);
                    $yearly  = (float) ($version->price_yearly ?? 0);
                    $isCurrent = $currentPlanId === $plan->id;
                @endphp
                <div class="card-pad flex flex-col gap-3 relative {{ $isCurrent ? 'ring-2 ring-brand-500' : '' }}">
                    @if($isCurrent)
                        <span class="absolute top-3 right-3 text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full bg-brand-100 text-brand-700 dark:bg-brand-900/40 dark:text-brand-300">{{ __('Current') }}</span>
                    @endif
                    <div>
                        <div class="text-base font-semibold">{{ $plan->displayName() }}</div>
                        @if($plan->displayTagline())
                            <div class="text-xs text-slate-500">{{ $plan->displayTagline() }}</div>
                        @endif
                    </div>

                    <div>
                        <div x-show="cycle === 'monthly'">
                            <span class="text-2xl font-bold font-mono">{{ number_format($monthly, 2) }}</span>
                            <span class="text-xs text-slate-500">{{ $version->currency }} / {{ __('mo') }}</span>
                        </div>
                        <div x-show="cycle === 'yearly'" x-cloak>
                            <span class="text-2xl font-bold font-mono">{{ number_format($yearly, 2) }}</span>
                            <span class="text-xs text-slate-500">{{ $version->currency }} / {{ __('yr') }}</span>
                        </div>
                        @if(($version->trial_days ?? 0) > 0 && ! $subscription)
                            <div class="text-[11px] text-emerald-600 mt-0.5">{{ __(':n-day free trial', ['n' => $version->trial_days]) }}</div>
                        @endif
                    </div>

                    @php
                        $currentMonthlyEquivalent = $currentCycle === 'yearly' ? ($currentPrice / 12) : $currentPrice;
                        $direction = ! $subscription || ! $subscription->isActive()
                            ? 'choose'
                            : ($isCurrent
                                ? 'cycle'
                                : ($monthly > $currentMonthlyEquivalent ? 'upgrade'
                                    : ($monthly < $currentMonthlyEquivalent ? 'downgrade' : 'switch')));

                        $cardCycle = null; // resolved per cycle inside Alpine: we render two prices and pass cycle hidden field
                        $isPaidMonthly = $monthly > 0;
                        $isPaidYearly  = $yearly > 0;
                        $hasGateway = ($gateways['stripe'] ?? false) || ($gateways['paypal'] ?? false);
                    @endphp

                    <form method="POST" action="{{ route('tenant.billing.change') }}" class="mt-auto space-y-2">@csrf
                        <input type="hidden" name="plan_id" value="{{ $plan->id }}">
                        <input type="hidden" name="cycle" :value="cycle">

                        {{-- Gateway picker (only shown if paid plan + at least one gateway enabled) --}}
                        @if($hasGateway && ($isPaidMonthly || $isPaidYearly))
                            <div x-show="(cycle === 'monthly' && {{ $isPaidMonthly ? 'true' : 'false' }}) || (cycle === 'yearly' && {{ $isPaidYearly ? 'true' : 'false' }})"
                                 class="flex flex-col gap-1.5 text-xs">
                                @if(! empty($gateways['stripe']))
                                    <label class="flex items-center gap-2 cursor-pointer p-2 rounded-md border border-slate-200 dark:border-slate-700 has-[:checked]:border-brand-500 has-[:checked]:bg-brand-50/40">
                                        <input type="radio" name="gateway" value="stripe" class="accent-brand-600" checked>
                                        <span class="font-medium">{{ __('Pay with Stripe') }}</span>
                                    </label>
                                @endif
                                @if(! empty($gateways['paypal']))
                                    <label class="flex items-center gap-2 cursor-pointer p-2 rounded-md border border-slate-200 dark:border-slate-700 has-[:checked]:border-brand-500 has-[:checked]:bg-brand-50/40">
                                        <input type="radio" name="gateway" value="paypal" class="accent-brand-600" @checked(empty($gateways['stripe']))>
                                        <span class="font-medium">{{ __('Pay with PayPal') }}</span>
                                    </label>
                                @endif
                            </div>
                        @endif

                        @if($direction === 'cycle')
                            <button type="submit"
                                    x-bind:disabled="cycle === '{{ $currentCycle }}'"
                                    class="btn-secondary w-full text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                                    onclick="return confirm('{{ __('Switch billing cycle for your current plan?') }}')">
                                <span x-show="cycle === '{{ $currentCycle }}'">{{ __('Active') }}</span>
                                <span x-show="cycle !== '{{ $currentCycle }}'" x-cloak>{{ __('Switch billing cycle') }}</span>
                            </button>
                        @elseif($direction === 'choose')
                            <button type="submit" class="btn-primary w-full text-sm"
                                    onclick="return confirm('{{ __('Subscribe to this plan?') }}')">
                                {{ __('Choose plan') }}
                            </button>
                        @elseif($direction === 'upgrade')
                            <button type="submit" class="btn-primary w-full text-sm"
                                    onclick="return confirm('{{ __('Upgrade to this plan?') }}')">
                                {{ __('Upgrade') }}
                            </button>
                        @elseif($direction === 'downgrade')
                            <button type="submit" class="btn-secondary w-full text-sm"
                                    onclick="return confirm('{{ __('Downgrade to this plan? You may lose access to features and quotas not included in the new plan.') }}')">
                                {{ __('Downgrade') }}
                            </button>
                        @else
                            <button type="submit" class="btn-secondary w-full text-sm"
                                    onclick="return confirm('{{ __('Switch to this plan?') }}')">
                                {{ __('Switch') }}
                            </button>
                        @endif
                    </form>
                </div>
            @endforeach
        </div>
    @endif
</div>

{{-- Recent activity --}}
@if($logs->isNotEmpty())
    <div class="card-pad mt-6">
        <h2 class="font-semibold mb-3">{{ __('Recent activity') }}</h2>
        <ul class="text-xs space-y-2">
            @foreach($logs as $log)
                <li class="flex gap-3">
                    <span class="text-slate-400 whitespace-nowrap">{{ $log->created_at->format('Y-m-d H:i') }}</span>
                    <span class="font-medium">{{ __($log->action) }}</span>
                    @if($log->note)<span class="text-slate-500">— {{ $log->note }}</span>@endif
                </li>
            @endforeach
        </ul>
    </div>
@endif
@endsection