<div class="mx-auto max-w-3xl space-y-6">
    <div class="animate-rise">
        <h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('settings.title') }}</h1>
        <p class="mt-1 text-sm text-muted">{{ __('settings.subtitle') }}</p>
    </div>

    {{-- Company / billing profile --}}
    <form wire:submit="saveProfile" class="space-y-4 rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise [animation-delay:60ms]">
        <h2 class="font-semibold text-ink">{{ __('settings.company_title') }}</h2>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <x-ui.input name="companyName" wire:model="companyName" :label="__('settings.company_name')" />
            <x-ui.input name="contactName" wire:model="contactName" :label="__('settings.contact_name')" />
            <x-ui.input name="phone" wire:model="phone" :label="__('settings.phone')" />
            <x-ui.input name="vatId" wire:model="vatId" :label="__('settings.vat_id')" />
        </div>
        <div>
            <label class="text-sm font-medium text-body" for="billingAddress">{{ __('settings.billing_address') }}</label>
            <textarea id="billingAddress" wire:model="billingAddress" rows="3"
                      class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink"></textarea>
            @error('billingAddress')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
        </div>
        <div class="flex justify-end">
            <x-ui.button variant="primary" type="submit" wire:loading.attr="disabled" wire:target="saveProfile">{{ __('settings.save') }}</x-ui.button>
        </div>
    </form>

    {{-- Branding --}}

    {{-- Own password. There was no way to change one at all — Fortify's
         updatePasswords feature was switched off. --}}
    <form wire:submit="updateOwnPassword" class="space-y-4 rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise [animation-delay:90ms]">
        <div>
            <h2 class="font-semibold text-ink">{{ __('admin_settings.password_title') }}</h2>
            <p class="mt-1 text-sm text-muted">{{ __('admin_settings.password_sub') }}</p>
        </div>

        <div class="grid gap-4 sm:grid-cols-3">
            <x-ui.input name="currentPassword" type="password" autocomplete="current-password"
                        :label="__('admin_settings.password_current')" wire:model="currentPassword" />
            <x-ui.input name="newPassword" type="password" autocomplete="new-password"
                        :label="__('admin_settings.password_new')" wire:model="newPassword" />
            <x-ui.input name="newPasswordConfirmation" type="password" autocomplete="new-password"
                        :label="__('admin_settings.password_repeat')" wire:model="newPasswordConfirmation" />
        </div>

        <div class="flex justify-end">
            <x-ui.button type="submit" variant="primary" wire:loading.attr="disabled" wire:target="updateOwnPassword">{{ __('admin_settings.password_save') }}</x-ui.button>
        </div>
    </form>


    {{-- Two-factor. Every action is re-checked server-side against a recent
         password confirmation — hiding the buttons stops nobody who can post
         to /livewire/update. --}}
    <div class="space-y-4 rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise [animation-delay:150ms]">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <div class="flex flex-wrap items-center gap-2">
                    <h2 class="font-semibold text-ink">{{ __('settings.twofa_title') }}</h2>
                    <span class="inline-flex items-center gap-1.5 rounded-pill border px-2.5 py-0.5 text-xs font-medium
                          {{ $twoFactorOn ? 'border-success-border bg-success-bg text-success' : 'border-line-strong bg-surface-2 text-muted' }}">
                        <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
                        {{ $twoFactorOn ? __('settings.twofa_state_on') : __('settings.twofa_state_off') }}
                    </span>
                </div>
                <p class="mt-1.5 max-w-xl text-sm text-muted">{{ __('settings.twofa_sub') }}</p>
            </div>
        </div>

        @if (! $passwordConfirmed)
            {{-- The gate. A signed-in session is not enough to change how the
                 account is protected — the risk is an unlocked machine. --}}
            <form wire:submit="confirmPassword" class="rounded-lg border border-line bg-surface-2 p-4">
                <p class="text-sm text-body">{{ __('settings.twofa_confirm_first') }}</p>
                <div class="mt-3 flex flex-wrap items-start gap-2">
                    <div class="min-w-56 flex-1">
                        <x-ui.input name="confirmablePassword" type="password" autocomplete="current-password"
                                    :label="__('admin_settings.password_current')" wire:model="confirmablePassword" />
                    </div>
                    <x-ui.button type="submit" variant="secondary" class="mt-7" wire:loading.attr="disabled" wire:target="confirmPassword">
                        {{ __('settings.twofa_confirm_button') }}
                    </x-ui.button>
                </div>
            </form>
        @elseif ($twoFactorOn)
            <div class="flex flex-wrap gap-2">
                <x-ui.button variant="secondary" wire:click="regenerateRecoveryCodes" wire:loading.attr="disabled" wire:target="regenerateRecoveryCodes">
                    {{ __('settings.twofa_new_codes') }}
                </x-ui.button>
                <x-ui.button variant="danger"
                             x-on:click="$dispatch('openModal', { component: 'confirm-disable-two-factor' })">
                    {{ __('settings.twofa_disable') }}
                </x-ui.button>
            </div>
        @elseif ($twoFactorPending)
            <div class="grid gap-5 sm:grid-cols-[auto_1fr] sm:items-start">
                <div class="rounded-lg border border-line bg-white p-3">{!! $twoFactorQr !!}</div>
                <form wire:submit="confirmTwoFactor" class="space-y-3">
                    <p class="text-sm text-muted">{{ __('settings.twofa_scan') }}</p>
                    <div class="max-w-48">
                        <x-ui.input name="twoFactorCode" inputmode="numeric" autocomplete="one-time-code"
                                    :label="__('settings.twofa_code')" wire:model="twoFactorCode" />
                    </div>
                    <x-ui.button type="submit" variant="primary" wire:loading.attr="disabled" wire:target="confirmTwoFactor">
                        {{ __('settings.twofa_activate') }}
                    </x-ui.button>
                </form>
            </div>
        @else
            <x-ui.button variant="primary" wire:click="enableTwoFactor" wire:loading.attr="disabled" wire:target="enableTwoFactor">
                {{ __('settings.twofa_enable') }}
            </x-ui.button>
        @endif

        @if ($recoveryCodes)
            {{-- Shown once, on purpose: nobody writes down what they were never
                 shown, and these are the way back in when the phone is gone. --}}
            <div class="rounded-lg border border-warning-border bg-warning-bg p-4">
                <p class="text-sm font-medium text-warning">{{ __('settings.twofa_codes_title') }}</p>
                <p class="mt-1 text-xs text-warning">{{ __('settings.twofa_codes_hint') }}</p>
                <ul class="mt-3 grid grid-cols-2 gap-x-6 gap-y-1 font-mono text-sm text-ink sm:grid-cols-4">
                    @foreach ($recoveryCodes as $code)<li class="select-all">{{ $code }}</li>@endforeach
                </ul>
            </div>
        @endif
    </div>

    {{-- Directly under two-factor, because the two answer the same question:
         who can get into this account, and what can I do about it. --}}
    <div class="animate-rise [animation-delay:165ms]">
        @livewire('sessions')
    </div>

    <form wire:submit="saveBranding" class="space-y-4 rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise [animation-delay:120ms]">
        <div>
            <h2 class="font-semibold text-ink">{{ __('settings.branding_title') }}</h2>
            <p class="mt-1 text-sm text-muted">{{ __('settings.branding_sub') }}</p>
        </div>

        <x-ui.input name="brandDisplayName" wire:model="brandDisplayName" :label="__('settings.brand_display_name')" :placeholder="$branding['display_name'] ?? ''" />

        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <label class="text-sm font-medium text-body">{{ __('settings.brand_primary') }}</label>
                <div class="mt-1.5 flex items-center gap-2">
                    <input type="color" wire:model="brandPrimary" value="{{ $brandPrimary ?: ($branding['primary_color'] ?? '#f97316') }}" class="h-9 w-12 rounded border border-line-strong bg-surface" aria-label="{{ __('settings.brand_primary') }}" />
                    <input type="text" wire:model="brandPrimary" placeholder="{{ $branding['primary_color'] ?? '#f97316' }}" class="w-28 rounded-md border border-line-strong bg-surface px-2.5 py-1.5 font-mono text-sm text-ink" />
                </div>
                @error('brandPrimary')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="text-sm font-medium text-body">{{ __('settings.brand_accent') }}</label>
                <div class="mt-1.5 flex items-center gap-2">
                    <input type="color" wire:model="brandAccent" value="{{ $brandAccent ?: ($branding['accent_color'] ?? '#c2560a') }}" class="h-9 w-12 rounded border border-line-strong bg-surface" aria-label="{{ __('settings.brand_accent') }}" />
                    <input type="text" wire:model="brandAccent" placeholder="{{ $branding['accent_color'] ?? '#c2560a' }}" class="w-28 rounded-md border border-line-strong bg-surface px-2.5 py-1.5 font-mono text-sm text-ink" />
                </div>
                @error('brandAccent')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
            </div>
        </div>

        <div>
            <label class="text-sm font-medium text-body">{{ __('settings.brand_logo') }}</label>
            <div class="mt-1.5 flex flex-wrap items-center gap-4">
                <div class="grid size-16 place-items-center overflow-hidden rounded-lg border border-line bg-surface-2">
                    @if ($logo)
                        <img src="{{ $logo->temporaryUrl() }}" alt="" class="max-h-16 max-w-16 object-contain" />
                    @elseif ($logoUrl)
                        <img src="{{ $logoUrl }}" alt="" class="max-h-16 max-w-16 object-contain" />
                    @else
                        <span class="text-xs text-muted">{{ __('settings.brand_default') }}</span>
                    @endif
                </div>
                <div class="flex flex-col gap-1.5">
                    <input type="file" wire:model="logo" accept="image/png,image/webp" class="text-sm text-body file:mr-3 file:rounded-md file:border-0 file:bg-surface-2 file:px-3 file:py-1.5 file:text-sm file:font-semibold file:text-body" />
                    <p class="text-xs text-muted">{{ __('settings.brand_logo_hint') }}</p>
                    @if ($logoUrl)
                        <button type="button" wire:click="removeLogo" class="self-start text-xs font-semibold text-danger hover:underline">{{ __('settings.brand_logo_remove') }}</button>
                    @endif
                </div>
            </div>
            @error('logo')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
        </div>

        @if ($branding['is_default'] ?? false)
            <p class="text-xs text-muted">{{ __('settings.brand_using_default') }}</p>
        @endif

        <div class="flex justify-end">
            <x-ui.button variant="primary" type="submit" wire:loading.attr="disabled" wire:target="saveBranding,logo">{{ __('settings.save') }}</x-ui.button>
        </div>
    </form>

    {{-- Package & account lifecycle --}}
    <div class="space-y-4 rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise [animation-delay:180ms]">
        <h2 class="font-semibold text-ink">{{ __('settings.package_title') }}</h2>

        @if ($cancellationScheduled)
            <div class="flex items-start gap-3 rounded-lg border border-warning-border bg-warning-bg p-4">
                <x-ui.icon name="alert-triangle" class="size-5 shrink-0 text-warning" />
                <div>
                    <p class="text-sm font-semibold text-ink">{{ __('settings.cancel_scheduled_title') }}</p>
                    <p class="mt-0.5 text-sm text-body">{{ __('settings.cancel_scheduled_body', ['date' => $instance?->service_ends_at?->local()->isoFormat('LL')]) }}</p>
                </div>
            </div>
        @elseif ($hasActivePackage)
            <div class="flex flex-wrap items-center justify-between gap-3">
                <p class="text-sm text-muted">{{ __('settings.package_active', ['plan' => $instance ? __('billing.plan.'.$instance->plan) : '—']) }}</p>
                <x-ui.button variant="secondary" size="sm"
                             x-on:click="$dispatch('openModal', { component: 'confirm-cancel-package' })">
                    {{ __('settings.cancel_cta') }}
                </x-ui.button>
            </div>
        @else
            <p class="text-sm text-muted">{{ __('settings.no_package') }}</p>
        @endif

        <div class="border-t border-line pt-4">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <p class="text-sm font-semibold text-ink">{{ __('settings.close_account_title') }}</p>
                    <p class="mt-0.5 text-sm text-muted">{{ __('settings.close_account_sub') }}</p>
                </div>
                <x-ui.button variant="secondary" size="sm"
                             x-on:click="$dispatch('openModal', { component: 'confirm-close-account' })">
                    {{ __('settings.close_cta') }}
                </x-ui.button>
            </div>
        </div>
    </div>
</div>
