<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Developer Mode</title>
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
  <style>
    body {
      background-color: rgb(5, 5, 5);
      margin: 0;
      padding: 0;
      font-family: 'Geist', serif;
      color: white;
      text-align: center;
    }

    .container {
      width: 80%;
      margin: 0 auto;
      padding: 20px;
    }

    .login-form {
      background-color: rgba(255, 255, 255, 0.1);
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
      margin-bottom: 20px;
    }

    .login-form input {
      padding: 10px;
      margin: 10px 0;
      border-radius: 8px;
      border: 1px solid #646464;
      background-color: #1e1e1e;
      color: white;
    }

    .login-form button {
      padding: 10px;
      border-radius: 8px;
      background-color: #ffcb00;
      color: black;
      font-size: 16px;
      cursor: pointer;
    }

    .login-form button:hover {
      background-color: #ffb300;
    }

    .forum-posts {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .forum-post {
      background-color: rgba(255, 255, 255, 0.1);
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
      position: relative;
    }

    .forum-post h3 {
      margin: 0;
      color: #ffcb00;
    }

    .forum-post .author {
      font-size: 12px;
      color: #cccccc;
    }

    .forum-post .timestamp {
      font-size: 12px;
      color: #999;
      position: absolute;
      top: 10px;
      right: 10px;
    }

    .forum-post p {
      font-size: 14px;
    }

    .forum-post button {
      background-color: #ffcb00;
      color: black;
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      margin: 5px;
    }

    .forum-post button:hover {
      background-color: #ffb300;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>Login to Developer Mode</h1>
    <div class="login-form">
      <input type="text" id="username" placeholder="Username" required>
      <input type="password" id="password" placeholder="Password" required>
      <button id="loginButton">Login</button>
    </div>
    <div id="dev-content" style="display:none;">
      <h2>Developer Mode</h2>
      <p>Edit, reply, and delete forum posts here.</p>

      <div class="forum-posts" id="forumPosts">
        <!-- Forum posts will be listed here -->
      </div>
    </div>
  </div>

  <script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/11.2.0/firebase-app.js";
    import { getFirestore, collection, getDocs, deleteDoc, doc, updateDoc, query, orderBy } from "https://www.gstatic.com/firebasejs/11.2.0/firebase-firestore.js";

    // Firebase configuration
    const firebaseConfig = {
      apiKey: "AIzaSyC3J6RZGiAzhOgyJTsC3WLs9O6qV7CprdM",
      authDomain: "atlastoby-site.firebaseapp.com",
      projectId: "atlastoby-site",
      storageBucket: "atlastoby-site.appspot.com",
      messagingSenderId: "1020680989557",
      appId: "1:1020680989557:web:dc1b1fb1170fa9a122813c"
    };

    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);

    let isLoggedIn = false; // Login status

    // Define the login function
    document.getElementById('loginButton').addEventListener('click', function () {
      const username = document.getElementById("username").value;
      const password = document.getElementById("password").value;

      if (username === "admin" && password === "puszek") {
        isLoggedIn = true;
        document.getElementById("dev-content").style.display = "block";
        alert("Welcome to Developer Mode!");
        loadForumPosts(); // Load posts after login
      } else {
        alert("Invalid username or password.");
      }
    });

    async function loadForumPosts() {
      if (!isLoggedIn) return;

      // Query to get posts ordered by timestamp in descending order
      const q = query(collection(db, "forumPosts"), orderBy("timestamp", "desc"));
      const querySnapshot = await getDocs(q);
      const forumPostsContainer = document.getElementById("forumPosts");
      forumPostsContainer.innerHTML = ''; // Clear any existing posts

      querySnapshot.forEach((docSnapshot) => {
        const postData = docSnapshot.data();
        const postElement = document.createElement("div");
        postElement.classList.add("forum-post");

        postElement.innerHTML = `
          <div class="timestamp">${new Date(postData.timestamp).toLocaleString()}</div>
          <h3>${postData.title}</h3>
          <p>${postData.content}</p>
          <div class="author">Posted by: ${postData.author}</div>
          <button onclick="editPost('${docSnapshot.id}')">Edit</button>
          <button onclick="deletePost('${docSnapshot.id}')">Delete</button>
          <button onclick="replyToPost('${docSnapshot.id}')">Reply</button>
        `;
        forumPostsContainer.appendChild(postElement);
      });
    }

    // Edit post function
    window.editPost = async function (postId) {
      if (!isLoggedIn) return;

      const newTitle = prompt("Edit the post title:");
      const newContent = prompt("Edit the post content:");
      if (newTitle && newContent) {
        const postRef = doc(db, "forumPosts", postId);
        await updateDoc(postRef, {
          title: newTitle,
          content: newContent,
        });
        loadForumPosts(); // Reload the posts after editing
      }
    };

    // Delete post function
    window.deletePost = async function (postId) {
      if (!isLoggedIn) return;

      const confirmation = confirm("Are you sure you want to delete this post?");
      if (confirmation) {
        await deleteDoc(doc(db, "forumPosts", postId));
        loadForumPosts(); // Reload the posts after deletion
      }
    };

    // Reply to post function
    window.replyToPost = function (postId) {
      if (!isLoggedIn) return;

      const replyContent = prompt("Write your reply:");
      if (replyContent) {
        alert("Your reply has been submitted.");
        // You can add the reply to Firestore if needed.
      }
    };
  </script>
</body>

</html>
