"use client";
import React, {
  useState,
  useRef,
  useContext,
  useEffect,
  Suspense,
} from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Card, CardContent } from "@/components/ui/card";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Send,
  Search,
  MoreVertical,
  Paperclip,
  File,
  Image as ImageIcon,
  Smile,
  CircleDashed,
} from "lucide-react";
import { SocketContext } from "@/lib/SocketProvider";
import { Socket } from "socket.io-client";
import Chat from "@/components/custom/chat";
import { useSession } from "next-auth/react";
import Image from "next/image";
import { useSearchParams } from "next/navigation";
import { number } from "zod";

type Reciever = {
  image: string;
  name: string;
  _id: string;
};
type Senders = {
  createdAt: string | Date;
  lastMessage: string;
  reciever: Reciever;
  sender: string;
  updatedAt: Date;
  _id: string;
};

// type User = {
//   id: string;
//   name: string;
//   avatar: string;
//   lastMessage: string;
// };

// type Attachment = {
//   id: string;
//   type: "image" | "file";
//   url: string;
//   name: string;
// };

// type Message = {
//   id: string;
//   senderId: string;
//   receiverId: string;
//   content: string;
//   timestamp: Date;
//   attachment?: Attachment;
// };

type Rooms = {
  createdAt: Date;
  lastMessage: string;
  reciever: Reciever;
  sender: string;
  updatedAt: Date;
  __v: number;
  _id: string;
};

type Data = {
  message: string;
  rooms: Rooms[];
};

const emoticons = [
  "😀",
  "😃",
  "😄",
  "😁",
  "😆",
  "😅",
  "😂",
  "🤣",
  "😊",
  "😇",
  "🙂",
  "🙃",
  "😉",
  "😌",
  "😍",
  "🥰",
  "😘",
  "😗",
  "😙",
  "😚",
  "😋",
  "😛",
  "😝",
  "😜",
  "🤪",
  "🤨",
  "🧐",
  "🤓",
  "😎",
  "🤩",
  "🥳",
  "😏",
  "😒",
  "😞",
  "😔",
  "😟",
  "😕",
  "🙁",
  "☹️",
  "😣",
  "😖",
  "😫",
  "😩",
  "🥺",
  "😢",
  "😭",
  "😤",
  "😠",
  "😡",
  "🤬",
  "🤯",
  "😳",
  "🥵",
  "🥶",
  "😱",
  "😨",
  "😰",
  "😥",
  "😓",
  "🤗",
  "🤔",
  "🤭",
  "🤫",
  "🤥",
  "😶",
  "😐",
  "😑",
  "😬",
  "🙄",
  "😯",
  "😦",
  "😧",
  "😮",
  "😲",
  "🥱",
  "😴",
  "🤤",
  "😪",
  "😵",
  "🤐",
  "🥴",
  "🤢",
  "🤮",
  "🤧",
  "😷",
  "🤒",
  "🤕",
  "🤑",
  "🤠",
  "😈",
  "👿",
  "👹",
  "👺",
  "🤡",
  "💩",
  "👻",
  "💀",
  "☠️",
  "👽",
  "👾",
];

const LoadingState = () => (
  <div className="flex items-center justify-center p-8">
    <CircleDashed className="h-8 w-8 animate-spin" />
  </div>
);

export default function OneToOneChatPage() {
  return (
    <Suspense fallback={<LoadingState />}>
      <OneToOneChat />
    </Suspense>
  );
}
function OneToOneChat() {
  const socket: Socket = useContext(SocketContext);
  const { data: session } = useSession();
  const [users, setUsers] = useState<Senders[] | null>();
  const searchParams = useSearchParams();
  const branchId = searchParams.get("branchId");
  useEffect(() => {
    socket.emit("get_rooms", { adminId: session?.user.id });
  }, [session]);

  useEffect(() => {
    socket.on("get_rooms", (data: Data) => {
      console.log("data");
      console.log(data);
      setUsers(data.rooms);
      data.rooms?.map((room) => {
        if (room.reciever._id === branchId) setSelectedUser(room);
      });
    });
    return () => {
      socket.off("get_rooms");
    };
  });
  const [selectedUser, setSelectedUser] = useState<Senders | null>(null);
  const [searchTerm, setSearchTerm] = useState("");
  // const fileInputRef = useRef<HTMLInputElement>(null);

  // const handleSendMessage = (attachment?: Attachment) => {
  //   if ((newMessage.trim() || attachment) && selectedUser) {
  //     const newMsg: Message = {
  //       id: Date.now().toString(),
  //       senderId: "currentUser",
  //       receiverId: selectedUser.id,
  //       content: newMessage.trim(),
  //       timestamp: new Date(),
  //       attachment: attachment,
  //     };
  //     setMessages([...messages, newMsg]);
  //     socket.emit("send_msg", newMessage);
  //     setNewMessage("");
  //   }
  // };

  // const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
  //   const file = event.target.files?.[0];
  //   if (file) {
  //     const reader = new FileReader();
  //     reader.onloadend = () => {
  //       const attachment: Attachment = {
  //         id: Date.now().toString(),
  //         type: file.type.startsWith("image/") ? "image" : "file",
  //         url: reader.result as string,
  //         name: file.name,
  //       };
  //       handleSendMessage(attachment);
  //     };
  //     reader.readAsDataURL(file);
  //   }
  // };

  // const handleEmoticonClick = (emoticon: string) => {
  //   setNewMessage((prevMessage) => prevMessage + emoticon);
  // };

  // const filteredUsers = users?.filter(
  //   (user) => user
  //   // user.name.toLowerCase().includes(searchTerm.toLowerCase())
  // );
  const filteredUsers = users?.filter((user) => {
    if (!user.reciever) {
      return null;
    }
    const userName = user.reciever?.name?.toLowerCase();
    const lowerSearchTerm = searchTerm.toLowerCase();

    // If searchTerm is empty, include all users
    if (searchTerm.length === 0) {
      return true; // Keep all users
    }

    // Check if the user's name includes the search term
    return userName.includes(lowerSearchTerm);
  });

  // const filteredMessages = messages.filter(
  //   (msg) =>
  //     (msg.senderId === selectedUser?.id && msg.receiverId === "currentUser") ||
  //     (msg.senderId === "currentUser" && msg.receiverId === selectedUser?.id)
  // );

  return (
    <div className="flex h-[82vh] -mt-8  bg-gray-100 ">
      {/* Sidebar */}
      <div className="w-80 bg-white border-r border-gray-200 flex flex-col ">
        <div className="pt-4 pb-4 pr-4 border-b border-gray-200">
          {/* <h2 className="text-xl font-bold mb-4">Chats</h2> */}
          <div className="relative">
            <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400" />
            <Input
              type="text"
              placeholder="Search users..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-8"
            />
          </div>
        </div>
        <ScrollArea className="flex-1 ">
          {filteredUsers?.map((user) => (
            <Button
              key={user._id}
              variant="ghost"
              className="w-[95%] justify-start p-6 mt-2 hover:bg-gray-100"
              onClick={() => setSelectedUser(user)}
            >
              <Avatar className="-ml-4 mr-2">
                {user.reciever?.image && user.reciever?.image.length > 0 ? (
                  <Image
                    src={
                      process.env.NEXT_PUBLIC_IMAGE_URL + user.reciever.image
                    }
                    height={200}
                    width={200}
                    alt="BI"
                  />
                ) : (
                  <AvatarFallback>
                    {user.reciever?.name.charAt(0)}
                  </AvatarFallback>
                )}
              </Avatar>
              {/* <AvatarImage
                  src={user.reciever?.image}
                  alt={user.reciever?.name}
                />
                <AvatarFallback>{user.reciever?.name.charAt(0)}</AvatarFallback>
              </Avatar> */}
              <div className="flex-1 text-left">
                <div className="font-semibold">{user.reciever?.name}</div>
                <div className="text-sm text-gray-500">{user.lastMessage}</div>
              </div>
            </Button>
          ))}
        </ScrollArea>
      </div>

      {/* Chat Area */}
      <div className="flex-1 flex flex-col m-2">
        {selectedUser ? (
          <Chat user={selectedUser} />
        ) : (
          <div className="flex-1 flex items-center justify-center">
            <p className="text-gray-500 text-xl">
              Select a user to start chatting
            </p>
          </div>
        )}
        {/* <Chat /> */}
      </div>
    </div>
  );
}