<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Dark Mode</title>
    <script type="module">
        // Importa i moduli Firebase necessari
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";
        import { getFirestore, collection, addDoc, orderBy, query, onSnapshot, serverTimestamp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js";

        // Configura Firebase
        const firebaseConfig = {
            apiKey: "AIzaSyBxe1qJeusGmTVgKpU45EqwC1jeVdladVs",
            authDomain: "freesnap-9ce29.firebaseapp.com",
            projectId: "freesnap-9ce29",
            storageBucket: "freesnap-9ce29.appspot.com",
            messagingSenderId: "799602787383",
            appId: "1:799602787383:web:a5a9fc7ad83ddf7ffc6bb2"
        };

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

        const correctPin = '1318'; // PIN fisso

        // Quando l'utente clicca su "Avanti"
        document.getElementById("nextButton").addEventListener("click", function () {
            const username = document.getElementById("username").value.trim();
            const pin = document.getElementById("pin").value.trim();

            if (username && pin === correctPin) {
                localStorage.setItem("username", username);
                showChatInterface();
            } else {
                alert("PIN errato o nome non valido.");
            }
        });

        // Mostra l'interfaccia della chat
        function showChatInterface() {
            document.getElementById("name-input-screen").style.display = "none";
            document.getElementById("chat-container").style.display = "flex";
            loadMessages();
        }

        // Carica i messaggi dalla Firestore
        function loadMessages() {
            const messagesContainer = document.getElementById("messages");
            const chatRef = query(collection(db, "chatMessages"), orderBy("timestamp"));

            onSnapshot(chatRef, (snapshot) => {
                messagesContainer.innerHTML = "";
                snapshot.forEach((doc) => {
                    const msg = doc.data();
                    const messageElement = document.createElement("div");
                    messageElement.classList.add("message");

                    const messageText = document.createElement("p");
                    messageText.textContent = `${msg.user}: ${msg.message} - ${msg.time}`;
                    messageElement.appendChild(messageText);

                    messagesContainer.appendChild(messageElement);
                });
            });

            document.getElementById("sendMessageButton").onclick = () => sendMessage();
        }

        // Invia un messaggio alla Firestore
        function sendMessage() {
            const message = document.getElementById("message-input").value.trim();
            const username = localStorage.getItem("username");

            if (message) {
                const time = new Date().toLocaleTimeString();

                addDoc(collection(db, "chatMessages"), {
                    user: username,
                    message: message,
                    time: time,
                    timestamp: serverTimestamp()
                });

                document.getElementById("message-input").value = "";  // Pulisci il campo input
            }
        }
    </script>
    <style>
        body {
            background-color: #121212;
            color: #ffffff;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }
        #name-input-screen, #chat-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 1200px;
        }
        #name-input-screen {
            text-align: center;
        }
        #chat-container {
            display: none;
            flex-direction: column;
            width: 100%;
            max-width: 1200px;
            background: #1e1e1e;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        }
        #messages {
            height: 200px;
            overflow-y: auto;
            margin-bottom: 10px;
            background: #333;
            border-radius: 5px;
            padding: 10px;
        }
        #messages p {
            margin: 0;
            padding: 5px;
            border-bottom: 1px solid #444;
        }
        .message {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        .message.mine {
            justify-content: flex-end;
        }
        .message p {
            max-width: 70%;
            padding: 10px;
            border-radius: 5px;
            background: #444;
        }
        .message.mine p {
            background: #6200ea;
        }
        input, button {
            width: 60%;
            margin: 10px 0;
            padding: 10px;
            border: none;
            border-radius: 5px;
        }
        button {
            background: #6200ea;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background: #3700b3;
        }
        .back-button {
            background: #ff5722;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px 0;
        }
        .back-button:hover {
            background: #e64a19;
        }
    </style>
</head>
<body>
    <div id="name-input-screen">
        <h2>Inserisci il tuo nome e PIN</h2>
        <input type="text" id="username" placeholder="Nome univoco" />
        <input type="password" id="pin" placeholder="PIN" />
        <button id="nextButton">Avanti</button>
    </div>

    <div id="chat-container">
        <div id="messages"></div>
        <input type="text" id="message-input" placeholder="Scrivi un messaggio..." />
        <button id="sendMessageButton">Invia</button>
    </div>
</body>
</html>
