<div class="space-y-6" x-data="{ dirty: false }" @change="dirty = true" @saved.window="dirty = false"
     x-on:livewire:navigating.window="if(dirty && !confirm('You have unsaved changes. Leave anyway?')) $event.preventDefault()"
     x-init="window.addEventListener('beforeunload', (e) => { if(dirty) { e.preventDefault(); e.returnValue = '' } })">
    @if(session('message'))
    <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
         class="p-3 bg-success/10 border border-success/20 text-success rounded-xl text-sm">{{ session('message') }}</div>
    @endif
    @if(session('error'))
    <div class="p-3 bg-danger/10 border border-danger/20 text-danger rounded-xl text-sm">{{ session('error') }}</div>
    @endif

    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-ink">{{ __('Email Accounts') }}</h1>
            <p class="text-sm text-muted mt-1">{{ __('Connect and manage your email accounts.') }}</p>
        </div>
        <button wire:click="openAddForm" class="btn-primary flex items-center gap-2 text-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            {{ __('Add Account') }}
        </button>
    </div>

    {{-- Connected accounts --}}
    @forelse($accounts as $account)
    <div wire:key="account-{{ $account->id }}" class="bg-surface-2 rounded-2xl border border-border p-5">
        <div class="flex items-start justify-between">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center {{ $account->isConnected() ? 'bg-success/10' : 'bg-danger/10' }}">
                    <svg class="w-6 h-6 {{ $account->isConnected() ? 'text-success' : 'text-danger' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <h3 class="text-sm font-semibold text-ink">{{ $account->email }}</h3>
                        @if($account->is_default)
                        <span class="px-2 py-0.5 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-xs font-medium rounded-full">{{ __('Default') }}</span>
                        @endif
                    </div>
                    <p class="text-xs text-muted mt-0.5">
                        {{ $account->display_name ?? ucfirst($account->provider) }}
                        &middot;
                        @if($account->isConnected())
                        <span class="text-success">{{ __('Connected') }}</span>
                        @else
                        <span class="text-danger">{{ ucfirst($account->status) }}</span>
                        @endif
                        @if($account->last_synced_at)
                        &middot; {{ __('Last sync') }} <span title="{{ $account->last_synced_at->format('M j, Y g:i A') }}">{{ $account->last_synced_at->diffForHumans() }}</span>
                        @endif
                    </p>
                    @if($account->error_message)
                    <div class="mt-2 p-2 bg-danger/5 rounded-lg">
                        <p class="text-xs font-medium text-danger">{{ __('Connection issue') }}</p>
                        <p class="text-xs text-muted mt-0.5">
                            @if(str_contains($account->error_message, 'OAuth') || str_contains($account->error_message, 'token'))
                                Your email account needs to be reconnected. Click \"Reconnect\" to fix this.') }}
                            @elseif(str_contains($account->error_message, 'IMAP') || str_contains($account->error_message, 'connection'))
                                {{ __('We couldn\'t reach your email server. Please check your email settings and try again.') }}
                            @else
                                {{ __('Something went wrong with your email connection. Try reconnecting your account.') }}
                            @endif
                        </p>
                    </div>
                    @endif
                </div>
            </div>
            <div class="flex items-center gap-3">
                {{-- AI toggle --}}
                <label class="flex items-center gap-2 cursor-pointer">
                    <span class="text-xs text-muted">{{ __('AI Auto-Reply') }}</span>
                    <button wire:click="toggleAiReply({{ $account->id }})"
                            class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors {{ $account->ai_auto_reply ? 'bg-brand' : 'bg-gray-200 dark:bg-gray-700' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-surface-2 shadow transition-transform {{ $account->ai_auto_reply ? 'translate-x-4' : 'translate-x-0.5' }}"></span>
                    </button>
                </label>

                {{-- Reconnect button (visible when disconnected/error) --}}
                @if(!$account->isConnected())
                    @if($account->isOAuth())
                    <button x-data x-on:click="$wire.getReconnectOAuthUrl({{ $account->id }}).then(function(url) { url && (window.location.href = url); })"
                            class="px-3 py-1.5 text-xs font-medium text-white bg-success hover:bg-green-600 rounded-lg transition-colors flex items-center gap-1.5">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                        Reconnect
                    </button>
                    @else
                    <button wire:click="reconnect({{ $account->id }})"
                            class="px-3 py-1.5 text-xs font-medium text-white bg-success hover:bg-green-600 rounded-lg transition-colors flex items-center gap-1.5">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                        Reconnect
                    </button>
                    @endif
                @endif

                {{-- Edit button --}}
                <button wire:click="editAccount({{ $account->id }})" class="px-3 py-1.5 text-xs font-medium text-muted bg-surface hover:bg-gray-200 dark:bg-gray-700 rounded-lg transition-colors flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                    Edit
                </button>

                {{-- More actions dropdown (teleported so rounded card / tab content
                     can't clip the menu below the fold) --}}
                <div x-data="{
                        open: false, menuTop: 0, menuLeft: 0,
                        reposition() { const r = this.$refs.trigger.getBoundingClientRect(); this.menuLeft = r.right - 176; this.menuTop = r.bottom + 4; },
                        toggle() { this.open = !this.open; if (this.open) this.$nextTick(() => this.reposition()); },
                     }"
                     @scroll.window="open && reposition()" @resize.window="open && reposition()" @keydown.escape.window="open = false">
                    <button type="button" x-ref="trigger" @click="toggle()" class="p-2 text-muted/60 hover:text-ink rounded-lg hover:bg-surface transition-colors" :aria-expanded="open">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01"/></svg>
                    </button>
                    <template x-teleport="body">
                    <div x-show="open" @click.outside="open = false" x-transition
                         :style="`position: fixed; top: ${menuTop}px; left: ${menuLeft}px; z-index: 9999;`"
                         class="w-44 bg-surface-2 rounded-xl shadow-lg border border-border py-1" style="display: none;">
                        <button wire:click="editAccount({{ $account->id }})" @click="open = false" class="w-full text-left px-4 py-2 text-sm text-ink/80 hover:bg-surface flex items-center gap-2">
                            <svg class="w-4 h-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                            Edit Settings
                        </button>
                        @if(!$account->is_default)
                        <button wire:click="makeDefault({{ $account->id }})" @click="open = false" class="w-full text-left px-4 py-2 text-sm text-ink/80 hover:bg-surface flex items-center gap-2">
                            <svg class="w-4 h-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
                            Set as Default
                        </button>
                        @endif
                        @if($account->isConnected())
                        <button wire:click="disconnect({{ $account->id }})" @click="open = false" class="w-full text-left px-4 py-2 text-sm text-ink/80 hover:bg-surface flex items-center gap-2">
                            <svg class="w-4 h-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                            Disconnect
                        </button>
                        @else
                            @if($account->isOAuth())
                            <button x-data x-on:click="$wire.getReconnectOAuthUrl({{ $account->id }}).then(function(url) { url && (window.location.href = url); })" @click="open = false" class="w-full text-left px-4 py-2 text-sm text-success hover:bg-success/10 flex items-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                {{ __('Reconnect via') }} {{ ucfirst($account->provider) }}
                            </button>
                            @else
                            <button wire:click="reconnect({{ $account->id }})" @click="open = false" class="w-full text-left px-4 py-2 text-sm text-success hover:bg-success/10 flex items-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                Reconnect
                            </button>
                            @endif
                        @endif
                        <div class="border-t border-border my-1"></div>
                        <button wire:click="deleteAccount({{ $account->id }})" wire:confirm="{{ __('Are you sure? This will remove this email account and all its data.') }}" @click="open = false" class="w-full text-left px-4 py-2 text-sm text-danger hover:bg-danger/10 flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            Delete Account
                        </button>
                    </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
    @empty
    <x-empty-state
        type="email"
        :title="__('No email accounts connected')"
        :description="__('Connect your first email account to start receiving and sending emails through') . ' ' . config('app.name') . '.'">
        <button wire:click="openAddForm" class="btn-primary mt-1 gap-2">
            <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            {{ __('Connect Email Account') }}
        </button>
    </x-empty-state>
    @endforelse

    {{-- Provider Picker Modal --}}
    @if($showProviderPicker)
    <div class="fixed inset-0 z-50 overflow-y-auto" aria-modal="true" role="dialog" aria-labelledby="provider-picker-title">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-surface/50" wire:click="closeAddForm"></div>
            <div class="relative bg-surface-2 rounded-2xl shadow-xl max-w-2xl w-full p-6 max-h-[90vh] overflow-y-auto" x-trap="$wire.showProviderPicker">
                <div class="flex items-center justify-between mb-5">
                    <div>
                        <h2 id="provider-picker-title" class="text-lg font-semibold text-ink">{{ __('Connect Email Account') }}</h2>
                        <p class="text-sm text-muted mt-1">{{ __('Choose your email provider to get started.') }}</p>
                    </div>
                    <button wire:click="closeAddForm" class="p-1.5 text-muted hover:text-muted rounded-lg hover:bg-surface">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>

                {{-- Error inside modal --}}
                @if(session('error'))
                <div class="mb-4 p-3 bg-red-500/10 border border-red-500/20 text-red-400 rounded-xl text-sm">{{ session('error') }}</div>
                @endif

                {{-- OAuth Providers --}}
                <div class="mb-4">
                    <h3 class="text-xs font-semibold text-muted uppercase tracking-wider mb-3">{{ __('Recommended (One-Click Sign In)') }}</h3>
                    <div class="grid grid-cols-2 gap-3">
                        {{-- Gmail OAuth --}}
                        <button x-data x-on:click="
                            $wire.connectOAuth('gmail').then(url => { if(url) window.location.href = url; })
                        " class="group flex items-center gap-3 p-4 bg-surface rounded-xl border border-border hover:border-primary-500/50 hover:bg-primary-50/5 transition-all cursor-pointer text-left w-full">
                            <div class="w-10 h-10 rounded-lg flex items-center justify-center bg-red-500/10 shrink-0">
                                <svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="currentColor"><path d="M20.283 10.356h-8.327v3.451h4.792c-.446 2.193-2.313 3.453-4.792 3.453a5.27 5.27 0 0 1-5.279-5.28 5.27 5.27 0 0 1 5.279-5.279c1.259 0 2.397.447 3.29 1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233a8.908 8.908 0 0 0-8.934 8.934 8.907 8.907 0 0 0 8.934 8.934c4.467 0 8.529-3.249 8.529-8.934 0-.528-.081-1.097-.202-1.625z"/></svg>
                            </div>
                            <div class="min-w-0">
                                <p class="text-sm font-semibold text-ink group-hover:text-primary-600 transition-colors flex items-center gap-1.5">{{ __('Sign in with Gmail') }} <span class="px-1.5 py-0.5 text-[9px] font-bold bg-green-500/15 text-green-400 rounded-full">{{ __('FAST') }}</span> <span class="px-1.5 py-0.5 text-[9px] font-bold bg-blue-500/15 text-blue-400 rounded-full">{{ __('PREFERRED') }}</span></p>
                                <p class="text-xs text-muted truncate">{{ __('One-click Google sign-in — OAuth, no app password needed') }}</p>
                            </div>
                        </button>
                        {{-- Outlook OAuth --}}
                        <button x-data x-on:click="
                            $wire.connectOAuth('outlook').then(url => { if(url) window.location.href = url; })
                        " class="group flex items-center gap-3 p-4 bg-surface rounded-xl border border-border hover:border-primary-500/50 hover:bg-primary-50/5 transition-all cursor-pointer text-left w-full">
                            <div class="w-10 h-10 rounded-lg flex items-center justify-center bg-blue-500/10 shrink-0">
                                <svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="currentColor"><path d="M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6H24V24zM11.4 11.4H0V0h11.4v11.4zM24 11.4H12.6V0H24v11.4z"/></svg>
                            </div>
                            <div class="min-w-0">
                                <p class="text-sm font-semibold text-ink group-hover:text-primary-600 transition-colors flex items-center gap-1.5">{{ __('Sign in with Outlook') }} <span class="px-1.5 py-0.5 text-[9px] font-bold bg-green-500/15 text-green-400 rounded-full">{{ __('FAST') }}</span> <span class="px-1.5 py-0.5 text-[9px] font-bold bg-blue-500/15 text-blue-400 rounded-full">{{ __('PREFERRED') }}</span></p>
                                <p class="text-xs text-muted truncate">{{ __('Microsoft 365 sign-in — OAuth, instant connection') }}</p>
                            </div>
                        </button>
                    </div>
                </div>

                {{-- Microsoft Basic Auth deprecation notice — Microsoft disabled
                     password sign-in for personal Outlook.com / Hotmail.com /
                     Live.com accounts in Sep 2022 and Exchange Online in Oct
                     2022. Customers kept trying the IMAP preset for these
                     addresses and reporting "it doesn't work" because the
                     server silently rejects Basic Auth. Loud upfront notice
                     here + server-side guard in EmailAccountManager::saveAccount(). --}}
                <div class="mb-4 p-3 bg-amber-500/5 border border-amber-500/20 rounded-xl flex items-start gap-2">
                    <svg class="w-4 h-4 text-amber-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                    <p class="text-xs text-amber-300 leading-relaxed">
                        <strong>{{ __('Using Outlook.com / Hotmail.com / Live.com?') }}</strong>
                        {{ __('Microsoft turned off password sign-in for those addresses in 2022. Use the "Sign in with Outlook" button above — it\'s the only way that works for personal Microsoft accounts now.') }}
                    </p>
                </div>

                {{-- IMAP/SMTP Provider Presets --}}
                <div>
                    <h3 class="text-xs font-semibold text-muted uppercase tracking-wider mb-3">{{ __('Other Email Providers') }}</h3>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                        @foreach($providerPresets as $key => $preset)
                        <button wire:click="selectProvider('{{ $key }}')"
                                class="group flex items-center gap-3 p-4 bg-surface rounded-xl border border-border hover:border-primary-500/50 hover:bg-primary-50/5 transition-all text-left">
                            <div class="w-10 h-10 rounded-lg flex items-center justify-center shrink-0
                                @if($key === 'custom') bg-gray-500/10
                                @elseif($key === 'gmail_imap') bg-red-500/10
                                @elseif($key === 'outlook_imap') bg-blue-500/10
                                @elseif($key === 'yahoo') bg-purple-500/10
                                @elseif($key === 'icloud') bg-gray-500/10
                                @elseif($key === 'protonmail') bg-violet-500/10
                                @else bg-primary-500/10
                                @endif">
                                @if($key === 'custom')
                                <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                @else
                                <svg class="w-5 h-5
                                    @if($key === 'gmail_imap') text-red-500
                                    @elseif($key === 'outlook_imap') text-blue-500
                                    @elseif($key === 'yahoo') text-purple-500
                                    @elseif($key === 'icloud') text-gray-500
                                    @elseif($key === 'protonmail') text-violet-500
                                    @else text-primary-500
                                    @endif" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                @endif
                            </div>
                            <div class="min-w-0">
                                <p class="text-sm font-semibold text-ink group-hover:text-primary-600 transition-colors truncate flex items-center gap-1">
                                    {{ $preset['label'] }}
                                    <span class="px-1 py-0.5 text-[8px] font-bold bg-amber-500/15 text-amber-400 rounded shrink-0">IMAP</span>
                                </p>
                                <p class="text-xs text-muted truncate">{{ $preset['description'] }}</p>
                            </div>
                        </button>
                        @endforeach
                    </div>
                    <p class="text-[10px] text-gray-500 mt-3 flex items-center gap-1.5">
                        <svg class="w-3 h-3 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        {{ __('IMAP connections may take 10-15 seconds to sync. OAuth (Gmail/Outlook above) is faster and recommended.') }}
                    </p>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- Add/Edit Account Modal --}}
    @if($showAddForm)
    <div class="fixed inset-0 z-50 overflow-y-auto" aria-modal="true" role="dialog" aria-labelledby="email-account-modal-title">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-surface/50" wire:click="closeAddForm"></div>
            <div class="relative bg-surface-2 rounded-2xl shadow-xl max-w-lg w-full p-6 max-h-[90vh] overflow-y-auto" x-trap="$wire.showAddForm">
                <div class="flex items-center justify-between mb-5">
                    <div class="flex items-center gap-3">
                        @if($selectedProvider && !$editingAccountId)
                        <button wire:click="backToProviderPicker" class="p-1.5 text-muted hover:text-ink rounded-lg hover:bg-surface transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                        </button>
                        @endif
                        <div>
                            <h2 id="email-account-modal-title" class="text-lg font-semibold text-ink">
                                @if($editingAccountId)
                                    Edit Email Account
                                @elseif($selectedProvider && $selectedProvider !== 'custom')
                                    {{ $providerPresets[$selectedProvider]['label'] ?? __('Connect Email Account') }}
                                @else
                                    Connect Email Account
                                @endif
                            </h2>
                            @if($selectedProvider && !$editingAccountId && isset($providerPresets[$selectedProvider]))
                            <p class="text-xs text-muted mt-0.5">{{ $providerPresets[$selectedProvider]['description'] }}</p>
                            @endif
                        </div>
                    </div>
                    <button wire:click="closeAddForm" class="p-1.5 text-muted hover:text-muted rounded-lg hover:bg-surface">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>

                {{-- Provider help text --}}
                @if($selectedProvider && !$editingAccountId && isset($providerPresets[$selectedProvider]))
                    @php $activePreset = $providerPresets[$selectedProvider]; @endphp
                    <div class="p-3 bg-primary-500/5 border border-primary-500/10 rounded-xl text-sm text-ink/80 mb-4">
                        <div class="flex gap-2">
                            <svg class="w-4 h-4 text-primary-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            <div>
                                <p>{{ $activePreset['help_text'] }}</p>
                                @if(isset($activePreset['help_url']))
                                <a href="{{ $activePreset['help_url'] }}" target="_blank" rel="noopener" class="text-primary-600 hover:text-primary-700 text-xs font-medium mt-1 inline-flex items-center gap-1">
                                    {{ __('Learn more') }}
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                                </a>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif

                <form wire:submit="saveAccount" class="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-ink/80 mb-1">{{ __('Email Address') }} <span class="text-red-500">*</span></label>
                            <input type="email" wire:model="accountEmail" class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 {{ $editingAccountId ? 'opacity-60 cursor-not-allowed' : '' }}" placeholder="you@company.com" {{ $editingAccountId ? 'readonly' : '' }}>
                            @if($editingAccountId) <p class="text-xs text-muted mt-1">{{ __('Email address cannot be changed after creation.') }}</p> @endif
                            @error('accountEmail') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-ink/80 mb-1">{{ __('Display Name') }}</label>
                            <input type="text" wire:model="displayName" class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="{{ __('Support Team') }}">
                        </div>
                    </div>

                    @php $isPreset = $selectedProvider && $selectedProvider !== 'custom' && !$editingAccountId; @endphp

                    <h3 class="text-sm font-semibold text-ink pt-2">{{ __('Incoming Mail Server') }}</h3>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-ink/80 mb-1">{{ __('Server Address') }} <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="imapHost" @if($isPreset) readonly @endif class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 {{ $isPreset ? 'opacity-60 cursor-not-allowed' : '' }}" placeholder="imap.gmail.com">
                            @error('imapHost') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-ink/80 mb-1">{{ __('Port') }}</label>
                            <input type="number" wire:model="imapPort" @if($isPreset) readonly @endif class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 {{ $isPreset ? 'opacity-60 cursor-not-allowed' : '' }}">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-ink/80 mb-1">{{ __('Username') }} <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="imapUsername" class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="your email address">
                            @error('imapUsername') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-ink/80 mb-1">{{ __('Password') }} <span class="text-red-500">*</span></label>
                            <input type="password" wire:model="imapPassword" class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="{{ $editingAccountId ? 'Leave blank to keep current' : ($isPreset ? 'App password' : '') }}">
                            @if($editingAccountId) <p class="text-xs text-muted mt-1">{{ __('Leave blank to keep your current password.') }}</p> @endif
                            @error('imapPassword') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-ink/80 mb-1">{{ __('Encryption') }}</label>
                        <select wire:model="imapEncryption" @if($isPreset) disabled @endif class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 {{ $isPreset ? 'opacity-60 cursor-not-allowed' : '' }}">
                            <option value="ssl">SSL</option>
                            <option value="tls">TLS</option>
                            <option value="none">None</option>
                        </select>
                    </div>

                    <h3 class="text-sm font-semibold text-ink pt-2">{{ __('Outgoing Mail Server') }}</h3>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-ink/80 mb-1">Server Address</label>
                            <input type="text" wire:model="smtpHost" @if($isPreset) readonly @endif class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 {{ $isPreset ? 'opacity-60 cursor-not-allowed' : '' }}" placeholder="smtp.gmail.com">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-ink/80 mb-1">{{ __('Port') }}</label>
                            <input type="number" wire:model="smtpPort" @if($isPreset) readonly @endif class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 {{ $isPreset ? 'opacity-60 cursor-not-allowed' : '' }}">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-ink/80 mb-1">{{ __('Outgoing Username') }}</label>
                            <input type="text" wire:model="smtpUsername" class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="your email address">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-ink/80 mb-1">{{ __('Outgoing Password') }}</label>
                            <input type="password" wire:model="smtpPassword" class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="{{ $editingAccountId ? 'Leave blank to keep current' : ($isPreset ? 'App password' : '') }}">
                            @if($editingAccountId) <p class="text-xs text-muted mt-1">{{ __('Leave blank to keep your current password.') }}</p> @endif
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-ink/80 mb-1">{{ __('Encryption') }}</label>
                        <select wire:model="smtpEncryption" @if($isPreset) disabled @endif class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 {{ $isPreset ? 'opacity-60 cursor-not-allowed' : '' }}">
                            <option value="ssl">SSL</option>
                            <option value="tls">TLS</option>
                            <option value="starttls">STARTTLS</option>
                            <option value="none">None</option>
                        </select>
                    </div>

                    {{-- Test connection result --}}
                    @if($testStatus)
                    <div class="p-3 rounded-xl text-sm {{ str_starts_with($testStatus, 'success') ? 'bg-success/10 text-success border border-success/20' : 'bg-danger/10 text-danger border border-danger/20' }}">
                        {{ $testStatus === 'success' ? __('Connection successful!') : $testStatus }}
                    </div>
                    @endif

                    <div class="flex items-center justify-between pt-2">
                        <button type="button" wire:click="testConnection" class="px-4 py-2 text-sm font-medium text-muted  bg-surface  rounded-xl hover:bg-gray-200 dark:bg-gray-700 transition-colors">
                            <span wire:loading.remove wire:target="testConnection">{{ __('Test Connection') }}</span>
                            <span wire:loading wire:target="testConnection" class="inline-flex items-center gap-2">
                                <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                                Testing...
                            </span>
                        </button>
                        <div class="flex items-center gap-3">
                            <button type="button" wire:click="closeAddForm" class="btn-secondary text-sm">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn-primary px-4 py-2 text-sm">
                                <span wire:loading.remove wire:target="saveAccount">{{ $editingAccountId ? 'Save Changes' : 'Connect Account' }}</span>
                                <span wire:loading wire:target="saveAccount" class="inline-flex items-center gap-2">
                                    <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                                    {{ $editingAccountId ? 'Saving...' : 'Connecting...' }}
                                </span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endif
</div>
