"use client";
import React, { useState } from "react";
import { useAppSelector, useAppDispatch } from "../hooks/hooks";
import { hideModal } from "../store/Slice/modalSlice";
import { setSelectedUser } from "../store/Slice/chatSlice";
import { IoCheckmark } from "react-icons/io5";
import { useGetAllUsersQuery } from "../store/api/AllUsersList";
import Cookies from "js-cookie";
import { X } from "lucide-react";
import TextTranslate from "../utils/TextTranslate";

export default function ChatPopup() {
  const dispatch = useAppDispatch();
  const isOpen = useAppSelector((state) => state.modals.ChatPopup);
  const token = Cookies.get("Snapta_auth_token");
  
  const { data: UsersData } = useGetAllUsersQuery({ token: token || "" });
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedTempUser, setSelectedTempUser] = useState<any>(null);

  if (!isOpen) return null;

  const handleClose = () => {
    dispatch(hideModal("ChatPopup"));
    setSelectedTempUser(null);
    setSearchTerm("");
  };

  const filteredUsers =
    UsersData?.tag_users?.filter((user: any) =>
      user.first_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.username?.toLowerCase().includes(searchTerm.toLowerCase())
    ) || [];

  const handleChatRedirect = () => {
    if (selectedTempUser) {
      dispatch(
        setSelectedUser({
          second_id: selectedTempUser.user_id,
          first_name: selectedTempUser.first_name,
          username: selectedTempUser.username,
          profile_pic: selectedTempUser.profile_pic,
          message: "",
          type: "",
          last_name: "",
          id: "",
          user_id: "",
          my_id: "",
          last_seen: "",
          message_type: "",
          time: "",
          date: "",
          unread_message: "",
          role: "",
          url: ""
        })
      );
      handleClose();
    }
  };

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm z-[200] p-4">
      {/* Container: Background updated to var(--modal-color) */}
      <div className="bg-[var(--modal-color)] rounded-3xl shadow-2xl w-full max-w-[420px] md:max-w-[550px] overflow-hidden pb-4 animate-in fade-in zoom-in duration-200">
        
        {/* Header */}
        <div className="relative flex items-center justify-center px-4 sm:px-6 py-4 border-b border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_07%)]">
          <button onClick={handleClose} className="absolute left-5 text-[var(--text-primary)]/80 hover:text-[var(--text-primary)] transition-colors">
            <X size={24} />
          </button>
          <h2 className="text-[var(--text-primary)] font-medium text-[16px] translate-y-0.5">
            <TextTranslate text="New Message" />
          </h2>
        </div>

        {/* Search Input Section */}
        <div className="flex items-center px-4 sm:px-6 py-2 border-b border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_07%)]">
          <span className="text-[var(--text-primary)] font-bold text-[15px] mr-4">To:</span>
          <input 
            type="text"
            placeholder="Search..."
            className="bg-transparent border-none outline-none text-[var(--text-primary)] text-[14px] w-full py-1 placeholder:text-[var(--text-primary)]/20"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

        {/* Suggested List Area */}
        <div className="max-h-[350px] overflow-y-auto scrollbar-hide">
          <div className="px-4 sm:px-6 py-2 pt-3">
            <p className="text-[var(--text-primary)] font-medium text-[14px]">Suggested</p>
          </div>
          
          {filteredUsers.length > 0 ? (
            filteredUsers.map((user: any) => (
              <div 
                key={user.user_id}
                onClick={() => setSelectedTempUser(user)}
                className="flex items-center justify-between px-4 sm:px-6 py-2 hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)] cursor-pointer transition-colors group"
              >
                <div className="flex items-center gap-3">
                  <img 
                    src={user.profile_pic || "/assets/default_user.png"} 
                    className="w-12 h-12 rounded-full object-cover border border-[var(--border-color)]" 
                    alt="profile" 
                  />
                  <div className="flex flex-col">
                    <span className="text-[var(--text-primary)] font-bold text-[14px]">{user.first_name}</span>
                    <span className="text-[var(--text-secondary)] text-[13px]">{user.username || user.first_name}</span>
                  </div>
                </div>
                
                {/* Selection Circle - Themed to var(--text-primary) */}
                <div className={`w-6 h-6 rounded-full border flex items-center justify-center transition-all ${
                  selectedTempUser?.user_id === user.user_id 
                    ? " border-[#341F60] dark:border-[var(--text-primary)] bg-[#341F60] dark:bg-[var(--text-primary)]" 
                    : "border-[#341F60] dark:border-[var(--border-colordark)] group-hover:border-[#6C47B7] dark:group-hover:border-[var(--text-secondary)]"
                    }`}>
                  {selectedTempUser?.user_id === user.user_id && (
                    <IoCheckmark className="text-[var(--modal-color)] stroke-[3px]" size={16} />
                  )}
                </div>
              </div>
            ))
          ) : (
            <div className="py-12 text-center text-[var(--text-secondary)] text-[14px]">No account found.</div>
          )}
        </div>

        {/* Footer Chat Button */}
        <div className="px-4 sm:px-6 mt-4 mx-auto flex justify-center w-full">
  <button 
    onClick={handleChatRedirect}
    disabled={!selectedTempUser}
    className="w-full py-3 bg-[#341F60] hover:bg-[#6C47B7] disabled:opacity-80 disabled:cursor-not-allowed text-white font-bold rounded-xl text-[15px] transition-all active:scale-[0.98] shadow-lg"
  >
    Chat
  </button>
</div>
      </div>
    </div>
  );
}