@php
    $tz = config('app.display_timezone');
    $tones = [
        'indigo' => 'bg-indigo-100 text-indigo-700',
        'emerald' => 'bg-emerald-100 text-emerald-700',
        'sky' => 'bg-sky-100 text-sky-700',
        'cyan' => 'bg-cyan-100 text-cyan-700',
        'violet' => 'bg-violet-100 text-violet-700',
        'orange' => 'bg-orange-100 text-orange-700',
    ];
    $statusColors = ['processing' => 'sky', 'completed' => 'emerald', 'failed' => 'rose', 'undone' => '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="__('Imports and Exports')" />

        @foreach ([__('Bring data in') => $imports, __('Take data out') => $exports] as $heading => $cards)
            @if ($cards !== [])
                <section class="space-y-3">
                    <h2 class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ $heading }}</h2>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach ($cards as $card)
                            <a href="{{ $card['route'] }}" wire:navigate class="group block">
                                <x-card class="flex h-full flex-col p-5 transition group-hover:-translate-y-0.5 group-hover:shadow-lg group-hover:shadow-slate-300/40">
                                    <div class="flex items-start justify-between gap-3">
                                        <span class="flex h-10 w-10 items-center justify-center rounded-xl {{ $tones[$card['tone']] ?? $tones['indigo'] }}">
                                            <x-icon :name="$card['icon']" class="h-5 w-5" />
                                        </span>
                                        @if ($card['tag'])
                                            <x-badge color="indigo">{{ $card['tag'] }}</x-badge>
                                        @endif
                                    </div>
                                    <h3 class="mt-4 text-base font-bold text-slate-900">{{ $card['title'] }}</h3>
                                    <p class="mt-1 flex-1 text-sm text-slate-500">{{ $card['text'] }}</p>
                                    <span class="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-indigo-600">
                                        {{ $card['action'] }} <x-icon name="arrow-right" class="h-4 w-4 transition group-hover:translate-x-0.5" />
                                    </span>
                                </x-card>
                            </a>
                        @endforeach
                    </div>
                </section>
            @endif
        @endforeach

        @if ($canImportProfiles)
            <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">{{ __('Recent client imports') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Every import is recorded: who, when, which file and what it did.') }}</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 lg:px-4 py-3.5">{{ __('When') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('File') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('By') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Portfolio') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Created') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Linked') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Failed') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($recent as $batch)
                                <tr wire:key="batch-{{ $batch->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $batch->created_at->timezone($tz)->format('j M Y') }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm">
                                        <a href="{{ route('crm.imports.show', $batch) }}" wire:navigate class="font-medium text-slate-900 hover:text-indigo-600">{{ $batch->file_name ?: __('Import') }}</a>
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $batch->user?->name ?? __('Not available') }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $batch->portfolio?->name ?? '-' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums font-semibold text-slate-900">{{ number_format($batch->created_count) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums text-slate-600">{{ number_format($batch->linked_count + $batch->updated_count) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums {{ $batch->failed_count > 0 ? 'font-semibold text-rose-600' : 'text-slate-600' }}">{{ number_format($batch->failed_count) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <x-badge :color="$statusColors[$batch->status] ?? 'slate'">{{ __(\App\Models\Crm\ImportBatch::STATUSES[$batch->status] ?? $batch->status) }}</x-badge>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="px-6 py-12">
                                        <x-empty-state icon="arrow-up-tray" :title="__('No client lists imported yet')" :message="__('Imports appear here with what each one created, linked and could not import.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @include('livewire.crm.partials.paginator', ['rows' => $recent])
            </x-card>
        @endif
    </div>
</div>