@php
    $tz = config('app.display_timezone');
    $cards = [
        ['label' => __('Status'), 'value' => $enabled ? __('On') : ($configured ? __('Off') : __('Not set up')), 'icon' => 'link', 'accent' => $enabled ? '#059669' : '#64748b', 'sub' => $enabled ? __('Meetings go to Google') : __('BillPro calendar only')],
        ['label' => __('Officers linked'), 'value' => $linkedCount, 'icon' => 'users', 'accent' => '#4f46e5', 'sub' => $domain !== '' ? '@'.$domain : __('No domain set')],
        ['label' => __('Needs attention'), 'value' => $attentionCount, 'icon' => 'exclamation-triangle', 'accent' => $attentionCount > 0 ? '#e11d48' : '#64748b', 'sub' => $attentionCount > 0 ? __('See the table') : __('Nothing failing')],
        ['label' => __('Upcoming in Google'), 'value' => $inGoogle, 'icon' => 'video-camera', 'accent' => '#0891b2', 'sub' => $lastSync ? __('Synced :when', ['when' => $lastSync->diffForHumans()]) : __('Not synced yet')],
    ];
    $stateMeta = [
        'linked' => ['label' => __('Linked'), 'color' => 'emerald'],
        'error' => ['label' => __('Needs attention'), 'color' => 'rose'],
        'off' => ['label' => __('Google 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">
        <x-page-header :title="__('Google Workspace')">
            @if ($canManage && $enabled)
                <x-secondary-button type="button" wire:click="test" wire:loading.attr="disabled" wire:target="test">
                    <x-icon name="shield-check" class="-ms-1 me-1.5 h-4 w-4" />
                    <span wire:loading.remove wire:target="test">{{ __('Test connection') }}</span>
                    <span wire:loading wire:target="test">{{ __('Testing…') }}</span>
                </x-secondary-button>
                <x-button type="button" wire:click="syncNow" wire:loading.attr="disabled" wire:target="syncNow">
                    <x-icon name="arrow-path" class="-ms-1 me-1.5 h-4 w-4" />
                    <span wire:loading.remove wire:target="syncNow">{{ __('Sync now') }}</span>
                    <span wire:loading wire:target="syncNow">{{ __('Syncing…') }}</span>
                </x-button>
            @endif
        </x-page-header>

        <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 items-center gap-1 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">
            {{-- The 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="calendar" class="h-4 w-4" /></span>
                    <h2 class="text-sm font-bold text-slate-900">{{ __('Calendar and Meet') }}</h2>
                </div>
                <div class="space-y-4 p-5 text-sm text-slate-600">
                    @if (! $configured)
                        <div class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-amber-800">
                            <p class="font-semibold">{{ __('The server is not set up for Google yet.') }}</p>
                            <p class="mt-1">{{ $problem }}</p>
                            <p class="mt-1">{{ __('Until it is, meetings are kept in BillPro only, which works as before.') }}</p>
                        </div>
                    @endif

                    <p>
                        @if ($enabled)
                            {{ __('On since :date. Each new meeting is checked against the organiser\'s free and busy times, then booked in their Google Calendar with a Meet link and an invitation to the client contact. A reschedule or cancellation in Google updates BillPro within a few minutes.', ['date' => $setting?->connected_at?->copy()->timezone($tz)->format('j M Y')]) }}
                        @else
                            {{ __('Off. Meetings are kept in BillPro only. Turning it on affects meetings booked or changed from then on; earlier meetings are not sent to Google.') }}
                        @endif
                    </p>

                    @if ($canManage)
                        <div class="flex flex-wrap gap-3">
                            @if ($enabled)
                                <x-secondary-button type="button" wire:click="turnOff" wire:confirm="{{ __('Turn Google Workspace off? Meetings already in Google stay there, but nothing is sent or read until it is turned on again.') }}">
                                    {{ __('Turn off') }}
                                </x-secondary-button>
                            @elseif ($configured)
                                <x-button type="button" wire:click="turnOn" wire:loading.attr="disabled" wire:target="turnOn">
                                    <x-icon name="link" class="-ms-1 me-1.5 h-4 w-4" />
                                    {{ __('Turn on') }}
                                </x-button>
                            @endif
                        </div>
                    @endif
                </div>
            </x-card>

            {{-- Gemini notes --}}
            <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="sparkles" class="h-4 w-4" /></span>
                    <h2 class="text-sm font-bold text-slate-900">{{ __('Gemini meeting notes') }}</h2>
                    <x-badge :color="$notesOn ? 'emerald' : 'slate'">{{ $notesOn ? __('On') : __('Off') }}</x-badge>
                </div>
                <div class="space-y-4 p-5 text-sm text-slate-600">
                    <p>{{ __('When the organiser uses "Take notes for me" in Meet, BillPro collects the notes after the meeting, files them on the meeting note as a draft, and the AI assistant proposes the needs, decisions, competitors and actions. Nothing counts until the officer reviews and confirms the note.') }}</p>
                    <p class="text-xs text-slate-500">{{ __('Needs a Google Workspace plan that includes Gemini notes in Meet (Business Starter does not), English only, Meet on a computer. In-person meetings are written up by hand as before.') }}</p>

                    @if ($canManage && $enabled)
                        <x-secondary-button type="button" wire:click="toggleNotes">
                            {{ $notesOn ? __('Turn notes intake off') : __('Turn notes intake on') }}
                        </x-secondary-button>
                    @elseif ($canManage)
                        <p class="text-xs text-slate-500">{{ __('Turn Google Workspace on first.') }}</p>
                    @endif
                </div>
            </x-card>
        </div>

        @if ($canManage)
            {{-- What the Workspace admin needs --}}
            <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 these APIs') }}</p>
                        <ul class="list-disc space-y-1 ps-5">
                            <li>{{ __('Google Calendar API') }}</li>
                            <li>{{ __('Google Meet REST API (for Gemini notes)') }}</li>
                            <li>{{ __('Google Drive API (for Gemini notes)') }}</li>
                        </ul>
                        <p class="pt-2 font-semibold text-slate-800">{{ __('2. In the Admin console, Security, API controls, Domain-wide delegation, add') }}</p>
                        <p>{{ __('Client ID') }}: <span class="font-mono text-slate-900">{{ $clientId ?? __('Not available until the key is installed') }}</span></p>
                    </div>
                    <div class="space-y-2">
                        <p class="font-semibold text-slate-800">{{ __('3. With these scopes, comma separated') }}</p>
                        <p class="break-all rounded-lg bg-slate-50 p-3 font-mono text-xs text-slate-800">{{ implode(',', $calendarScopes) }}</p>
                        <p class="text-xs text-slate-500">{{ __('Add these too only if Gemini notes will be used:') }}</p>
                        <p class="break-all rounded-lg bg-slate-50 p-3 font-mono text-xs text-slate-800">{{ implode(',', $notesScopes) }}</p>
                    </div>
                </div>
            </x-card>
        @endif

        {{-- Officers --}}
        <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">{{ $canManage ? __('Officers') : __('Your calendar') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('BillPro acts as each person\'s Workspace email. It starts as their sign-in email when that is on :domain; a director can change it, or clear it to keep that person on the BillPro calendar only.', ['domain' => $domain ?: __('the company domain')]) }}</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 py-3.5 lg:px-4">{{ __('Person') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Workspace email') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Status') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Last synced') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Last problem') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($rows as $row)
                            <tr wire:key="officer-{{ $row['user']->id }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 py-4 text-sm lg:px-4">
                                    <p class="font-medium text-slate-900">{{ $row['user']->name }}</p>
                                    <p class="text-xs text-slate-500">{{ __('Signs in as :email', ['email' => $row['user']->email]) }}</p>
                                </td>
                                <td class="px-3 py-4 text-sm lg:px-4">
                                    @if ($canManage)
                                        <form wire:submit="saveEmail({{ $row['user']->id }})" class="flex items-center gap-2">
                                            <x-input type="email" class="block w-full min-w-[14rem] text-sm" wire:model="emails.{{ $row['user']->id }}" placeholder="{{ __('name@:domain, or blank for off', ['domain' => $domain ?: 'company']) }}" />
                                            <x-secondary-button type="submit" wire:loading.attr="disabled" wire:target="saveEmail({{ $row['user']->id }})">{{ __('Save') }}</x-secondary-button>
                                        </form>
                                        <x-input-error for="emails.{{ $row['user']->id }}" class="mt-2" />
                                    @else
                                        <span class="text-slate-700">{{ $row['email'] ?? __('None, Google is off for you') }}</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                    <x-badge :color="$stateMeta[$row['state']]['color']">{{ $stateMeta[$row['state']]['label'] }}</x-badge>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">
                                    {{ $row['last_synced_at'] ? $row['last_synced_at']->copy()->timezone($tz)->format('j M Y H:i') : __('Not yet') }}
                                </td>
                                <td class="px-3 py-4 text-sm text-slate-500 lg:px-4">{{ $row['last_error'] ?? __('None') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-6 py-12">
                                    <x-empty-state icon="users" :title="__('Nobody to show')" :message="__('No team members yet.')" class="border-0 bg-transparent py-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-card>
    </div>
</div>