"use client";

import React, { useState, useEffect, useRef } from "react";
import Image from "next/image";
import { useSocket } from "@/context/SocketContext";
import { useAppSelector } from "@/store/hooks";
import axios from "axios";
import { Send } from "lucide-react";

interface ChatUser {
  id: string;
  firstName: string;
  lastName: string;
  avatarUrl: string;
  email: string;
}

interface ChatMessage {
  id: string;
  senderId: string;
  receiverId: string;
  content: string;
  createdAt: string;
}

interface ChatSidebarProps {
  isOpen: boolean;
  onClose: () => void;
}

export const ChatSidebar: React.FC<ChatSidebarProps> = ({ isOpen, onClose }) => {
  const { socket, onlineUsers } = useSocket();
  const currentUser = useAppSelector((state) => state.auth.user);

  const [users, setUsers] = useState<ChatUser[]>([]);
  const [selectedUser, setSelectedUser] = useState<ChatUser | null>(null);
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [inputText, setInputText] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const messagesEndRef = useRef<HTMLDivElement>(null);

  const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000";

  // Fetch users when sidebar opens
  useEffect(() => {
    const token = localStorage.getItem("token") || sessionStorage.getItem("token");
    if (!isOpen || !token) return;

    const fetchUsers = async () => {
      try {
        const response = await axios.get(`${apiUrl}/api/chat/users`, {
          headers: { Authorization: `Bearer ${token}` }
        });
        if (response.data.success) {
          setUsers(response.data.data);
        }
      } catch (error) {
        console.error("Error fetching chat users:", error);
      }
    };

    fetchUsers();
  }, [isOpen, apiUrl]);

  // Fetch messages when a user is selected
  useEffect(() => {
    const token = localStorage.getItem("token") || sessionStorage.getItem("token");
    
    if (socket) {
      socket.emit("active_chat", { userId: selectedUser?.id || null });
    }

    if (!selectedUser || !token) return;

    const fetchMessages = async () => {
      setIsLoading(true);
      try {
        const response = await axios.get(`${apiUrl}/api/chat/messages/${selectedUser.id}`, {
          headers: { Authorization: `Bearer ${token}` }
        });
        if (response.data.success) {
          setMessages(response.data.data);
          scrollToBottom();
        }
      } catch (error) {
        console.error("Error fetching messages:", error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchMessages();
  }, [selectedUser, apiUrl, socket]);

  // Clean up active_chat when sidebar closes
  useEffect(() => {
    if (!isOpen && socket) {
      socket.emit("active_chat", { userId: null });
    }
  }, [isOpen, socket]);

  // Socket event listeners for messages
  useEffect(() => {
    if (!socket) return;

    const handleReceiveMessage = (message: ChatMessage) => {
      if (selectedUser && (message.senderId === selectedUser.id || message.receiverId === selectedUser.id)) {
        setMessages((prev) => [...prev, message]);
        scrollToBottom();
      }
      
      // Move sender/receiver to top
      setUsers(prevUsers => {
        const otherUserId = message.senderId === currentUser?.id ? message.receiverId : message.senderId;
        const existingUser = prevUsers.find(u => u.id === otherUserId);
        if (!existingUser) return prevUsers;
        return [existingUser, ...prevUsers.filter(u => u.id !== otherUserId)];
      });
    };

    const handleMessageSent = (message: ChatMessage) => {
      if (selectedUser && message.receiverId === selectedUser.id) {
        setMessages((prev) => [...prev, message]);
        scrollToBottom();
      }
      
      // Move receiver to top
      setUsers(prevUsers => {
        const receiverId = message.receiverId;
        const existingUser = prevUsers.find(u => u.id === receiverId);
        if (!existingUser) return prevUsers;
        return [existingUser, ...prevUsers.filter(u => u.id !== receiverId)];
      });
    };

    socket.on("receive_message", handleReceiveMessage);
    socket.on("message_sent", handleMessageSent);

    return () => {
      socket.off("receive_message", handleReceiveMessage);
      socket.off("message_sent", handleMessageSent);
    };
  }, [socket, selectedUser]);

  const scrollToBottom = () => {
    setTimeout(() => {
      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
    }, 100);
  };

  const sendMessage = () => {
    if (!inputText.trim() || !selectedUser || !socket) return;

    socket.emit("send_message", {
      receiverId: selectedUser.id,
      content: inputText.trim()
    });

    setInputText("");
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-y-0 right-0 z-[999999] flex w-[350px] flex-col border-l border-gray-200 bg-white shadow-theme-lg transition-transform duration-300 sm:w-[400px]">
      <div className="flex items-center justify-between border-b border-gray-200 bg-[#00a884] p-4 text-white">
        <div className="flex items-center gap-3">
          <h2 className="text-lg font-semibold">Chats</h2>
        </div>
        <div className="flex items-center gap-2">
          <button onClick={onClose} className="rounded-full p-1 transition hover:bg-black/10">
            {/* <X size={20} /> */}
          </button>
        </div>
      </div>

      {/* Content Area */}
      <div className="flex flex-1 flex-col overflow-hidden">
        {!selectedUser ? (
          // Users List
          <div className="flex-1 overflow-y-auto custom-scrollbar p-2">
            {users.length === 0 ? (
              <div className="text-center text-gray-500 mt-4">No users found.</div>
            ) : (
              users.map((user) => {
                const isOnline = onlineUsers.includes(user.id);
                return (
                  <button
                    key={user.id}
                    onClick={() => setSelectedUser(user)}
                    className="flex w-full items-center gap-3 rounded-lg p-3 text-left hover:bg-gray-50"
                  >
                    <div className="relative h-10 w-10 flex-shrink-0 rounded-full">
                      <Image
                        src={user.avatarUrl || "/images/user/user-01.jpg"}
                        alt={user.firstName}
                        fill
                        className="rounded-full object-cover"
                      />
                      {isOnline && (
                        <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-green-500"></span>
                      )}
                    </div>
                    <div className="flex-1 overflow-hidden">
                      <p className="truncate font-medium text-gray-900">
                        {user.firstName} {user.lastName}
                      </p>
                      <p className="truncate text-sm text-gray-500">
                        {isOnline ? "Online" : "Offline"}
                      </p>
                    </div>
                  </button>
                );
              })
            )}
          </div>
        ) : (
          // Chat View
          <div className="flex h-full flex-col bg-[#efeae2]">
            {/* Header for Chat View */}
            <div className="flex items-center justify-between border-b border-gray-200 bg-[#f0f2f5] p-3 shadow-sm">
              <div className="flex items-center gap-3">
                <button onClick={() => setSelectedUser(null)} className="text-[#54656f] hover:text-[#111b21]">
                  {/* <ArrowLeft size={20} /> */}
                </button>
                <div className="relative h-8 w-8 flex-shrink-0">
                  {selectedUser.avatarUrl ? (
                    <Image
                      src={selectedUser.avatarUrl}
                      alt={selectedUser.firstName}
                      fill
                      className="rounded-full object-cover"
                    />
                  ) : (
                    <div className="flex h-full w-full items-center justify-center rounded-full bg-gray-300 text-white font-semibold text-xs">
                      {selectedUser.firstName?.charAt(0).toUpperCase()}
                    </div>
                  )}
                  {onlineUsers.includes(selectedUser.id) ? (
                    <span className="absolute bottom-0 right-0 h-2 w-2 rounded-full border border-white bg-[#00a884]"></span>
                  ) : (
                    <span className="absolute bottom-0 right-0 h-2 w-2 rounded-full border border-white bg-gray-400"></span>
                  )}
                </div>
                <div>
                  <h3 className="font-medium text-[#111b21] leading-tight text-sm">
                    {selectedUser.firstName} {selectedUser.lastName}
                  </h3>
                  <p className="text-[11px] text-[#667781]">
                    {onlineUsers.includes(selectedUser.id) ? "online" : "offline"}
                  </p>
                </div>
              </div>
            </div>

            {/* Messages Area */}
            <div className="flex-1 overflow-y-auto p-3 custom-scrollbar" style={{ backgroundImage: "url('/images/chat-bg.png')", backgroundSize: "cover" }}>
              {isLoading ? (
                <div className="text-center text-gray-500 mt-4">Loading messages...</div>
              ) : messages.length === 0 ? (
                <div className="text-center text-gray-500 mt-4">No messages yet.</div>
              ) : (
                <div className="space-y-4">
                  {messages.map((msg) => {
                    const isMe = msg.senderId === currentUser?.id;
                    return (
                      <div key={msg.id} className={`flex ${isMe ? 'justify-end' : 'justify-start'}`}>
                        <div className={`relative max-w-[85%] rounded-lg px-2 py-1.5 shadow-sm flex flex-col ${isMe
                          ? 'bg-[#d9fdd3] text-[#111b21] rounded-tr-none'
                          : 'bg-white text-[#111b21] rounded-tl-none'
                          }`}>
                          <div className="text-[13px] leading-[18px] break-words pr-10 pb-1.5 pl-1">{msg.content}</div>
                          <span className={`text-[11px] absolute right-2 bottom-0 ${isMe ? 'text-[#667781]' : 'text-[#667781]'}`}>
                            {new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                          </span>
                        </div>
                      </div>
                    );
                  })}
                  <div ref={messagesEndRef} />
                </div>
              )}
            </div>
            {/* Input Area */}
            <div className="flex items-center gap-2 bg-[#f0f2f5] p-2 border-t border-gray-200">
              <div className="relative flex flex-1 items-center bg-white rounded-lg px-2 py-1.5 shadow-sm">
                <input
                  type="text"
                  value={inputText}
                  onChange={(e) => setInputText(e.target.value)}
                  onKeyDown={handleKeyDown}
                  placeholder="Type a message"
                  className="w-full bg-transparent text-[14px] outline-none text-[#111b21] placeholder-[#8696a0]"
                />
              </div>
              <button
                onClick={sendMessage}
                disabled={!inputText.trim()}
                className={`flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-[#54656f] transition hover:text-[#111b21] ${!inputText.trim() ? 'opacity-50' : 'text-[#00a884]'}`}
              >
                <Send size={20} className={inputText.trim() ? "text-[#00a884]" : ""} />
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};