@php
    use App\Services\Reports\ReportCatalog;
    use App\Services\Reports\ReportDefinition;
    $typeBadge = ['tabular' => ['Tabular', 'badge-gray', 'heroicon-m-table-cells'], 'summary' => ['Summary', 'badge-blue', 'heroicon-m-chart-pie'], 'matrix' => ['Matrix', 'badge-violet', 'heroicon-m-squares-2x2']];
    $folderName = ctype_digit($currentFolder) ? optional($folders->firstWhere('folder_id', (int) $currentFolder))->folder_name : null;
    $heading = $currentFolder === 'none' ? 'Unfiled reports' : ($folderName ?? 'All reports');
@endphp
<x-layouts.app title="Reports" subtitle="Build tabular, summary and matrix reports on CRM data — with totals, charts and CSV export."
               :breadcrumbs="['Reports' => null]">
    <x-slot:actions>
        <button type="button" class="btn btn-secondary" @click="$dispatch('open-modal', 'folder-create')"><x-heroicon-m-folder-plus class="h-4 w-4" /> New folder</button>
        <a href="{{ route('reports.create', ctype_digit($currentFolder) ? ['folder' => $currentFolder] : []) }}" class="btn btn-brand"><x-heroicon-m-plus class="h-4 w-4" /> New report</a>
    </x-slot:actions>

    <div class="grid gap-6 lg:grid-cols-[260px_minmax(0,1fr)]">
        {{-- Folders --}}
        <aside class="space-y-3">
            <div class="card p-2">
                <div class="px-3 pt-2 pb-1 text-[10px] font-semibold tracking-[0.14em] text-ink-400 uppercase">Folders</div>
                <nav class="space-y-0.5">
                    @php
                        $folderLink = fn ($f) => route('reports.index', array_filter(['folder' => $f, 'q' => request('q'), 'type' => request('type'), 'module' => request('module')]));
                        $itemClass = fn ($active) => 'group flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm transition '.($active ? 'bg-brand-50 font-semibold text-ink-900 ring-1 ring-brand-200 dark:bg-brand-500/10 dark:text-white dark:ring-brand-500/30' : 'text-ink-600 hover:bg-ink-50 dark:text-ink-300 dark:hover:bg-ink-800');
                    @endphp
                    <a href="{{ $folderLink(null) }}" class="{{ $itemClass($currentFolder === '') }}">
                        <x-heroicon-o-rectangle-stack class="h-4 w-4 shrink-0 text-ink-400" />
                        <span class="flex-1 truncate">All reports</span>
                        <span class="text-xs tabular-nums text-ink-400">{{ $total }}</span>
                    </a>
                    @foreach ($folders as $f)
                        <div class="relative" x-data="{ menu: false }">
                            <a href="{{ $folderLink($f->folder_id) }}" class="{{ $itemClass($currentFolder === (string) $f->folder_id) }} pr-9">
                                <x-heroicon-o-folder class="h-4 w-4 shrink-0 text-brand-500" />
                                <span class="flex-1 truncate">{{ $f->folder_name }}</span>
                                <span class="text-xs tabular-nums text-ink-400">{{ $counts[$f->folder_id] ?? 0 }}</span>
                            </a>
                            <button type="button" class="btn-icon absolute top-1/2 right-1 h-7 w-7 -translate-y-1/2" @click="menu = !menu" @click.outside="menu = false" aria-label="Folder actions">
                                <x-heroicon-m-ellipsis-vertical class="h-4 w-4" />
                            </button>
                            <div x-cloak x-show="menu" x-transition.origin.top.right class="absolute right-0 z-20 mt-1 w-44 overflow-hidden rounded-xl border border-ink-200 bg-white p-1 shadow-xl dark:border-ink-700 dark:bg-ink-900">
                                <button type="button" class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-ink-700 hover:bg-ink-100 dark:text-ink-200 dark:hover:bg-ink-800"
                                        @click="menu = false; $dispatch('open-modal', 'folder-rename-{{ $f->folder_id }}')">
                                    <x-heroicon-o-pencil class="h-4 w-4" /> Rename
                                </button>
                                <form method="POST" action="{{ route('reports.folders.destroy', $f) }}"
                                      x-data="confirmSubmit(@js('Delete folder "'.$f->folder_name.'"? Its reports are kept and moved to Unfiled.'))" @submit="submit">
                                    @csrf @method('DELETE')
                                    <button class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-500/10">
                                        <x-heroicon-o-trash class="h-4 w-4" /> Delete
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                    <a href="{{ $folderLink('none') }}" class="{{ $itemClass($currentFolder === 'none') }}">
                        <x-heroicon-o-inbox class="h-4 w-4 shrink-0 text-ink-400" />
                        <span class="flex-1 truncate">Unfiled</span>
                        <span class="text-xs tabular-nums text-ink-400">{{ $unfiled }}</span>
                    </a>
                </nav>
            </div>
            <button type="button" class="btn btn-ghost w-full justify-start" @click="$dispatch('open-modal', 'folder-create')">
                <x-heroicon-m-plus class="h-4 w-4" /> Create folder
            </button>
        </aside>

        {{-- Reports --}}
        <x-card :padded="false">
            <div class="flex flex-wrap items-center justify-between gap-3 border-b border-ink-100 px-5 pt-4 dark:border-ink-800">
                <div class="flex items-center gap-2 pb-1">
                    <x-heroicon-o-folder-open class="h-5 w-5 text-brand-500" />
                    <h2 class="text-base font-semibold text-ink-900 dark:text-white">{{ $heading }}</h2>
                    <span class="badge badge-gray">{{ number_format($reports->total()) }}</span>
                </div>
            </div>
            <div class="border-b border-ink-100 p-4 dark:border-ink-800">
                <x-filter-bar placeholder="Search report name or description…">
                    @if ($currentFolder !== '')<input type="hidden" name="folder" value="{{ $currentFolder }}">@endif
                    <x-select name="type" :options="['tabular' => 'Tabular', 'summary' => 'Summary', 'matrix' => 'Matrix']" :value="request('type')" placeholder="Any type" class="w-36" />
                    <x-select name="module" :options="$modules" :value="request('module')" placeholder="Any module" class="w-44" />
                </x-filter-bar>
            </div>

            @if ($reports->isEmpty())
                <x-empty-state title="No reports here yet" message="Create a report to analyse loan data, activities, contacts or quotations." icon="heroicon-o-chart-bar">
                    <a href="{{ route('reports.create', ctype_digit($currentFolder) ? ['folder' => $currentFolder] : []) }}" class="btn btn-brand"><x-heroicon-m-plus class="h-4 w-4" /> New report</a>
                </x-empty-state>
            @else
                <div class="table-wrap">
                    <table class="table">
                        <thead>
                        <tr>
                            <th><x-sort-link column="name" label="Report" /></th>
                            <th><x-sort-link column="type" label="Type" /></th>
                            <th>Module</th>
                            <th>Folder</th>
                            <th><x-sort-link column="created" label="Created" /></th>
                            <th><x-sort-link column="updated" label="Updated" /></th>
                            <th class="text-right">Actions</th>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                        @foreach ($reports as $r)
                            @php
                                [$tLabel, $tBadge, $tIcon] = $typeBadge[$r->type_key];
                                [$primary, $related] = ReportCatalog::resolveModules(ReportDefinition::csv($r->module_name));
                            @endphp
                            <tr>
                                <td class="max-w-md !whitespace-normal">
                                    <a href="{{ route('reports.show', $r) }}" class="group flex items-start gap-3">
                                        <span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-600 ring-1 ring-brand-100 dark:bg-brand-500/10 dark:ring-brand-500/20">
                                            <x-dynamic-component :component="$tIcon" class="h-4 w-4" />
                                        </span>
                                        <span class="min-w-0">
                                            <span class="block font-medium text-ink-900 group-hover:text-brand-700 dark:text-white">{{ $r->display_name }}</span>
                                            @if ($r->report_desc)<span class="line-clamp-1 text-xs text-ink-500">{{ $r->report_desc }}</span>@endif
                                        </span>
                                    </a>
                                </td>
                                <td><span class="badge {{ $tBadge }}">{{ $tLabel }}</span></td>
                                <td>
                                    @if ($primary)
                                        <span class="text-ink-700 dark:text-ink-200">{{ ReportCatalog::moduleLabel($primary) }}</span>
                                        @if ($related)<span class="text-xs text-ink-400">+ {{ collect($related)->map(fn ($m) => ReportCatalog::moduleLabel($m))->join(', ') }}</span>@endif
                                    @else
                                        <span class="badge badge-red">Not set</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($r->folder)
                                        <a href="{{ route('reports.index', ['folder' => $r->folder_id]) }}" class="inline-flex items-center gap-1 text-ink-600 hover:text-ink-900 dark:text-ink-300"><x-heroicon-m-folder class="h-3.5 w-3.5 text-brand-500" />{{ $r->folder->folder_name }}</a>
                                    @else
                                        <span class="text-ink-400">Unfiled</span>
                                    @endif
                                </td>
                                <td class="text-ink-500">
                                    <div>{{ $r->created_at?->format('d-m-Y') ?? '—' }}</div>
                                    @if ($r->creator)<div class="text-xs text-ink-400">{{ $r->creator->name }}</div>@endif
                                </td>
                                <td class="text-ink-500">
                                    <div title="{{ $r->updated_at?->format('d-m-Y H:i') }}">{{ $r->updated_at?->diffForHumans() ?? '—' }}</div>
                                    @if ($r->editor)<div class="text-xs text-ink-400">{{ $r->editor->name }}</div>@endif
                                </td>
                                <td class="text-right">
                                    <div class="inline-flex items-center gap-1">
                                        <a href="{{ route('reports.show', $r) }}" class="btn-icon" title="Run report"><x-heroicon-o-play class="h-4 w-4" /></a>
                                        <a href="{{ route('reports.edit', $r) }}" class="btn-icon" title="Edit"><x-heroicon-o-pencil-square class="h-4 w-4" /></a>
                                        <form method="POST" action="{{ route('reports.duplicate', $r) }}">
                                            @csrf
                                            <button class="btn-icon" title="Duplicate"><x-heroicon-o-document-duplicate class="h-4 w-4" /></button>
                                        </form>
                                        <form method="POST" action="{{ route('reports.destroy', $r) }}" x-data="confirmSubmit(@js('Delete report "'.$r->display_name.'"? Its filters and chart are deleted too.'))" @submit="submit">
                                            @csrf @method('DELETE')
                                            <button class="btn-icon hover:!bg-rose-50 hover:!text-rose-600" title="Delete"><x-heroicon-o-trash class="h-4 w-4" /></button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
                <x-pagination-bar :paginator="$reports" />
            @endif
        </x-card>
    </div>

    {{-- Folder modals --}}
    <x-modal name="folder-create" title="New folder" maxWidth="md" :show="$errors->has('folder_name')">
        <form method="POST" action="{{ route('reports.folders.store') }}" class="space-y-4">
            @csrf
            <x-input name="folder_name" label="Folder name" required maxlength="100" autofocus />
            <p class="form-hint">Folders are visible to every Admin and Manager.</p>
            <div class="flex justify-end gap-2">
                <button type="button" class="btn btn-secondary" @click="$dispatch('close-modal', 'folder-create')">Cancel</button>
                <button class="btn btn-brand">Create folder</button>
            </div>
        </form>
    </x-modal>
    @foreach ($folders as $f)
        <x-modal name="folder-rename-{{ $f->folder_id }}" title="Rename folder" maxWidth="md">
            <form method="POST" action="{{ route('reports.folders.update', $f) }}" class="space-y-4">
                @csrf @method('PUT')
                <div>
                    <label class="form-label" for="folder_name_{{ $f->folder_id }}">Folder name</label>
                    <input id="folder_name_{{ $f->folder_id }}" name="folder_name" value="{{ $f->folder_name }}" required maxlength="100" class="form-input">
                </div>
                <div class="flex justify-end gap-2">
                    <button type="button" class="btn btn-secondary" @click="$dispatch('close-modal', 'folder-rename-{{ $f->folder_id }}')">Cancel</button>
                    <button class="btn btn-brand">Save</button>
                </div>
            </form>
        </x-modal>
    @endforeach
</x-layouts.app>