"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 toast from "react-hot-toast";
import { ClipLoader } from "react-spinners";
import { useGetAllUsersQuery } from "../store/api/AllUsersList";
import TextTranslate from "../utils/TextTranslate";
import { useTranslateText } from "../hooks/useTranslate";
import {
  X,
  Search,
  Link,
  Facebook,
  MessageCircle,
  Send,
  Mail,
  AtSign,
  Twitter,
  BadgeCheck,
  Check
} from "lucide-react";
import { IoCloseOutline } from "react-icons/io5";
import { showSuccessToast } from "../components/Toast/SuccessToast";
import { showErrorToast } from "../components/Toast/ErrorToast";

interface User {
  user_id: string;
  follow_user_id: string;
  to_user: any;
  first_name: string;
  last_name: string;
  username: string;
  profile_pic: string;
  is_verified?: boolean;
}

function ShareReelUsersList({
  reelId,
  onShareSuccess,
}: {
  reelId: string;
  onShareSuccess: () => void;
}) {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);

  const token = Cookies.get("Snapta_auth_token");
  const { data: UsersData, isLoading } = useGetAllUsersQuery({ token: token || "" });

  const router = useRouter();
  const translate = useTranslateText();
  const dispatch = useAppDispatch();
  const isShareReelOpen = useAppSelector((state) => state.modals.ShareReel);
  const { postData, loading: isSending } = useApiPost();

  function onClose() {
    dispatch(hideModal("ShareReel"));
    setSelectedUsers([]);
    setSearchTerm("");
  }

  const handleCopyLink = async () => {
    const link = window.location.href;
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(link);
      } else {
        const textarea = document.createElement("textarea");
        textarea.value = link;
        textarea.style.position = "fixed";
        textarea.style.opacity = "0";
        document.body.appendChild(textarea);
        textarea.focus();
        textarea.select();
        document.execCommand("copy");
        document.body.removeChild(textarea);
      }
      showSuccessToast("Link copied!", "You can now share it anywhere.");
    } catch (err) {
      showErrorToast("Failed to copy link." , "Something went wrong.");
    }
  };
const [isFocused, setIsFocused] = useState(false);
  const toggleUserSelection = (userId: string) => {
    setSelectedUsers(prev =>
      prev.includes(userId)
        ? prev.filter(id => id !== userId)
        : [...prev, userId]
    );
  };

const handleSendBatch = async () => {
  if (selectedUsers.length === 0) return;
  
  // Log for debugging
  console.log("Sharing reel with ID:", reelId);
  console.log("Selected users:", selectedUsers);
  
  try {
    const promises = selectedUsers.map(userId =>
      postData("/new_chat_api", {
        to_user: userId,
        type: "reel",
        event_name: "message",
        reel_id: reelId, // Make sure this is the correct field name
        // Some backends might expect 'post_id' instead of 'reel_id'
        // post_id: reelId, 
      })
    );
    
    const results = await Promise.all(promises);
    console.log("Share results:", results);
    
    showSuccessToast("Shared successfully!", `Reel shared with ${selectedUsers.length} user(s).`);
    onShareSuccess();
    onClose();
  } catch (error) {
    console.error("Error sharing reel:", error);
    showErrorToast("Failed to share.", "Something went wrong.");
  }
};

  const users = Array.isArray(UsersData?.tag_users) ? UsersData.tag_users : [];

  const filteredUsers = useMemo(() => {
    const search = searchTerm.trim().toLowerCase();
    if (!search) return users;
    return users.filter((user) => {
      const fullName = `${user?.first_name || ""} ${user?.last_name || ""}`.trim().toLowerCase();
      const username = (user?.username || "").toLowerCase();
      return fullName.includes(search) || username.includes(search);
    });
  }, [users, searchTerm]);

  if (!isShareReelOpen) return null;

  const socialLinks = [
    { label: 'Copy link', icon: <Link size={20} />, action: handleCopyLink },
    { label: 'Facebook', icon: <Facebook size={20} />, action: () => window.open("https://www.facebook.com/login", "_blank") },
    { label: 'Messenger', icon: <MessageCircle size={20} />, action: () => window.open("https://www.messenger.com/login", "_blank") },
    { label: 'WhatsApp', icon: <Send size={20} />, action: () => window.open("https://web.whatsapp.com/", "_blank") },
    { label: 'Email', icon: <Mail size={20} />, action: () => window.open("mailto:?body=" + window.location.href, "_blank") },
    { label: 'Threads', icon: <AtSign size={20} />, action: () => window.open("https://www.threads.net/login", "_blank") },
    { label: 'X', icon: <Twitter size={20} />, action: () => window.open("https://x.com/login", "_blank") }
  ];

  return (
    <div className="fixed inset-0 flex items-end md:items-center justify-center bg-black/70 backdrop-blur-sm z-[9999] p-0 md:p-4">
      <div className="bg-[var(--modal-color)] rounded-t-[20px] md:rounded-3xl shadow-2xl w-full max-w-[420px] md:max-w-[550px] overflow-hidden flex flex-col h-[75vh] md:h-full md:max-h-[65vh] animate-in slide-in-from-bottom md:zoom-in duration-300 border border-[var(--border-color)]">

        {/* Header */}
         <div className="relative border-b border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]  h-[54px] flex items-center justify-center">
                      <button 
                        onClick={onClose}
                        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 Reel" />
                      </h2>
                    </div>
        

        {/* Search Field with Cancel Beside It */}
        <div className="px-4 sm:px-6 py-3 flex items-center gap-3">
  <div className="relative flex-1 flex items-center border border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] rounded-[10px]   bg-[var(--bg-secondary)]">
    
    <div className="pl-3 flex items-center">
      <Search size={16} className="text-[var(--text-primary)] opacity-60 -mt-0.5" />
    </div>

    <input
      type="text"
      className="bg-transparent w-full py-[8px] px-2 text-[14px] text-[var(--text-primary)] placeholder:text-[var(--text-primary)]/30 focus:outline-none"
      placeholder={translate("Search")}
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      onFocus={() => setIsFocused(true)}
    />
  </div>

  {isFocused && (
    <button
      onClick={() => {
        setSearchTerm("");
        setIsFocused(false);
      }}
      className="text-[var(--text-primary)] text-[14px] font-medium whitespace-nowrap active:opacity-60"
    >
      Cancel
    </button>
  )}
</div>

  {/* Content Area */}
      <div className="flex-1 overflow-y-auto  py-2 scrollbar-hide">
        <style jsx>{`div::-webkit-scrollbar { display: none; }`}</style>

        {isLoading ? (
          <div className="flex justify-center items-center h-40">
            <ClipLoader loading={isLoading} size={25} color="#4c68d7" />
          </div>
        ) : (
          <>
            {isFocused ? (
              <div className="flex flex-col px-4 gap-1 pb-4">
                <p className="text-[var(--text-primary)]/40 text-[12px] font-medium px-2 py-1">More Users</p>
                {filteredUsers.map((user) => (
                  <div
                    key={user.user_id}
                    onClick={() => toggleUserSelection(user.user_id)}
                    className="flex items-center justify-between p-2 rounded-xl cursor-pointer   group "
                  >
                    <div className="flex items-center gap-3">
                      <img
                        src={user.profile_pic || "/assets/default_user.png"}
                        alt={user.username}
                        className="w-10 h-10 md:w-12 md:h-12 rounded-full object-cover"
                      />
                      <div className="flex flex-col">
                        <span className="text-[var(--text-primary)] text-[13px] md:text-[14px] font-medium flex items-center gap-1">
                          {user.first_name} {user.last_name}
                          {user.is_verified && <BadgeCheck size={14} className="text-[#0095F6] fill-[#0095F6] text-[var(--text-primary)]" />}
                        </span>
                        <span className="text-[var(--text-primary)]/40 text-[12px]">{user.username}</span>
                      </div>
                    </div>
                    {/* Themed selection circle for list view */}
                    <div
                      className={`w-5 h-5 md:w-6 md:h-6 rounded-full border flex items-center justify-center   
                        ${selectedUsers.includes(user.user_id)
                           ? " border-[#341F60] dark:border-[var(--text-primary)] bg-[#341F60] dark:bg-[var(--text-primary)]" 
                    : "border-[var(--border-colordark)]  dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] group-hover:border-[#6C47B7] dark:group-hover:border-[var(--text-secondary)]"
                  }`}
                    >
                      {selectedUsers.includes(user.user_id) && (
                        <Check size={14} className="text-[var(--modal-color)] stroke-[3px]" />
                      )}
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="grid grid-cols-4 gap-y-6 pb-6">
                {users.map((user) => (
                  <div key={user.user_id} onClick={() => toggleUserSelection(user.user_id)} className="flex flex-col items-center gap-2 group cursor-pointer relative">
                    <div className="relative">
                      <img 
                        src={user.profile_pic || "/assets/default_user.png"} 
                        alt={user.first_name} 
                        className={`w-[65px] h-[65px] md:w-[82px] md:h-[82px] rounded-full object-cover   ${selectedUsers.includes(user.user_id) ? 'opacity-70 border border-[var(--border-color)]' : 'border-[0.5px] border-[var(--border-color)]'}`} 
                      />
                      {/* Verified badge */}
                      {user.is_verified && (
                        <div className="absolute bottom-0 right-0 bg-[var(--text-primary)] rounded-full p-0.5 shadow-md">
                          <BadgeCheck size={14} className="text-[#0095F6] fill-[#0095F6] text-[var(--modal-color)]" />
                        </div>
                      )}
                      {/* Selection checkmark overlay as per grid logic */}
                      {selectedUsers.includes(user.user_id) && (
                        <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded-full">
                          <div className="bg-[var(--text-primary)] rounded-full p-1 shadow-xl">
                            <Check size={18} className="text-[var(--modal-color)] stroke-[3px]" />
                          </div>
                        </div>
                      )}
                    </div>
                    <p className="text-[11px] md:text-[12px] text-[var(--text-primary)] font-normal text-center line-clamp-1 px-1 leading-tight">{user.first_name}</p>
                  </div>
                ))}
              </div>
            )}
          </>
        )}
        {!isLoading && isFocused && filteredUsers.length === 0 && (
          <div className="flex flex-col items-center py-10">
            <Image src={NoPostGif} alt="No users" className="w-12 h-12 opacity-20" />
            <p className="text-[var(--text-primary)]/40 text-[13px] mt-4">No users found</p>
          </div>
        )}
      </div>
        {/* Footer */}
        <div className="border-t border-[var(--border-color)] bg-[var(--modal-color)] pb-safe">
          {selectedUsers.length > 0 ? (
            <div className="px-6 py-3">
              <button
                onClick={handleSendBatch}
                disabled={isSending}
                className="w-full py-[9px] bg-[#341F60] hover:bg-[#6C47B7] text-white font-medium rounded-xl text-[15px]   active:scale-[0.98] disabled:opacity-50"
              >
                {isSending ? "Sending..." : "Send"}
              </button>
            </div>
          ) : (
            <div className="px-6 pt-3">
              <div className="flex items-start justify-between gap-3 overflow-x-auto pb-2 scrollbar-hide">
                {socialLinks.map((social) => (
                  <div key={social.label} className="flex flex-col items-center gap-2 min-w-[55px] group cursor-pointer" onClick={social.action}>
                    <div className="w-[48px] h-[48px] md:w-[52px] md:h-[52px] rounded-full bg-[var(--bg-secondary)] flex items-center justify-center group-hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)]   border border-[var(--border-color)]">
                      <div className="text-[var(--text-primary)]">{social.icon}</div>
                    </div>
                    <span className="text-[10px] md:text-[11px] text-[var(--text-secondary)] font-medium text-center">{social.label}</span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default ShareReelUsersList;