@extends('layouts.public')

@section('title', $file->title)

@section('content')
    <main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        <a href="{{ route('public.files.index') }}" class="mb-6 inline-flex items-center gap-2 text-sm font-semibold text-[#0B6EFD] hover:text-blue-700">
            <i data-lucide="arrow-left" class="h-4 w-4"></i>
            Voltar para arquivos
        </a>

        <section class="grid gap-8 lg:grid-cols-[1fr_360px]">
            <div>
                <div class="mb-4 flex flex-wrap items-center gap-2 text-xs font-semibold">
                    <span class="rounded-full bg-blue-50 px-2.5 py-1 text-[#0B6EFD]">{{ $file->type_label }}</span>
                    <span class="rounded-full bg-emerald-50 px-2.5 py-1 text-emerald-700">{{ $file->category?->name }}</span>
                </div>
                <h1 class="max-w-4xl text-4xl font-bold leading-tight text-slate-950">{{ $file->title }}</h1>
                <p class="mt-5 max-w-3xl whitespace-pre-line text-lg leading-8 text-slate-600">{{ $file->description ?: 'Arquivo disponível para download.' }}</p>

                <dl class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <div class="rounded-lg border border-slate-200 bg-white p-4">
                        <dt class="text-xs font-semibold uppercase tracking-wide text-slate-500">Tamanho</dt>
                        <dd class="mt-1 font-bold">{{ $file->formatted_size }}</dd>
                    </div>
                    <div class="rounded-lg border border-slate-200 bg-white p-4">
                        <dt class="text-xs font-semibold uppercase tracking-wide text-slate-500">Publicado</dt>
                        <dd class="mt-1 font-bold">{{ $file->published_at?->format('d/m/Y') }}</dd>
                    </div>
                    <div class="rounded-lg border border-slate-200 bg-white p-4">
                        <dt class="text-xs font-semibold uppercase tracking-wide text-slate-500">Downloads</dt>
                        <dd class="mt-1 font-bold">{{ number_format($file->downloads_count, 0, ',', '.') }}</dd>
                    </div>
                    <div class="rounded-lg border border-slate-200 bg-white p-4">
                        <dt class="text-xs font-semibold uppercase tracking-wide text-slate-500">Formato</dt>
                        <dd class="mt-1 font-bold">{{ $file->type_label }}</dd>
                    </div>
                </dl>
            </div>

            <aside class="space-y-4">
                @if ($file->cover_image)
                    <img src="{{ asset('storage/'.$file->cover_image) }}" alt="{{ $file->title }}" class="aspect-[4/3] w-full rounded-lg object-cover">
                @else
                    <div class="grid aspect-[4/3] w-full place-items-center rounded-lg bg-slate-100 text-[#0B6EFD]">
                        <i data-lucide="{{ $file->icon }}" class="h-20 w-20"></i>
                    </div>
                @endif
                <a href="{{ route('public.files.download', ['file' => $file->slug]) }}" class="inline-flex h-14 w-full items-center justify-center gap-2 rounded-lg bg-emerald-600 px-5 text-base font-bold text-white hover:bg-emerald-700">
                    <i data-lucide="download" class="h-5 w-5"></i>
                    Baixar arquivo
                </a>
            </aside>
        </section>

        @if ($relatedFiles->isNotEmpty())
            <section class="mt-14">
                <h2 class="mb-5 text-2xl font-bold">Arquivos relacionados</h2>
                <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
                    @foreach ($relatedFiles as $file)
                        @include('partials.file-card', ['file' => $file])
                    @endforeach
                </div>
            </section>
        @endif
    </main>
@endsection