import React, { useContext, useEffect, useRef, useState } from "react";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { Button } from "../ui/button";
import {
  File,
  FileText,
  MoreVertical,
  Paperclip,
  Send,
  Smile,
} from "lucide-react";
import { ScrollArea } from "../ui/scroll-area";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { Input } from "../ui/input";
import { useSession } from "next-auth/react";
import { Socket } from "socket.io-client";
import { SocketContext } from "@/lib/SocketProvider";
import { Card, CardContent } from "../ui/card";
import Link from "next/link";
import Image from "next/image";

type Message = {
  _id?: string;
  content: string;
  sender: string;
  receiver: string;
  createdAt?: Date;
  fileType?: "file" | "image";
  image?: string;
  // attachment?: {
  //   filetypeurl: string;
  //   name: string;
  // };
};
type SendMessage = {
  roomId: string;
  message: string;
  senderAdmin: string;
  senderBranch: string;
  messageSender: string;
  attachment?: Attachment;
};

type ChatProps = {
  user: {
    reciever: {
      image: string;
      name: string;
      _id: string;
    };
    _id: string;
  };
};

type Attachment = {
  imageFileType: "image" | "file";
  imageData: string;
  imageName: string;
};

type Chats = {
  _id: string;
  senderAdmin: string;
  senderBranch: string;
  messageSender: string;
  message: string;
  createdAt: Date;
  image?: string;
  fileType?: string;
};
type GetMessages = {
  message: string;
  conversationId: string;
  chats: Chats[];
};

const emoticons = [
  "😀",
  "😃",
  "😄",
  "😁",
  "😆",
  "😅",
  "😂",
  "🤣",
  "😊",
  "😇",
  "🙂",
  "🙃",
  "😉",
  "😌",
  "😍",
  "🥰",
  "😘",
  "😗",
  "😙",
  "😚",
];

export default function Chat({ user }: ChatProps) {
  const socket: Socket = useContext(SocketContext);
  const { data: session } = useSession();
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [messages, setMessages] = useState<Message[] | any>();
  const [newMessage, setNewMessage] = useState("");

  useEffect(() => {
    socket.emit("get_messages", {
      // senderAdmin: session?.user.id,
      roomId: user._id,
      senderBranch: user.reciever._id,
    });
    scrollToBottom();
    // if (scrollAreaRef.current) {
    //   scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;
    // }
  }, [session, user.reciever._id]);

  useEffect(() => {
    // socket.emit("get_messages", {
    //   senderAdmin: session?.user.id,
    //   senderBranch: user.reciever._id,
    // });
    socket.on("get_messages", (data) => {
      setMessages((prevMessages: Chats[]) => {
        // If receiving a single new message
        if (data.chat) {
          return [...prevMessages, data.chat];
        }
        // If receiving multiple messages
        if (data.chats) {
          return data.chats;
        }
        return prevMessages;
      });
    });
    scrollToBottom();
    // if (scrollAreaRef.current) {
    //   scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;
    // }
    return () => {
      socket.off("get_messages");
    };
  });
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  const handleSendMessage = (attachment?: Attachment) => {
    if (attachment) {
      attachment.imageData = attachment.imageData.split("base64,")[1];
    }
    if ((newMessage.trim() || attachment) && user) {
      const newMsg: SendMessage = {
        roomId: user._id,
        message: newMessage.trim(),
        senderAdmin: session?.user.id as string,
        messageSender: session?.user.id as string,
        senderBranch: user.reciever._id,
        attachment,
      };

      socket.emit("send_msg", newMsg);
      scrollToBottom();
      setNewMessage("");
    }
  };

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

  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];

    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        const attachment: Attachment = {
          imageFileType: file.type.startsWith("image/") ? "image" : "file",
          imageData: reader.result as string,
          imageName: file.name.toLowerCase(),
        };
        handleSendMessage(attachment);
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <>
      <div className="bg-white shadow p-2 flex items-center justify-between rounded-b-md">
        <div className="flex items-center">
          <Avatar>
            {user.reciever.image && user.reciever.image.length > 0 ? (
              <Image
                // src={user.reciever.image}
                src={process.env.NEXT_PUBLIC_IMAGE_URL + user.reciever.image}
                height={200}
                width={200}
                alt="BI"
              />
            ) : (
              <AvatarFallback>{user.reciever.name[0]}</AvatarFallback>
            )}
          </Avatar>
          {/* <Avatar className="mr-3">
            <AvatarImage src={user.reciever.image} alt={user.reciever.name} />
            <AvatarFallback>{user.reciever.name[0]}</AvatarFallback>
          </Avatar> */}
          <div>
            <h2 className="text-xl font-bold">{user.reciever.name}</h2>
            {/* <div className="text-sm text-gray-500">
                Last seen: {selectedUser.lastMessage}
              </div> */}
          </div>
        </div>
        {/* <Button variant="ghost" size="icon">
          <MoreVertical className="h-5 w-5" />
        </Button> */}
      </div>

      <ScrollArea className="flex-1 p-4">
        {messages?.map((msg: Chats) => (
          <>
            <Card
              key={msg._id}
              className={`mb-4 max-w-fit ${
                msg.messageSender === session?.user.id
                  ? "ml-auto bg-[#be063f] text-white"
                  : "mr-auto bg-white"
              }`}
              // style={{ maxWidth: "80%" }}
            >
              <CardContent className="p-3">
                {msg.image ? (
                  msg.fileType === "image" ? (
                    <Image
                      src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${msg.image}`}
                      alt={"Image"}
                      width={400}
                      height={400}
                    />
                  ) : (
                    <Link
                      href={`${process.env.NEXT_PUBLIC_IMAGE_URL}${msg.image}`}
                      target="_blank"
                    >
                      <FileText />
                      {/* <p>{msg.image}</p> */}
                    </Link>
                  )
                ) : (
                  <p>{msg.message}</p>
                )}
                <div className="text-xs mt-1 text-right">
                  {/* {msg.createdAt && msg.createdAt.toLocaleTimeString()} */}
                </div>
              </CardContent>
            </Card>
          </>
        ))}
        <div ref={messagesEndRef} />
        <div className="h-2 flex justify-center pt-4"></div>
      </ScrollArea>

      <div className="bg-white p-4 shadow">
        <form
          onSubmit={(e) => {
            e.preventDefault();
            handleSendMessage();
          }}
          className="flex items-center"
        >
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="mr-2"
            onClick={() => fileInputRef.current?.click()}
          >
            <Paperclip className="h-5 w-5" />
            <span className="sr-only">Attach file</span>
          </Button>
          <input
            type="file"
            ref={fileInputRef}
            onChange={handleFileUpload}
            className="hidden"
            // accept="image/*,.pdf,.doc,.docx,.txt"
          />
          <Popover>
            <PopoverTrigger asChild>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="mr-2"
              >
                <Smile className="h-5 w-5" />
                <span className="sr-only">Add emoticon</span>
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-72">
              <ScrollArea className="h-48">
                <div className="grid grid-cols-8 gap-2">
                  {emoticons.map((emoticon, index) => (
                    <Button
                      key={index}
                      variant="ghost"
                      className="w-8 h-8 p-0"
                      onClick={() => handleEmoticonClick(emoticon)}
                    >
                      {emoticon}
                    </Button>
                  ))}
                </div>
              </ScrollArea>
            </PopoverContent>
          </Popover>
          <Input
            type="text"
            placeholder="Type a message..."
            value={newMessage}
            onChange={(e) => setNewMessage(e.target.value)}
            className="flex-1 mr-2"
          />
          <Button variant={"appVariant"} type="submit">
            <Send className="h-4 w-4" />
            <span className="sr-only">Send message</span>
          </Button>
        </form>
      </div>
    </>
  );
}