@php
    $tz = config('app.display_timezone');
    $myState = $myEmail === null ? __('No Workspace email') : ($myOptedOut ? __('Off for you') : ($on ? __('Read') : __('Not yet')));
    $cards = [
        ['label' => __('Gmail logging'), 'value' => $on ? __('On') : __('Off'), 'icon' => 'envelope', 'accent' => $on ? '#059669' : '#64748b', 'sub' => $on ? __('Since :date', ['date' => $onSince?->copy()->timezone($tz)->format('j M Y')]) : ($googleOn ? __('A director turns it on') : __('Google Workspace is off'))],
        ['label' => __('Your mailbox'), 'value' => $myState, 'icon' => 'user', 'accent' => '#4f46e5', 'sub' => $myAccount?->gmail_synced_at && ! $myOptedOut ? __('Read :when', ['when' => $myAccount->gmail_synced_at->diffForHumans()]) : ($myEmail ?? __('Not on :domain', ['domain' => $domain ?: __('the company domain')]))],
        ['label' => __('Filed in 7 days'), 'value' => number_format($filedWeek), 'icon' => 'inbox', 'accent' => '#0891b2', 'sub' => __('Across the team')],
        ['label' => __('Your private threads'), 'value' => $privateThreads->count(), 'icon' => 'lock-closed', 'accent' => '#7c3aed', 'sub' => __('Never filed')],
    ];
    $stateMeta = [
        'read' => ['label' => __('Read'), 'color' => 'emerald'],
        'error' => ['label' => __('Needs attention'), 'color' => 'rose'],
        'opted_out' => ['label' => __('Turned off by them'), 'color' => 'slate'],
        'off' => ['label' => __('Logging is off'), 'color' => 'slate'],
        'no_email' => ['label' => __('No Workspace email'), 'color' => 'amber'],
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        @include('livewire.crm.settings.partials.nav', ['current' => 'crm.settings.gmail'])

        <x-page-header :title="__('Gmail')" />

        <section class="grid grid-cols-2 gap-4 lg:grid-cols-4">
            @foreach ($cards as $m)
                <x-card class="group relative flex flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $m['label'] }}">{{ $m['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                            <x-icon :name="$m['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $m['value'] }}</p>
                    <span class="mt-2.5 inline-flex w-fit max-w-full items-center gap-1 truncate rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $m['sub'] }}</span>
                </x-card>
            @endforeach
        </section>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            {{-- Your mailbox --}}
            <x-card class="overflow-hidden !p-0">
                <div class="flex items-center gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-3">
                    <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700"><x-icon name="user" class="h-4 w-4" /></span>
                    <h2 class="text-sm font-bold text-slate-900">{{ __('Your mailbox') }}</h2>
                </div>
                <div class="space-y-4 p-5 text-sm text-slate-600">
                    @if ($myEmail === null)
                        <p>{{ __('You have no Workspace email on :domain, so nothing is read from your mail.', ['domain' => $domain ?: __('the company domain')]) }}</p>
                    @elseif ($myOptedOut)
                        <p>{{ __('You turned Gmail logging off for yourself. Nothing is read from :email. Turning it back on starts from that moment; nothing from the time it was off is filed.', ['email' => $myEmail]) }}</p>
                        <x-button type="button" wire:click="optIn" wire:loading.attr="disabled" wire:target="optIn">
                            <x-icon name="envelope" class="-ms-1 me-1.5 h-4 w-4" />
                            {{ __('Turn on for me') }}
                        </x-button>
                    @else
                        <p>
                            @if ($on)
                                {{ __('BillPro reads :email every few minutes and files emails with known contacts. You can keep any thread private from the list below.', ['email' => $myEmail]) }}
                            @else
                                {{ __('Gmail logging is off for the company, so nothing is read from :email yet.', ['email' => $myEmail]) }}
                            @endif
                        </p>
                        @if ($myAccount?->gmail_last_error && $on)
                            <div class="rounded-xl border border-rose-200 bg-rose-50 p-3 text-rose-800">
                                <p class="font-semibold">{{ __('Google refused the last attempt') }}</p>
                                <p class="mt-1 break-words text-xs">{{ $myAccount->gmail_last_error }}</p>
                            </div>
                        @endif
                        <x-secondary-button type="button" wire:click="optOut" wire:confirm="{{ __('Stop filing emails from your mailbox? Emails already filed stay on the organisations.') }}">
                            {{ __('Turn off for me') }}
                        </x-secondary-button>
                    @endif
                </div>
            </x-card>

            {{-- Company switch --}}
            <x-card class="overflow-hidden !p-0">
                <div class="flex items-center gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-3">
                    <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700"><x-icon name="building-office" class="h-4 w-4" /></span>
                    <h2 class="text-sm font-bold text-slate-900">{{ __('For the company') }}</h2>
                    <x-badge :color="$on ? 'emerald' : 'slate'">{{ $on ? __('On') : __('Off') }}</x-badge>
                </div>
                <div class="space-y-4 p-5 text-sm text-slate-600">
                    <p>{{ __('An email is filed only when someone else on it is a contact in the CRM, an organisation\'s own email address, or an address on an organisation\'s own domain (never a public one such as gmail.com). Each email is filed once, however many of the team were copied in. Attachments stay in Gmail.') }}</p>

                    @if ($canManage)
                        <div class="flex flex-wrap gap-3">
                            @if ($on)
                                <x-secondary-button type="button" wire:click="turnOff" wire:confirm="{{ __('Turn Gmail logging off for everyone? Emails already filed stay on the organisations.') }}">
                                    {{ __('Turn off') }}
                                </x-secondary-button>
                                @if ($errorCount > 0)
                                    <x-secondary-button type="button" wire:click="retryRefused">
                                        <x-icon name="arrow-path" class="-ms-1 me-1.5 h-4 w-4" />
                                        {{ __('Try refused mailboxes again') }}
                                    </x-secondary-button>
                                @endif
                            @elseif ($googleOn)
                                <x-button type="button" wire:click="turnOn" wire:loading.attr="disabled" wire:target="turnOn">
                                    <x-icon name="envelope" class="-ms-1 me-1.5 h-4 w-4" />
                                    {{ __('Turn on') }}
                                </x-button>
                            @else
                                <p class="text-xs text-slate-500">{{ __('Turn Google Workspace on first.') }}</p>
                            @endif
                        </div>
                    @endif
                </div>
            </x-card>
        </div>

        @if ($canManage)
            <x-card class="overflow-hidden !p-0">
                <div class="flex items-center gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-3">
                    <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700"><x-icon name="shield-check" class="h-4 w-4" /></span>
                    <h2 class="text-sm font-bold text-slate-900">{{ __('Setup for the Workspace admin') }}</h2>
                </div>
                <div class="grid grid-cols-1 gap-6 p-5 text-sm text-slate-600 lg:grid-cols-2">
                    <div class="space-y-2">
                        <p class="font-semibold text-slate-800">{{ __('1. In Google Cloud, enable the Gmail API') }}</p>
                        <p class="pt-2 font-semibold text-slate-800">{{ __('2. In the domain-wide delegation entry for BillPro, include for logging') }}</p>
                        <p class="break-all rounded-lg bg-slate-50 p-3 font-mono text-xs text-slate-800">{{ implode(',', $readScopes) }}</p>
                    </div>
                    <div class="space-y-2">
                        <p class="font-semibold text-slate-800">{{ __('3. For templates, sequences and campaigns sent from Gmail, also include') }}</p>
                        <p class="break-all rounded-lg bg-slate-50 p-3 font-mono text-xs text-slate-800">{{ implode(',', $sendScopes) }}</p>
                        <p class="text-xs text-slate-500">{{ __('Add them to the scopes already listed for Calendar and Meet; the entry keeps all of them, comma separated. A change in the Admin console can take a few hours to reach Google\'s servers.') }}</p>
                    </div>
                </div>
            </x-card>

            <x-card class="overflow-hidden">
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Mailboxes') }}</h2>
                        <p class="text-xs text-slate-400">{{ __(':read read, :errors needing attention. Private threads are never shown here.', ['read' => $readCount, 'errors' => $errorCount]) }}</p>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Person') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Workspace email') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Last read') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($mailboxes as $row)
                                <tr wire:key="mailbox-{{ $row['user']->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">{{ $row['user']->name }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $row['email'] ?? __('Not set') }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm">
                                        <x-badge :color="$stateMeta[$row['state']]['color']">{{ $stateMeta[$row['state']]['label'] }}</x-badge>
                                        @if ($row['state'] === 'error')
                                            <p class="mt-1 break-words text-xs text-rose-700">{{ $row['error'] }}</p>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $row['synced_at'] ? $row['synced_at']->copy()->timezone($tz)->format('j M Y H:i') : __('Not yet') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </x-card>
        @endif

        {{-- Filed from your mailbox --}}
        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Filed from your mailbox') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('The 25 most recent. Keeping a thread private removes what was filed from it and files nothing more from it.') }}</p>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Date') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Subject') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Filed on') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Direction') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($myFiled as $message)
                            <tr wire:key="filed-{{ $message->id }}" class="transition hover:bg-slate-50/70">
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $message->sent_at->copy()->timezone($tz)->format('j M Y H:i') }}</td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-900">
                                    <span class="font-medium">{{ $message->subject ?: __('(no subject)') }}</span>
                                    <span class="block text-xs text-slate-400">{{ $message->direction === 'outbound' ? __('To :to', ['to' => implode(', ', array_keys((array) $message->to))]) : __('From :from', ['from' => $message->from_name ?: $message->from_email]) }}</span>
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                    @if ($message->customer)
                                        <a href="{{ route('crm.organisations.show', $message->customer_id) }}" wire:navigate class="text-indigo-600 hover:text-indigo-800">{{ $message->customer->name }}</a>
                                    @endif
                                    @if ($message->opportunity)
                                        <span class="block text-xs text-slate-400">{{ $message->opportunity->title }}</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    <x-badge :color="$message->direction === 'outbound' ? 'indigo' : 'sky'">{{ __(\App\Models\Crm\EmailMessage::DIRECTIONS[$message->direction] ?? $message->direction) }}</x-badge>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-3">
                                        @if ($message->gmail_url)
                                            <a href="{{ $message->gmail_url }}" target="_blank" rel="noopener" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Open in Gmail') }}</a>
                                        @endif
                                        <button type="button" wire:click="keepPrivate({{ $message->id }})" wire:confirm="{{ __('Keep this thread private? Every email filed from it is removed from the CRM, and nothing more is filed from it.') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Keep private') }}</button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-6 py-12">
                                    <x-empty-state icon="inbox" :title="__('Nothing filed from your mailbox yet')"
                                        :message="__('Emails with known contacts appear here once Gmail logging is on.')" class="border-0 bg-transparent py-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @include('livewire.crm.partials.paginator', ['rows' => $myFiled])
        </x-card>

        @if ($privateThreads->isNotEmpty())
            <x-card class="overflow-hidden">
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Your private threads') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Only you see this list.') }}</p>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Subject') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Kept private on') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($privateThreads as $thread)
                                <tr wire:key="private-{{ $thread->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-900">{{ $thread->subject ?: __('(no subject)') }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $thread->created_at->copy()->timezone($tz)->format('j M Y') }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                        <button type="button" wire:click="allowAgain({{ $thread->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('File again') }}</button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @include('livewire.crm.partials.paginator', ['rows' => $privateThreads])
            </x-card>
        @endif
    </div>
</div>