import React, { useState, useEffect } from "react";
import io from "socket.io-client";

// Inisialisasi koneksi ke server
const socket = io("http://localhost:3001"); // Pastikan mengganti dengan URL server Socket.IO Anda

const AdminChat = () => {
    const [message, setMessage] = useState("");
    const [messages, setMessages] = useState([]);
    const [isTyping, setIsTyping] = useState(false); // Untuk mengetahui apakah user sedang mengetik
    const [unreadMessages, setUnreadMessages] = useState(0); // Notifikasi pesan baru

    // Efek untuk mendengarkan pesan baru dari server
    useEffect(() => {
        socket.on("receiveMessage", (newMessage) => {
            setMessages((prevMessages) => [...prevMessages, newMessage]);

            // Menambah jumlah pesan yang belum dibaca
            if (newMessage.sender !== "admin") {
                setUnreadMessages((prevUnread) => prevUnread + 1);
            }
        });

        socket.on("userTyping", (isUserTyping) => {
            setIsTyping(isUserTyping);
        });

        // Cleanup connection on component unmount
        return () => {
            socket.off("receiveMessage");
            socket.off("userTyping");
        };
    }, []);

    // Fungsi untuk mengirim pesan
    const sendMessage = () => {
        if (message.trim() !== "") {
            socket.emit("sendMessage", { sender: "admin", text: message }); // Kirim pesan ke server
            setMessages((prevMessages) => [...prevMessages, { sender: "admin", text: message }]); // Tampilkan pesan di client
            setMessage(""); // Bersihkan input setelah kirim pesan
            setUnreadMessages(0); // Reset notifikasi pesan baru setelah admin mengirim pesan
        }
    };

    // Fungsi untuk menghapus notifikasi ketika admin membuka chat
    const handleChatClick = () => {
        setUnreadMessages(0); // Reset notifikasi ketika admin membuka chat
    };

    return (
        <div style={{ padding: "20px", maxWidth: "400px", margin: "auto" }}>
            <h2>Admin Chat {unreadMessages > 0 && <span style={{ color: "red" }}>({unreadMessages} Pesan Baru)</span>}</h2>

            {/* Notifikasi pengguna sedang mengetik */}
            {isTyping && <p style={{ color: "green" }}>Pengguna sedang mengetik...</p>}

            <div
                onClick={handleChatClick} // Reset notifikasi saat chat dibuka
                style={{
                    border: "1px solid #ccc",
                    height: "300px",
                    overflowY: "scroll",
                    marginBottom: "10px",
                    padding: "10px",
                    backgroundColor: "#f9f9f9"
                }}
            >
                {messages.map((msg, index) => (
                    <div
                        key={index}
                        style={{
                            textAlign: msg.sender === "admin" ? "right" : "left",
                            backgroundColor: msg.sender === "admin" ? "#d1e7dd" : "#fff3cd",
                            padding: "10px",
                            borderRadius: "10px",
                            marginBottom: "5px",
                            maxWidth: "70%",
                            marginLeft: msg.sender === "admin" ? "auto" : "0",
                        }}
                    >
                        {msg.text}
                    </div>
                ))}
            </div>

            <input
                type="text"
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                style={{ width: "80%", padding: "10px", marginRight: "10px", borderRadius: "5px" }}
                placeholder="Ketik pesan..."
            />
            <button
                onClick={sendMessage}
                style={{ padding: "10px 20px", backgroundColor: "#007bff", color: "#fff", border: "none", borderRadius: "5px" }}
            >
                Kirim
            </button>
        </div>
    );
};

export default AdminChat;
