<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tra cứu Tác phẩm</title>
  <style>
    .result-container {
      margin: 20px auto;
      padding: 20px;
      max-width: 1000px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .error-message {
      color: red;
      font-weight: bold;
    }

    .book-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 15px;
      margin-top: 20px;
    }

    .book-item img {
      width: 100%;
      height: auto;
      aspect-ratio: 2 / 3;
      object-fit: cover;
    }

    @media (max-width: 600px) {
      .book-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); 
      }
          .book-item img {
      width: 100%;
      height: auto;
      aspect-ratio: 2 / 3;
      object-fit: cover;
    }
    }

    .book-item {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      cursor: pointer;
    }

    .book-item:hover img {
      transform: scale(1.1);
    }

    input, .action-button {
      padding: 12px;
      font-size: 16px;
      margin: 5px 0;
      border-radius: 5px;
      border: 1px solid #ddd;
      width: 100%;
      text-align: center; /* Căn giữa chữ trong nút */
    }

    .action-button {
      background-color: #4a90e2;
      color: white;
      cursor: pointer;
    }

    .action-button:hover {
      background-color: #357ab7;
    }

    .hidden {
      display: none;
    }

    .details-container {
      margin-top: 20px;
    }

    .details-container p {
      font-size: 16px;
      margin: 10px 0;
    }

    .details-container a {
      color: #4a90e2;
    }

    .button-container {
      display: flex;
      justify-content: space-between; /* Căn đều hai nút */
      gap: 10px;
      margin-top: 20px; /* Đảm bảo có khoảng cách giữa thông tin chi tiết và nút */
    }

    .button-container .action-button {
      width: 48%; /* Đảm bảo nút chiếm không gian đều */
    }

    /* Căn giữa nút Quay lại */
    .go-back-button {
      display: block;
      margin-top: 20px;
      width: 100%;
      text-align: center;
    }

  </style>
</head>
<body>
  <div id="tab1" class="result-container">
    <input type="text" id="partialID" placeholder="Nhập ID tác giả...">
    <button class="action-button" onclick="fetchData()">Xác nhận</button>
    <div id="bannersGrid" class="book-grid"></div>
  </div>

  <div id="tab2" class="result-container hidden">
    <div class="details-container">
      <h3>Thông tin chi tiết</h3>
      <p><strong>Tác phẩm:</strong> <span id="workTitle">Không có dữ liệu</span></p>
      <p><strong>Tác giả:</strong> <span id="author">Không có dữ liệu</span></p>
      <p><strong>Tình trạng:</strong> <span id="status">Không có dữ liệu</span></p>
      <p id="bTV" class="hidden"><strong>BTV:</strong> <span id="bTVValue">Không có dữ liệu</span></p>
      <p id="link" class="hidden"><strong>Link tác phẩm:</strong> <a id="linkValue" href="#" target="_blank">Không có dữ liệu</a></p>
    </div>

    <!-- Các nút nằm dưới thông tin chi tiết -->
    <div class="button-container">
      <button id="writeButton" class="action-button hidden" onclick="navigateToWrite()">Viết truyện</button>
      <button id="editButton" class="action-button hidden" onclick="navigateToEdit()">Chỉnh sửa</button>
    </div>
    <button class="action-button go-back-button" onclick="goBackToTab1()">Quay lại</button>
  </div>

  <script>
    const webAppUrl = "https://script.google.com/macros/s/AKfycbyiJ4G4D2ZwMR2HVQZaMB1DVA2BWsuy_QZWwLzVJTektviFKl7aSlMwD5L8ShmBAymcDw/exec";
    let cachedData = {};

    async function fetchData() {
      const partialID = document.getElementById("partialID").value.trim();
      if (!partialID) {
        document.getElementById("bannersGrid").innerHTML = '<p class="error-message">Vui lòng nhập ID.</p>';
        return;
      }

      try {
        const response = await fetch(`${webAppUrl}?partialID=${encodeURIComponent(partialID)}`);
        const data = await response.json();

        if (data.error) {
          document.getElementById("bannersGrid").innerHTML = `<p class="error-message">${data.error}</p>`;
        } else {
          cachedData[partialID] = data;
          displayBanners(data);
        }
      } catch (error) {
        document.getElementById("bannersGrid").innerHTML = `<p class="error-message">Đã xảy ra lỗi: ${error.message}</p>`;
      }
    }

    function displayBanners(data) {
      let gridHTML = '';
      if (Array.isArray(data)) {
        data.forEach(item => {
          gridHTML += `
            <div onclick="showDetails('${item['Định danh']}')" class="book-item">
              <img src="${item['URL bìa']}" alt="${item['Tác phẩm']}">
            </div>
          `;
        });
      }
      document.getElementById("bannersGrid").innerHTML = gridHTML;
    }

    function showDetails(id) {
      const partialID = document.getElementById("partialID").value.trim();
      const data = cachedData[partialID];
      const workData = data.find(item => item["Định danh"] === id);
      
      if (workData) {
        document.getElementById("workTitle").textContent = workData["Tác phẩm"];
        document.getElementById("author").textContent = workData["Tác giả"];
        document.getElementById("status").textContent = workData["Tình trạng"];

        handleLinkAndBTV(workData);
        document.getElementById("writeButton").classList.remove("hidden");
        document.getElementById("editButton").classList.remove("hidden");

        toggleTabs();
      }
    }

    function handleLinkAndBTV(workData) {
      if (workData["Tình trạng"] === "Đã duyệt") {
        document.getElementById("link").classList.remove("hidden");
        document.getElementById("linkValue").href = workData["Link tác phẩm"];
        document.getElementById("linkValue").textContent = workData["Link tác phẩm"];
        document.getElementById("bTV").classList.remove("hidden");
        document.getElementById("bTVValue").textContent = workData["BTV"];
      } else {
        document.getElementById("link").classList.add("hidden");
        document.getElementById("bTV").classList.add("hidden");
      }
    }

    function toggleTabs() {
      document.getElementById("tab1").classList.add("hidden");
      document.getElementById("tab2").classList.remove("hidden");
    }

    function goBackToTab1() {
      document.getElementById("tab2").classList.add("hidden");
      document.getElementById("tab1").classList.remove("hidden");
    }

    function navigateToWrite() {
      const id = document.getElementById("workTitle").textContent;
      const workData = cachedData[document.getElementById("partialID").value.trim()].find(item => item["Tác phẩm"] === id);
      if (workData) {
        const base64Id = btoa(workData["Định danh"]);
        window.location.href = `https://kunsnovel.blogspot.com/p/viet-tac-pham.html?id=${encodeURIComponent(base64Id)}`;
      }
    }

    function navigateToEdit() {
      const id = document.getElementById("workTitle").textContent;
      const workData = cachedData[document.getElementById("partialID").value.trim()].find(item => item["Tác phẩm"] === id);
      if (workData) {
        const base64Id = btoa(workData["Định danh"]);
        window.location.href = `https://kunsnovel.blogspot.com/p/tao-va-sua-tac-pham.html?id=${encodeURIComponent(base64Id)}`;
      }
    }
  </script>
</body>
</html>
