"use client";

import React, { useState, useRef, useEffect } from "react";
import Cookies from "js-cookie";
import EmojiPicker, { SkinTonePickerLocation, Theme } from "emoji-picker-react";
import Image from "next/image";
import Emoji from "../../../public/assets/smile.png";
import SelectFiles from "../../../public/assets/SelectFiles.png";
import Send from "../../../public/assets/Send.png";
import Loader from "../../../public/assets/Loader.gif";
import SelectFile from "./SelectFile";
import { useAppDispatch, useAppSelector } from "../hooks/hooks";
import { clearFile } from "../store/Slice/FileSelectSlice";
import { generateThumbnailFromVideo } from "@/app/components/GenerateThumbnail";
import { ClipLoader } from "react-spinners";
import { useTranslateText } from "../hooks/useTranslate";
import { Paperclip } from "lucide-react";
import { useGetBlockedUserListQuery } from "../store/api/BlockedUserList";
import UnblockPopup from "./UnblockPopup";
import { showModal } from "../store/Slice/modalSlice";
import { LuSend } from "react-icons/lu";

//To send message
function SendMessage() {
  const [text, setText] = useState("");
  const token = Cookies.get("Snapta_auth_token");
  const [sending, setSending] = useState(false);
  const pickerRef = useRef<HTMLDivElement>(null);
  const fileRef = useRef<HTMLInputElement>(null);
  const [showPicker, setShowPicker] = useState(false);
  const dispatch = useAppDispatch();
  const selectedUser = useAppSelector((state) => state.chat.selectedUser);
  const { selectedFile, previewFile } = useAppSelector((state) => state.file);

  const [showFileOptions, setShowFileOptions] = useState(false);

  const newUserId = useAppSelector((state) => state.newUserId);
  const translate = useTranslateText();

  const newUser = useAppSelector((state) => state.newUserId.newUser?.id);

  // State for selected skin tone
  const [selectedSkinTone, setSelectedSkinTone] = useState<number>(0);

  // To send message
  const handleSend = async (userIdOverride?: any) => {
    if (isBlocked) return;
    if (sending || (!selectedFile && !text)) return;
    setSending(true);

    const formData = new FormData();
    const toUserId = userIdOverride || selectedUser?.second_id;
    formData.append("to_user", toUserId);
    formData.append("event_name", "message");

    if (text) {
      formData.append("message", text);
      formData.append("type", "text");
    }

    if (selectedFile) {
      const type = selectedFile.type.startsWith("image/")
        ? "image"
        : selectedFile.type.startsWith("video/")
          ? "video"
          : "file";
      formData.append("type", type);
      formData.append("url", selectedFile);

      if (selectedFile.type.startsWith("video/")) {
        formData.append(
          "video_thumbnail",
          await generateThumbnailFromVideo(selectedFile)
        );
      }
    }

    try {
      await fetch(`${process.env.NEXT_PUBLIC_API_URL}/new_chat_api`, {
        method: "POST",
        headers: {
          Authorization: `Bearer ${token}`,
        },
        body: formData,
      });
      setText("");
      dispatch(clearFile());
    } catch (error) {
      console.error("Error sending message:", error);
    } finally {
      setSending(false);
    }
  };

  // for emoji picker
  const handleTogglePicker = () => {
    setShowPicker((prev) => !prev);
  };

  const handleEmojiClick = (emojiObject: { emoji: string; }) => {
    setText((prev) => prev + emojiObject.emoji);
  };

  // Handle skin tone change
  const handleSkinToneChange = (skinTone: number) => {
    setSelectedSkinTone(skinTone);
  };

  // To close emoji picker on outside click
  useEffect(() => {
    const handleClickOutside = (event: { target: any; }) => {
      if (pickerRef.current && !pickerRef.current.contains(event.target)) {
        setShowPicker(false);
      }
    };

    if (showPicker) {
      document.addEventListener("mousedown", handleClickOutside);
    } else {
      document.removeEventListener("mousedown", handleClickOutside);
    }

    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [showPicker]);

  // To select File (preserved from your original code)
  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    // logic depends on your Slice implementation
  };

  // To send message on Enter key
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Enter" && !sending && (selectedFile || text.trim())) {
        e.preventDefault();
        handleSend();
      }
    };

    document.addEventListener("keydown", handleKeyDown);

    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [selectedFile, text, sending]);

  useEffect(() => {
    dispatch(clearFile());
  }, [selectedUser]);

  const { data: BlockUserList, refetch } = useGetBlockedUserListQuery({
    token: token || "",
  });
  const unblockModal = useAppSelector(
    (state) => state.modals.UnblockConfirmation
  );

  useEffect(() => {
    if (!unblockModal) {
      refetch();
    }
  }, [unblockModal]);
  useEffect(() => {
    refetch();
  }, [selectedUser]);

  const blockedUsers = BlockUserList?.user_blocklist ?? [];

  const isBlocked = blockedUsers?.some(
    (user: any) => user.user_id === selectedUser?.second_id
  );

  return (
    <>
      {selectedUser ? (
        <>
          {isBlocked ? (
            <div className="flex flex-col items-center justify-center w-full bg-[var(--bg-primary)] border-t border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]">
              {/* Text Section */}
              <div className="py-3 text-center">
                <p className="text-[var(--text-primary)] text-[14px] font-medium">
                  You've blocked this account
                </p>
                <p className="text-[var(--text-secondary)] text-[12px] mt-1">
                  You can't message or video chat with this user.
                </p>
              </div>

              {/* Buttons Section - Full width with divider */}
              <div className="flex w-full border-t border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]">
                <button
                  onClick={() => dispatch(showModal("UnblockConfirmation"))}
                  className="flex-1 py-2.5 text-red-500 text-[14px] font-medium border-r border-[var(--border-colordark)]"
                >
                  Unblock
                </button>
              </div>
            </div>
          ) : (
            <>
              <div className="relative px-3 py-2 w-full bg-[var(--bg-primary)]">
                {showPicker && (
                  <div
                    ref={pickerRef}
                    className="absolute bottom-14 z-50 rounded-[10px] overflow-hidden border border-[var(--border-colordark)] shadow-2xl"
                    style={{ width: "320px" }}
                  >
                    <EmojiPicker
                      onEmojiClick={handleEmojiClick}
              
                      theme={
                        typeof document !== "undefined" &&
                          document.documentElement.classList.contains("dark")
                          ? Theme.DARK
                          : Theme.LIGHT
                      }
                      width="100%"
                      height={350}
                      lazyLoadEmojis={true}
                      skinTonesDisabled={false}
                      searchDisabled={false}
                      skinTonePickerLocation={SkinTonePickerLocation.PREVIEW}
                      previewConfig={{
                        showPreview: true,
                        defaultEmoji: "1f600",
                        defaultCaption: "Choose an emoji",
                      }}
                      categories={[
                        { category: "suggested" as any, name: "Recently Used" },
                        { category: "smileys_people" as any, name: "" },
                        { category: "animals_nature" as any, name: "" },
                        { category: "food_drink" as any, name: "" },
                        { category: "travel_places" as any, name: "" },
                        { category: "activities" as any, name: "" },
                        { category: "objects" as any, name: "" },
                        { category: "symbols" as any, name: "" },
                        { category: "flags" as any, name: "" },
                      ]}
                    />
                  </div>
                )}
                <div className="flex flex-col w-full border border-[var(--border-colordark)] rounded-[24px] bg-transparent px-3 py-2 transition-all">
                  {/* 1. File Preview Area */}
                  {selectedFile && (
                    <div className="flex items-center gap-3 pb-2 mb-0.5 ">
                      <div className="relative flex-shrink-0 group">
                        {selectedFile.type.startsWith("image/") && (
                          <img
                            src={previewFile as string}
                            alt="preview"
                            className="w-16 h-16 object-cover rounded-xl    "
                          />
                        )}

                        {selectedFile.type.startsWith("video/") && (
                          <video
                            src={previewFile as string}
                            className="w-16 h-16 object-cover rounded-xl"
                          />
                        )}

                        {!selectedFile.type.startsWith("image/") &&
                          !selectedFile.type.startsWith("video/") && (
                            <div className="flex items-center justify-center bg-[var(--bg-secondary)] text-[10px] text-[var(--text-secondary)] px-3 py-4 rounded-xl max-w-[100px] truncate">
                              {previewFile}
                            </div>
                          )}

                        <button
                          onClick={() => dispatch(clearFile())}
                          className="absolute -top-1.5 -right-1.5 bg-[var(--bg-secondary)] border border-[var(--border-colordark)] rounded-full w-5 h-5 flex items-center justify-center text-[var(--text-primary)] text-[12px] hover:border-red-500 hover:text-red-500 transition-colors"
                        >
                          ×
                        </button>
                      </div>
                    </div>
                  )}

                  {/* 2. Horizontal Input Row */}
                  <div className="flex w-full gap-3 items-center">
                    {/* Emoji Trigger */}
                    <button
                      onClick={handleTogglePicker}
                      className="flex-shrink-0 "
                    >
                      <Image
                        src={Emoji}
                        alt="emoji"
                        className="w-[22px] h-[22px]  img-theme  -mt-0.5"
                      />
                    </button>

                    {/* Input field */}
                    <input
                      disabled={isBlocked}
                      type="text"
                      placeholder={translate("Type Message")}
                      value={text}
                      onKeyDown={(e) => {
                        if (
                          e.key === "Enter" &&
                          !sending &&
                          !isBlocked &&
                          (text.trim() || selectedFile)
                        ) {
                          e.preventDefault();
                          handleSend(selectedUser?.second_id);
                        }
                      }}
                      onChange={(e) => setText(e.target.value)}
                      className="flex-1 -ml-2 px-1 py-1.5 text-[14px] focus:outline-none bg-transparent text-[var(--text-primary)] placeholder:text-[var(--text-secondary)]"
                    />

                    {/* File + Send */}
                    <div className="relative flex-shrink-0 flex items-center gap-3">
                      <div className="relative">
                        <Paperclip
                          onClick={() => setShowFileOptions(true)}
                          className="w-5 h-5 text-[var(--text-secondary)]/40 cursor-pointer hover:text-[var(--text-primary)]/70 transition-colors"
                        />

                        {showFileOptions && (
                          <div className="absolute bottom-10 -right-3 z-50 w-64 bg-[var(--bg-secondary)] rounded-[5px] shadow-[0_10px_40px_rgba(0,0,0,0.5)] overflow-hidden">
                            <SelectFile onClose={() => setShowFileOptions(false)} />
                          </div>
                        )}
                      </div>

                      <button
                        className="flex-shrink-0 flex items-center justify-center disabled:scale-100 transition-all"
                        onClick={() => handleSend()}
                        disabled={sending || isBlocked || (!text.trim() && !selectedFile)}
                      >
                        <input
                          type="file"
                          ref={fileRef}
                          accept="image/*,video/*,.pdf,.doc,.docx"
                          className="hidden"
                          onChange={(e) => handleFileSelect(e)}
                        />

                        {sending ? (
                          <ClipLoader
                            color="#ffffff"
                            size={18}
                            loading={sending}
                          />
                        ) : (
                          <LuSend className="text-textPrimary cursor-pointer w-5 h-5" />
                        )}
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </>
          )}
        </>
      ) : null}

      <UnblockPopup />
    </>
  );
}

export default SendMessage;