"use client";
import React, { useState, useMemo } from "react";
import Cookies from "js-cookie";
import Image from "next/image";
import { useRouter } from "next/navigation";
import NoPostGif from "../../../../public/assets/NoPost.png";
import { hideModal } from "@/app/store/Slice/modalSlice";
import { useAppDispatch, useAppSelector } from "@/app/hooks/hooks";
import useApiPost from "@/app/hooks/postData";
import { User } from "../../types/SearchUserType";
import toast from "react-hot-toast";
import { setUserId } from "@/app/store/Slice/SetUserIdForChatOpen";
import { useGetAllUsersQuery } from "@/app/store/api/AllUsersList";
import TextTranslate from "@/app/utils/TextTranslate";
import { useTranslateText } from "@/app/hooks/useTranslate";
import { X, Check } from "lucide-react"; // Added Check for a better selection UI
import { IoCloseOutline } from "react-icons/io5";
import { showSuccessToast } from "@/app/components/Toast/SuccessToast";
import { showErrorToast } from "@/app/components/Toast/ErrorToast";

function ShareStoryUsersList() {
  const [searchTerm, setSearchTerm] = useState("");
  // Updated to an array for multiple selection
  const [selectedUsers, setSelectedUsers] = useState<any[]>([]);
  
  const token = Cookies.get("Snapta_auth_token");
  const {
    data: UsersData,
    isLoading,
  } = useGetAllUsersQuery({ token: token || "" });

  const router = useRouter();
  const dispatch = useAppDispatch();
  const isShareStoryOpen = useAppSelector((state) => state.modals.ShareStory);
  const currentStory = useAppSelector((state) => state.currentStory.currentStory);
  const translate = useTranslateText();
  const { postData, loading: shareLoading } = useApiPost();

  if (!isShareStoryOpen) return null;

  const handleClose = () => {
    dispatch(hideModal("ShareStory"));
    setSearchTerm("");
    setSelectedUsers([]);
  };

 const handleUsernameClick = (user: any) => {
  if (!user?.username) {
    console.error("Username missing:", user);
    return;
  }
  handleClose();
  router.push(`/Profile/${user.username}`);
  dispatch(hideModal("ViewOtherUsersStory"));
};

  // Toggle selection logic
  const toggleUserSelection = (user: any) => {
    const isSelected = selectedUsers.some((u) => u.user_id === user.user_id);
    if (isSelected) {
      setSelectedUsers(selectedUsers.filter((u) => u.user_id !== user.user_id));
    } else {
      setSelectedUsers([...selectedUsers, user]);
    }
  };

  const handleShareStory = async () => {
    if (selectedUsers.length === 0) return;
    
    try {
      // Loop through all selected users to share the story
      const sharePromises = selectedUsers.map((user) => 
        postData("/new_chat_api", {
          to_user: user.user_id,
          type: "story",
          event_name: "message",
         story_id: (currentStory as any)?.story_id,
        })
      );

      await Promise.all(sharePromises);
      showSuccessToast(`Story Shared with ${selectedUsers.length} user(s)!`, "You can check your chats.");
      handleClose();
    } catch (error) {
      showErrorToast("Failed to share story", "Something went wrong.");
    }
  };

 const users: User[] = Array.isArray(UsersData?.tag_users) 
  ? (UsersData?.tag_users as any as User[]) 
  : [];
  const filteredUsers = useMemo(() => {
    return users.filter(
      (user) =>
        (user?.first_name + " " + user?.last_name || "").toLowerCase().includes(searchTerm.toLowerCase()) ||
        user?.username?.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [users, searchTerm]);

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm z-[200] p-4">
      <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 border-b border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]  h-[54px] flex items-center justify-center">
                      <button 
                        onClick={handleClose}
                        className="absolute left-4 text-[var(--text-primary)] hover:opacity-70"
                      >
                        <IoCloseOutline size={32} strokeWidth={1} />
                      </button>
                      
                      <h2 className="text-[var(--text-primary)] font-semibold text-[17px] mt-1">
                        <TextTranslate text="Share Story" />
                      </h2>
                    </div>

        {/* Search Input Section */}
        <div className="flex items-center px-4 sm:px-6 py-2 border-b border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-colordark),white_07%)]">
          <span className="text-[var(--text-primary)] font-bold text-[15px] mr-4">To:</span>
          <div className="flex flex-1 items-center gap-2">
             <img
                src="/assets/follower_search.png"
                alt="Search"
                className="w-4 h-4 img-theme opacity-60"
              />
            <input 
              type="text"
              placeholder={translate("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>
        </div>

        {/* User 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]">
                <TextTranslate text="Suggested" />
            </p>
          </div>
          
          {filteredUsers.length > 0 ? (
            filteredUsers.map((user: any) => {
              const isSelected = selectedUsers.some((u) => u.user_id === user.user_id);
              return (
                <div 
                  key={user.user_id}
                  onClick={() => toggleUserSelection(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 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-colordarkdark)]" 
                      alt="profile" 
                    />
                    <div className="flex flex-col">
                      <button 
  className="text-left"
  onClick={(e) => {
      e.stopPropagation();
      handleUsernameClick(user);
  }}
>
                          <span className="text-[var(--text-primary)] font-bold text-[14px] block">
                              {user.first_name} {user.last_name}
                          </span>
                          <span className="text-[var(--text-secondary)] text-[13px] block">
                              @{user.username}
                          </span>
                      </button>
                    </div>
                  </div>
                  
                  {/* Selection Circle - Themed Toggle */}
                  <div className={`w-6 h-6 rounded-full border flex items-center justify-center   ${
                    isSelected 
                    ? " 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)]"
                  }`}>
                    {isSelected && (
                      <Check className="text-[var(--modal-color)]" size={14} />
                    )}
                  </div>
                </div>
              );
            })
          ) : (
            <div className="py-12 flex flex-col items-center justify-center gap-2">
                 <Image
                    src={NoPostGif}
                    alt="No users"
                    className="w-16 h-16 opacity-20 img-theme"
                  />
                <p className="text-[var(--text-secondary)] text-[14px]">
                    <TextTranslate text="No account found." />
                </p>
            </div>
          )}
        </div>

        {/* Footer Action Button */}
        <div className="px-4 sm:px-6 mt-4">
          <button 
            onClick={handleShareStory}
            disabled={selectedUsers.length === 0 || shareLoading}
            className="w-full py-3 bg-[#341F60] hover:bg-[#6C47B7] disabled:opacity-35 disabled:cursor-not-allowed text-white font-bold rounded-xl text-[15px] active:scale-[0.98] shadow-lg flex justify-center items-center"
          >
            {shareLoading ? "..." : (
              <span>
                <TextTranslate text="Send" />
                {selectedUsers.length > 0 && ` (${selectedUsers.length})`}
              </span>
            )}
          </button>
        </div>
      </div>
    </div>
  );
}

export default ShareStoryUsersList;