@extends('layouts.app')

@section('mobile-title', 'Edit Metadata')
@section('mobile-subtitle', $document->title)
@section('mobile-back', route('documents.show', $document))

@section('content')
    @php
        $mime = $document->mime_type ?? '';
        $name = strtolower($document->original_name ?? '');
        $fileIcon = match (true) {
            str_contains($mime, 'pdf') || str_ends_with($name, '.pdf') => ['picture_as_pdf', 'text-red-700'],
            str_starts_with($mime, 'image/') => ['image', 'text-[var(--construct-secondary)]'],
            str_contains($mime, 'spreadsheet') || str_ends_with($name, '.csv') || str_ends_with($name, '.xlsx') => ['table_chart', 'text-emerald-800'],
            str_contains($mime, 'word') || str_ends_with($name, '.doc') || str_ends_with($name, '.docx') => ['description', 'text-[var(--construct-secondary)]'],
            default => ['draft', 'text-[var(--construct-muted)]'],
        };
        $humanSize = $document->size >= 1048576 ? number_format($document->size / 1048576, 1).' MB' : number_format(max($document->size, 1) / 1024, 1).' KB';
        $tagsValue = old('tags', collect($document->tags ?? [])->implode(', '));
    @endphp

    <form method="POST" action="{{ route('documents.metadata.update', $document) }}" class="min-h-[calc(100vh-8rem)] pb-24">
        @csrf
        @method('PATCH')

        <div class="mb-6">
            <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)]">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>Edit Document</span>
            </div>
            <div class="flex items-center gap-3">
                <span class="inline-flex h-10 w-10 items-center justify-center rounded border border-[var(--construct-border)] bg-white {{ $fileIcon[1] }}">
                    <span class="material-symbols-outlined text-[25px]">{{ $fileIcon[0] }}</span>
                </span>
                <h1 class="text-3xl font-bold">{{ $document->original_name }}</h1>
            </div>
        </div>

        <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
            <section class="rounded border border-[var(--construct-border)] bg-white p-6">
                <div class="mb-5 border-b border-[var(--construct-border-soft)] pb-3">
                    <h2 class="text-xl font-bold">Edit Metadata</h2>
                </div>

                <div class="grid gap-5">
                    <label class="grid gap-2 text-sm">
                        <span class="font-semibold">Document Name</span>
                        <input name="title" value="{{ old('title', $document->title) }}" required class="rounded border border-[var(--construct-border)] px-3 py-2.5 text-sm focus:border-[var(--construct-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--construct-primary)]">
                        @error('title')
                            <span class="text-xs font-semibold text-red-700">{{ $message }}</span>
                        @enderror
                    </label>

                    <div class="grid gap-5 md:grid-cols-2">
                        <label class="grid gap-2 text-sm">
                            <span class="font-semibold">Folder / Category</span>
                            <select name="document_folder_id" required class="rounded border border-[var(--construct-border)] px-3 py-2.5 text-sm focus:border-[var(--construct-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--construct-primary)]">
                                @foreach ($folders as $availableFolder)
                                    <option value="{{ $availableFolder->id }}" @selected((string) old('document_folder_id', $document->document_folder_id) === (string) $availableFolder->id)>
                                        {{ $availableFolder->name }}@if ($availableFolder->project) · {{ $availableFolder->project->name }}@endif
                                    </option>
                                @endforeach
                            </select>
                            @error('document_folder_id')
                                <span class="text-xs font-semibold text-red-700">{{ $message }}</span>
                            @enderror
                        </label>

                        <label class="grid gap-2 text-sm">
                            <span class="font-semibold">Tags</span>
                            <input name="tags" value="{{ $tagsValue }}" placeholder="Q3, Audit, Downtown Tower" class="rounded border border-[var(--construct-border)] px-3 py-2.5 text-sm focus:border-[var(--construct-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--construct-primary)]">
                            @error('tags')
                                <span class="text-xs font-semibold text-red-700">{{ $message }}</span>
                            @enderror
                        </label>
                    </div>

                    <div class="grid gap-5 md:grid-cols-2">
                        <label class="grid gap-2 text-sm">
                            <span class="font-semibold">Document Type</span>
                            <input name="document_type" value="{{ old('document_type', $document->document_type) }}" placeholder="Safety audit, Invoice, Contract..." class="rounded border border-[var(--construct-border)] px-3 py-2.5 text-sm focus:border-[var(--construct-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--construct-primary)]">
                        </label>

                        <label class="grid gap-2 text-sm">
                            <span class="font-semibold">Expiry Date</span>
                            <input name="expires_at" type="date" value="{{ old('expires_at', $document->expires_at?->toDateString()) }}" class="rounded border border-[var(--construct-border)] px-3 py-2.5 text-sm focus:border-[var(--construct-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--construct-primary)]">
                        </label>
                    </div>

                    <label class="grid gap-2 border-t border-[var(--construct-border-soft)] pt-5 text-sm">
                        <span class="flex items-center gap-2 font-semibold">
                            <span class="material-symbols-outlined text-[18px]">edit_note</span>
                            Version Note
                        </span>
                        <textarea name="version_note" rows="4" placeholder="Briefly describe what changed in this version..." class="rounded border border-[var(--construct-border)] px-3 py-2.5 text-sm focus:border-[var(--construct-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--construct-primary)]">{{ old('version_note') }}</textarea>
                        <span class="text-sm text-[var(--construct-muted)]">This note will be attached to the audit history log.</span>
                    </label>
                </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 text-[var(--construct-muted)]">
                        <span class="material-symbols-outlined text-[20px]">info</span>
                        <h2 class="text-sm font-bold uppercase tracking-[0.03em]">Document Information</h2>
                    </div>
                    <dl class="divide-y divide-[var(--construct-border-soft)] text-sm">
                        <div class="flex justify-between gap-3 py-3">
                            <dt class="text-[var(--construct-muted)]">Current Version</dt>
                            <dd class="rounded bg-emerald-50 px-2 py-1 text-xs font-bold text-emerald-800">v{{ $document->version }}</dd>
                        </div>
                        <div class="flex justify-between gap-3 py-3">
                            <dt class="text-[var(--construct-muted)]">Uploaded By</dt>
                            <dd class="text-right font-semibold">{{ $document->uploader->name }}</dd>
                        </div>
                        <div class="flex justify-between gap-3 py-3">
                            <dt class="text-[var(--construct-muted)]">Date Uploaded</dt>
                            <dd class="text-right font-semibold">{{ $document->created_at->format('M j, Y') }}</dd>
                        </div>
                        <div class="flex justify-between gap-3 py-3">
                            <dt class="text-[var(--construct-muted)]">File Size</dt>
                            <dd class="text-right font-semibold">{{ $humanSize }}</dd>
                        </div>
                        <div class="flex justify-between gap-3 py-3">
                            <dt class="text-[var(--construct-muted)]">File Type</dt>
                            <dd class="text-right font-semibold">{{ strtoupper(pathinfo($document->original_name, PATHINFO_EXTENSION) ?: 'FILE') }}</dd>
                        </div>
                    </dl>
                </section>

                <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                    <div class="mb-4 flex items-center gap-2 text-[var(--construct-muted)]">
                        <span class="material-symbols-outlined text-[20px]">history</span>
                        <h2 class="text-sm font-bold uppercase tracking-[0.03em]">Version History</h2>
                    </div>
                    <div class="space-y-4">
                        <div class="flex gap-3 text-sm">
                            <div class="mt-1 h-3 w-3 rounded-full bg-[var(--construct-primary)] ring-4 ring-emerald-100"></div>
                            <div class="flex-1">
                                <div class="flex justify-between gap-3">
                                    <strong>v{{ $document->version }} Current version</strong>
                                    <span class="text-[var(--construct-muted)]">{{ $document->updated_at->format('M j, Y') }}</span>
                                </div>
                                <div class="mt-1 text-[var(--construct-muted)]">{{ $document->uploader->name }}</div>
                            </div>
                        </div>
                        @foreach ($document->versions->sortByDesc('version')->take(3) as $version)
                            <div class="flex gap-3 text-sm">
                                <div class="mt-1 h-3 w-3 rounded-full border-2 border-[var(--construct-border)]"></div>
                                <div class="flex-1">
                                    <div class="flex justify-between gap-3">
                                        <strong>v{{ $version->version }}</strong>
                                        <span class="text-[var(--construct-muted)]">{{ $version->created_at->format('M j, Y') }}</span>
                                    </div>
                                    <div class="mt-1 text-[var(--construct-muted)]">{{ $version->notes ?: 'Previous version' }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <a href="{{ route('documents.show', $document) }}" class="mt-5 inline-flex text-sm font-bold text-[var(--construct-primary-dark)]">View Full History</a>
                </section>
            </aside>
        </div>

        <div class="fixed inset-x-0 bottom-0 z-30 border-t border-[var(--construct-border)] bg-white/95 px-6 py-4 backdrop-blur md:left-[240px]">
            <div class="mx-auto flex max-w-7xl justify-end gap-3">
                <a href="{{ route('documents.show', $document) }}" class="rounded border border-[var(--construct-border)] bg-white px-5 py-2.5 text-sm font-bold text-[var(--construct-text)]">Cancel</a>
                <button class="rounded bg-[var(--construct-primary)] px-5 py-2.5 text-sm font-bold text-white">Save Changes</button>
            </div>
        </div>
    </form>
@endsection