<?php

/**
 * 友链
 *
 * @package custom
 *
 **/

if (!defined('__TYPECHO_ROOT_DIR__')) {
	http_response_code(404);
	exit;
}
$this->need('module/single/pjax.php');
?>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<?php $this->need('module/head.php') ?>
	<link rel="stylesheet" href="<?= joe\theme_url('assets/css/joe.friend.css') ?>">
	<style>
        .status-tag {
            position: absolute;
            top: 0px;
            right: 0px;
            padding: 3px 8px;
            border-radius: 0px 12px 0px 12px;
            font-size: 12px;
            color: white;
            font-weight: bold;
            transition: font-size 0.3s ease-out, width 0.3s ease-out, opacity 0.3s ease-out;
            z-index: 1;
        }
        .joe_detail__friends-item:hover .status-tag {
            font-size: 0px;
            opacity: 0;
        }
        /* 固态颜色 */
        .status-tag-green {
            background-color: #005E00; /* 绿色 */
        }
        .status-tag-light-yellow {
            background-color: #FED101; /* 浅黄色 */
        }
        .status-tag-dark-yellow {
            background-color: #F0B606; /* 深黄色 */
        }
        .status-tag-red {
            background-color: #B90000; /* 红色 */
        }
        
        /* 修改卡片样式，使用头像作为背景 */
        .joe_detail__friends-item .contain {
            position: relative;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.1) !important;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .joe_detail__friends-item .contain::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: var(--bg-image);
            background-size: cover;
            background-position: center;
            opacity: 0.5;
            z-index: -1;
            border-radius: 12px;
        }
        
        .joe_detail__friends-item .contain:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .joe_detail__friends-item .content {
            position: relative;
            z-index: 2;
        }
        
        .joe_detail__friends-item .title {
            color: #fff;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
            font-weight: bold;
        }
        
        .joe_detail__friends-item .desc {
            color: rgba(255, 255, 255, 0.9);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
        
        .joe_detail__friends-item .avatar {
            border: 2px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>

<body>
	<?php $this->need('module/header.php'); ?>
	<div id="Joe">
		<div class="joe_container">
			<main class="joe_main">
				<div class="joe_detail" data-cid="<?= $this->cid ?>">
					<?php $this->need('module/single/batten.php'); ?>
					<?php $this->need('module/single/article.php'); ?>
					<?php
					$friends = think\facade\Db::name('friends')->where('status', 1)->whereFindInSet('position', 'single')->order('order', 'desc')->select()->toArray();
					?>
					<?php if (sizeof($friends) > 0 && ($this->options->JFriendsSpiderHide != 'on' || !joe\detectSpider())) : ?>
						<style>
							.joe_detail__article {
								margin-bottom: 0px;
							}
						</style>
						<ul class="joe_detail__friends">
							<?php
							if ($this->options->JFriends_shuffle == 'on') shuffle($friends);
							foreach ($friends as $item) : 
							?>
								<li class="joe_detail__friends-item">
									<a class="contain" href="<?= $item['url'] ?>" target="_blank" rel="<?= $item['rel'] ?>" referrer="unsafe-url" style="--bg-image: url('<?= $item['logo'] ?>')">
										<span class="title"><?= $item['title'] ?></span>
										<div class="content">
											<div class="desc"><?= $item['description'] ?></div>
											<img referrerpolicy="no-referrer" rel="noreferrer" width="40" height="40" class="avatar lazyload" onerror="Joe.avatarError(this)" src="<?= joe\getAvatarLazyload(); ?>" data-src="<?= $item['logo'] ?>" alt="<?= $item['title'] ?>" />
										</div>
									</a>
								</li>
							<?php endforeach; ?>
						</ul>
					<?php endif; ?>
					<?php
					if ($this->options->JFriends_Submit == 'on') $this->need('module/friends/submit.php');
					?>
					<?php $this->need('module/single/handle.php'); ?>
					<?php $this->need('module/single/copyright.php'); ?>
				</div>
				<?php $this->need('module/single/comment.php'); ?>
			</main>
			<?php joe\isPc() ? $this->need('module/aside.php') : null ?>
		</div>
		<?php $this->need('module/bottom.php'); ?>
	</div>
	<?php $this->need('module/footer.php') ?>
	<script>
    function addStatusTagsWithCache(jsonUrl) {
        const cacheKey = "statusTagsData";
        const cacheExpirationTime = 30 * 60 * 1000; // 半小时
        function applyStatusTags(data) {
            const linkStatus = data.link_status;
            document.querySelectorAll('.joe_detail__friends-item').forEach(card => {
                const linkAnchor = card.querySelector('a.contain');
                if (!linkAnchor) return;
                const link = linkAnchor.href.replace(/\/$/, '');
                const statusTag = document.createElement('div');
                statusTag.classList.add('status-tag');
                let matched = false;
                // 查找链接状态
                const status = linkStatus.find(item => item.link.replace(/\/$/, '') === link);
                if (status) {
                    let latencyText = '未知';
                    let className = 'status-tag-red'; // 默认红色
                    if (status.latency === -1) {
                        latencyText = '未知';
                    } else {
                        latencyText = status.latency.toFixed(2) + ' s';
                        if (status.latency <= 2) {
                            className = 'status-tag-green';
                        } else if (status.latency <= 5) {
                            className = 'status-tag-light-yellow';
                        } else if (status.latency <= 10) {
                            className = 'status-tag-dark-yellow';
                        }
                    }
                    statusTag.textContent = latencyText;
                    statusTag.classList.add(className);
                    matched = true;
                }
                if (matched) {
                    card.style.position = 'relative';
                    card.appendChild(statusTag);
                }
            });
        }
        function fetchDataAndUpdateUI() {
            fetch(jsonUrl)
                .then(response => response.json())
                .then(data => {
                    applyStatusTags(data);
                    const cacheData = {
                        data: data,
                        timestamp: Date.now()
                    };
                    localStorage.setItem(cacheKey, JSON.stringify(cacheData));
                })
                .catch(error => console.error('Error fetching test-flink result.json:', error));
        }
        const cachedData = localStorage.getItem(cacheKey);
        if (cachedData) {
            const { data, timestamp } = JSON.parse(cachedData);
            if (Date.now() - timestamp < cacheExpirationTime) {
                applyStatusTags(data);
                return;
            }
        }
        fetchDataAndUpdateUI();
    }
    setTimeout(() => {
        addStatusTagsWithCache('https://你的部署地址/result.json');
    }, 0);
    </script>
</body>

</html>