@extends('layouts.app')

@section('mobile-title', $document->title)
@section('mobile-subtitle', 'Document details')
@section('mobile-back', route('documents.folders.show', $folder))
@section('mobile-action-url', route('documents.download', $document))
@section('mobile-action-icon', 'download')
@section('mobile-action-label', 'Download')

@section('content')
    @php
        $mime = $document->mime_type ?? '';
        $name = strtolower($document->original_name ?? '');
        $isPdf = str_contains($mime, 'pdf') || str_ends_with($name, '.pdf');
        $isImage = str_starts_with($mime, 'image/');
        $isText = in_array($mime, ['text/plain', 'text/csv', 'message/rfc822'], true);
        $previewUrl = $document->canPreview() && ! $document->archived_at ? route('documents.preview', $document) : null;
        $humanSize = $document->size >= 1048576 ? number_format($document->size / 1048576, 2).' MB' : number_format($document->size / 1024, 1).' KB';
        $shareActivity = $document->shares->flatMap(fn ($share) => $shareAuditLogs->get($share->id, collect()))->take(6);
        $fileKind = match (true) {
            $isPdf => 'PDF',
            $isImage => 'Image',
            str_contains($mime, 'spreadsheet') || str_ends_with($name, '.csv') || str_ends_with($name, '.xlsx') => 'Spreadsheet',
            str_contains($mime, 'word') || str_ends_with($name, '.doc') || str_ends_with($name, '.docx') => 'Document',
            str_contains($mime, 'message') || str_ends_with($name, '.eml') => 'Email',
            default => 'File',
        };
    @endphp

    <div class="mb-5 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
        <div>
            <div class="mb-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)]">Document Centre</a>
                <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                <a href="{{ route('documents.folders.show', $folder) }}" class="font-semibold text-[var(--construct-primary-dark)]">{{ $folder->name }}</a>
                <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                <span>{{ $document->title }}</span>
            </div>
            <div class="flex flex-wrap items-center gap-3">
                <h1 class="text-3xl font-bold">{{ $document->title }}</h1>
                @include('partials.status-badge', ['status' => $document->status])
                @include('partials.status-badge', ['status' => $document->scan_status])
                @if ($document->hasLegalHold())
                    @include('partials.status-badge', ['status' => 'legal_hold'])
                @endif
            </div>
            <p class="mt-1 text-sm text-[var(--construct-muted)]">
                {{ $document->original_name }} · {{ $fileKind }} · v{{ $document->version }} · {{ $humanSize }}
            </p>
        </div>

        <div class="flex flex-wrap gap-2">
            @if ($document->isAuthored() && ! $document->archived_at)
                @can('update', $document)
                    <a href="{{ route('documents.authored.edit', $document) }}" 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]">edit</span>Edit
                    </a>
                @endcan
                <a href="{{ route('documents.authored.word', $document) }}" class="inline-flex items-center gap-2 rounded border border-[var(--construct-border)] bg-white px-4 py-2 text-sm font-bold"><span class="material-symbols-outlined text-[18px]">description</span>Word</a>
                <a href="{{ route('documents.authored.pdf', $document) }}" class="inline-flex items-center gap-2 rounded border border-[var(--construct-border)] bg-white px-4 py-2 text-sm font-bold"><span class="material-symbols-outlined text-[18px]">picture_as_pdf</span>PDF</a>
            @endif
            @if ($previewUrl)
                <a href="{{ $previewUrl }}" target="_blank" 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]">open_in_new</span>
                    Open
                </a>
            @endif
            @if (! $document->archived_at)
                <a href="{{ route('documents.download', $document) }}" class="inline-flex items-center gap-2 rounded bg-zinc-900 px-4 py-2 text-sm font-bold text-white">
                    <span class="material-symbols-outlined text-[18px]">download</span>
                    Download
                </a>
            @endif
            <a href="{{ route('documents.folders.show', $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]">folder_open</span>
                Folder
            </a>
        </div>
    </div>

    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_420px]">
        <section class="overflow-hidden rounded border border-[var(--construct-border)] bg-white">
            <div class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--construct-border-soft)] bg-[var(--construct-surface-low)] px-4 py-3">
                <div>
                    <h2 class="font-bold">Document Preview</h2>
                    <p class="mt-1 text-xs text-[var(--construct-muted)]">{{ $mime ?: 'application/octet-stream' }}</p>
                </div>
                <div class="flex items-center gap-3 text-[var(--construct-muted)]">
                    <span class="material-symbols-outlined text-[20px]">zoom_in</span>
                    <span class="material-symbols-outlined text-[20px]">zoom_out</span>
                    <span class="material-symbols-outlined text-[20px]">print</span>
                </div>
            </div>

            <div class="min-h-[560px] bg-[var(--construct-surface-low)] p-4">
                @if ($previewUrl && $isImage)
                    <div class="flex min-h-[520px] items-center justify-center">
                        <img src="{{ $previewUrl }}" alt="{{ $document->title }}" class="max-h-[72vh] max-w-full rounded border border-[var(--construct-border)] bg-white object-contain">
                    </div>
                @elseif ($previewUrl && ($isPdf || $isText))
                    <iframe src="{{ $previewUrl }}" title="{{ $document->title }}" class="h-[72vh] min-h-[520px] w-full rounded border border-[var(--construct-border)] bg-white"></iframe>
                @elseif ($previewUrl)
                    <iframe src="{{ $previewUrl }}" title="{{ $document->title }}" class="h-[72vh] min-h-[520px] w-full rounded border border-[var(--construct-border)] bg-white"></iframe>
                @else
                    <div class="mx-auto flex min-h-[520px] max-w-3xl flex-col justify-between rounded border border-[var(--construct-border)] bg-white p-8">
                        <div>
                            <div class="flex items-start justify-between gap-4 border-b-2 border-[var(--construct-primary)] pb-4">
                                <div>
                                    <div class="text-xl font-extrabold uppercase text-[var(--construct-primary-dark)]">Stephup Construction</div>
                                    <div class="mt-1 text-sm text-[var(--construct-muted)]">{{ $document->document_type ?: $fileKind }} · {{ $folder->name }}</div>
                                </div>
                                <div class="text-right text-sm">
                                    <div class="font-bold">v{{ $document->version }}</div>
                                    <div class="text-[var(--construct-muted)]">{{ $document->created_at->format('M j, Y') }}</div>
                                </div>
                            </div>
                            <div class="mt-10 flex h-48 items-center justify-center rounded border border-[var(--construct-border)] bg-[var(--construct-surface-low)]">
                                <span class="material-symbols-outlined text-[72px] text-[var(--construct-secondary)]">draft</span>
                            </div>
                            <div class="mt-8 space-y-3">
                                <div class="h-4 w-3/4 rounded bg-[var(--construct-surface-container)]"></div>
                                <div class="h-3 rounded bg-[var(--construct-surface-container)]"></div>
                                <div class="h-3 w-5/6 rounded bg-[var(--construct-surface-container)]"></div>
                                <div class="h-3 w-2/3 rounded bg-[var(--construct-surface-container)]"></div>
                            </div>
                        </div>
                        <div class="mt-10 border-t border-[var(--construct-border)] pt-5 text-sm text-[var(--construct-muted)]">
                            Preview is not available for this file type. Download the document to inspect the original.
                        </div>
                    </div>
                @endif
            </div>
        </section>

        <aside class="space-y-4">
            <section class="rounded border border-[var(--construct-border)] bg-white">
                <div class="border-b border-[var(--construct-border-soft)] p-4">
                    <h2 class="font-bold">Extracted Data Review</h2>
                    <p class="mt-1 text-xs text-[var(--construct-muted)]">Confirm the important fields before approval.</p>
                </div>
                <dl class="divide-y divide-[var(--construct-border-soft)]">
                    @foreach ($extractedFields as $label => $value)
                        <div class="grid grid-cols-[140px_1fr] gap-3 px-4 py-3 text-sm">
                            <dt class="font-bold text-[var(--construct-muted)]">{{ $label }}</dt>
                            <dd class="font-semibold text-[var(--construct-text)]">{{ $value }}</dd>
                        </div>
                    @endforeach
                </dl>
            </section>

            <section class="rounded border border-[var(--construct-border)] bg-white p-4">
                <h2 class="font-bold">File Details</h2>
                <dl class="mt-4 grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <dt class="text-xs font-bold uppercase text-[var(--construct-muted)]">Uploaded By</dt>
                        <dd class="mt-1 font-semibold">{{ $document->uploader->name }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-bold uppercase text-[var(--construct-muted)]">Upload Date</dt>
                        <dd class="mt-1 font-semibold">{{ $document->created_at->format('M j, Y') }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-bold uppercase text-[var(--construct-muted)]">Folder</dt>
                        <dd class="mt-1 font-semibold">{{ $folder->name }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-bold uppercase text-[var(--construct-muted)]">Category</dt>
                        <dd class="mt-1 font-semibold">{{ $folder->categoryLabel() }}</dd>
                    </div>
                    @if ($document->reviewer)
                        <div class="col-span-2">
                            <dt class="text-xs font-bold uppercase text-[var(--construct-muted)]">Reviewed By</dt>
                            <dd class="mt-1 font-semibold">{{ $document->reviewer->name }} · {{ $document->reviewed_at?->format('M j, Y') }}</dd>
                        </div>
                    @endif
                </dl>
                <div class="mt-4 flex flex-wrap gap-2">
                    @foreach (($document->tags ?? []) as $tag)
                        <span class="rounded bg-[var(--construct-surface-container)] px-2 py-1 text-xs font-semibold">{{ $tag }}</span>
                    @endforeach
                </div>
            </section>

            @can('review', $document)
                @if (! $document->archived_at)
                    <section class="rounded border border-[var(--construct-border)] bg-white p-4">
                        <h2 class="font-bold">Verification</h2>
                        <form method="POST" action="{{ route('documents.approve', $document) }}" class="mt-3">
                            @csrf
                            <input type="hidden" name="return_to" value="document">
                            <textarea name="review_note" rows="3" placeholder="Add notes for the internal record..." class="w-full rounded border border-zinc-300 px-3 py-2 text-sm"></textarea>
                            <button class="mt-3 flex w-full items-center justify-center gap-2 rounded bg-[var(--construct-primary)] px-4 py-2.5 text-sm font-bold text-white">
                                <span class="material-symbols-outlined text-[16px]">verified</span>
                                Approve Document
                            </button>
                        </form>
                        <button type="button" data-reject-open="reject-document" class="mt-3 w-full rounded border border-red-300 bg-white px-4 py-2.5 text-sm font-bold text-red-700">Reject with Note</button>
                    </section>
                @endif
            @endcan

            <section class="rounded border border-[var(--construct-border)] bg-white p-4">
                <h2 class="font-bold">Version History</h2>
                <div class="mt-4 space-y-4">
                    <div class="flex gap-3">
                        <div class="mt-1 h-3 w-3 rounded-full bg-[var(--construct-primary)] ring-4 ring-emerald-100"></div>
                        <div>
                            <div class="text-sm font-bold">v{{ $document->version }} Current version</div>
                            <div class="mt-1 text-xs text-[var(--construct-muted)]">{{ $document->updated_at->format('M j, Y') }} · {{ $document->uploader->name }}</div>
                        </div>
                    </div>
                    @foreach ($document->versions->sortByDesc('version')->take(5) as $version)
                        <div class="flex gap-3">
                            <div class="mt-1 h-2 w-2 rounded-full bg-[var(--construct-muted)]"></div>
                            <div>
                                <div class="text-sm font-bold">v{{ $version->version }} {{ $version->notes ? '· '.$version->notes : '' }}</div>
                                <div class="mt-1 text-xs text-[var(--construct-muted)]">{{ $version->created_at->format('M j, Y') }} · {{ $version->uploader?->name }}</div>
                                <a href="{{ route('documents.versions.download', $version) }}" class="mt-1 inline-block text-xs font-bold text-[var(--construct-primary-dark)]">Download</a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>

            @can('manageShares', $document)
                <section class="rounded border border-[var(--construct-border)] bg-white p-4">
                    <div class="flex items-center justify-between gap-3">
                        <h2 class="font-bold">Sharing</h2>
                        <a href="{{ route('documents.shares.index', $document) }}" class="text-sm font-bold text-[var(--construct-primary-dark)]">Manage links</a>
                    </div>
                    @can('share', $document)
                        <form method="POST" action="{{ route('documents.shares.store', $document) }}" class="mt-3 grid gap-2">
                            @csrf
                            <input type="hidden" name="return_to" value="document">
                            <input name="recipient_email" type="email" placeholder="recipient@example.com" class="rounded border border-zinc-300 px-3 py-2 text-sm">
                            <div class="grid gap-2 sm:grid-cols-3 xl:grid-cols-1">
                                <input name="expires_days" type="number" min="1" max="365" value="30" class="rounded border border-zinc-300 px-3 py-2 text-sm">
                                <input name="pin" placeholder="Optional PIN" class="rounded border border-zinc-300 px-3 py-2 text-sm">
                                <input name="max_downloads" type="number" min="1" max="1000" placeholder="Downloads" class="rounded border border-zinc-300 px-3 py-2 text-sm">
                            </div>
                            <button class="rounded bg-zinc-900 px-3 py-2 text-sm font-bold text-white">Create link</button>
                        </form>
                    @else
                        <p class="mt-3 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-950">External links can be created after approval and a clean document scan.</p>
                    @endcan

                    <div class="mt-4 space-y-2">
                        @forelse ($document->shares->sortByDesc('created_at') as $share)
                            <div class="rounded border border-zinc-200 px-3 py-2 text-sm">
                                <div class="font-semibold">{{ $share->recipient_email ?: 'Manual link' }}</div>
                                <a href="{{ route('document-shares.show', $share) }}" target="_blank" class="mt-1 block break-all text-xs font-semibold text-emerald-800">{{ route('document-shares.show', $share) }}</a>
                                <div class="mt-1 text-xs text-zinc-500">{{ $share->revoked_at ? 'Revoked' : 'Active' }}</div>
                                @if (! $share->revoked_at)
                                    <form method="POST" action="{{ route('documents.shares.revoke', $share) }}" class="mt-2">
                                        @csrf
                                        @method('DELETE')
                                        <input type="hidden" name="return_to" value="document">
                                        <button class="text-xs font-bold text-red-700">Revoke link</button>
                                    </form>
                                @endif
                            </div>
                        @empty
                            <div class="text-sm text-[var(--construct-muted)]">No external links yet.</div>
                        @endforelse
                    </div>

                    @if ($shareActivity->isNotEmpty())
                        <div class="mt-4 text-xs font-bold uppercase text-[var(--construct-muted)]">Activity</div>
                        <div class="mt-2 space-y-2">
                            @foreach ($shareActivity as $log)
                                <div class="rounded border border-[var(--construct-border-soft)] bg-[var(--construct-surface-low)] px-3 py-2 text-xs text-[var(--construct-muted)]">
                                    {{ $log->created_at->format('M j, Y g:i A') }} · {{ $log->action }}
                                </div>
                            @endforeach
                        </div>
                    @endif
                </section>
            @endcan

            <section class="rounded border border-[var(--construct-border)] bg-white p-4">
                <h2 class="font-bold">Document Controls</h2>
                <div class="mt-4 space-y-3">
                    @can('update', $document)
                        <a href="{{ route('documents.metadata.edit', $document) }}" class="inline-flex w-full items-center justify-center gap-2 rounded border border-[var(--construct-border)] bg-white px-3 py-2 text-sm font-bold text-[var(--construct-primary-dark)]">
                            <span class="material-symbols-outlined text-[18px]">edit_note</span>
                            Edit Metadata
                        </a>
                        @if (! $document->archived_at)
                            <form method="POST" action="{{ route('documents.replace', $document) }}" enctype="multipart/form-data" class="grid gap-2">
                                @csrf
                                <input type="hidden" name="return_to" value="document">
                                <input name="file" type="file" required class="rounded border border-zinc-300 px-2 py-1 text-xs">
                                <input name="version_notes" placeholder="Version note" class="rounded border border-zinc-300 px-2 py-1 text-xs">
                                <button class="rounded border border-zinc-300 px-3 py-2 text-xs font-bold text-zinc-700">Replace version</button>
                            </form>
                        @endif
                    @endcan

                    <div class="flex flex-wrap gap-2">
                        @can('archive', $document)
                            <form method="POST" action="{{ route('documents.archive', $document) }}">
                                @csrf
                                <input type="hidden" name="return_to" value="document">
                                <button class="rounded border border-red-200 px-4 py-2 text-sm font-bold text-red-700">Archive</button>
                            </form>
                        @endcan
                        @can('restore', $document)
                            <form method="POST" action="{{ route('documents.restore', $document) }}">
                                @csrf
                                <input type="hidden" name="return_to" value="document">
                                <button class="rounded border border-emerald-200 px-4 py-2 text-sm font-bold text-emerald-800">Restore</button>
                            </form>
                        @endcan
                    </div>

                    @can('legalHold', $document)
                        @if (! $document->hasLegalHold())
                            <form method="POST" action="{{ route('documents.legal-hold', $document) }}" class="grid gap-2">
                                @csrf
                                <input type="hidden" name="return_to" value="document">
                                <input name="legal_hold_reason" required placeholder="Legal hold reason" class="rounded border border-red-200 px-3 py-2 text-sm">
                                <button class="rounded bg-red-700 px-3 py-2 text-sm font-bold text-white">Apply legal hold</button>
                            </form>
                        @endif
                    @endcan
                    @can('releaseLegalHold', $document)
                        <form method="POST" action="{{ route('documents.legal-hold.release', $document) }}">
                            @csrf
                            @method('DELETE')
                            <input type="hidden" name="return_to" value="document">
                            <button class="rounded border border-zinc-300 px-4 py-2 text-sm font-bold text-zinc-700">Release hold</button>
                        </form>
                    @endcan
                </div>
            </section>
        </aside>
    </div>

    @can('review', $document)
        @if (! $document->archived_at)
            <div id="reject-document" class="fixed inset-0 z-50 hidden items-center justify-center bg-zinc-950/45 px-4 backdrop-blur-sm" data-reject-modal>
                <div class="w-full max-w-xl overflow-hidden rounded border border-[var(--construct-border)] bg-white">
                    <div class="border-b border-[var(--construct-border)] p-6">
                        <h3 class="text-xl font-bold">Reject Document</h3>
                        <p class="mt-2 text-sm text-[var(--construct-muted)]">Select a reason and provide details to help the team member resolve the issue.</p>
                    </div>
                    <form method="POST" action="{{ route('documents.reject', $document) }}">
                        @csrf
                        <input type="hidden" name="return_to" value="document">
                        <div class="space-y-4 p-6">
                            <label class="grid gap-2 text-sm">
                                <span class="text-xs font-bold uppercase text-[var(--construct-muted)]">Rejection reason</span>
                                <select name="rejection_reason" class="rounded border border-zinc-300 px-3 py-2 text-sm">
                                    <option value="">Select a reason...</option>
                                    <option value="Expired document">Expired Document</option>
                                    <option value="Incorrect document type">Incorrect Document Type</option>
                                    <option value="Illegible scan">Illegible Scan</option>
                                    <option value="Incomplete information">Incomplete Information</option>
                                    <option value="Other">Other</option>
                                </select>
                            </label>
                            <label class="grid gap-2 text-sm">
                                <span class="text-xs font-bold uppercase text-[var(--construct-muted)]">Detailed note</span>
                                <textarea name="review_note" required rows="5" placeholder="Provide specific details for the rejection..." class="rounded border border-zinc-300 px-3 py-2 text-sm"></textarea>
                            </label>
                            <label class="flex items-center gap-3 text-sm">
                                <input type="checkbox" checked class="rounded border-zinc-300 text-[var(--construct-primary)]">
                                <span>Send automated email notification to user</span>
                            </label>
                        </div>
                        <div class="flex justify-end gap-3 border-t border-[var(--construct-border)] bg-[var(--construct-surface-low)] p-4">
                            <button type="button" data-reject-close class="rounded px-4 py-2 text-sm font-bold text-[var(--construct-muted)]">Cancel</button>
                            <button class="rounded bg-red-700 px-4 py-2 text-sm font-bold text-white">Confirm Rejection</button>
                        </div>
                    </form>
                </div>
            </div>
        @endif
    @endcan

    <script>
        document.querySelectorAll('[data-reject-open]').forEach((button) => {
            button.addEventListener('click', () => {
                const modal = document.getElementById(button.dataset.rejectOpen);
                if (modal) {
                    modal.classList.remove('hidden');
                    modal.classList.add('flex');
                }
            });
        });

        document.querySelectorAll('[data-reject-close]').forEach((button) => {
            button.addEventListener('click', () => {
                const modal = button.closest('[data-reject-modal]');
                if (modal) {
                    modal.classList.add('hidden');
                    modal.classList.remove('flex');
                }
            });
        });

        document.querySelectorAll('[data-reject-modal]').forEach((modal) => {
            modal.addEventListener('click', (event) => {
                if (event.target === modal) {
                    modal.classList.add('hidden');
                    modal.classList.remove('flex');
                }
            });
        });
    </script>
@endsection