@php
    $tabMeta = [
        'export' => ['label' => __('New export'), 'icon' => 'arrow-down-tray'],
        'saved' => ['label' => __('Saved exports'), 'icon' => 'book-open'],
    ];
    if ($canSeeLog) {
        $tabMeta['log'] = ['label' => __('Export log'), 'icon' => 'shield-check'];
    }
    $selectClass = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
    $tz = config('app.display_timezone');
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <div>
            <a href="{{ route('crm.data') }}" wire:navigate class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 transition hover:text-slate-700">
                <x-icon name="chevron-left" class="h-3.5 w-3.5" /> {{ __('Imports and Exports') }}
            </a>
        </div>

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

        <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
            @foreach ($tabMeta as $key => $meta)
                <button type="button" wire:click="switchTab('{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                    <x-icon :name="$meta['icon']" class="h-4 w-4" />
                    {{ $meta['label'] }}
                </button>
            @endforeach
        </div>

        @if ($tab === 'export')
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                <div class="space-y-6 lg:col-span-2">
                    {{-- What --}}
                    <x-card class="overflow-hidden !p-0">
                        <div class="flex items-center gap-2 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="queue-list" class="h-4 w-4" /></span>
                            <h2 class="text-sm font-bold text-slate-900">{{ __('What to export') }}</h2>
                        </div>
                        <div class="space-y-4 p-5">
                            <div class="flex flex-wrap gap-2">
                                @foreach ($datasets as $key => $label)
                                    <button type="button" wire:click="$set('dataset', '{{ $key }}')" wire:key="dataset-{{ $key }}"
                                        class="rounded-xl border px-3 py-1.5 text-sm font-medium transition {{ $dataset === $key ? 'border-indigo-400 bg-indigo-50 text-indigo-700 ring-2 ring-indigo-100' : 'border-slate-200 text-slate-600 hover:border-slate-300' }}">
                                        {{ __($label) }}
                                    </button>
                                @endforeach
                            </div>
                            <x-input-error for="dataset" class="mt-2" />

                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                @foreach ($filterMeta as $key => [$label, $kind])
                                    <div wire:key="filter-{{ $dataset }}-{{ $key }}">
                                        <x-label for="filter-{{ $key }}" value="{{ __($label) }}" />
                                        @if ($kind === 'date')
                                            <x-input id="filter-{{ $key }}" type="date" class="mt-1 block w-full" wire:model.live="filters.{{ $key }}" />
                                        @else
                                            <select id="filter-{{ $key }}" wire:model.live="filters.{{ $key }}" class="{{ $selectClass }}">
                                                <option value="">{{ __('Any') }}</option>
                                                @foreach ($choices[$kind] ?? [] as $value => $text)
                                                    <option value="{{ $value }}">{{ __($text) }}</option>
                                                @endforeach
                                            </select>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                            @if (array_filter($filters) !== [])
                                <button type="button" wire:click="clearFilters" class="text-xs font-medium text-indigo-600 transition hover:text-indigo-800">{{ __('Clear filters') }}</button>
                            @endif
                        </div>
                    </x-card>

                    {{-- Columns --}}
                    <x-card class="overflow-hidden !p-0">
                        <div class="flex items-center gap-2 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="table-cells" class="h-4 w-4" /></span>
                            <h2 class="text-sm font-bold text-slate-900">{{ __('Columns') }}</h2>
                        </div>
                        <div class="space-y-3 p-5">
                            <div class="flex flex-wrap gap-2">
                                @foreach ($available as $key => $column)
                                    @php $locked = $column['contact'] && ! $mayContacts; @endphp
                                    <label wire:key="column-{{ $dataset }}-{{ $key }}" title="{{ $locked ? __('Contact details in bulk are for directors only.') : '' }}"
                                        class="flex items-center gap-2 rounded-xl border px-3 py-1.5 text-sm transition {{ $locked ? 'cursor-not-allowed border-slate-100 bg-slate-50 text-slate-300' : 'cursor-pointer border-slate-200 text-slate-600 has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700' }}">
                                        <input type="checkbox" value="{{ $key }}" wire:model.live="columns" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" @disabled($locked)>
                                        {{ __($column['label']) }}
                                        @if ($column['contact'])
                                            <x-icon name="lock-closed" class="h-3.5 w-3.5" />
                                        @endif
                                    </label>
                                @endforeach
                            </div>
                            <x-input-error for="columns" class="mt-2" />
                            @if (! $mayContacts && collect($available)->contains('contact', true))
                                <p class="text-xs text-slate-400">{{ __('Columns with a lock carry contact details. Exporting those in bulk is for directors only.') }}</p>
                            @endif
                            @if (in_array($dataset, ['organisations', 'contacts'], true))
                                <p class="text-xs text-slate-400">{{ __('Column names match the client profile import template, so an exported list can be corrected and imported again.') }}</p>
                            @endif
                        </div>
                    </x-card>
                </div>

                {{-- Summary and download --}}
                <div class="space-y-6">
                    <x-card class="p-5">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Rows to export') }}</p>
                        <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ number_format($count) }}</p>
                        <p class="mt-2 text-xs text-slate-500">{{ $describe($dataset, $filters) }}</p>
                        @if ($withContacts)
                            <p class="mt-2 flex items-start gap-1.5 text-xs text-amber-700">
                                <x-icon name="information-circle" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
                                {{ __('Contact details are included, so anyone who withdrew marketing consent is left out.') }}
                            </p>
                        @endif

                        <div class="mt-4">
                            <x-label for="format" value="{{ __('Format') }}" />
                            <select id="format" wire:model="format" class="{{ $selectClass }}">
                                @foreach ($formats as $key => $label)
                                    <option value="{{ $key }}">{{ __($label) }}</option>
                                @endforeach
                            </select>
                            <x-input-error for="format" class="mt-2" />
                        </div>

                        <x-button type="button" class="mt-4 w-full justify-center" wire:click="download" wire:loading.attr="disabled" wire:target="download">
                            <x-icon name="arrow-down-tray" class="-ms-1 me-1.5 h-4 w-4" />
                            <span wire:loading.remove wire:target="download">{{ __('Export') }}</span>
                            <span wire:loading wire:target="download">{{ __('Preparing...') }}</span>
                        </x-button>
                        <p class="mt-2 text-xs text-slate-400">{{ __('An Excel file has an "About this export" sheet with the filters, who ran it and when, and the currency basis.') }}</p>
                    </x-card>

                    <x-card class="p-5">
                        <h3 class="text-sm font-semibold text-slate-900">{{ __('Save this selection') }}</h3>
                        <div class="mt-3">
                            <x-label for="saveName" value="{{ __('Name') }}" />
                            <x-input id="saveName" type="text" class="mt-1 block w-full" wire:model="saveName" placeholder="{{ __('For example: Tier 1 prospects in mining') }}" />
                            <x-input-error for="saveName" class="mt-2" />
                        </div>
                        <label class="mt-3 inline-flex items-center gap-2 text-sm text-slate-600">
                            <input type="checkbox" wire:model="saveShared" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                            {{ __('Share with the team') }}
                        </label>
                        <x-secondary-button type="button" class="mt-3 w-full justify-center" wire:click="saveView">
                            {{ __('Save selection') }}
                        </x-secondary-button>
                    </x-card>
                </div>
            </div>
        @elseif ($tab === 'saved')
            <x-card class="overflow-hidden">
                <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">{{ __('Name') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('List') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Filters') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Saved by') }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($saved as $view)
                                <tr wire:key="saved-{{ $view->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 py-4 text-sm font-medium text-slate-900 lg:px-4">
                                        {{ $view->name }}
                                        @if ($view->is_shared)
                                            <x-badge color="sky">{{ __('Shared') }}</x-badge>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">{{ __(\App\Models\Crm\ExportLog::DATASETS[$view->context] ?? $view->context) }}</td>
                                    <td class="px-3 py-4 text-sm text-slate-500 lg:px-4">{{ $describe($view->context, (array) $view->filters) }}</td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">{{ $view->user?->name }}</td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-medium lg:px-4">
                                        <div class="flex items-center justify-end gap-3">
                                            <button type="button" wire:click="loadView({{ $view->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Use') }}</button>
                                            @can('update', $view)
                                                <button type="button" wire:click="deleteView({{ $view->id }})" wire:confirm="{{ __('Delete this saved export?') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Delete') }}</button>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-12">
                                        <x-empty-state icon="book-open" :title="__('No saved exports')" :message="__('Set up an export, then save it by name to run it again with one click.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>
        @elseif ($tab === 'log' && $log)
            <x-card class="overflow-hidden">
                <div class="border-b border-slate-100 p-4 sm:p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Export log') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Every export of CRM data and every downloaded report. Nobody can change or remove a line.') }}</p>
                </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">{{ __('When') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Who') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('What') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Filters') }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Rows') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Format') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($log as $entry)
                                <tr wire:key="log-{{ $entry->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">{{ $entry->created_at?->setTimezone($tz)->format('j M Y H:i') }}</td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-900 lg:px-4">{{ $entry->user?->name ?? __('Scheduled delivery') }}</td>
                                    <td class="px-3 py-4 text-sm text-slate-700 lg:px-4">
                                        {{ __(\App\Models\Crm\ExportLog::DATASETS[$entry->dataset] ?? $entry->dataset) }}
                                        @if ($entry->includes_contact_details)
                                            <x-badge color="amber">{{ __('Contact details') }}</x-badge>
                                        @endif
                                    </td>
                                    <td class="px-3 py-4 text-sm text-slate-500 lg:px-4">
                                        @if ($entry->dataset === 'report')
                                            {{ app(\App\Services\Crm\Reports\ReportRegistry::class)->find($entry->filters['report'] ?? '')?->title ?? ($entry->filters['report'] ?? '') }}
                                        @else
                                            {{ in_array($entry->dataset, \App\Services\Crm\Reports\ExportCentre::DATASETS, true) ? $describe($entry->dataset, (array) $entry->filters) : '' }}
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums text-slate-900 lg:px-4">{{ number_format($entry->row_count) }}</td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">{{ __(\App\Models\Crm\ExportLog::FORMATS[$entry->format] ?? $entry->format) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-12">
                                        <x-empty-state icon="shield-check" :title="__('Nothing exported yet')" :message="__('Each export and report download will be listed here.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $log->links() }}
                </div>
            </x-card>
        @endif
    </div>
</div>