<div class="flex min-h-[50vh]" style="box-sizing:border-box;width:100%;min-width:0;overflow:hidden" x-data="{
    linkOpen: false,
    companyOpen: false,
    sortOpen: false,
    linkSearch: '',
    companySearch: '',
    selectedIds: [],
    busy: false,
    notice: '',
    allTasks: @js($linkable_tasks),
    allCompanies: @js($linkable_companies),
    get filteredTasks() {
        if (!this.linkSearch.trim()) return this.allTasks;
        let q = this.linkSearch.toLowerCase();
        return this.allTasks.filter(t => (t.title || '').toLowerCase().includes(q));
    },
    get filteredCompanies() {
        if (!this.companySearch.trim()) return this.allCompanies;
        let q = this.companySearch.toLowerCase();
        return this.allCompanies.filter(c => (c.name || '').toLowerCase().includes(q));
    },
    toggleSelect(ev) {
        this.notice = '';
        const id = parseInt(ev.target.dataset.id);
        const idx = this.selectedIds.indexOf(id);
        if (ev.target.checked) {
            if (idx === -1) this.selectedIds.push(id);
        } else if (idx !== -1) {
            this.selectedIds.splice(idx, 1);
        }
        this.syncSelectAll();
    },
    toggleSelectAll(ev) {
        this.notice = '';
        const on = ev.target.checked;
        const boxes = Array.from(this.$root.querySelectorAll('.msg-checkbox'));
        this.selectedIds = on ? boxes.map(b => parseInt(b.dataset.id)) : [];
        boxes.forEach(b => b.checked = on);
        this.syncSelectAll();
    },
    syncSelectAll() {
        if (this.$refs.selectAll) {
            const boxes = Array.from(this.$root.querySelectorAll('.msg-checkbox'));
            this.$refs.selectAll.checked = boxes.length > 0 && boxes.every(b => b.checked);
        }
    },
    clearSelection() {
        this.selectedIds = [];
        this.$root.querySelectorAll('.msg-checkbox').forEach(b => b.checked = false);
        if (this.$refs.selectAll) this.$refs.selectAll.checked = false;
    },
    /* Livewire morph listeden satır düşürdüğünde (arşiv/silme) seçimde
       hayalet id kalmasını engeller; her toplu işlemden önce çağrılır. */
    pruneSelection() {
        const live = new Set(Array.from(this.$root.querySelectorAll('.msg-checkbox')).map(b => parseInt(b.dataset.id)));
        this.selectedIds = this.selectedIds.filter(id => live.has(id));
        this.$root.querySelectorAll('.msg-checkbox').forEach(b => {
            if (!this.selectedIds.includes(parseInt(b.dataset.id))) b.checked = false;
        });
        this.syncSelectAll();
    },
    ensureSelected() {
        if (this.selectedIds.length > 0) {
            this.notice = '';
            return true;
        }
        this.notice = 'Önce listeden en az bir e-posta seçin.';
        return false;
    },
    /* Tüm toplu işlemler buradan geçer: seçim doğrulanır, id'ler kopyalanır,
       istek başarılıysa seçim temizlenir, başarısızsa kullanıcıya bildirilir. */
    runBulk(action, ...extra) {
        this.pruneSelection();
        if (!this.ensureSelected()) return;
        const ids = this.selectedIds.slice();
        this.busy = true;
        this.notice = '';
        $wire[action](ids, ...extra)
            .then(() => this.clearSelection())
            .catch(() => { this.notice = 'İşlem tamamlanamadı, tekrar deneyin.'; })
            .finally(() => { this.busy = false; });
    },
    openPanel(panel) {
        this.sortOpen = false;
        if (!this.ensureSelected()) {
            this.linkOpen = false;
            this.companyOpen = false;
            return;
        }
        this.linkOpen = panel === 'link' ? !this.linkOpen : false;
        this.companyOpen = panel === 'company' ? !this.companyOpen : false;
        if (this.linkOpen) this.linkSearch = '';
        if (this.companyOpen) this.companySearch = '';
    },
    positionDropdown(btnEl, ddEl) {
        this.$nextTick(() => {
            let r = btnEl.getBoundingClientRect();
            ddEl.style.position = 'fixed';
            ddEl.style.top = (r.bottom + 4) + 'px';
            ddEl.style.left = Math.max(8, r.right - 224) + 'px';
            ddEl.style.zIndex = '50';
        });
    }
}"
    x-init="setTimeout(() => $wire.autoRefresh(), 5000)" @click.outside="linkOpen = false; companyOpen = false; sortOpen = false">
    {{-- GMAIL-STYLE CONTAINER --}}
    <div class="flex flex-col flex-[2] min-w-0 min-h-0 overflow-hidden bg-white border rounded-l-lg shadow-sm border-stone-200"
        style="max-width:100%">

        {{-- TOOLBAR --}}
        <div class="flex items-center gap-1 px-3 py-2 border-b border-stone-200">
            {{-- Select All --}}
            @if ($messages->count() > 0)
                <input type="checkbox" x-ref="selectAll" @click="toggleSelectAll($event)"
                    title="Tümünü seç / seçimi temizle"
                    class="rounded cursor-pointer border-stone-300 accent-stone-600">
            @endif

            {{-- Refresh (aynı zamanda 5 dakikada bir otomatik yeniler) --}}
            @if ($account && !$account->revoked_at)
                <button type="button" wire:click="refresh" wire:poll.300s="autoRefresh" wire:loading.attr="disabled"
                    wire:target="refresh"
                    class="flex items-center p-1.5 rounded-full cursor-pointer text-stone-500 hover:bg-stone-100 hover:text-stone-700"
                    title="Yenile">
                    <span class="text-[20px] leading-none material-symbols-rounded" wire:loading.remove
                        wire:target="refresh">refresh</span>
                    <span class="text-[20px] leading-none animate-spin material-symbols-rounded" wire:loading
                        wire:target="refresh">progress_activity</span>
                </button>
            @endif

            {{-- Arşivle --}}
            @if ($messages->count() > 0)
                <button type="button" @click="runBulk('bulkArchive')" :disabled="busy || selectedIds.length === 0"
                    title="Arşivle"
                    class="flex items-center p-1.5 rounded-full cursor-pointer text-stone-500 hover:bg-stone-100 hover:text-stone-700 disabled:cursor-not-allowed disabled:text-stone-300 disabled:hover:bg-transparent">
                    <span class="text-[20px] leading-none material-symbols-rounded">archive</span>
                </button>
            @endif

            {{-- Sil --}}
            @if ($messages->count() > 0)
                <button type="button" @click="runBulk('bulkDelete')" :disabled="busy || selectedIds.length === 0"
                    title="Sil"
                    class="flex items-center p-1.5 rounded-full cursor-pointer text-stone-500 hover:bg-stone-100 hover:text-stone-700 disabled:cursor-not-allowed disabled:text-stone-300 disabled:hover:bg-transparent">
                    <span class="text-[20px] leading-none material-symbols-rounded">delete</span>
                </button>
            @endif

            {{-- Okundu işaretle --}}
            @if ($messages->count() > 0)
                <button type="button" @click="runBulk('bulkMarkAsRead')" :disabled="busy || selectedIds.length === 0"
                    title="Okundu işaretle"
                    class="flex items-center p-1.5 rounded-full cursor-pointer text-stone-500 hover:bg-stone-100 hover:text-stone-700 disabled:cursor-not-allowed disabled:text-stone-300 disabled:hover:bg-transparent">
                    <span class="text-[20px] leading-none material-symbols-rounded">mark_email_read</span>
                </button>
            @endif

            {{-- Okunmadı işaretle --}}
            @if ($messages->count() > 0)
                <button type="button" @click="runBulk('bulkMarkAsUnread')" :disabled="busy || selectedIds.length === 0"
                    title="Okunmadı işaretle"
                    class="flex items-center p-1.5 rounded-full cursor-pointer text-stone-500 hover:bg-stone-100 hover:text-stone-700 disabled:cursor-not-allowed disabled:text-stone-300 disabled:hover:bg-transparent">
                    <span class="text-[20px] leading-none material-symbols-rounded">mark_email_unread</span>
                </button>
            @endif

            {{-- Göreve bağla (toolbar) --}}
            @if ($messages->count() > 0)
                <button type="button" @click="openPanel('link')" :disabled="busy || selectedIds.length === 0"
                    title="Göreve bağla"
                    class="flex items-center p-1.5 rounded-full cursor-pointer text-stone-500 hover:bg-stone-100 hover:text-stone-700 disabled:cursor-not-allowed disabled:text-stone-300 disabled:hover:bg-transparent">
                    <span class="text-[20px] leading-none material-symbols-rounded">checklist</span>
                </button>
            @endif

            {{-- Firma ile ilişkilendir (toolbar) --}}
            @if ($messages->count() > 0)
                <button type="button" @click="openPanel('company')" :disabled="busy || selectedIds.length === 0"
                    title="Firma ile ilişkilendir"
                    class="flex items-center p-1.5 rounded-full cursor-pointer text-stone-500 hover:bg-stone-100 hover:text-stone-700 disabled:cursor-not-allowed disabled:text-stone-300 disabled:hover:bg-transparent">
                    <span class="text-[20px] leading-none material-symbols-rounded">business</span>
                </button>
            @endif

            {{-- Three-dot menu: sıralama seçenekleri --}}
            <div class="relative">
                <button type="button"
                    @click="sortOpen = !sortOpen; linkOpen = false; companyOpen = false; if (sortOpen) positionDropdown($event.currentTarget, $refs.sortMenu)"
                    class="flex items-center p-1.5 rounded-full cursor-pointer text-stone-500 hover:bg-stone-100 hover:text-stone-700"
                    title="Sıralama">
                    <span class="text-[20px] leading-none material-symbols-rounded">more_vert</span>
                </button>
                <div x-ref="sortMenu" x-show="sortOpen" x-cloak @click.stop
                    class="w-56 py-1 bg-white border rounded-lg shadow-lg border-stone-200">
                    <button type="button" @click="$wire.setSort('unread'); sortOpen = false"
                        class="flex items-center w-full gap-2 px-3 py-1.5 text-xs text-left hover:bg-stone-100 {{ $sort === 'unread' ? 'font-semibold text-stone-900' : 'text-stone-700' }}">
                        <span
                            class="text-[16px] leading-none material-symbols-rounded {{ $sort === 'unread' ? 'text-indigo-600' : 'text-stone-300' }}">mark_email_unread</span>
                        Önce okunmamışlar
                        @if ($sort === 'unread')
                            <span
                                class="ml-auto text-[14px] leading-none text-indigo-600 material-symbols-rounded">check</span>
                        @endif
                    </button>
                    <button type="button" @click="$wire.setSort('date'); sortOpen = false"
                        class="flex items-center w-full gap-2 px-3 py-1.5 text-xs text-left hover:bg-stone-100 {{ $sort === 'date' ? 'font-semibold text-stone-900' : 'text-stone-700' }}">
                        <span
                            class="text-[16px] leading-none material-symbols-rounded {{ $sort === 'date' ? 'text-indigo-600' : 'text-stone-300' }}">schedule</span>
                        Tarih ve saat
                        @if ($sort === 'date')
                            <span
                                class="ml-auto text-[14px] leading-none text-indigo-600 material-symbols-rounded">check</span>
                        @endif
                    </button>
                </div>
            </div>

            {{-- Seçim durumu / uyarı --}}
            <span x-show="notice" x-cloak x-text="notice" class="ml-auto text-xs text-amber-600"></span>
            <span x-show="!notice && selectedIds.length > 0" x-cloak class="ml-auto text-xs text-stone-500"
                x-text="selectedIds.length + ' seçili'"></span>
        </div>

        {{-- GÖREVE BAĞLAMA PANELİ (toolbar altı) --}}
        @if ($messages->count() > 0)
            <div x-show="linkOpen" x-cloak class="px-3 py-2 border-b border-stone-200 bg-stone-50">
                <div class="flex items-center justify-between mb-1.5">
                    <span class="text-xs font-semibold text-stone-600">
                        Görev seç
                        <span x-show="selectedIds.length > 0" class="font-normal text-stone-400"
                            x-text="'(' + selectedIds.length + ' e-posta seçili)'"></span>
                    </span>
                    <button type="button" @click="linkOpen = false"
                        class="p-0.5 rounded cursor-pointer text-stone-400 hover:text-stone-600" title="Kapat">
                        <span class="text-[16px] leading-none material-symbols-rounded">close</span>
                    </button>
                </div>
                <input type="text" x-model="linkSearch"
                    class="w-full px-2 py-1.5 mb-1.5 text-xs border rounded border-stone-300 focus:outline-none focus:ring-1 focus:ring-indigo-400"
                    placeholder="Görev ara...">
                <div
                    class="overflow-y-auto bg-white border divide-y rounded max-h-40 border-stone-200 divide-stone-100">
                    <template x-for="task in filteredTasks" :key="task.id">
                        <button type="button"
                            @click="runBulk('bulkLinkToTask', task.id); linkOpen = false; linkSearch = ''"
                            class="flex items-center w-full gap-2 px-3 py-1.5 text-xs text-left hover:bg-stone-100 text-stone-700">
                            <span class="text-xs text-stone-400 material-symbols-rounded">task_alt</span>
                            <span class="truncate" x-text="task.title"></span>
                            <span class="ml-auto text-[10px] text-stone-400 shrink-0" x-text="task.date"></span>
                        </button>
                    </template>
                    <div x-show="filteredTasks.length === 0" class="px-3 py-2 text-xs text-stone-400">
                        Sonuç bulunamadı.
                    </div>
                </div>
            </div>
        @endif

        {{-- FİRMAYA BAĞLAMA PANELİ (toolbar altı) --}}
        @if ($messages->count() > 0)
            <div x-show="companyOpen" x-cloak class="px-3 py-2 border-b border-stone-200 bg-stone-50">
                <div class="flex items-center justify-between mb-1.5">
                    <span class="text-xs font-semibold text-stone-600">
                        Firma seç
                        <span x-show="selectedIds.length > 0" class="font-normal text-stone-400"
                            x-text="'(' + selectedIds.length + ' e-posta seçili)'"></span>
                    </span>
                    <button type="button" @click="companyOpen = false"
                        class="p-0.5 rounded cursor-pointer text-stone-400 hover:text-stone-600" title="Kapat">
                        <span class="text-[16px] leading-none material-symbols-rounded">close</span>
                    </button>
                </div>
                <input type="text" x-model="companySearch"
                    class="w-full px-2 py-1.5 mb-1.5 text-xs border rounded border-stone-300 focus:outline-none focus:ring-1 focus:ring-emerald-400"
                    placeholder="Firma ara...">
                <div
                    class="overflow-y-auto bg-white border divide-y rounded max-h-40 border-stone-200 divide-stone-100">
                    <template x-for="company in filteredCompanies" :key="company.id">
                        <button type="button"
                            @click="runBulk('bulkLinkToCompany', company.id); companyOpen = false; companySearch = ''"
                            class="flex items-center w-full gap-2 px-3 py-1.5 text-xs text-left hover:bg-stone-100 text-stone-700">
                            <span class="text-xs text-stone-400 material-symbols-rounded">business</span>
                            <span class="truncate" x-text="company.name"></span>
                        </button>
                    </template>
                    <div x-show="filteredCompanies.length === 0" class="px-3 py-2 text-xs text-stone-400">
                        Sonuç bulunamadı.
                    </div>
                </div>
            </div>
        @endif

        {{-- DENETİM UYARISI: Yenileme veya otomatik senkron (wire:poll → autoRefresh)
             sürerken gösterilir. Senkron tek bir request içinde başlayıp bittiği için
             $syncing asla true olarak render edilemez; gösterim client-side'dadır.
             Not: Livewire'ın gizleme CSS'i yalnızca tekil direktif adlarını kapsar
             ('wire:loading.block' güvenli, 'wire:loading.block.delay' değil); 'block'
             modifier'ı hem başlangıçta gizler hem de gösterimde satır genişliğini korur. --}}
        <div wire:loading.block wire:target="refresh,autoRefresh"
            class="px-3 py-1.5 text-xs text-amber-700 bg-amber-50 border-b border-amber-100">
            <div class="flex items-center gap-1.5">
                <span class="text-[16px] leading-none animate-spin material-symbols-rounded">progress_activity</span>
                <span>E-postalar denetleniyor, lütfen bekleyin...</span>
            </div>
        </div>

        {{-- STATUS MESSAGES: denetim sırasında önceki durum mesajı gizlenir --}}
        @if ($status)
            <div wire:loading.remove wire:target="refresh,autoRefresh"
                class="px-3 py-1.5 text-xs text-stone-500 bg-stone-50 border-b border-stone-100">{{ $status }}
            </div>
        @endif

        {{-- CONTENT AREA --}}
        <div class="flex-1 min-h-0 overflow-y-auto" style="max-width:100%">

            {{-- NO ACCOUNT --}}
            @if (!$account)
                <div class="p-4 text-sm text-center text-stone-500">
                    Gmail hesabını bağlayarak e-postaları göreve dönüştürebilirsin.
                    <a href="{{ route('google.connect') }}"
                        class="block mt-2 font-semibold text-blue-600 hover:underline">
                        Google ile bağlan
                    </a>
                </div>
            @elseif ($account->revoked_at)
                <div class="p-4 text-sm text-center text-stone-500">
                    Gmail bağlantısı geçersiz kılınmış. Yeniden bağlanmadıkça yeni e-posta gelmez.
                    <a href="{{ route('google.connect') }}"
                        class="block mt-2 font-semibold text-blue-600 hover:underline">
                        Yeniden bağlan
                    </a>
                </div>
            @endif

            {{-- EMPTY --}}
            @if ($account && $messages->isEmpty())
                <div class="p-4 text-sm text-center text-stone-400">
                    Görünecek e-posta yok. Yeni mesajlar için yenile.
                </div>
            @endif

            {{-- EMAIL LIST --}}
            @if ($messages->count() > 0)
                <div class="divide-y divide-stone-100">
                    @foreach ($messages as $message)
                        <div wire:key="email-{{ $message->id }}" draggable="true"
                            data-email-id="{{ $message->id }}"
                            x-on:dragstart="window.inboxDrag?.start($event, {{ $message->id }})"
                            x-on:dragend="window.inboxDrag?.end()" style="min-width:0;overflow:hidden;max-width:100%"
                            @click="$wire.openMessage({{ $message->id }})"
                            class="group cursor-pointer {{ $message->id === $selectedMessageId ? 'bg-indigo-50 hover:bg-indigo-100' : ($message->is_unread ? 'bg-white hover:bg-stone-50' : 'bg-stone-50 hover:bg-stone-100') }}"
                            title="{{ $message->from_name ?: $message->from_email }} · {{ $message->subject }}">

                            {{-- ROW LAYOUT --}}
                            <div class="flex items-start gap-2 px-3 py-2">
                                {{-- Checkbox: satır draggable olduğu için kontrol draggable="false"
                                    ile drag kaynağından çıkarılır; aksi halde tarayıcı
                                    tıklamayı drag'e çevirir ve seçim hiç çalışmaz. --}}
                                <div class="flex items-center pt-0.5 shrink-0" draggable="false" @mousedown.stop>
                                    <input type="checkbox" data-id="{{ $message->id }}" draggable="false"
                                        @mousedown.stop @click.stop="toggleSelect($event)"
                                        class="rounded cursor-pointer msg-checkbox border-stone-300 accent-stone-600">
                                </div>

                                {{-- Star --}}
                                <button type="button" draggable="false" @mousedown.stop
                                    @click.stop="notice = ''; $wire.toggleStar({{ $message->id }}).catch(() => { notice = 'Yıldız durumu kaydedilemedi, tekrar deneyin.'; })"
                                    wire:loading.attr="disabled" wire:target="toggleStar({{ $message->id }})"
                                    class="pt-0.5 shrink-0 cursor-pointer disabled:cursor-wait {{ $message->is_starred ? 'text-yellow-500' : 'text-stone-300 hover:text-yellow-500' }}"
                                    title="{{ $message->is_starred ? 'Yıldızı kaldır' : 'Yıldızla' }}"
                                    aria-label="{{ $message->is_starred ? 'Yıldızı kaldır' : 'Yıldızla' }}"
                                    aria-pressed="{{ $message->is_starred ? 'true' : 'false' }}">
                                    <svg class="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true"
                                        fill="{{ $message->is_starred ? 'currentColor' : 'none' }}"
                                        stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
                                        <path
                                            d="m12 3 2.78 5.63L21 9.54l-4.5 4.39L17.56 20 12 17.13 6.44 20l1.06-6.07L3 9.54l6.22-.91L12 3Z" />
                                    </svg>
                                </button>

                                {{-- Content --}}
                                <div class="flex-1 min-w-0">
                                    {{-- Sender + Date row --}}
                                    <div class="flex items-baseline justify-between gap-2">
                                        <span
                                            class="text-[13px] {{ $message->is_unread ? 'font-semibold text-stone-900' : 'text-stone-600' }} truncate">
                                            {{ $message->from_name ?: $message->from_email ?: 'Gmail' }}
                                        </span>
                                        @if ($message->received_at)
                                            <span
                                                class="shrink-0 text-[12px] {{ $message->is_unread ? 'font-semibold text-stone-900' : 'text-stone-400' }}">
                                                {{ $message->received_at->isToday() ? $message->received_at->format('H:i') : $message->received_at->format('d M') }}
                                            </span>
                                        @endif
                                    </div>

                                    {{-- Subject --}}
                                    <div
                                        class="text-[13px] {{ $message->is_unread ? 'font-semibold text-stone-900' : 'text-stone-600' }} truncate">
                                        {{ $message->subject ?: '(konu yok)' }}
                                    </div>

                                    {{-- Snippet --}}
                                    @if ($message->snippet)
                                        <div class="text-[12px] text-stone-400 truncate mt-0.5">
                                            {{ $message->snippet }}
                                        </div>
                                    @endif

                                    {{-- Matched tags --}}
                                    @if ($message->matched_emailable_type || $message->matched_company_id || $message->created_task_id)
                                        <div class="flex flex-wrap gap-1 mt-1">
                                            @php $matched = $message->matchedEmailable; @endphp
                                            @if ($matched instanceof \App\Models\Person)
                                                <span
                                                    class="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] rounded-full bg-stone-100 text-stone-500">
                                                    <span class="material-symbols-rounded text-[10px]">person</span>
                                                    {{ $matched->name }} {{ $matched->surname }}
                                                </span>
                                            @endif
                                            @if ($message->matchedCompany)
                                                <span
                                                    class="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] rounded-full bg-stone-100 text-stone-500">
                                                    <span class="material-symbols-rounded text-[10px]">business</span>
                                                    {{ $message->matchedCompany->shortname ?: $message->matchedCompany->name }}
                                                </span>
                                            @endif
                                            @if ($message->createdTask)
                                                <span
                                                    class="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] rounded-full bg-teal-50 text-teal-600"
                                                    title="Görev oluşturuldu: {{ $message->createdTask->title && $message->createdTask->title !== 'Görev' ? $message->createdTask->title : ($message->createdTask->note ?: '(başlıksız)') }}">
                                                    <span class="material-symbols-rounded text-[10px]">task_alt</span>
                                                    Görev oluşturuldu
                                                </span>
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            {{-- SYNC ERROR --}}
            @if ($account?->last_sync_error)
                <div class="px-3 py-2 text-xs text-red-500 border-t border-stone-100">
                    Son senkronda hata: {{ $account->last_sync_error }}
                </div>
            @endif

            {{-- DISCONNECT --}}
            @if ($account)
                <div class="px-3 py-2 text-right border-t border-stone-100">
                    <form method="POST" action="{{ route('google.disconnect') }}" class="inline"
                        onsubmit="return confirm('Gmail bağlantısı kaldırılsın mı?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-xs transition-colors text-stone-400 hover:text-red-500">
                            Bağlantıyı kaldır
                        </button>
                    </form>
                </div>
            @endif
        </div>
    </div>

    {{-- DETAIL PANE (sağdaki okuma bölmesi; her zaman açık, liste kart oranı 2:3) --}}
    <div wire:key="email-detail"
        class="relative flex flex-col flex-[4] min-w-0 min-h-0 border border-stone-200 bg-white">

        {{-- YÜKLENİYOR: e-posta gövdesi Gmail API'den çekilirken sağ bölmede gösterilir.
            Not: Livewire'ın gizleme CSS'i yalnızca 'wire:loading' / 'wire:loading.delay' gibi
            tekil direktif adlarını kapsar ('wire:loading.flex.delay' değil); bu yüzden esnek
            yerleşim iç div'de, gösterim/gizleme dış div'in kendi direktifiyle yönetilir. --}}
        <div wire:loading.delay wire:target="openMessage" class="absolute inset-0 z-10 bg-white/75">
            <div class="flex h-full flex-col items-center justify-center gap-1.5">
                <span
                    class="text-[28px] leading-none animate-spin text-stone-400 material-symbols-rounded">progress_activity</span>
                <span class="text-[12px] text-stone-400">Yükleniyor...</span>
            </div>
        </div>

        @if ($selectedMessage)

            {{-- ÜST BLOK: konu, gönderen, etiketler, işlemler --}}
            <div class="shrink-0 px-3 pt-2.5 pb-2 border-b border-stone-100">
                <div class="flex items-start justify-between gap-2">
                    <div class="text-[13px] font-semibold text-stone-900 leading-snug">
                        {{ $selectedMessage->subject ?: '(konu yok)' }}
                    </div>
                    {{-- X: seçimi sıfırlar ve tüm gelen kutusu panelini kapatır --}}
                    <button type="button" @click="$wire.closeMessage(); $dispatch('close-inbox')"
                        class="p-1 rounded-full shrink-0 text-stone-400 hover:text-stone-600 hover:bg-stone-100"
                        title="Kapat (listeye dön)">
                        <span class="text-[18px] leading-none material-symbols-rounded">close</span>
                    </button>
                </div>

                <div class="flex items-center gap-2 mt-1.5">
                    <span
                        class="flex items-center justify-center w-7 h-7 rounded-full shrink-0 bg-stone-100 text-[11px] font-semibold text-stone-500">
                        {{ mb_substr(trim($selectedMessage->from_name ?: $selectedMessage->from_email ?: '?'), 0, 1) }}
                    </span>
                    <div class="min-w-0">
                        <div class="text-[12px] font-medium text-stone-700 truncate">
                            {{ $selectedMessage->from_name ?: $selectedMessage->from_email ?: 'Gmail' }}
                        </div>
                        <div class="text-[11px] text-stone-400 truncate">
                            {{ $selectedMessage->from_email }}
                            @if ($selectedMessage->received_at)
                                · {{ $selectedMessage->received_at->format('d M Y H:i') }}
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Etiketler --}}
                @if (
                    $selectedMessage->matched_emailable_type ||
                        $selectedMessage->matched_company_id ||
                        $selectedMessage->created_task_id ||
                        $selectedMessage->linked_task_id)
                    <div class="flex flex-wrap gap-1 mt-2">
                        @php $matchedDetail = $selectedMessage->matchedEmailable; @endphp
                        @if ($matchedDetail instanceof \App\Models\Person)
                            <span
                                class="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] rounded-full bg-stone-100 text-stone-500">
                                <span class="material-symbols-rounded text-[10px]">person</span>
                                {{ $matchedDetail->name }} {{ $matchedDetail->surname }}
                            </span>
                        @endif
                        @if ($selectedMessage->matchedCompany)
                            <span
                                class="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] rounded-full bg-stone-100 text-stone-500">
                                <span class="material-symbols-rounded text-[10px]">business</span>
                                {{ $selectedMessage->matchedCompany->shortname ?: $selectedMessage->matchedCompany->name }}
                            </span>
                        @endif
                        @if ($selectedMessage->createdTask)
                            <span
                                class="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] rounded-full bg-teal-50 text-teal-600"
                                title="Görev oluşturuldu: {{ $selectedMessage->createdTask->title && $selectedMessage->createdTask->title !== 'Görev' ? $selectedMessage->createdTask->title : ($selectedMessage->createdTask->note ?: '(başlıksız)') }}">
                                <span class="material-symbols-rounded text-[10px]">task_alt</span>
                                Görev oluşturuldu
                            </span>
                        @endif
                        @if ($selectedMessage->linkedTask)
                            <span
                                class="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] rounded-full bg-indigo-50 text-indigo-600"
                                title="Bağlı görev: {{ $selectedMessage->linkedTask->note ?: '(başlıksız)' }}">
                                <span class="material-symbols-rounded text-[10px]">link</span>
                                Göreve bağlı
                            </span>
                        @endif
                    </div>
                @endif

                {{-- Hızlı işlemler --}}
                <div class="flex items-center gap-0.5 mt-2">
                    <button type="button" wire:click="bulkArchive([{{ $selectedMessage->id }}])"
                        class="p-1 rounded-full text-stone-400 hover:text-stone-700 hover:bg-stone-100"
                        title="Arşivle">
                        <span class="text-[18px] leading-none material-symbols-rounded">archive</span>
                    </button>
                    <button type="button" wire:click="bulkMarkAsUnread([{{ $selectedMessage->id }}])"
                        class="p-1 rounded-full text-stone-400 hover:text-stone-700 hover:bg-stone-100"
                        title="Okunmadı işaretle">
                        <span class="text-[18px] leading-none material-symbols-rounded">mark_email_unread</span>
                    </button>
                </div>

                {{-- AI hızlı işlemleri --}}
                <div class="p-2 mt-2 border rounded-md bg-stone-50 border-stone-200">
                    @if ($aiError)
                        <div class="flex items-center justify-between gap-2 text-xs text-red-600">
                            <span>{{ $aiError }}</span>
                            <button type="button" wire:click="analyzeSelectedMessage"
                                class="font-medium hover:underline">Tekrar dene</button>
                        </div>
                    @elseif ($aiAnalyzing)
                        <div class="flex items-center gap-1.5 text-xs text-stone-500">
                            <span
                                class="text-[16px] leading-none animate-spin material-symbols-rounded">progress_activity</span>
                            E-posta yorumlanıyor...
                        </div>
                    @elseif (!$aiAnalysis)
                        <button type="button" wire:click="analyzeSelectedMessage" wire:loading.attr="disabled"
                            wire:target="analyzeSelectedMessage"
                            class="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium text-indigo-700 bg-indigo-50 rounded hover:bg-indigo-100">
                            <span wire:loading.remove wire:target="analyzeSelectedMessage"
                                class="text-[16px] leading-none material-symbols-rounded">auto_awesome</span>
                            <span wire:loading wire:target="analyzeSelectedMessage"
                                class="text-[16px] leading-none animate-spin material-symbols-rounded">progress_activity</span>
                            <span wire:loading.remove wire:target="analyzeSelectedMessage">AI ile yorumla</span>
                            <span wire:loading wire:target="analyzeSelectedMessage">Yorumlanıyor...</span>
                        </button>
                    @else
                        <div class="flex items-start justify-between gap-2">
                            <div class="min-w-0">
                                <div class="text-[11px] font-semibold text-stone-600">AI önerisi</div>
                                @if ($aiAnalysis['reason'])
                                    <div class="mt-0.5 text-[11px] text-stone-500">{{ $aiAnalysis['reason'] }}</div>
                                @endif
                            </div>
                            <span class="shrink-0 text-[10px] text-stone-400">
                                {{ number_format($aiAnalysis['confidence'] * 100, 0) }}% güven
                            </span>
                        </div>

                        <div class="flex flex-wrap gap-1.5 mt-2">
                            @if ($aiAnalysis['company']['name'] || $companyCandidates || $selectedCompanyId)
                                <button type="button" wire:click="openCompanyForm"
                                    class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded text-emerald-700 bg-emerald-50 hover:bg-emerald-100">
                                    <span class="text-[15px] leading-none material-symbols-rounded">business</span>
                                    {{ $selectedCompanyId ? 'Firmayı değiştir' : 'Firma oluştur' }}
                                </button>
                            @endif

                            @if (in_array($aiAnalysis['intent'], ['invoice', 'receipt'], true))
                                <button type="button" wire:click="openInvoiceForm"
                                    class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded text-amber-700 bg-amber-50 hover:bg-amber-100">
                                    <span
                                        class="text-[15px] leading-none material-symbols-rounded">request_quote</span>
                                    Fiş/fatura oluştur
                                </button>
                            @endif
                        </div>

                        @if ($companyCandidates)
                            <div class="mt-2 text-[11px] text-stone-500">
                                <div class="mb-1 font-medium">Benzer firmalar</div>
                                <div class="flex flex-wrap gap-1">
                                    @foreach ($companyCandidates as $candidate)
                                        <button type="button" wire:click="selectCompany({{ $candidate['id'] }})"
                                            class="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] text-stone-600 bg-white border rounded hover:bg-stone-100 border-stone-200">
                                            {{ $candidate['name'] }}
                                            @if ($candidate['domain_match'])
                                                <span class="text-emerald-600">alan adı</span>
                                            @endif
                                        </button>
                                    @endforeach
                                </div>
                            </div>
                        @elseif ($selectedCompanyId)
                            <div class="mt-1 text-[11px] text-emerald-700">Mevcut firma eşleşmesi seçildi.</div>
                        @endif

                        @if ($showCompanyForm)
                            <div class="grid grid-cols-1 gap-1.5 mt-2 sm:grid-cols-3">
                                <input type="text" wire:model="companyName" placeholder="Firma adı"
                                    class="px-2 py-1 text-xs border rounded border-stone-300">
                                <input type="email" wire:model="companyEmail" placeholder="E-posta"
                                    class="px-2 py-1 text-xs border rounded border-stone-300">
                                <input type="text" wire:model="companyWebsite" placeholder="Web sitesi"
                                    class="px-2 py-1 text-xs border rounded border-stone-300">
                                @error('companyName')
                                    <span class="text-[10px] text-red-600">{{ $message }}</span>
                                @enderror
                                <button type="button" wire:click="createCompany"
                                    class="px-2 py-1 text-xs font-medium text-white rounded bg-emerald-600 hover:bg-emerald-700">
                                    Firma oluştur
                                </button>
                            </div>
                        @endif

                        @if ($showInvoiceForm)
                            @if (!$selectedCompanyId)
                                <div class="p-2 mt-2 text-xs rounded text-amber-700 bg-amber-50">
                                    Fiş/fatura oluşturmak için önce eşleşen bir firmayı seçin veya yeni firma oluşturun.
                                </div>
                            @else
                                <div class="grid grid-cols-2 gap-1.5 mt-2 sm:grid-cols-4">
                                    <select wire:model="invoiceType"
                                        class="px-2 py-1 text-xs border rounded border-stone-300">
                                        <option value="purchase_invoice">Alış faturası</option>
                                        <option value="purchase_receipt">Alış fişi</option>
                                        <option value="sales_invoice">Satış faturası</option>
                                        <option value="sales_receipt">Satış fişi</option>
                                    </select>
                                    <input type="text" wire:model="invoiceNumber" placeholder="Belge no"
                                        class="px-2 py-1 text-xs border rounded border-stone-300">
                                    <input type="date" wire:model="invoiceDate"
                                        class="px-2 py-1 text-xs border rounded border-stone-300">
                                    <input type="text" wire:model="invoiceTotalAmount" placeholder="Tutar"
                                        class="px-2 py-1 text-xs border rounded border-stone-300">
                                    <select wire:model="invoiceCurrency"
                                        class="px-2 py-1 text-xs border rounded border-stone-300">
                                        <option value="TRL">TRL</option>
                                        <option value="USD">USD</option>
                                        <option value="EUR">EUR</option>
                                    </select>
                                    <input type="date" wire:model="invoiceDueDate"
                                        class="px-2 py-1 text-xs border rounded border-stone-300">
                                    <input type="text" wire:model="invoiceNote" placeholder="Not"
                                        class="col-span-2 px-2 py-1 text-xs border rounded border-stone-300">
                                    <button type="button" wire:click="createInvoice"
                                        class="px-2 py-1 text-xs font-medium text-white rounded bg-amber-600 hover:bg-amber-700">
                                        Taslak oluştur
                                    </button>
                                </div>
                                @error('selectedCompanyId')
                                    <div class="mt-1 text-[10px] text-red-600">{{ $message }}</div>
                                @enderror
                                @error('invoiceTotalAmount')
                                    <div class="mt-1 text-[10px] text-red-600">{{ $message }}</div>
                                @enderror
                            @endif
                        @endif
                    @endif
                </div>
            </div>

            {{-- GÖVDE --}}
            @if ($selectedBodyHtml !== null)
                {{-- HTML gövde sandbox'lı iframe içinde gösterilir; e-posta script'leri çalışmaz. --}}
                <iframe class="flex-1 block w-full min-h-0 bg-white border-0" title="E-posta içeriği"
                    sandbox="allow-popups allow-popups-to-escape-sandbox" srcdoc="{{ $selectedBodyHtml }}"></iframe>
            @elseif ($selectedBodyText !== null)
                <div
                    class="flex-1 min-h-0 overflow-y-auto p-3 text-[13px] leading-relaxed text-stone-700 whitespace-pre-wrap">
                    {{ $selectedBodyText }}
                </div>
            @else
                <div class="flex-1 min-h-0 overflow-y-auto p-3 text-[13px] leading-relaxed text-stone-500">
                    {{ $selectedMessage->snippet ?: 'İçerik gösterilemiyor.' }}
                </div>
            @endif
        @else
            {{-- BOŞ DURUM: henüz mesaj seçilmedi --}}
            <div class="flex flex-col items-center justify-center flex-1 gap-1 p-4 text-center">
                <span class="text-[32px] text-stone-300 material-symbols-rounded">mail</span>
                <p class="text-[13px] text-stone-400">Okumak için listeden bir e-posta seçin.</p>
            </div>
        @endif
    </div>

    @script
        <script>
            window.inboxDrag = {
                emailId: null,

                start(event, emailId) {
                    this.emailId = emailId;

                    event.dataTransfer.effectAllowed = 'copy';
                    event.dataTransfer.setData('text/plain', 'gmail:' + emailId);

                    document.querySelectorAll('.drop-zone').forEach(zone => {
                        zone.classList.add('drop-zone-active');
                    });

                    window.showDragNotification?.('E-postayı bırakacağın güne taşı...', 'info');
                },

                end() {
                    this.emailId = null;

                    document.querySelectorAll('.drop-zone').forEach(zone => {
                        zone.classList.remove('drop-zone-active', 'drop-zone-hover');
                    });
                }
            };
        </script>
    @endscript
</div>