@props([
    'document' => null,   // App\Models\Document\Document
    'page' => null,
    'height' => '420px',
])

@php
    $rawUrl = $document ? route('documents.raw', $document) : null;
    $viewUrl = $document ? route('documents.view', $document) : null;
    $isPdf = $document && str_contains(strtolower($document->file_type ?? ''), 'pdf');
@endphp

<div {{ $attributes->merge(['class' => 'witness-doc-preview border rounded bg-body-tertiary']) }}>
    @if(! $document)
        <div class="d-flex flex-column align-items-center justify-content-center text-muted p-4" style="min-height: {{ $height }};">
            <span class="mdi mdi-file-search-outline fs-1" aria-hidden="true"></span>
            <p class="mb-0 small">Select an exhibit or evidence item to preview its source.</p>
        </div>
    @else
        <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
            <span class="text-truncate small fw-semibold" title="{{ $document->display_name }}">
                <span class="mdi mdi-file-document-outline" aria-hidden="true"></span>
                {{ $document->display_name }}@if($page) — page {{ $page }}@endif
            </span>
            <a href="{{ $viewUrl }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary">
                <span class="mdi mdi-open-in-new" aria-hidden="true"></span>
                Open
            </a>
        </div>
        @if($isPdf && $rawUrl)
            <iframe src="{{ $rawUrl }}@if($page)#page={{ $page }}@endif"
                    title="Document preview: {{ $document->display_name }}"
                    style="width: 100%; height: {{ $height }}; border: 0;" loading="lazy"></iframe>
        @else
            <div class="d-flex flex-column align-items-center justify-content-center text-muted p-4" style="min-height: {{ $height }};">
                <span class="mdi mdi-file-outline fs-1" aria-hidden="true"></span>
                <p class="mb-0 small">Preview not available inline. Use “Open”.</p>
            </div>
        @endif
    @endif
</div>