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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Forums</title>
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

  <style>
    body {
      background-color: rgb(5, 5, 5);
      margin: 0;
      padding: 0;
      font-family: 'Geist', serif;
      color: white;
    }

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

    h1 {
      text-align: center;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .discord-icon {
      color: #5865F2;
      font-size: 24px;
      cursor: pointer;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    .discord-icon:hover {
      transform: scale(1.1);
      color: #404EED;
    }

    .forum-posts {
      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;
    }

    /* Style for the form */
    .post-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;
    }

    .post-form input,
    .post-form textarea {
      width: 100%;
      max-width: 100%; /* Prevents scaling beyond the container */
      padding: 10px;
      margin: 10px 0;
      border-radius: 8px;
      border: 1px solid #646464;
      background-color: #1e1e1e;
      color: white;
      font-family: 'Geist', serif;
      box-sizing: border-box; /* Includes padding in the width calculation */
    }

    .post-form button {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border-radius: 8px;
      border: 1px solid #646464;
      background-color: #1e1e1e;
      color: white;
      font-family: 'Geist', serif;
      cursor: pointer;
    }

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

<body>
  <div class="container">
    <div class="header">
      <h1>Welcome to the dark side.</h1>
      <!-- Discord Icon -->
      <a href="https://discord.gg/your-server-link" target="_blank" title="Join our Discord!">
        <i class="fab fa-discord discord-icon"></i>
      </a>
    </div>

    <!-- Form to create a new forum post -->
    <div class="post-form">
      <h2>Create a New Post</h2>
      <form id="postForm">
        <input type="text" id="postTitle" placeholder="Post Title" required>
        <textarea id="postContent" placeholder="Write your post here..." rows="4" required></textarea>
        <input type="text" id="postAuthor" placeholder="Your Name (optional)">
        <button type="submit">Submit Post</button>
      </form>
    </div>

    <!-- Container for forum posts -->
    <div class="forum-posts" id="forumPosts">
      <!-- Posts will be displayed here -->
    </div>
  </div>

  <script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/11.2.0/firebase-app.js";
    import { getFirestore, collection, addDoc, getDocs } 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.firebasestorage.app",
      messagingSenderId: "1020680989557",
      appId: "1:1020680989557:web:dc1b1fb1170fa9a122813c"
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);

    // Function to add a post to Firestore
    async function addPostToFirestore(title, content, author) {
      try {
        const docRef = await addDoc(collection(db, "forumPosts"), {
          title: title,
          content: content,
          author: author || "Anonymous", // Default to "Anonymous" if no name is provided
          timestamp: new Date().toISOString()
        });
        console.log("Post added with ID: ", docRef.id);
        fetchPosts();
      } catch (e) {
        console.error("Error adding post: ", e);
      }
    }

    // Function to fetch and display posts from Firestore
    // Function to fetch and display posts from Firestore
    async function fetchPosts() {
      const querySnapshot = await getDocs(collection(db, "forumPosts"));
      const forumPosts = document.getElementById("forumPosts");
      forumPosts.innerHTML = ""; // Clear the current posts

      // Store the posts in an array to sort by timestamp
      const postsArray = [];
      querySnapshot.forEach((doc) => {
        const post = doc.data();
        postsArray.push(post);
      });

      // Sort postsArray by timestamp (newest first)
      postsArray.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));

      // Display sorted posts
      postsArray.forEach((post) => {
        const date = new Date(post.timestamp).toLocaleString();

        const newPost = document.createElement("div");
        newPost.classList.add("forum-post");
        newPost.innerHTML = `
          <div class="timestamp">${date}</div>
          <h3>${post.title}</h3>
          <p>${post.content}</p>
          <div class="author">Posted by: ${post.author}</div>
        `;
        forumPosts.appendChild(newPost);
      });
    }


    // Handle form submission
    const postForm = document.getElementById("postForm");
    postForm.addEventListener("submit", function(event) {
      event.preventDefault(); // Prevent page refresh

      const title = document.getElementById("postTitle").value;
      const content = document.getElementById("postContent").value;
      const author = document.getElementById("postAuthor").value;

      addPostToFirestore(title, content, author);

      postForm.reset();
    });

    // Fetch existing posts when the page loads
    window.onload = fetchPosts;
  </script>
</body>

</html>
