@php
    use App\Services\DocumentPreviewService;

    $previewService = app(DocumentPreviewService::class);
    $canPreview = $previewService->canPreview($document);
    $htmlContent = null;
    $error = null;

    if ($canPreview) {
        try {
            $htmlContent = $previewService->convertToHtml($document);
        } catch (\Exception $e) {
            $error = $e->getMessage();
        }
    }
@endphp

<div class="document-preview-container">
    @if ($document->conversion_status === 'failed')
        {{-- 转换失败状态由"转换错误信息"区块处理，此处不重复展示 --}}
    @elseif ($document->conversion_status === 'processing')
        <div class="rounded-lg bg-gray-50 p-4 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
            <div class="flex items-center gap-3">
                <svg class="h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <p>文档正在转换中，请稍后刷新页面查看...</p>
            </div>
        </div>
    @elseif ($document->conversion_status === 'pending')
        <div class="rounded-lg bg-warning-50 p-4 text-warning-600 dark:bg-warning-400/10 dark:text-warning-400">
            <div class="flex items-center gap-3">
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <p>文档等待转换中...</p>
            </div>
        </div>
    @elseif ($error)
        <div class="rounded-lg bg-danger-50 p-4 text-danger-600 dark:bg-danger-400/10 dark:text-danger-400">
            <div class="flex items-center gap-3">
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                </svg>
                <div>
                    <p class="font-semibold">预览加载失败</p>
                    <p class="text-sm">{{ $error }}</p>
                </div>
            </div>
        </div>
    @elseif ($htmlContent)
        <div class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
            <div class="border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-900">
                <div class="flex items-center justify-between">
                    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">
                        文档内容预览
                    </h3>
                    <span class="text-xs text-gray-500 dark:text-gray-400">
                        {{ $document->display_file_name }}
                    </span>
                </div>
            </div>

            <div class="max-h-[600px] overflow-y-auto p-6">
                <div class="prose prose-sm max-w-none dark:prose-invert">
                    {!! $htmlContent !!}
                </div>
            </div>
        </div>
    @endif
</div>

<style>
    .document-preview-container .prose {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    }

    .document-preview-container .prose table {
        width: 100%;
        border-collapse: collapse;
        margin: 1em 0;
    }

    .document-preview-container .prose table td,
    .document-preview-container .prose table th {
        border: 1px solid #e5e7eb;
        padding: 0.5em;
    }

    .document-preview-container .prose table th {
        background-color: #f9fafb;
        font-weight: 600;
    }

    .document-preview-container .prose img {
        max-width: 100%;
        height: auto;
    }

    .dark .document-preview-container .prose table td,
    .dark .document-preview-container .prose table th {
        border-color: #374151;
    }

    .dark .document-preview-container .prose table th {
        background-color: #1f2937;
    }
</style>
