@php
  $grouped = collect($purposes)->groupBy(fn ($p) => $p['group'] ?? 'Other');
@endphp

<div class="space-y-5">
    <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <h3 class="text-sm font-semibold">SMTP / mail profiles</h3>
                <p class="mt-1 text-xs text-[#6d7175]">Create separate transports (Gmail, SES, transactional ESP, CRM ESP) and assign them by purpose below. Passwords are encrypted at rest.</p>
            </div>
            <a href="{{ route('admin.settings.edit', ['section' => 'email', 'profile' => 'new']) }}" class="admin-btn admin-btn-primary">
                <i data-lucide="plus" class="h-3.5 w-3.5"></i> New profile
            </a>
        </div>

        <div class="mt-4 overflow-x-auto">
            <table class="min-w-full text-left text-sm">
                <thead class="border-b border-[var(--color-admin-border)] text-xs uppercase tracking-wide text-[#6d7175]">
                    <tr>
                        <th class="px-2 py-2 font-medium">Name</th>
                        <th class="px-2 py-2 font-medium">Transport</th>
                        <th class="px-2 py-2 font-medium">Host</th>
                        <th class="px-2 py-2 font-medium">From</th>
                        <th class="px-2 py-2 font-medium">Status</th>
                        <th class="px-2 py-2 font-medium"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($mailProfiles as $profile)
                        <tr class="border-b border-[var(--color-admin-border)]/70">
                            <td class="px-2 py-3">
                                <div class="font-medium">{{ $profile->name }}</div>
                                <div class="text-xs text-[#6d7175]">{{ $profile->key }}</div>
                            </td>
                            <td class="px-2 py-3">{{ $profile->transport }}</td>
                            <td class="px-2 py-3">{{ $profile->host ?: '—' }}{{ $profile->port ? ':'.$profile->port : '' }}</td>
                            <td class="px-2 py-3">{{ $profile->from_address ?: '—' }}</td>
                            <td class="px-2 py-3">
                                @if($profile->is_default)<x-admin.badge tone="success">Default</x-admin.badge>@endif
                                <x-admin.badge :tone="$profile->is_active ? 'success' : 'muted'">{{ $profile->is_active ? 'Active' : 'Off' }}</x-admin.badge>
                            </td>
                            <td class="px-2 py-3 text-right">
                                <a class="text-xs text-[#2c6ecb] hover:underline" href="{{ route('admin.settings.edit', ['section' => 'email', 'profile' => $profile->id]) }}">Edit</a>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-2 py-6 text-sm text-[#6d7175]">No profiles yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>

    @if(request('profile') === 'new' || $editingProfile)
        @php $p = $editingProfile; @endphp
        <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
            <h3 class="text-sm font-semibold">{{ $p ? 'Edit profile' : 'New mail profile' }}</h3>
            <form method="post" action="{{ $p ? route('admin.settings.mail-profiles.update', $p) : route('admin.settings.mail-profiles.store') }}" class="mt-4 space-y-4">
                @csrf
                @if($p) @method('PUT') @endif
                <div class="grid gap-4 md:grid-cols-2">
                    <label class="block text-sm"><span class="admin-label">Display name</span><input class="admin-input" name="name" value="{{ old('name', $p?->name) }}" required placeholder="Transactional SMTP"></label>
                    <label class="block text-sm"><span class="admin-label">Key (optional)</span><input class="admin-input" name="key" value="{{ old('key', $p?->key) }}" placeholder="orders-smtp" @readonly($p)></label>
                    <label class="block text-sm"><span class="admin-label">Transport</span>
                        <select class="admin-input" name="transport">
                            @foreach(['smtp' => 'SMTP', 'log' => 'Log (dev/safe)', 'sendmail' => 'Sendmail', 'array' => 'Array (tests)'] as $value => $label)
                                <option value="{{ $value }}" @selected(old('transport', $p?->transport ?? 'smtp') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="block text-sm"><span class="admin-label">Encryption</span>
                        <select class="admin-input" name="encryption">
                            @foreach(['tls' => 'STARTTLS (tls)', 'ssl' => 'SMTPS (ssl)', 'none' => 'None'] as $value => $label)
                                <option value="{{ $value }}" @selected(old('encryption', $p?->encryption ?? 'tls') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="block text-sm"><span class="admin-label">Host</span><input class="admin-input" name="host" value="{{ old('host', $p?->host) }}" placeholder="smtp.example.com"></label>
                    <label class="block text-sm"><span class="admin-label">Port</span><input class="admin-input" type="number" name="port" value="{{ old('port', $p?->port ?? 587) }}"></label>
                    <label class="block text-sm"><span class="admin-label">Username</span><input class="admin-input" name="username" value="{{ old('username', $p?->username) }}" autocomplete="off"></label>
                    <label class="block text-sm"><span class="admin-label">Password {{ $p ? '(leave blank to keep)' : '' }}</span><input class="admin-input" type="password" name="password" value="" autocomplete="new-password"></label>
                    <label class="block text-sm"><span class="admin-label">From email</span><input class="admin-input" type="email" name="from_address" value="{{ old('from_address', $p?->from_address) }}"></label>
                    <label class="block text-sm"><span class="admin-label">From name</span><input class="admin-input" name="from_name" value="{{ old('from_name', $p?->from_name) }}"></label>
                    <label class="block text-sm"><span class="admin-label">Reply-to</span><input class="admin-input" type="email" name="reply_to" value="{{ old('reply_to', $p?->reply_to) }}"></label>
                    <label class="block text-sm"><span class="admin-label">Timeout (seconds)</span><input class="admin-input" type="number" name="timeout" value="{{ old('timeout', $p?->timeout) }}" min="1" max="120"></label>
                    <label class="block text-sm md:col-span-2"><span class="admin-label">Notes</span><textarea class="admin-input min-h-[4rem]" name="notes">{{ old('notes', $p?->notes) }}</textarea></label>
                </div>
                <div class="flex flex-wrap gap-4 text-sm">
                    <label class="inline-flex items-center gap-2"><input type="checkbox" name="is_active" value="1" @checked(old('is_active', $p?->is_active ?? true))> Active</label>
                    <label class="inline-flex items-center gap-2"><input type="checkbox" name="is_default" value="1" @checked(old('is_default', $p?->is_default ?? false))> Default profile</label>
                </div>
                <div class="flex flex-wrap gap-2">
                    <button class="admin-btn admin-btn-primary" type="submit">{{ $p ? 'Update profile' : 'Create profile' }}</button>
                    <a href="{{ route('admin.settings.edit', ['section' => 'email']) }}" class="admin-btn">Cancel</a>
                </div>
            </form>

            @if($p)
                <div class="mt-6 grid gap-4 border-t border-[var(--color-admin-border)] pt-5 md:grid-cols-2">
                    <form method="post" action="{{ route('admin.settings.mail-profiles.test', $p) }}" class="rounded-xl border border-[var(--color-admin-border)] p-4">
                        @csrf
                        <h4 class="text-sm font-semibold">Send test email</h4>
                        <label class="mt-3 block text-sm"><span class="admin-label">Recipient</span><input class="admin-input" type="email" name="to" value="{{ old('to', auth()->user()?->email) }}" required></label>
                        <button class="admin-btn mt-3" type="submit">Send test</button>
                    </form>
                    @unless($p->is_default)
                        <form method="post" action="{{ route('admin.settings.mail-profiles.destroy', $p) }}" class="rounded-xl border border-red-200 bg-red-50/40 p-4" onsubmit="return confirm('Delete this mail profile?')">
                            @csrf @method('DELETE')
                            <h4 class="text-sm font-semibold text-red-900">Delete profile</h4>
                            <p class="mt-1 text-xs text-red-800">Purposes using this profile will fall back to the default.</p>
                            <button class="admin-btn mt-3 border-red-300 text-red-800" type="submit">Delete</button>
                        </form>
                    @endunless
                </div>
            @endif
        </section>
    @endif

    <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
        <h3 class="text-sm font-semibold">Purpose → SMTP routing</h3>
        <p class="mt-1 text-xs text-[#6d7175]">Assign a different profile for signup, password resets, order mail, CRM stage updates, and more. Leave as “Default profile” to inherit.</p>

        <form method="post" action="{{ route('admin.settings.mail-routes') }}" class="mt-5 space-y-6">
            @csrf @method('PUT')
            @foreach($grouped as $group => $items)
                <div>
                    <h4 class="mb-3 text-xs font-semibold uppercase tracking-wide text-[#6d7175]">{{ $group }}</h4>
                    <div class="space-y-3">
                        @foreach($items as $purposeKey => $meta)
                            <div class="grid gap-2 rounded-xl border border-[var(--color-admin-border)] px-3 py-3 md:grid-cols-[1.4fr_1fr] md:items-center">
                                <div>
                                    <div class="text-sm font-medium">{{ $meta['label'] }}</div>
                                    <div class="text-xs text-[#6d7175]">{{ $meta['description'] }}</div>
                                </div>
                                <label class="block text-sm">
                                    <span class="sr-only">Profile for {{ $meta['label'] }}</span>
                                    <select class="admin-input" name="routes[{{ $purposeKey }}]">
                                        <option value="">Default profile / env fallback</option>
                                        @foreach($mailProfiles->where('is_active', true) as $profile)
                                            <option value="{{ $profile->id }}" @selected((int) old("routes.$purposeKey", $purposeRoutes[$purposeKey] ?? null) === (int) $profile->id)>
                                                {{ $profile->label() }}
                                            </option>
                                        @endforeach
                                    </select>
                                </label>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
            <button class="admin-btn admin-btn-primary" type="submit">Save SMTP routing</button>
        </form>
    </section>
</div>