<?= $this->extend('layout/app') ?>

<?= $this->section('title') ?>Documents<?= $this->endSection() ?>
<?= $this->section('pageTitle') ?>Knowledge Base<?= $this->endSection() ?>

<?= $this->section('content') ?>

<div class="flex gap-5 flex-col lg:flex-row">

    <aside class="lg:w-56 flex-shrink-0">
        <div class="glass rounded-2xl border border-white/60 shadow-sm overflow-hidden sticky top-24">
            <div class="px-4 py-3 border-b border-slate-200/60">
                <h3 class="font-semibold text-slate-800 flex items-center gap-1.5 text-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                    </svg>
                    Categories
                </h3>
            </div>
            <nav class="p-1.5 space-y-0.5">
                <a href="<?= esc(site_url('/agent/documents')) ?>" class="flex items-center gap-2 px-2.5 py-2 rounded-lg text-xs transition-all duration-200 <?= $selectedCategory === null ? 'bg-blue-50 text-blue-700 font-medium border border-blue-100' : 'text-slate-600 hover:bg-slate-50' ?>">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                    </svg>
                    All Documents
                    <span class="ml-auto inline-flex items-center justify-center w-5 h-5 rounded-full text-[10px] font-semibold <?= $selectedCategory === null ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-500' ?>"><?= count($documents) ?></span>
                </a>

                <?php foreach ($categories as $cat): ?>
                    <?php $catDocCount = 0; ?>
                    <?php
                        $catId = (int)$cat['id'];
                        foreach ($documents as $d) {
                            if ((int)($d['category_id'] ?? 0) === $catId) $catDocCount++;
                        }
                    ?>
                    <a href="<?= esc(site_url('/agent/documents/category/' . $cat['id'])) ?>" class="flex items-center gap-2 px-2.5 py-2 rounded-lg text-xs transition-all duration-200 <?= $selectedCategory === (int)$cat['id'] ? 'bg-blue-50 text-blue-700 font-medium border border-blue-100' : 'text-slate-600 hover:bg-slate-50' ?>">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                        </svg>
                        <span class="truncate"><?= esc($cat['name']) ?></span>
                        <?php if ($catDocCount > 0): ?>
                            <span class="ml-auto inline-flex items-center justify-center w-5 h-5 rounded-full text-[10px] font-semibold <?= $selectedCategory === (int)$cat['id'] ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-500' ?>"><?= $catDocCount ?></span>
                        <?php endif; ?>
                    </a>
                <?php endforeach; ?>
            </nav>
        </div>
    </aside>

    <div class="flex-1 min-w-0">
        <div class="mb-5 flex items-center justify-between flex-wrap gap-3">
            <div>
                <h2 class="text-lg font-bold text-slate-800">
                    <?php if ($selectedCategory !== null): ?>
                        <?php
                            $catName = 'Category';
                            foreach ($categories as $c) {
                                if ((int)$c['id'] === $selectedCategory) { $catName = $c['name']; break; }
                            }
                            echo esc($catName);
                        ?>
                    <?php else: ?>
                        All Documents
                    <?php endif; ?>
                </h2>
                <p class="text-xs text-slate-500 mt-0.5"><?= count($documents) ?> document<?= count($documents) !== 1 ? 's' : '' ?> available</p>
            </div>
            <div class="flex items-center gap-2">
                <div class="relative">
                    <input type="text" id="docSearch" placeholder="Search documents..." class="w-60 pl-9 pr-3.5 py-2 rounded-xl bg-white border border-slate-200 focus:border-blue-400 focus:ring-2 focus:ring-blue-100 outline-none text-xs transition-all placeholder:text-slate-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </div>
            </div>
        </div>

        <?php if (empty($documents)): ?>
            <div class="glass rounded-2xl border border-white/60 shadow-sm p-10 text-center">
                <div class="w-12 h-12 mx-auto mb-3 rounded-xl bg-slate-100 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                </div>
                <h3 class="font-semibold text-slate-800 text-sm">No documents found</h3>
                <p class="text-xs text-slate-500 mt-1">This category doesn't have any documents yet.</p>
            </div>
        <?php else: ?>
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" id="docsGrid">
                <?php foreach ($documents as $doc): ?>
                    <?php
                        $typeBadgeClass = 'bg-slate-100 text-slate-700 border-slate-200';
                        $typeIconClass = 'text-slate-500';
                        $icon = '';
                        switch ($doc['type']) {
                            case 'pdf':
                                $typeBadgeClass = 'bg-red-50 text-red-700 border-red-100';
                                $typeIconClass = 'text-red-500';
                                $icon = '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>';
                                break;
                            case 'docx':
                            case 'txt':
                                $typeBadgeClass = 'bg-blue-50 text-blue-700 border-blue-100';
                                $typeIconClass = 'text-blue-500';
                                $icon = '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>';
                                break;
                            case 'image':
                                $typeBadgeClass = 'bg-purple-50 text-purple-700 border-purple-100';
                                $typeIconClass = 'text-purple-500';
                                $icon = '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>';
                                break;
                            case 'video':
                                $typeBadgeClass = 'bg-pink-50 text-pink-700 border-pink-100';
                                $typeIconClass = 'text-pink-500';
                                $icon = '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>';
                                break;
                            case 'link':
                                $typeBadgeClass = 'bg-emerald-50 text-emerald-700 border-emerald-100';
                                $typeIconClass = 'text-emerald-500';
                                $icon = '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>';
                                break;
                            default:
                                $icon = '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>';
                        }
                    ?>
                    <div class="glass rounded-2xl border border-white/60 shadow-sm hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300 overflow-hidden group doc-card" data-title="<?= esc(strtolower($doc['title'])) ?>" data-type="<?= esc(strtolower($doc['type'])) ?>">
                        <div class="h-20 bg-gradient-to-br from-slate-50 to-slate-100 flex items-center justify-center relative overflow-hidden">
                            <div class="absolute inset-0 opacity-30 group-hover:opacity-50 transition-opacity">
                                <div class="absolute -top-6 -right-6 w-20 h-20 rounded-full bg-white blur-xl"></div>
                                <div class="absolute -bottom-6 -left-6 w-20 h-20 rounded-full bg-blue-100 blur-xl"></div>
                            </div>
                            <div class="relative w-10 h-10 rounded-xl bg-white flex items-center justify-center shadow-sm <?= $typeIconClass ?>">
                                <?= $icon ?>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex items-start justify-between gap-2 mb-2">
                                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-semibold uppercase tracking-wide border <?= $typeBadgeClass ?> flex-shrink-0">
                                    <?= esc($doc['type']) ?>
                                </span>
                                <?php if (!empty($doc['category_name'])): ?>
                                    <span class="text-[11px] text-slate-500 truncate"><?= esc($doc['category_name']) ?></span>
                                <?php endif; ?>
                            </div>
                            <h4 class="font-semibold text-slate-800 mb-1 line-clamp-2 leading-snug group-hover:text-blue-700 transition-colors text-sm"><?= esc($doc['title']) ?></h4>
                            <?php if (!empty($doc['description'])): ?>
                                <p class="text-xs text-slate-500 line-clamp-2 mb-3"><?= esc($doc['description']) ?></p>
                            <?php else: ?>
                                <p class="text-xs text-slate-500 italic mb-3">No description</p>
                            <?php endif; ?>
                            <div class="flex items-center justify-between pt-2.5 border-t border-slate-100">
                                <span class="text-[11px] text-slate-500"><?= date('M j, Y', strtotime($doc['created_at'])) ?></span>
                                <a href="<?= esc(site_url('/agent/documents/view/' . $doc['id'])) ?>" class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-slate-900 text-white text-[11px] font-medium hover:bg-slate-800 transition-colors shadow-sm group-hover:bg-blue-600">
                                    View
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" 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>
                                </a>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const searchInput = document.getElementById('docSearch');
    if (!searchInput) return;
    searchInput.addEventListener('input', function () {
        const q = this.value.toLowerCase().trim();
        const cards = document.querySelectorAll('.doc-card');
        cards.forEach(card => {
            const title = card.getAttribute('data-title') || '';
            const type = card.getAttribute('data-type') || '';
            const show = q === '' || title.includes(q) || type.includes(q);
            card.style.display = show ? '' : 'none';
        });
    });
});
</script>

<?= $this->endSection() ?>
