@extends('layouts.app')

@section('mobile-title', 'Document Centre')
@section('mobile-subtitle', 'Folders and company files')
@section('mobile-action-url', route('documents.upload.create'))
@section('mobile-action-icon', 'upload')
@section('mobile-action-label', 'Upload documents')

@section('content')
    @php
        $folderCount = $folders->total();
        $uploadFolder = $quickAccessFolders->first() ?? $folders->getCollection()->first();
        $fileIcon = function ($document) {
            $mime = $document->mime_type ?? '';
            $name = strtolower($document->original_name ?? '');

            return match (true) {
                str_contains($mime, 'pdf') || str_ends_with($name, '.pdf') => ['picture_as_pdf', 'text-red-700', 'PDF'],
                str_starts_with($mime, 'image/') => ['image', 'text-[var(--construct-secondary)]', 'IMG'],
                str_contains($mime, 'spreadsheet') || str_ends_with($name, '.csv') || str_ends_with($name, '.xlsx') => ['table_chart', 'text-emerald-800', 'XLS'],
                str_contains($mime, 'word') || str_ends_with($name, '.doc') || str_ends_with($name, '.docx') => ['description', 'text-[var(--construct-secondary)]', 'DOC'],
                str_contains($mime, 'message') || str_ends_with($name, '.eml') => ['mail', 'text-[var(--construct-secondary)]', 'EML'],
                default => ['draft', 'text-emerald-800', 'FILE'],
            };
        };
    @endphp

    <div class="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div>
            <h1 class="text-3xl font-bold">Document Centre</h1>
            <div class="mt-2 flex flex-wrap items-center gap-2 text-sm text-[var(--construct-muted)]">
                <a href="{{ route('documents.index') }}" class="font-semibold text-[var(--construct-primary-dark)]">Root</a>
                <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                <span>All company records</span>
            </div>
        </div>

        <div class="flex w-full flex-wrap gap-2 md:w-auto md:justify-end">
            @can('create', \App\Models\DocumentFolder::class)
                <a href="{{ route('documents.folders.create') }}" class="inline-flex flex-1 items-center justify-center gap-2 rounded border border-[var(--construct-border)] bg-white px-4 py-2 text-sm font-bold text-[var(--construct-text)] md:flex-none">
                    <span class="material-symbols-outlined text-[18px]">create_new_folder</span>
                    New Folder
                </a>
            @endcan
            @if ($uploadFolder)
                <a href="{{ route('documents.authored.create', ['folder_id' => $uploadFolder->id]) }}" class="inline-flex flex-1 items-center justify-center gap-2 rounded border border-[var(--construct-primary)] bg-white px-4 py-2 text-sm font-bold text-[var(--construct-primary-dark)] md:flex-none">
                    <span class="material-symbols-outlined text-[18px]">edit_document</span>
                    Create Document
                </a>
                <a href="{{ route('documents.upload.create', ['folder_id' => $uploadFolder->id]) }}" class="inline-flex flex-1 items-center justify-center gap-2 rounded bg-[var(--construct-primary)] px-4 py-2 text-sm font-bold text-white md:flex-none">
                    <span class="material-symbols-outlined text-[18px]">upload</span>
                    Upload
                </a>
            @endif
            @if (auth()->user()->isAdmin())
                <a href="{{ route('documents.compliance') }}" class="inline-flex flex-1 items-center justify-center gap-2 rounded border border-[var(--construct-border)] bg-white px-4 py-2 text-sm font-bold text-[var(--construct-text)] md:flex-none">
                    <span class="material-symbols-outlined text-[18px]">verified_user</span>
                    Compliance
                </a>
            @endif
            <div class="hidden items-center rounded border border-[var(--construct-border)] bg-[var(--construct-surface-low)] p-1 sm:flex">
                <button type="button" class="rounded bg-white p-1.5 text-[var(--construct-text)]" aria-label="Grid view">
                    <span class="material-symbols-outlined text-[18px]">grid_view</span>
                </button>
                <button type="button" class="rounded p-1.5 text-[var(--construct-muted)]" aria-label="List view">
                    <span class="material-symbols-outlined text-[18px]">format_list_bulleted</span>
                </button>
            </div>
        </div>
    </div>

    <section class="mb-6">
        <div class="mb-3 flex items-end justify-between gap-3">
            <div>
                <h2 class="text-lg font-bold">Quick Access Folders</h2>
                <p class="mt-1 text-sm text-[var(--construct-muted)]">{{ $folderCount }} folder{{ $folderCount === 1 ? '' : 's' }} available to you</p>
            </div>
        </div>

        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
            @forelse ($quickAccessFolders as $folder)
                <a href="{{ route('documents.folders.show', $folder) }}" class="group rounded border border-[var(--construct-border)] bg-white p-4 transition hover:border-[var(--construct-primary)] hover:bg-[var(--construct-surface-low)]">
                    <div class="mb-5 flex items-start justify-between gap-3">
                        <span class="material-symbols-outlined text-[34px] text-[var(--construct-secondary)] transition group-hover:text-[var(--construct-primary)]">folder_open</span>
                        <span class="material-symbols-outlined text-[18px] text-[var(--construct-muted)] opacity-0 transition group-hover:opacity-100">more_vert</span>
                    </div>
                    <div class="truncate text-sm font-bold text-[var(--construct-text)]">{{ $folder->name }}</div>
                    <div class="mt-1 text-sm text-[var(--construct-muted)]">{{ $folder->documents_count }} file{{ $folder->documents_count === 1 ? '' : 's' }}</div>
                    <div class="mt-3 truncate text-xs font-semibold text-[var(--construct-muted)]">{{ $folder->categoryLabel() }}</div>
                </a>
            @empty
                <div class="rounded border border-[var(--construct-border)] bg-white p-5 text-sm text-[var(--construct-muted)] sm:col-span-2 xl:col-span-5">
                    No document folders are available yet.
                </div>
            @endforelse
        </div>
    </section>

    <form method="GET" action="{{ route('documents.index') }}" class="mb-6 grid gap-3 rounded border border-[var(--construct-border)] bg-white p-4 lg:grid-cols-[1fr_220px_220px_auto_auto]">
        <input name="q" value="{{ request('q') }}" placeholder="Search folders and documents" class="rounded border border-zinc-300 px-3 py-2 text-sm">
        <select name="category" class="rounded border border-zinc-300 px-3 py-2 text-sm">
            <option value="">All categories</option>
            @foreach ($categories as $value => $label)
                <option value="{{ $value }}" @selected(request('category') === $value)>{{ $label }}</option>
            @endforeach
        </select>
        <select name="status" class="rounded border border-zinc-300 px-3 py-2 text-sm">
            <option value="">Active folders</option>
            <option value="archived" @selected(request('status') === 'archived')>Archived folders</option>
        </select>
        <button class="rounded bg-zinc-900 px-4 py-2 text-sm font-bold text-white">Filter</button>
        <a href="{{ route('documents.index') }}" class="rounded border border-zinc-300 px-4 py-2 text-center text-sm font-bold text-zinc-700">Reset</a>
    </form>

    @if ($expiringDocuments->isNotEmpty())
        <section class="mb-6 rounded border border-amber-200 bg-amber-50 p-4">
            <div class="flex items-center gap-2 text-sm font-bold text-amber-950">
                <span class="material-symbols-outlined text-[18px]">release_alert</span>
                Expiring documents
            </div>
            <div class="mt-3 grid gap-2 lg:grid-cols-2">
                @foreach ($expiringDocuments->take(8) as $document)
                    <a href="{{ route('documents.show', $document) }}" class="flex flex-col gap-1 rounded border border-amber-100 bg-white px-3 py-2 text-sm sm:flex-row sm:items-center sm:justify-between">
                        <span class="font-semibold text-zinc-900">{{ $document->title }}</span>
                        <span class="text-amber-800">{{ $document->folder->name }} · {{ $document->expires_at->format('M j, Y') }}</span>
                    </a>
                @endforeach
            </div>
        </section>
    @endif

    <section class="overflow-hidden rounded border border-[var(--construct-border)] bg-white">
        <div class="flex items-center justify-between border-b border-[var(--construct-border-soft)] bg-[var(--construct-surface-low)] px-4 py-3">
            <div>
                <h2 class="text-lg font-bold">Recent Files</h2>
                <p class="mt-1 text-sm text-[var(--construct-muted)]">Showing {{ $recentDocuments->count() }} of {{ $visibleDocumentCount }} visible files</p>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full text-left text-sm">
                <thead class="border-b border-[var(--construct-border)] bg-[var(--construct-surface-low)] text-xs font-bold uppercase text-[var(--construct-muted)]">
                    <tr>
                        <th class="px-5 py-3">Name</th>
                        <th class="px-5 py-3">Owner</th>
                        <th class="px-5 py-3">Modified date</th>
                        <th class="px-5 py-3">Size</th>
                        <th class="px-5 py-3">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[var(--construct-border-soft)]">
                    @forelse ($recentDocuments as $document)
                        @php
                            [$icon, $iconColor, $fileKind] = $fileIcon($document);
                        @endphp
                        <tr class="hover:bg-[var(--construct-surface-low)]">
                            <td class="min-w-[320px] px-5 py-4">
                                <a href="{{ route('documents.show', $document) }}" class="flex items-center gap-4">
                                    <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded border border-[var(--construct-border-soft)] bg-white {{ $iconColor }}">
                                        <span class="material-symbols-outlined text-[22px]">{{ $icon }}</span>
                                    </span>
                                    <span>
                                        <span class="block font-bold text-[var(--construct-text)]">{{ $document->title }}</span>
                                        <span class="mt-1 block text-xs font-semibold text-[var(--construct-muted)]">{{ $fileKind }} · {{ $document->folder->name }}</span>
                                    </span>
                                </a>
                            </td>
                            <td class="whitespace-nowrap px-5 py-4">
                                <div class="flex items-center gap-2">
                                    <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-[#94ccff] text-xs font-bold text-[#001d32]">{{ collect(explode(' ', $document->owner?->name ?? $document->uploader->name))->filter()->map(fn ($part) => substr($part, 0, 1))->take(2)->implode('') }}</span>
                                    <span class="text-[var(--construct-text)]">{{ $document->owner?->name ?? $document->uploader->name }}</span>
                                </div>
                            </td>
                            <td class="whitespace-nowrap px-5 py-4 text-[var(--construct-muted)]">{{ $document->updated_at->format('M j, Y') }}</td>
                            <td class="whitespace-nowrap px-5 py-4 text-[var(--construct-muted)]">{{ number_format($document->size / 1048576, 2) }} MB</td>
                            <td class="whitespace-nowrap px-5 py-4">@include('partials.status-badge', ['status' => $document->status])</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-5 py-10 text-sm text-[var(--construct-muted)]">No recent files are visible.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="flex items-center justify-between border-t border-[var(--construct-border-soft)] px-4 py-3 text-sm text-[var(--construct-muted)]">
            <span>Showing {{ $recentDocuments->count() }} of {{ $visibleDocumentCount }} files</span>
            <div class="flex gap-2">
                <span class="material-symbols-outlined text-[20px] text-[var(--construct-muted)]">chevron_left</span>
                <span class="material-symbols-outlined text-[20px] text-[var(--construct-text)]">chevron_right</span>
            </div>
        </div>
    </section>

    <section class="mt-6 overflow-hidden rounded border border-[var(--construct-border)] bg-white">
        <div class="border-b border-[var(--construct-border-soft)] bg-[var(--construct-surface-low)] px-4 py-3">
            <h2 class="text-lg font-bold">All Folders</h2>
        </div>
        <div class="divide-y divide-[var(--construct-border-soft)]">
            @forelse ($folders as $folder)
                <a href="{{ route('documents.folders.show', $folder) }}" class="grid gap-3 px-4 py-4 hover:bg-[var(--construct-surface-low)] lg:grid-cols-[1fr_auto_auto] lg:items-center">
                    <div class="flex min-w-0 items-center gap-3">
                        <span class="material-symbols-outlined shrink-0 text-[28px] text-[var(--construct-secondary)]">folder_open</span>
                        <span class="min-w-0">
                            <span class="block truncate font-bold">{{ $folder->name }}</span>
                            <span class="mt-1 block text-sm text-[var(--construct-muted)]">
                                {{ $folder->categoryLabel() }}
                                @if ($folder->parent)
                                    · Inside {{ $folder->parent->name }}
                                @endif
                                @if ($folder->owner)
                                    · Owner {{ $folder->owner->name }}
                                @endif
                                @if ($folder->project)
                                    · {{ $folder->project->name }}
                                @endif
                                · {{ $folder->documents_count }} file{{ $folder->documents_count === 1 ? '' : 's' }}
                            </span>
                        </span>
                    </div>
                    <div class="text-sm text-[var(--construct-muted)]">{{ $folder->updated_at->diffForHumans() }}</div>
                    @include('partials.status-badge', ['status' => $folder->archived_at ? 'archived' : 'active'])
                </a>
            @empty
                <div class="px-4 py-8 text-sm text-[var(--construct-muted)]">No document folders available.</div>
            @endforelse
        </div>
    </section>

    <div class="mt-5">{{ $folders->links() }}</div>
@endsection