@extends('layouts.admin')

@section('title', 'Detalhes do arquivo')
@section('eyebrow', 'Arquivos')

@section('content')
    <div class="grid gap-5 lg:grid-cols-[1fr_320px]">
        <section class="rounded-lg border border-slate-200 bg-white p-5">
            <div class="flex flex-col gap-4 sm:flex-row">
                <div class="grid h-16 w-16 shrink-0 place-items-center rounded-lg bg-blue-50 text-[#0B6EFD]">
                    <i data-lucide="{{ $file->icon }}" class="h-8 w-8"></i>
                </div>
                <div>
                    <h2 class="text-2xl font-bold">{{ $file->title }}</h2>
                    <p class="mt-2 text-slate-600">{{ $file->description ?: 'Sem descrição cadastrada.' }}</p>
                </div>
            </div>

            <dl class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <div class="rounded-lg bg-slate-50 p-4">
                    <dt class="text-xs font-semibold uppercase tracking-wide text-slate-500">Categoria</dt>
                    <dd class="mt-1 font-semibold">{{ $file->category?->name }}</dd>
                </div>
                <div class="rounded-lg bg-slate-50 p-4">
                    <dt class="text-xs font-semibold uppercase tracking-wide text-slate-500">Tipo</dt>
                    <dd class="mt-1 font-semibold">{{ $file->type_label }}</dd>
                </div>
                <div class="rounded-lg bg-slate-50 p-4">
                    <dt class="text-xs font-semibold uppercase tracking-wide text-slate-500">Tamanho</dt>
                    <dd class="mt-1 font-semibold">{{ $file->formatted_size }}</dd>
                </div>
                <div class="rounded-lg bg-slate-50 p-4">
                    <dt class="text-xs font-semibold uppercase tracking-wide text-slate-500">Downloads</dt>
                    <dd class="mt-1 font-semibold">{{ number_format($file->downloads_count, 0, ',', '.') }}</dd>
                </div>
                <div class="rounded-lg bg-slate-50 p-4">
                    <dt class="text-xs font-semibold uppercase tracking-wide text-slate-500">Publicado em</dt>
                    <dd class="mt-1 font-semibold">{{ $file->published_at?->format('d/m/Y H:i') ?: '-' }}</dd>
                </div>
                <div class="rounded-lg bg-slate-50 p-4">
                    <dt class="text-xs font-semibold uppercase tracking-wide text-slate-500">Status</dt>
                    <dd class="mt-1 font-semibold">{{ $file->status === 'active' ? 'Ativo' : 'Inativo' }}</dd>
                </div>
            </dl>
        </section>

        <aside class="space-y-3">
            @if ($file->cover_image)
                <img src="{{ asset('storage/'.$file->cover_image) }}" alt="{{ $file->title }}" class="aspect-[4/3] w-full rounded-lg object-cover">
            @endif
            <a href="{{ route('admin.arquivos.download', $file) }}" class="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-[#0B6EFD] px-4 text-sm font-bold text-white hover:bg-blue-700">
                <i data-lucide="download" class="h-4 w-4"></i>
                Baixar arquivo
            </a>
            <a href="{{ route('admin.arquivos.edit', $file) }}" class="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-slate-200 bg-white px-4 text-sm font-bold text-slate-700 hover:bg-slate-50">
                <i data-lucide="pencil" class="h-4 w-4"></i>
                Editar
            </a>
            <a href="{{ route('public.files.show', ['file' => $file->slug]) }}" target="_blank" class="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-slate-200 bg-white px-4 text-sm font-bold text-slate-700 hover:bg-slate-50">
                <i data-lucide="external-link" class="h-4 w-4"></i>
                Página pública
            </a>
            <button type="button" data-copy="{{ route('public.files.show', ['file' => $file->slug]) }}" class="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-slate-200 bg-white px-4 text-sm font-bold text-slate-700 hover:bg-slate-50">
                <i data-lucide="copy" class="h-4 w-4"></i>
                Copiar link
            </button>
        </aside>
    </div>
@endsection