@extends('layouts.app')

@section('mobile-title', $folder->name)
@section('mobile-subtitle', 'Folder contents')
@section('mobile-back', $folder->parent_id ? route('documents.folders.show', $folder->parent_id) : route('documents.index'))
@section('mobile-action-url', route('documents.upload.create', ['folder_id' => $folder->id]))
@section('mobile-action-icon', 'upload')
@section('mobile-action-label', 'Upload')

@section('content')
    @php
        $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', 'bg-red-50'],
                str_starts_with($mime, 'image/') => ['image', 'text-[var(--construct-secondary)]', 'bg-[#e3f2ff]'],
                str_contains($mime, 'spreadsheet') || str_ends_with($name, '.csv') || str_ends_with($name, '.xlsx') => ['table_chart', 'text-emerald-800', 'bg-emerald-50'],
                str_contains($mime, 'word') || str_ends_with($name, '.doc') || str_ends_with($name, '.docx') => ['description', 'text-[var(--construct-secondary)]', 'bg-[#e3f2ff]'],
                str_contains($mime, 'message') || str_ends_with($name, '.eml') => ['mail', 'text-[var(--construct-secondary)]', 'bg-[#e3f2ff]'],
                default => ['draft', 'text-[var(--construct-muted)]', 'bg-[var(--construct-surface-container)]'],
            };
        };
        $humanSize = fn ($bytes) => $bytes >= 1048576 ? number_format($bytes / 1048576, 1).' MB' : number_format(max($bytes, 1) / 1024, 1).' KB';
        $totalBytes = $folderDocumentStats['bytes'] ?? 0;
        $lastUpdated = $folderDocumentStats['updated_at'] ? \Illuminate\Support\Carbon::parse($folderDocumentStats['updated_at']) : $folder->updated_at;
        $recentActivity = $documents->getCollection()
            ->sortByDesc('updated_at')
            ->take(3)
            ->values();
        $shareActivity = $documents->getCollection()
            ->flatMap(fn ($document) => $document->shares->flatMap(fn ($share) => $shareAuditLogs->get($share->id, collect())))
            ->sortByDesc('created_at')
            ->take(4)
            ->values();
    @endphp

    <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div>
            <div class="mb-3 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>
                @if ($folder->project)
                    <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                    <span>{{ $folder->project->name }}</span>
                @endif
                @if ($folder->parent)
                    <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                    <a href="{{ route('documents.folders.show', $folder->parent) }}" class="font-semibold text-[var(--construct-primary-dark)]">{{ $folder->parent->name }}</a>
                @endif
                <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                <span>{{ $folder->name }}</span>
            </div>
            <div class="flex items-center gap-3">
                <span class="material-symbols-outlined text-[32px] text-[var(--construct-primary-dark)]">folder_open</span>
                <h1 class="text-3xl font-bold">{{ $folder->name }}</h1>
            </div>
            <p class="mt-2 text-sm text-[var(--construct-muted)]">
                {{ $folderDocumentStats['documents'] ?? $documents->total() }} document{{ ($folderDocumentStats['documents'] ?? $documents->total()) === 1 ? '' : 's' }}
                · {{ $humanSize($totalBytes) }}
                · Last updated {{ $lastUpdated->diffForHumans() }}
            </p>
        </div>

        <div class="flex flex-wrap gap-2">
            @can('update', $folder)
                <a href="{{ route('documents.folders.children.create', $folder) }}" class="inline-flex items-center gap-2 rounded border border-[var(--construct-border)] bg-white px-4 py-2 text-sm font-bold text-[var(--construct-text)]">
                    <span class="material-symbols-outlined text-[18px]">create_new_folder</span>
                    New Sub-folder
                </a>
            @endcan
            @can('upload', $folder)
                <a href="{{ route('documents.authored.create', ['folder_id' => $folder->id]) }}" class="inline-flex items-center gap-2 rounded border border-[var(--construct-primary)] bg-white px-4 py-2 text-sm font-bold text-[var(--construct-primary-dark)]">
                    <span class="material-symbols-outlined text-[18px]">edit_document</span>
                    Create Document
                </a>
                <a href="{{ route('documents.upload.create', ['folder_id' => $folder->id]) }}" class="inline-flex items-center gap-2 rounded bg-[var(--construct-primary)] px-4 py-2 text-sm font-bold text-white">
                    <span class="material-symbols-outlined text-[18px]">upload</span>
                    Upload Documents
                </a>
            @endcan
        </div>
    </div>

    @if ($folder->description)
        <div class="mb-5 rounded border border-[var(--construct-border)] bg-white px-4 py-3 text-sm text-[var(--construct-muted)]">{{ $folder->description }}</div>
    @endif

    <form method="GET" action="{{ route('documents.folders.show', $folder) }}" class="mb-6 rounded border border-[var(--construct-border)] bg-white p-4">
        <div class="grid gap-3 lg:grid-cols-[minmax(220px,1fr)_180px_180px_auto_auto]">
            <label class="relative">
                <span class="material-symbols-outlined pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[18px] text-[var(--construct-muted)]">filter_list</span>
                <input name="q" value="{{ request('q') }}" placeholder="Filter current folder..." class="w-full rounded border border-[var(--construct-border)] bg-white py-2 pl-10 pr-3 text-sm">
            </label>
            <select name="expiry" class="rounded border border-[var(--construct-border)] px-3 py-2 text-sm">
                <option value="">Any Date</option>
                <option value="soon" @selected(request('expiry') === 'soon')>Expiring soon</option>
                <option value="expired" @selected(request('expiry') === 'expired')>Expired</option>
            </select>
            <input name="document_type" value="{{ request('document_type') }}" placeholder="All File Types" class="rounded border border-[var(--construct-border)] px-3 py-2 text-sm">
            @can('update', $folder)
                <label class="flex items-center gap-2 rounded border border-[var(--construct-border)] px-3 py-2 text-sm font-semibold">
                    <input type="checkbox" name="archived" value="1" @checked(request()->boolean('archived')) class="rounded border-zinc-300 text-[var(--construct-primary)]">
                    Archived
                </label>
            @endcan
            <button class="rounded bg-zinc-900 px-4 py-2 text-sm font-bold text-white">Filter</button>
        </div>
    </form>

    @if ($documents->isNotEmpty())
        <form id="document-bulk-form" method="POST" action="{{ route('documents.bulk', $folder) }}">
            @csrf
        </form>
    @endif

    <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]">
        <section class="overflow-hidden rounded border border-[var(--construct-border)] bg-white">
            <div class="overflow-x-auto">
                <table class="w-full table-fixed text-left text-sm">
                    <colgroup>
                        <col class="w-12">
                        <col>
                        <col class="w-36">
                        <col class="w-28">
                        <col class="w-28">
                        <col class="w-20">
                    </colgroup>
                    <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="w-12 px-4 py-3">
                                @if ($documents->isNotEmpty())
                                    <input form="document-bulk-form" type="checkbox" class="rounded border-zinc-300 text-[var(--construct-primary)]" aria-label="Select all visible documents">
                                @endif
                            </th>
                            <th class="px-4 py-3">Name</th>
                            <th class="px-4 py-3">Status</th>
                            <th class="px-4 py-3">Owner</th>
                            <th class="px-4 py-3">Modified</th>
                            <th class="px-4 py-3">Size</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[var(--construct-border-soft)]">
                        @foreach ($children as $child)
                            <tr class="hover:bg-[var(--construct-surface-low)]">
                                <td class="px-4 py-4">
                                    <input type="checkbox" disabled class="rounded border-zinc-300">
                                </td>
                                <td class="min-w-[220px] px-4 py-4">
                                    <a href="{{ route('documents.folders.show', $child) }}" class="flex items-center gap-3">
                                        <span class="material-symbols-outlined text-[28px] text-[var(--construct-primary-dark)]">folder_open</span>
                                        <span>
                                            <span class="block font-bold text-[var(--construct-text)]">{{ $child->name }}</span>
                                            <span class="mt-1 block text-xs text-[var(--construct-muted)]">{{ $child->documents_count }} file{{ $child->documents_count === 1 ? '' : 's' }}</span>
                                        </span>
                                    </a>
                                </td>
                                <td class="px-4 py-4 text-[var(--construct-muted)]">-</td>
                                <td class="px-4 py-4 break-words">{{ $child->owner?->name ?? $child->creator->name }}</td>
                                <td class="px-4 py-4 text-[var(--construct-muted)]">{{ $child->updated_at->format('M j, Y') }}</td>
                                <td class="px-4 py-4 text-[var(--construct-muted)]">-</td>
                            </tr>
                        @endforeach

                        @forelse ($documents as $document)
                            @php
                                [$icon, $iconColor, $iconBg] = $fileIcon($document);
                            @endphp
                            <tr id="document-{{ $document->id }}" class="hover:bg-[var(--construct-surface-low)]">
                                <td class="px-4 py-4">
                                    <input type="checkbox" name="document_ids[]" value="{{ $document->id }}" form="document-bulk-form" @disabled($document->archived_at) class="rounded border-zinc-300 text-[var(--construct-primary)]">
                                </td>
                                <td class="min-w-[240px] px-4 py-4">
                                    <a href="{{ route('documents.show', $document) }}" class="flex items-center gap-3">
                                        <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded {{ $iconBg }} {{ $iconColor }}">
                                            <span class="material-symbols-outlined text-[22px]">{{ $icon }}</span>
                                        </span>
                                        <span class="min-w-0">
                                            <span class="block truncate font-bold text-[var(--construct-text)]">{{ $document->title }}</span>
                                            <span class="mt-1 block text-xs text-[var(--construct-muted)]">{{ $document->original_name }} · v{{ $document->version }} · {{ $document->document_type ?: 'Document' }}</span>
                                        </span>
                                    </a>
                                </td>
                                <td class="px-4 py-4">
                                    <div class="flex flex-wrap gap-1">
                                    @include('partials.status-badge', ['status' => $document->archived_at ? 'archived' : $document->status])
                                    @if ($document->hasLegalHold())
                                        <span>@include('partials.status-badge', ['status' => 'legal_hold'])</span>
                                    @elseif ($document->isExpired())
                                        <span>@include('partials.status-badge', ['status' => 'expired'])</span>
                                    @elseif ($document->expiresSoon())
                                        <span class="inline-flex rounded border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-bold uppercase text-amber-900">Expires soon</span>
                                    @endif
                                    </div>
                                </td>
                                <td class="px-4 py-4 break-words">{{ $document->owner?->name ?? $document->uploader->name }}</td>
                                <td class="whitespace-nowrap px-4 py-4 text-[var(--construct-muted)]">{{ $document->updated_at->diffForHumans() }}</td>
                                <td class="whitespace-nowrap px-4 py-4 text-[var(--construct-muted)]">{{ $humanSize($document->size) }}</td>
                            </tr>
                        @empty
                            @if ($children->isEmpty())
                                <tr>
                                    <td colspan="6" class="px-4 py-10 text-center text-sm text-[var(--construct-muted)]">No files or subfolders in this folder yet.</td>
                                </tr>
                            @endif
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="flex flex-col gap-3 border-t border-[var(--construct-border)] px-4 py-3 text-sm text-[var(--construct-muted)] sm:flex-row sm:items-center sm:justify-between">
                <span>Showing {{ $documents->firstItem() ?? 0 }} to {{ $documents->lastItem() ?? 0 }} of {{ $documents->total() }} entries</span>
                <div>{{ $documents->links() }}</div>
            </div>
        </section>

        <aside class="space-y-5">
            <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                <div class="mb-4 flex items-center gap-2">
                    <span class="material-symbols-outlined text-[22px] text-[var(--construct-primary-dark)]">tune</span>
                    <h2 class="text-xl font-bold">Folder Settings</h2>
                </div>
                <div class="space-y-4 text-sm">
                    <div class="flex items-center justify-between gap-3">
                        <span>
                            <span class="block font-bold">Auto-versioning</span>
                            <span class="block text-[var(--construct-muted)]">Keep previous file versions</span>
                        </span>
                        <span class="h-6 w-11 rounded-full bg-[var(--construct-primary)] p-1">
                            <span class="block h-4 w-4 translate-x-5 rounded-full bg-white"></span>
                        </span>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <span>
                            <span class="block font-bold">Compliance Lock</span>
                            <span class="block text-[var(--construct-muted)]">Require approval to delete</span>
                        </span>
                        <span class="h-6 w-11 rounded-full bg-[var(--construct-primary)] p-1">
                            <span class="block h-4 w-4 translate-x-5 rounded-full bg-white"></span>
                        </span>
                    </div>
                </div>

                <div class="mt-5 border-t border-[var(--construct-border-soft)] pt-5">
                    <div class="text-sm font-bold">Access Control</div>
                    <div class="mt-3 flex items-center gap-2">
                        @foreach ($folder->users->take(3) as $user)
                            <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-[#94ccff] text-xs font-bold text-[#001d32]" title="{{ $user->name }}">
                                {{ collect(explode(' ', $user->name))->filter()->map(fn ($part) => substr($part, 0, 1))->take(2)->implode('') }}
                            </span>
                        @endforeach
                        @if ($folder->users->count() > 3)
                            <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-[var(--construct-surface-container)] text-xs font-bold">+{{ $folder->users->count() - 3 }}</span>
                        @endif
                    </div>
                    @can('update', $folder)
                        <a href="{{ route('documents.folders.edit', $folder) }}" class="mt-4 inline-flex text-sm font-bold text-[var(--construct-primary-dark)]">Manage Access</a>
                    @endcan
                </div>
            </section>

            <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                <div class="mb-4 flex items-center gap-2">
                    <span class="material-symbols-outlined text-[22px] text-[var(--construct-primary-dark)]">history</span>
                    <h2 class="text-xl font-bold">Folder Activity</h2>
                </div>
                <div class="space-y-4">
                    @foreach ($shareActivity as $log)
                        <div class="border-l-2 border-[var(--construct-primary)] pl-4 text-sm">
                            <div class="text-xs text-[var(--construct-muted)]">{{ $log->created_at->format('M j, g:i A') }}</div>
                            <div class="mt-1">
                                <strong>{{ $log->user?->name ?? 'External recipient' }}</strong>
                                <span class="block text-[var(--construct-muted)]">{{ $log->action }}</span>
                            </div>
                        </div>
                    @endforeach
                    @forelse ($recentActivity as $activityDocument)
                        <div class="border-l-2 border-[var(--construct-primary)] pl-4 text-sm">
                            <div class="text-xs text-[var(--construct-muted)]">{{ $activityDocument->updated_at->format('M j, g:i A') }}</div>
                            <div class="mt-1">
                                <strong>{{ $activityDocument->uploader->name }}</strong> updated
                                <a href="{{ route('documents.show', $activityDocument) }}" class="block font-semibold text-[var(--construct-primary-dark)]">{{ $activityDocument->original_name }}</a>
                            </div>
                        </div>
                    @empty
                        <div class="text-sm text-[var(--construct-muted)]">Activity will appear after documents are uploaded.</div>
                    @endforelse
                </div>
            </section>

            @if ($documents->isNotEmpty())
                <section class="rounded border border-[var(--construct-border)] bg-white p-4">
                    <div class="mb-3 text-sm font-bold">Bulk Actions</div>
                    <div class="grid gap-2">
                        <select name="action" form="document-bulk-form" required class="rounded border border-[var(--construct-border)] px-3 py-2 text-sm">
                            <option value="">Select action</option>
                            <option value="zip">Download selected ZIP</option>
                            @can('update', $folder)
                                <option value="archive">Archive selected</option>
                            @endcan
                        </select>
                        <button form="document-bulk-form" class="rounded bg-zinc-900 px-4 py-2 text-sm font-bold text-white">Apply</button>
                    </div>
                </section>
            @endif
        </aside>
    </div>
@endsection