<?php
require_once './source/class/class_core.php';
$discuz = C::app();
$discuz->init();

$tid = intval($_GET['tid']);
$cid = intval($_GET['cid']);

$topic     = 'pre_keke_doc_topic';
$chapter   = 'pre_keke_doc_topic_chapter';
$relation  = 'pre_keke_doc_topic_relation';
$doc       = 'pre_keke_doc';

$th = DB::fetch_first("SELECT * FROM $topic WHERE id='$tid'");

$chapters = DB::fetch_all("
    SELECT c.*, COUNT(r.doc_id) AS doc_count
    FROM $chapter c
    LEFT JOIN $relation r ON c.id = r.chapter_id
    WHERE c.topic_id = '$tid'
    GROUP BY c.id
    ORDER BY doc_count DESC, c.sort ASC
");

if($cid) {
    $docs = DB::fetch_all("
        SELECT d.id, d.title, d.view, d.down, d.page
        FROM $doc d
        JOIN $relation r ON d.id = r.doc_id
        WHERE r.topic_id='$tid' AND r.chapter_id='$cid'
        ORDER BY d.view DESC
    ");
} else {
    $docs = DB::fetch_all("
        SELECT DISTINCT d.id, d.title, d.view, d.down, d.page
        FROM $doc d
        JOIN $relation r ON d.id = r.doc_id
        WHERE r.topic_id='$tid'
        ORDER BY d.view DESC
    ");
}

include template('common/header');
?>

<style>
*{box-sizing:border-box;margin:0;padding:0}
body{background:#f7f8fa !important}
.container{max-width:1200px;margin:30px auto;padding:0 15px}

.back-btn{
    display:inline-block;
    margin-bottom:20px;
    padding:10px 20px;
    background:#fff;
    border-radius:8px;
    color:#333;
    text-decoration:none;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}
.back-btn:hover{background:#f5f5f5}

.top-layout{
    display:flex;
    gap:24px;
    margin-bottom:30px;
    height:400px;
    align-items:stretch;
}

.cover{
    width:270px;
    height:100%;
    object-fit:cover;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
}

.right-box{
    flex:1;
    display:flex;
    flex-direction:column;
    height:100%;
    gap:12px;
}

.topic-info{
    background:#fff;
    padding:22px;
    border-radius:12px;
    flex-shrink:0;
}
.topic-info h1{
    font-size:22px;
    margin-bottom:10px;
}
.topic-info p{
    color:#666;line-height:1.7;
}

#searchInput{
    width:100%;
    padding:12px 16px;
    border:1px solid #eee;
    border-radius:8px;
    font-size:14px;
    outline:none;
}

.catalog{
    background:#fff;
    padding:20px;
    border-radius:12px;
    flex:1;
    overflow-y:auto;
}
.catalog-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.catalog-tabs a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    background:#f6f6f6;
    border-radius:8px;
    text-decoration:none;
    color:#333;
    font-size:14px;
    white-space:nowrap;
}
.catalog-tabs a.active{
    background:#007bff;
    color:#fff;
}

.doc-header{
    background: linear-gradient(to right, #007bff, #0056b3);
    color:#fff;
    font-size:18px;
    font-weight:bold;
    padding:16px 24px;
    border-radius:12px 12px 0 0;
    box-shadow:0 2px 8px rgba(0,123,255,0.15);
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:10px;
}
.doc-header #docSearch{
    padding:8px 12px;
    border:none;
    border-radius:6px;
    font-size:14px;
    width:240px;
    outline:none;
}

/* ========== 核心区域 ========== */
.doc-box{
    background:#fff;
    padding:24px;
    border-radius:0 0 12px 12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.04);
    max-height:500px;
    overflow-y: auto; /* 允许内部滚动 */
    position:relative;
    overscroll-behavior: contain;
}
.doc-scroll-wrap{
    animation: verticalMarquee 1s linear infinite;
}
@keyframes verticalMarquee {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
.doc-item{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #f0f0f0;
    gap:50px;
}
.doc-item:last-child{border-bottom:none}
.doc-title{
    flex:1;
    font-size:16px;
    color:#007bff;
    text-decoration:none;
}
.doc-info{
    display:flex;
    gap:25px;
    color:#666;
    font-size:13px;
    margin-left:0;
}
.doc-info span{
    min-width:85px;
    text-align:left;
}
/* ============================ */

.hidden{display:none !important}

@media (max-width: 768px) {
  .container { margin: 15px auto; }
  .back-btn { padding: 8px 14px; font-size: 14px; }
  
  .top-layout {
    flex-direction: column;
    height: auto;
    gap: 16px;
  }
  .cover {
    width: 100%;
    height: 200px;
    border-radius: 10px;
  }
  .right-box { height: auto; gap: 10px; }
  .topic-info { padding: 16px; }
  .topic-info h1 { font-size: 18px; }
  
  .catalog { padding: 14px; }
  .catalog-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
  }
  .catalog-tabs a {
    justify-content: flex-start;
    width: 30%;
    min-width: 30%;
    max-width: 30%;
    padding: 10px 10px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .catalog-tabs a.more-btn {
    background: #007bff;
    color: #fff;
    font-weight: bold;
    justify-content: center;
  }

  .doc-header {
    padding: 12px 16px;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .doc-header #docSearch { width: 100%; }
  
  .doc-box { padding: 16px; }
  .doc-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 0;
  }
  .doc-title { font-size: 15px; line-height: 1.5; }
  .doc-info { gap: 15px; flex-wrap: wrap; }
  .doc-info span { min-width: auto; }
}

.catalog-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-content {
  background: #fff;
  width: 100%;
  max-width: 380px;
  border-radius: 16px;
  overflow: hidden;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  padding: 16px;
  background: #007bff;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.modal-body {
  padding: 10px;
  overflow-y: auto;
}
.modal-catalog {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modal-catalog a {
  flex: 1;
  min-width: 45%;
  padding: 12px 10px;
  background: #f6f6f6;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-catalog a.active {
  background: #007bff;
  color: #fff;
}
.modal-close {
  padding: 14px;
  text-align: center;
  border-top: 1px solid #eee;
  color: #666;
  cursor: pointer;
  font-size: 15px;
}
</style>

<div class="container">
    <a href="topic_list.php" class="back-btn">← 返回专题列表</a>

    <div class="top-layout">
        <img src="<?php echo $th['cover']?>" class="cover" alt="">
        
        <div class="right-box">
            <div class="topic-info">
                <h1><?php echo $th['title']?></h1>
                <p><?php echo $th['intro'] ?: '暂无简介'?></p>
            </div>

            <input id="searchInput" placeholder="🔍 实时搜索本专题目录...">

            <div class="catalog">
                <div class="catalog-tabs" id="catalogList">
                    <a href="topic.php?tid=<?=$tid?>" class="<?=empty($cid)?'active':''?>">全部文档</a>
                    <?php foreach($chapters as $index => $c) { ?>
                    <a
                        href="topic.php?tid=<?=$tid?>&cid=<?=$c['id']?>"
                        class="<?=$cid==$c['id']?'active':''?> catalog-item"
                        data-title="<?php echo htmlspecialchars($c['title'])?>"
                        <?= $index >= 4 ? 'style="display:none;"' : '' ?>
                    >
                        <?=$c['title']?>
                    </a>
                    <?php } ?>
                    <?php if(count($chapters) > 4) { ?>
                    <a href="javascript:;" class="more-btn" id="openModal">更多 +</a>
                    <?php } ?>
                </div>
            </div>
        </div>
    </div>

    <div class="doc-header">
        <div>相关文档</div>
        <input id="docSearch" placeholder="🔍 搜索文档标题">
    </div>

    <div class="doc-box" id="docList">
        <?php if(empty($docs)) { ?>
            <div style="padding:40px;text-align:center;color:#999">暂无文档</div>
        <?php } else { ?>
            <div class="doc-scroll-wrap" id="scrollWrap">
                <?php foreach($docs as $d) { ?>
                <div class="doc-item" data-title="<?php echo strip_tags($d['title']); ?>">
                    <a class="doc-title" href="plugin.php?id=keke_doc&ac=view&did=<?=$d['id']?>">
                        <?=$d['title']?>
                    </a>
                    <div class="doc-info">
                        <span>👁️ 浏览 <?=$d['view']?></span>
                        <span>⬇️ 下载 <?=$d['down']?></span>
                        <span>📄 页数 <?=$d['page']?></span>
                    </div>
                </div>
                <?php } ?>
            </div>
        <?php } ?>
    </div>
</div>

<!-- 目录弹窗 -->
<div class="catalog-modal" id="catalogModal">
    <div class="modal-content">
        <div class="modal-header">全部分类目录</div>
        <div class="modal-body">
            <div class="modal-catalog">
                <a href="topic.php?tid=<?=$tid?>" class="<?=empty($cid)?'active':''?>">全部文档</a>
                <?php foreach($chapters as $c) { ?>
                <a
                    href="topic.php?tid=<?=$tid?>&cid=<?=$c['id']?>"
                    class="<?=$cid==$c['id']?'active':''?>"
                >
                    <?=$c['title']?>
                </a>
                <?php } ?>
            </div>
        </div>
        <div class="modal-close" id="closeModal">关闭</div>
    </div>
</div>

<script>
// 搜索
const searchInput = document.getElementById('searchInput');
const items = document.querySelectorAll('#catalogList a[data-title]');
searchInput.addEventListener('input', function () {
    const keyword = this.value.trim().toLowerCase();
    items.forEach(item => {
        const title = item.getAttribute('data-title').toLowerCase();
        title.includes(keyword) ? item.classList.remove('hidden') : item.classList.add('hidden');
    });
});

const docSearch = document.getElementById('docSearch');
let docItems = document.querySelectorAll('#docList .doc-item');
docSearch.addEventListener('input', function(){
    const kw = this.value.trim().toLowerCase();
    docItems.forEach(item => {
        const title = item.getAttribute('data-title').toLowerCase();
        if(title.includes(kw)){
            item.classList.remove('hidden');
        }else{
            item.classList.add('hidden');
        }
    });
});

// 弹窗
const openModal = document.getElementById('openModal');
const closeModal = document.getElementById('closeModal');
const catalogModal = document.getElementById('catalogModal');
if(openModal){
    openModal.onclick = () => { catalogModal.style.display = 'flex'; }
}
closeModal.onclick = () => { catalogModal.style.display = 'none'; }
catalogModal.onclick = (e) => {
    if(e.target === catalogModal) catalogModal.style.display = 'none';
}

// ========== 跑马灯 + 自然滚动 最终版 ==========
const docBox = document.getElementById('docList');
const scrollWrap = document.getElementById('scrollWrap');
const speed = 40; // 数值越大越慢

function startMarquee() {
    const h = scrollWrap.scrollHeight;
    const duration = h / speed;
    scrollWrap.style.animation = `verticalMarquee ${duration}s linear infinite`;
}
function stopMarquee() {
    scrollWrap.style.animation = 'none';
}

// 进入停止
docBox.addEventListener('mouseenter', stopMarquee);
docBox.addEventListener('touchstart', stopMarquee);

// 离开恢复
docBox.addEventListener('mouseleave', startMarquee);
docBox.addEventListener('touchend', startMarquee);

// 禁止页面穿透滚动
docBox.addEventListener('wheel', e => e.stopPropagation());
docBox.addEventListener('touchmove', e => e.stopPropagation(), { passive: true });

// 初始化
startMarquee();
</script>

<?php include template('common/footer'); ?>