<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Are.na Random Block</title>
</head>
<body>
<style>
  #arena-block-box {
    width: 320px;
    height: auto;
    overflow: hidden;
    min-height: 330px; 
    position: relative;
    justify-content: right;
    align-items: right;
    text-transform: lowercase;
    color: #bfb381;
    font-family: Arial, Helvetica, sans-serif;
  }
  #arena-block-box img {
    width: 100%;
    height: auto;
    display: block;
  }
  #arena-block-box .text-content {
    padding: 15px;
    line-height: 1.5;
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
  }
  #arena-block-box .loading {
    padding: 40px;
    text-align: center;
    color: #999;
  }
</style>
<div id="arena-block-box">
  <div class="loading"></div>
</div>
<script>
{
  const accessToken = "K4YGMslfMBJc-Dr0E24wX0r6XtwP883-MheiFmoLN7A";
  const channelSlug = "chakai";
  const loadingDiv = document.querySelector("#arena-block-box .loading");
  const baseLoader = "ᕕ( ᐛ )ᕗ";
  const prefix = "三";
  let prefixCount = 0;
  const maxPrefixes = 3;
  const loadingInterval = setInterval(() => {
    const currentPrefixes = prefix.repeat(prefixCount);
    if (loadingDiv) {
      loadingDiv.textContent = currentPrefixes + baseLoader;
    }
    prefixCount = (prefixCount + 1) % maxPrefixes;
  }, 300);
  async function loadRandomBlock() {
    try {
      const headers = { "Authorization": "Bearer " + accessToken };
      const channelRes = await fetch("https://api.are.na/v3/channels/" + channelSlug, { headers });
      if (!channelRes.ok) throw new Error("HTTP error! Status: " + channelRes.status);
      const channelData = await channelRes.json();
      const totalBlocks = channelData.counts && channelData.counts.contents ? channelData.counts.contents : 0;
      if (totalBlocks === 0) {
        document.getElementById("arena-block-box").innerHTML = '<div class="loading">No blocks found.</div>';
        return;
      }
      const perPage = 100;
      const totalPages = Math.ceil(totalBlocks / perPage);
      const randomPage = Math.floor(Math.random() * totalPages) + 1;
      const res = await fetch("https://api.are.na/v3/channels/" + channelSlug + "/contents?per=" + perPage + "&page=" + randomPage, { headers });
      if (!res.ok) throw new Error("HTTP error! Status: " + res.status);
      const data = await res.json();
      const blocks = data.data || [];
      if (blocks.length === 0) {
        document.getElementById("arena-block-box").innerHTML = '<div class="loading">No blocks found.</div>';
        return;
      }
      const randomBlock = blocks[Math.floor(Math.random() * blocks.length)];
      const box = document.getElementById("arena-block-box");
      let html = '';
      switch (randomBlock.type) {
        case "Image":
          if (randomBlock.image) {
            const src = (randomBlock.image.large && randomBlock.image.large.src) || randomBlock.image.src || '';
            html = '<img src="' + src + '" alt="' + (randomBlock.title || '') + '">';
          }
          break;
        case "Text":
          if (randomBlock.content) {
            html = '<div class="text-content">' + (randomBlock.content.html || randomBlock.content.markdown || '') + '</div>';
          }
          break;
        case "Link":
          if (randomBlock.image && randomBlock.image.large) {
            html = '<img src="' + randomBlock.image.large.src + '" alt="Preview">';
          } else {
            html = '<div class="text-content">' + (randomBlock.title || 'Link') + '</div>';
          }
          break;
        case "Embed":
          if (randomBlock.embed && randomBlock.embed.html) {
            const e = randomBlock.embed;
            const ratio = e.height && e.width ? (e.height / e.width * 100).toFixed(2) : 56.25;
            html = '<div style="position:relative;padding-bottom:' + ratio + '%"><div style="position:absolute;inset:0">' + e.html + '</div></div>';
          } else if (randomBlock.image && randomBlock.image.large) {
            html = '<img src="' + randomBlock.image.large.src + '" alt="Preview">';
          }
          break;
        case "Attachment":
          if (randomBlock.attachment) {
            const a = randomBlock.attachment;
            if (a.content_type && a.content_type.startsWith("video/")) {
              html = '<video controls style="width:100%;display:block"><source src="' + a.url + '" type="' + a.content_type + '"></video>';
            } else if (a.content_type && a.content_type.startsWith("audio/")) {
              html = '<div class="text-content"><audio controls style="width:100%"><source src="' + a.url + '" type="' + a.content_type + '"></audio></div>';
            } else if (randomBlock.image && randomBlock.image.large) {
              html = '<img src="' + randomBlock.image.large.src + '" alt="Preview">';
            } else {
              html = '<div class="text-content">' + (randomBlock.title || a.filename || 'Attachment') + '</div>';
            }
          }
          break;
        default:
          if (randomBlock.image && randomBlock.image.large) {
            html = '<img src="' + randomBlock.image.large.src + '" alt="Preview">';
          } else {
            html = '<div class="text-content">' + (randomBlock.title || 'Block') + '</div>';
          }
      }
      box.innerHTML = html;
    } catch (err) {
      console.error(err);
      document.getElementById("arena-block-box").innerHTML = '<div class="loading">Error: ' + err.message + '.</div>';
    } finally {
      clearInterval(loadingInterval);
    }
  }
  loadRandomBlock();
}
</script>
</body>
</html>