web/src/views/document.php

<?php
/**
 * Document Viewer - Split Pane
 *
 * Variables:
 *   $document - Document record with: id, file_path, pages, file_size, source_section, processed_at
 *   $pages    - Array of page metadata: page_number, has_ocr, has_entities
 *   $entities - Array of entities: entity_text, entity_type, page_number, confidence
 */

$docId = $document['id'] ?? 0;
$filename = basename($document['file_path'] ?? 'Unknown Document');
$totalPages = $document['pages'] ?? 0;
$sourceSection = $document['source_section'] ?? '';

$collectionNames = [
    'doj_disclosures'   => 'DOJ Disclosures (Epstein Files)',
    'lincoln_archives'   => 'Lincoln Archives',
    'house_resolutions'  => 'House Resolutions',
    'area51_cia'         => 'Area 51 / CIA Declassified',
    'jfk_assassination'  => 'JFK Assassination Records',
    'court_records'      => 'Court Records',
    'foia'               => 'FOIA Releases',
    'house_oversight'    => 'House Oversight',
];

$collectionName = $collectionNames[$sourceSection] ?? ucwords(str_replace('_', ' ', $sourceSection));

// Group entities by type
$entityGroups = [];
if (!empty($entities)) {
    foreach ($entities as $ent) {
        $type = $ent['entity_type'] ?? 'OTHER';
        if (!isset($entityGroups[$type])) {
            $entityGroups[$type] = [];
        }
        $entityGroups[$type][] = $ent;
    }
    ksort($entityGroups);
}

$entityTypeColors = [
    'PERSON'       => 'bg-blue-100 text-blue-800',
    'ORGANIZATION' => 'bg-purple-100 text-purple-800',
    'ORG'          => 'bg-purple-100 text-purple-800',
    'LOCATION'     => 'bg-green-100 text-green-800',
    'LOC'          => 'bg-green-100 text-green-800',
    'GPE'          => 'bg-green-100 text-green-800',
    'DATE'         => 'bg-amber-100 text-amber-800',
    'MONEY'        => 'bg-emerald-100 text-emerald-800',
    'LAW'          => 'bg-red-100 text-red-800',
    'EVENT'        => 'bg-pink-100 text-pink-800',
    'NORP'         => 'bg-indigo-100 text-indigo-800',
    'FAC'          => 'bg-teal-100 text-teal-800',
    'PRODUCT'      => 'bg-orange-100 text-orange-800',
    'WORK_OF_ART'  => 'bg-rose-100 text-rose-800',
];

function getEntityColor(string $type, array $colors): string {
    return $colors[$type] ?? 'bg-gray-100 text-gray-800';
}

$title = htmlspecialchars($filename) . ' - Research Document Archive';
$content = '';
ob_start();
?>

<!-- Breadcrumb -->
<nav class="flex items-center text-sm text-gray-500 mb-4" aria-label="Breadcrumb">
    <a href="/" class="hover:text-gray-700 transition-colors">Home</a>
    <svg class="h-4 w-4 mx-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
    </svg>
    <a href="/browse/<?= htmlspecialchars(urlencode($sourceSection)) ?>" class="hover:text-gray-700 transition-colors">
        <?= htmlspecialchars($collectionName) ?>
    </a>
    <svg class="h-4 w-4 mx-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
    </svg>
    <span class="text-gray-900 font-medium truncate max-w-xs"><?= htmlspecialchars($filename) ?></span>
</nav>

<!-- Document Header -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-900 break-all"><?= htmlspecialchars($filename) ?></h1>
        <div class="mt-1 flex items-center space-x-3 text-sm text-gray-500">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700">
                <?= htmlspecialchars($collectionName) ?>
            </span>
            <span><?= $totalPages ?> page<?= $totalPages !== 1 ? 's' : '' ?></span>
        </div>
    </div>
    <a href="/pdf/<?= (int)$docId ?>" target="_blank"
       class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
        <svg class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
        </svg>
        Download PDF
    </a>
</div>

<!-- Page Navigation Bar -->
<div class="bg-white border border-gray-200 rounded-lg shadow-sm p-3 mb-4">
    <div class="flex items-center justify-between">
        <button id="prev-page-btn" disabled
                class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
            <svg class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
            </svg>
            Previous
        </button>

        <div class="flex items-center space-x-2">
            <span class="text-sm text-gray-500">Page</span>
            <select id="page-selector" class="rounded-md border-gray-300 text-sm py-1.5 pl-3 pr-8 focus:border-blue-500 focus:ring-blue-500">
                <?php for ($i = 1; $i <= $totalPages; $i++): ?>
                    <option value="<?= $i ?>"><?= $i ?></option>
                <?php endfor; ?>
            </select>
            <span class="text-sm text-gray-500">of <?= $totalPages ?></span>
        </div>

        <div class="flex items-center space-x-2">
            <a id="find-similar-btn" href="/similar/0" target="_blank"
               class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-purple-700 bg-purple-50 border border-purple-200 rounded-md hover:bg-purple-100 transition-colors">
                <svg class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
                </svg>
                Find Similar
            </a>
            <button id="next-page-btn"
                    class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                Next
                <svg class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
            </button>
        </div>
    </div>
</div>

<!-- Split Pane Layout -->
<div class="flex flex-col lg:flex-row gap-4" style="min-height: 70vh;">

    <!-- Left: PDF Viewer -->
    <div class="lg:w-3/5 bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden flex flex-col">
        <iframe id="pdf-viewer"
                src="/pdf/<?= (int)$docId ?>"
                class="flex-1 w-full"
                style="min-height: 600px; border: none;"
                title="PDF Document Viewer">
        </iframe>
    </div>

    <!-- Right: OCR Text / Entities Tabs -->
    <div class="lg:w-2/5 bg-white border border-gray-200 rounded-lg shadow-sm flex flex-col overflow-hidden">

        <!-- Tab Headers -->
        <div class="flex border-b border-gray-200 bg-gray-50">
            <button id="tab-ocr"
                    class="flex-1 px-4 py-3 text-sm font-medium text-blue-600 border-b-2 border-blue-600 bg-white transition-colors"
                    data-tab="ocr">
                <svg class="inline h-4 w-4 mr-1.5 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
                </svg>
                OCR Text
            </button>
            <button id="tab-entities"
                    class="flex-1 px-4 py-3 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 transition-colors"
                    data-tab="entities">
                <svg class="inline h-4 w-4 mr-1.5 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
                </svg>
                Entities
                <?php if (!empty($entities)): ?>
                    <span class="ml-1 inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-gray-200 text-gray-700">
                        <?= count($entities) ?>
                    </span>
                <?php endif; ?>
            </button>
            <button id="tab-topics"
                    class="flex-1 px-4 py-3 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 transition-colors"
                    data-tab="topics">
                <svg class="inline h-4 w-4 mr-1.5 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
                </svg>
                Topics
                <?php if (!empty($topics)): ?>
                    <span class="ml-1 inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700">
                        <?= count(array_filter($topics, fn($s) => $s > 0.3)) ?>
                    </span>
                <?php endif; ?>
            </button>
            <button id="tab-crisis"
                    class="flex-1 px-4 py-3 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 transition-colors"
                    data-tab="crisis">
                <svg class="inline h-4 w-4 mr-1.5 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Crisis
                <?php if (!empty($crisisEvents)): ?>
                    <span class="ml-1 inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
                        <?= count($crisisEvents) ?>
                    </span>
                <?php endif; ?>
            </button>
        </div>

        <!-- OCR Text Panel -->
        <div id="panel-ocr" class="flex-1 overflow-auto p-4">
            <div id="ocr-loading" class="flex items-center justify-center py-12">
                <svg class="animate-spin h-6 w-6 text-blue-500 mr-3" 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>
                <span class="text-sm text-gray-500">Loading OCR text...</span>
            </div>
            <div id="ocr-content" class="hidden">
                <pre id="ocr-text" class="text-sm text-gray-800 whitespace-pre-wrap font-sans leading-relaxed"></pre>
            </div>
            <div id="ocr-empty" class="hidden text-center py-12">
                <svg class="mx-auto h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
                </svg>
                <p class="mt-3 text-sm text-gray-500">No OCR text available for this page.</p>
            </div>
            <div id="ocr-error" class="hidden text-center py-12">
                <svg class="mx-auto h-10 w-10 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                </svg>
                <p class="mt-3 text-sm text-red-600">Failed to load OCR text.</p>
            </div>
        </div>

        <!-- Entities Panel -->
        <div id="panel-entities" class="flex-1 overflow-auto p-4 hidden">
            <?php if (!empty($entityGroups)): ?>
                <div class="space-y-5">
                    <?php foreach ($entityGroups as $type => $ents): ?>
                        <div>
                            <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
                                <?= htmlspecialchars($type) ?>
                                <span class="text-gray-400 font-normal">(<?= count($ents) ?>)</span>
                            </h4>
                            <div class="flex flex-wrap gap-2">
                                <?php
                                    // Deduplicate entities by text
                                    $seen = [];
                                    foreach ($ents as $ent):
                                        $text = $ent['entity_text'] ?? '';
                                        $key = strtolower(trim($text));
                                        if (isset($seen[$key])) continue;
                                        $seen[$key] = true;
                                        $colorClass = getEntityColor($type, $entityTypeColors);
                                ?>
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium <?= $colorClass ?>">
                                        <?= htmlspecialchars($text) ?>
                                        <?php if (!empty($ent['page_number'])): ?>
                                            <span class="ml-1.5 opacity-60">p.<?= (int)$ent['page_number'] ?></span>
                                        <?php endif; ?>
                                    </span>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php else: ?>
                <div class="text-center py-12">
                    <svg class="mx-auto h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
                    </svg>
                    <p class="mt-3 text-sm text-gray-500">No entities extracted for this document.</p>
                </div>
            <?php endif; ?>
        </div>

        <!-- Topics & Keywords Panel -->
        <div id="panel-topics" class="flex-1 overflow-auto p-4 hidden">
            <?php if (!empty($topics)): ?>
                <div class="space-y-6">
                    <!-- Topic Classifications -->
                    <div>
                        <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Topic Classifications</h4>
                        <div class="space-y-2">
                            <?php
                            $topicColors = [
                                'intelligence operations' => 'bg-red-500',
                                'national security' => 'bg-orange-500',
                                'military operations' => 'bg-amber-600',
                                'surveillance' => 'bg-yellow-500',
                                'assassination' => 'bg-red-700',
                                'congressional legislation' => 'bg-blue-500',
                                'government oversight' => 'bg-indigo-500',
                                'civil rights' => 'bg-purple-500',
                                'foreign policy' => 'bg-teal-500',
                                'law enforcement' => 'bg-cyan-600',
                                'financial regulation' => 'bg-emerald-500',
                                'public health' => 'bg-green-500',
                                'human experimentation' => 'bg-rose-600',
                                'scientific research' => 'bg-violet-500',
                                'judicial proceedings' => 'bg-slate-500',
                            ];
                            foreach ($topics as $topic => $score):
                                if ($score < 0.1) continue;
                                $pct = min(100, $score * 100);
                                $barColor = $topicColors[$topic] ?? 'bg-gray-500';
                            ?>
                                <div>
                                    <div class="flex justify-between items-center mb-1">
                                        <span class="text-sm text-gray-700 capitalize"><?= htmlspecialchars($topic) ?></span>
                                        <span class="text-xs font-mono text-gray-500"><?= number_format($pct, 1) ?>%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="<?= $barColor ?> h-2 rounded-full transition-all" style="width: <?= $pct ?>%"></div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <?php if (!empty($keywords)): ?>
                    <!-- Keywords -->
                    <div>
                        <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Extracted Keywords</h4>
                        <div class="flex flex-wrap gap-2">
                            <?php foreach ($keywords as $kw):
                                $opacity = max(0.4, min(1.0, (float)$kw['score']));
                            ?>
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-blue-50 text-blue-700 border border-blue-200"
                                      style="opacity: <?= $opacity ?>">
                                    <?= htmlspecialchars($kw['keyword']) ?>
                                </span>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <?php endif; ?>

                    <?php
                    $stamps = $forensic['stamps'] ?? [];
                    $pdfMeta = $forensic['pdf_metadata'] ?? [];
                    if (!empty($stamps) || !empty($pdfMeta) || !empty($redactionSummary)):
                    ?>
                    <!-- Forensic Analysis -->
                    <div>
                        <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Forensic Analysis</h4>

                        <?php if (!empty($stamps)): ?>
                        <div class="mb-3">
                            <p class="text-[10px] font-medium text-gray-400 uppercase mb-1">Classification Stamps</p>
                            <div class="flex flex-wrap gap-1.5">
                                <?php
                                $stampColors = [
                                    'TOP SECRET' => 'bg-red-100 text-red-800 border-red-200',
                                    'SECRET' => 'bg-orange-100 text-orange-800 border-orange-200',
                                    'CONFIDENTIAL' => 'bg-yellow-100 text-yellow-800 border-yellow-200',
                                    'CLASSIFIED' => 'bg-amber-100 text-amber-800 border-amber-200',
                                    'UNCLASSIFIED' => 'bg-green-100 text-green-800 border-green-200',
                                    'DECLASSIFIED' => 'bg-emerald-100 text-emerald-800 border-emerald-200',
                                    'EYES ONLY' => 'bg-red-100 text-red-800 border-red-200',
                                    'NOFORN' => 'bg-rose-100 text-rose-800 border-rose-200',
                                    'REDACTED' => 'bg-gray-800 text-white border-gray-900',
                                ];
                                foreach ($stamps as $s):
                                    $color = $stampColors[$s['stamp']] ?? 'bg-gray-100 text-gray-700 border-gray-200';
                                ?>
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold border <?= $color ?>">
                                        <?= htmlspecialchars($s['stamp']) ?>
                                        <?php if ($s['count'] > 1): ?>
                                            <span class="ml-1 opacity-60">x<?= $s['count'] ?></span>
                                        <?php endif; ?>
                                    </span>
                                <?php endforeach; ?>
                            </div>
                        </div>
                        <?php endif; ?>

                        <?php if (!empty($redactionSummary) && ($redactionSummary['total_redactions'] ?? 0) > 0): ?>
                        <div class="mb-3">
                            <p class="text-[10px] font-medium text-gray-400 uppercase mb-1">Redaction Detection</p>
                            <div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-700">
                                        <span class="font-semibold text-red-700"><?= $redactionSummary['total_redactions'] ?></span>
                                        redacted region<?= $redactionSummary['total_redactions'] != 1 ? 's' : '' ?> detected
                                    </span>
                                    <span class="text-xs text-gray-500">
                                        max <?= number_format($redactionSummary['max_page_area_pct'] ?? 0, 1) ?>% area
                                    </span>
                                </div>
                                <div class="mt-1 w-full bg-gray-200 rounded-full h-1.5">
                                    <div class="bg-red-600 h-1.5 rounded-full" style="width: <?= min(100, ($redactionSummary['max_page_area_pct'] ?? 0)) ?>%"></div>
                                </div>
                            </div>
                        </div>
                        <?php endif; ?>

                        <?php if (!empty($pdfMeta)): ?>
                        <div>
                            <p class="text-[10px] font-medium text-gray-400 uppercase mb-1">PDF Metadata</p>
                            <dl class="text-xs space-y-1">
                                <?php foreach ($pdfMeta as $key => $val): ?>
                                    <div class="flex">
                                        <dt class="w-24 text-gray-500 flex-shrink-0"><?= htmlspecialchars(ucfirst($key)) ?></dt>
                                        <dd class="text-gray-700 truncate"><?= htmlspecialchars($val) ?></dd>
                                    </div>
                                <?php endforeach; ?>
                            </dl>
                        </div>
                        <?php endif; ?>
                    </div>
                    <?php endif; ?>

                    <?php if (!empty($sentiment) && empty($sentiment['note'])): ?>
                    <!-- Sentiment -->
                    <div>
                        <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Sentiment</h4>
                        <?php
                        $pol = $sentiment['polarity'] ?? 0;
                        $sub = $sentiment['subjectivity'] ?? 0;
                        if ($pol > 0.1) { $polLabel = 'Positive'; $polColor = 'text-green-700'; }
                        elseif ($pol < -0.1) { $polLabel = 'Negative'; $polColor = 'text-red-700'; }
                        else { $polLabel = 'Neutral'; $polColor = 'text-gray-600'; }
                        ?>
                        <div class="flex gap-4">
                            <div class="flex-1 bg-gray-50 rounded-lg p-2.5 border border-gray-200 text-center">
                                <p class="text-[10px] text-gray-400 uppercase">Polarity</p>
                                <p class="text-sm font-bold <?= $polColor ?>"><?= $polLabel ?></p>
                                <p class="text-[10px] text-gray-500 font-mono"><?= number_format($pol, 3) ?></p>
                            </div>
                            <div class="flex-1 bg-gray-50 rounded-lg p-2.5 border border-gray-200 text-center">
                                <p class="text-[10px] text-gray-400 uppercase">Subjectivity</p>
                                <p class="text-sm font-bold text-gray-700"><?= number_format($sub * 100, 0) ?>%</p>
                                <p class="text-[10px] text-gray-500"><?= $sub > 0.5 ? 'Subjective' : 'Objective' ?></p>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
            <?php else: ?>
                <div class="text-center py-12">
                    <svg class="mx-auto h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
                    </svg>
                    <p class="mt-3 text-sm text-gray-500">No topic classifications available yet.</p>
                    <p class="mt-1 text-xs text-gray-400">The ML pipeline may still be processing.</p>
                </div>
            <?php endif; ?>
        </div>

        <!-- Crisis Context Panel -->
        <div id="panel-crisis" class="flex-1 overflow-auto p-4 hidden">
            <?php if (!empty($crisisEvents)): ?>
                <div class="space-y-4">
                    <?php
                    $crisisMethodColors = [
                        'date'       => 'bg-blue-50 text-blue-700',
                        'keyword'    => 'bg-green-50 text-green-700',
                        'entity'     => 'bg-purple-50 text-purple-700',
                        'collection' => 'bg-amber-50 text-amber-700',
                    ];
                    foreach ($crisisEvents as $ce):
                        $methods = $ce['match_methods'] ?? '[]';
                        if (is_string($methods)) $methods = json_decode($methods, true) ?: [];
                        $details = $ce['details'] ?? '{}';
                        if (is_string($details)) $details = json_decode($details, true) ?: [];
                        $score = (float)($ce['relevance_score'] ?? 0);
                        $scorePercent = min(100, $score * 100);
                        $startDate = $ce['start_date'] ?? '';
                        $endDate = $ce['end_date'] ?? '';
                        $dateStr = $startDate ? date('M j, Y', strtotime($startDate)) : '';
                        if ($endDate && $endDate !== $startDate) {
                            $dateStr .= ' — ' . date('M j, Y', strtotime($endDate));
                        }
                    ?>
                        <a href="/crisis/<?= (int)$ce['id'] ?>"
                           class="block bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors border border-gray-200">
                            <div class="flex items-start justify-between gap-2">
                                <div>
                                    <h4 class="text-sm font-semibold text-gray-900">
                                        <?= htmlspecialchars($ce['event_name'] ?? '') ?>
                                    </h4>
                                    <p class="text-xs text-gray-500 mt-0.5"><?= $dateStr ?></p>
                                </div>
                                <span class="flex-shrink-0 inline-flex items-center px-2 py-1 rounded-full text-xs font-bold
                                    <?= $scorePercent >= 60 ? 'bg-red-100 text-red-800' :
                                       ($scorePercent >= 30 ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-700') ?>">
                                    <?= number_format($scorePercent, 0) ?>%
                                </span>
                            </div>

                            <!-- Relevance bar -->
                            <div class="mt-2">
                                <div class="w-full bg-gray-200 rounded-full h-1.5">
                                    <div class="bg-blue-500 h-1.5 rounded-full" style="width: <?= $scorePercent ?>%"></div>
                                </div>
                            </div>

                            <!-- Match methods -->
                            <div class="mt-2 flex flex-wrap gap-1">
                                <?php foreach ($methods as $m):
                                    $mColor = $crisisMethodColors[$m] ?? 'bg-gray-50 text-gray-700';
                                ?>
                                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium <?= $mColor ?>">
                                        <?= htmlspecialchars($m) ?>
                                    </span>
                                <?php endforeach; ?>
                            </div>

                            <!-- Matched keywords if present -->
                            <?php if (!empty($details['matched_keywords'])): ?>
                                <div class="mt-2">
                                    <p class="text-[10px] font-medium text-gray-400 uppercase mb-1">Matched Keywords</p>
                                    <div class="flex flex-wrap gap-1">
                                        <?php foreach ($details['matched_keywords'] as $kw): ?>
                                            <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] bg-green-50 text-green-700">
                                                <?= htmlspecialchars($kw) ?>
                                            </span>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            <?php endif; ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            <?php else: ?>
                <div class="text-center py-12">
                    <svg class="mx-auto h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <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 class="mt-3 text-sm text-gray-500">No crisis correlations found for this document.</p>
                    <p class="mt-1 text-xs text-gray-400">The ML pipeline may still be processing.</p>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<script>
(function() {
    const docId = <?= (int)$docId ?>;
    const totalPages = <?= (int)$totalPages ?>;
    let currentPage = 1;

    // Page metadata from server (for "Find Similar" page IDs)
    const pagesMeta = <?= json_encode($pages ?? []) ?>;

    // DOM elements
    const pageSelector = document.getElementById('page-selector');
    const prevBtn = document.getElementById('prev-page-btn');
    const nextBtn = document.getElementById('next-page-btn');
    const findSimilarBtn = document.getElementById('find-similar-btn');
    const ocrLoading = document.getElementById('ocr-loading');
    const ocrContent = document.getElementById('ocr-content');
    const ocrText = document.getElementById('ocr-text');
    const ocrEmpty = document.getElementById('ocr-empty');
    const ocrError = document.getElementById('ocr-error');

    // Tab elements
    const tabs = {
        ocr: { tab: document.getElementById('tab-ocr'), panel: document.getElementById('panel-ocr') },
        entities: { tab: document.getElementById('tab-entities'), panel: document.getElementById('panel-entities') },
        topics: { tab: document.getElementById('tab-topics'), panel: document.getElementById('panel-topics') },
        crisis: { tab: document.getElementById('tab-crisis'), panel: document.getElementById('panel-crisis') },
    };

    // Tab switching
    function switchTab(active) {
        Object.keys(tabs).forEach(function(key) {
            var t = tabs[key];
            if (key === active) {
                t.tab.classList.add('text-blue-600', 'border-blue-600', 'bg-white');
                t.tab.classList.remove('text-gray-500', 'border-transparent');
                t.panel.classList.remove('hidden');
            } else {
                t.tab.classList.remove('text-blue-600', 'border-blue-600', 'bg-white');
                t.tab.classList.add('text-gray-500', 'border-transparent');
                t.panel.classList.add('hidden');
            }
        });
    }

    Object.keys(tabs).forEach(function(key) {
        tabs[key].tab.addEventListener('click', function() { switchTab(key); });
    });

    // Load OCR text for a page
    function loadOcrText(pageNum) {
        ocrLoading.classList.remove('hidden');
        ocrContent.classList.add('hidden');
        ocrEmpty.classList.add('hidden');
        ocrError.classList.add('hidden');

        fetch('/api/page/' + docId + '/' + pageNum)
            .then(function(response) {
                if (!response.ok) throw new Error('HTTP ' + response.status);
                return response.json();
            })
            .then(function(data) {
                ocrLoading.classList.add('hidden');
                var text = data.ocr_text || data.text || '';
                if (text.trim().length > 0) {
                    ocrText.textContent = text;
                    ocrContent.classList.remove('hidden');
                } else {
                    ocrEmpty.classList.remove('hidden');
                }
            })
            .catch(function() {
                ocrLoading.classList.add('hidden');
                ocrError.classList.remove('hidden');
            });
    }

    // Update page navigation state
    function updateNavigation() {
        prevBtn.disabled = (currentPage <= 1);
        nextBtn.disabled = (currentPage >= totalPages);
        pageSelector.value = currentPage;

        // Update "Find Similar" link
        var pageId = 0;
        for (var i = 0; i < pagesMeta.length; i++) {
            if (pagesMeta[i].page_number == currentPage) {
                pageId = pagesMeta[i].id || 0;
                break;
            }
        }
        findSimilarBtn.href = '/similar/' + pageId;
    }

    // Navigate to a page
    function goToPage(pageNum) {
        if (pageNum < 1 || pageNum > totalPages) return;
        currentPage = pageNum;
        updateNavigation();
        loadOcrText(currentPage);
    }

    // Event listeners
    prevBtn.addEventListener('click', function() { goToPage(currentPage - 1); });
    nextBtn.addEventListener('click', function() { goToPage(currentPage + 1); });
    pageSelector.addEventListener('change', function() { goToPage(parseInt(this.value, 10)); });

    // Keyboard navigation
    document.addEventListener('keydown', function(e) {
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
        if (e.key === 'ArrowLeft') { goToPage(currentPage - 1); }
        if (e.key === 'ArrowRight') { goToPage(currentPage + 1); }
    });

    // Initial load
    goToPage(1);
})();
</script>

<?php
$content = ob_get_clean();
include __DIR__ . '/layout.php';
?>