<x-jetstream.action-section>
    <x-slot name="title">
        {{ trans_with_platform( __('Delete your @PLATFORM_NAME@ profile')) }}
    </x-slot>


    <x-slot name="description">
        {{ __('Permanently erase your digital footprint.') }}
    </x-slot>

    <x-slot name="content">
        <div class="font-medium text-theme-text-primary">
            {{ __('Ready to close your account?')}}
        </div>
        <div class="max-w-xl text-sm text-theme-secondary my-3">
            {{ __('Before deleting your account, please download all your personal data, transactions and messages that you wish to retain.') }}
        </div>
        <div class="my-6">
            <x-jetstream.button wire:click="confirmUserDeletion" wire:loading.attr="disabled">
                <x-icon class="mr-3 h-5 w-5" name="exclamation-triangle" />
                {{ __('Delete profile') }}
            </x-jetstream.button>
        </div>

        <!-- Delete User Confirmation Modal -->
        <x-jetstream.dialog-modal wire:model.live="confirmingUserDeletion">
            <x-slot name="title">
                 {{ trans_with_platform( __('Delete your @PLATFORM_NAME@ profile')) }}
            </x-slot>

            <x-slot name="content">
                <div class="font-semibold text-red-600">
                    {{ __('Are you sure you want to delete your profile? This step is irriversable.') }} 
                </div>
                <div class="my-3">
                    {{ __('Once your profile is deleted, all of its balance totals and data will be permanently deleted. All your transactions will be anonymized, also in the online transaction overviews and statements of other ' . platform_name() . ' users.')}} 
                </div>
                <div>
                    {{ __('Before deleting your account, please download all your personal data, transactions and messages that you wish to retain.') }}
                </div>
                {{-- Account Balances Overview --}}
                @if($accounts && $accounts->count() > 0)
                    <div class="mt-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
                        <h4 class="text-sm font-semibold text-gray-700 mb-3">{{ __('Your accounts') }}</h4>

                        <div class="space-y-2">
                            @foreach($accounts as $account)
                                <div class="flex justify-between items-center text-sm">
                                    <span class="text-gray-600">{{ $account['name'] }}</span>
                                    <span class="font-medium {{ $account['balance'] < 0 ? 'text-red-600' : 'text-gray-900' }}">
                                        {{ $account['balanceFormatted'] }}
                                    </span>
                                </div>
                            @endforeach

                            <div class="pt-2 mt-2 border-t border-gray-300 flex justify-between items-center">
                                <span class="text-sm font-semibold text-gray-700">{{ __('Total balance') }}</span>
                                <span class="text-base font-bold {{ $totalBalance < 0 ? 'text-red-600' : 'text-gray-900' }}">
                                    {{ tbFormat($totalBalance) }}
                                </span>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Central Bank Warning --}}
                @if($isCentralBank)
                    <div class="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                        <div class="flex items-start">
                            <svg class="w-5 h-5 text-red-600 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                            </svg>
                            <div>
                                <div class="text-sm font-semibold text-red-800">{{ __('Central bank cannot be deleted') }}</div>
                                <p class="mt-1 text-sm text-red-700">{{ __('This is the central bank (level 0) and cannot be removed from the system. Central banks are essential for currency creation and management.') }}</p>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Final Admin Warning --}}
                @if($isFinalAdmin)
                    <div class="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                        <div class="flex items-start">
                            <svg class="w-5 h-5 text-red-600 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                            </svg>
                            <div>
                                <div class="text-sm font-semibold text-red-800">{{ __('Final administrator cannot be deleted') }}</div>
                                <p class="mt-1 text-sm text-red-700">{{ __('At least one administrator account must remain active in the system.') }}</p>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Negative Balance Warning --}}
                @if($hasNegativeBalance)
                    <div class="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                        <div class="flex items-start">
                            <svg class="w-5 h-5 text-red-600 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                            </svg>
                            <div>
                                <div class="text-sm font-semibold text-red-800">{{ __('Cannot delete profile with negative balance') }}</div>
                                <p class="mt-1 text-sm text-red-700">{{ __('You must settle all debts before you can delete your profile. Please ensure all your account balances are zero or positive.') }}</p>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Balance Handling Options --}}
                @if($showBalanceOptions && $totalBalance != 0 && !$hasNegativeBalance && !$isCentralBank && !$isFinalAdmin)
                    <div class="mt-6">
                        <x-jetstream.label for="balanceHandlingOption" value="{{ __('What would you like to do with your remaining balance?') }}" />

                        <div class="mt-3 space-y-3">
                            <label class="flex items-start">
                                <input type="radio" wire:model.live="balanceHandlingOption" value="donate" class="mt-1 text-theme-brand focus:border-theme-accent focus:ring-1 focus:ring-theme-accent">
                                <span class="ml-3">
                                    <span class="block text-sm font-medium text-theme-primary">{{ __('Donate to an organization') }}</span>
                                    <span class="block text-sm text-theme-muted">{{ __('Transfer your remaining balance to an organization of your choice') }}</span>
                                </span>
                            </label>

                            <label class="flex items-start">
                                <input type="radio" wire:model.live="balanceHandlingOption" value="delete" class="mt-1 text-theme-brand focus:border-theme-accent focus:ring-1 focus:ring-theme-accent">
                                <span class="ml-3">
                                    <span class="block text-sm font-medium text-theme-primary">{{ __('Delete balance') }}</span>
                                    <span class="block text-sm text-theme-muted">{{ __('Permanently delete your balance total') }}</span>
                                </span>
                            </label>
                        </div>

                        @if($balanceHandlingOption === 'donate')
                            <div class="mt-4">
                                <livewire:to-account-organization-only :label="__('Select organization account')" />
                                <x-jetstream.input-error for="donationAccountId" class="mt-2" />

                                @if($donationExceedsLimit && $donationLimitError)
                                    <div class="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                                        <div class="flex items-start">
                                            <svg class="w-5 h-5 text-red-600 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                                            </svg>
                                            <div>
                                                <div class="text-sm font-semibold text-red-800">{{ __('Donation exceeds account limits') }}</div>
                                                <p class="mt-1 text-sm text-red-700">{{ $donationLimitError }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endif
                    </div>
                @endif

                @if(!$isCentralBank && !$hasNegativeBalance && !$isFinalAdmin)
                    <div class="mt-4" x-data="{}" x-on:confirming-delete-user.window="setTimeout(() => $refs.password.focus(), 250)">
                        <x-jetstream.input type="password" class="mt-1 block w-3/4"
                                    placeholder="{{ getActiveProfileType() == 'Organization' ?
                                        __('Password of') . ' ' . auth()->guard('web')->user()->name :
                                        __('Password of') . ' ' . getActiveProfile()->name }}"
                                    x-ref="password"
                                    wire:model="password"
                                    wire:keydown.enter="deleteUser" />

                        <x-jetstream.input-error for="password" class="mt-2" />
                    </div>
                @endif
            </x-slot>

            <x-slot name="footer">
                <x-jetstream.secondary-button wire:click="$toggle('confirmingUserDeletion')" wire:loading.attr="disabled">
                    {{ __('Cancel') }}
                </x-jetstream.secondary-button>

                <x-jetstream.danger-button
                    class="ml-3"
                    wire:click="deleteUser"
                    wire:loading.attr="disabled"
                    :disabled="$hasNegativeBalance || $isCentralBank || $isFinalAdmin || $donationExceedsLimit">
                    <x-icon class="mr-3 h-5 w-5" name="exclamation-triangle" />
                    {{ __('Delete profile') }}
                </x-jetstream.danger-button>
            </x-slot>
        </x-jetstream.dialog-modal>
    </x-slot>
</x-jetstream.action-section>
