"use client";
import React, { useState, useMemo, useEffect } from "react";
import { useGetAllUsersQuery } from "../store/api/AllUsersList";
import Cookies from "js-cookie";
import { useGetMyAllFollowingQuery } from "../store/api/GetMyFollowing";
import TextTranslate from "../utils/TextTranslate";
import { X } from "lucide-react";

interface User {
  to_user: string;
  first_name: string;
  last_name?: string;
  username: string;
  profile_pic?: string;
}

interface TagPeopleProps {
  isOpen: boolean;
  onClose: () => void;
}

const TagPeople: React.FC<TagPeopleProps> = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

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

  const allUsers: User[] = Array.isArray(MyFollowingData?.follower)
    ? MyFollowingData?.follower
    : [];

  const [searchTerm, setSearchTerm] = useState("");
  const [selectedUsers, setSelectedUsers] = useState<User[]>([]);

  useEffect(() => {
    const storedUsers = localStorage.getItem("selectedUsers");
    if (storedUsers) {
      const selectedIds = JSON.parse(storedUsers) as string[];
      const selected = allUsers.filter((user) =>
        selectedIds.includes(user.to_user)
      );
      setSelectedUsers(selected);
    }
  }, [allUsers, isOpen]);

  const isUserSelected = (userId: string) => {
    return selectedUsers.some((u) => u.to_user === userId);
  };

  const displayedUsers = useMemo(() => {
    return allUsers.filter(
      (user) =>
        searchTerm.trim() === "" ||
        `${user.first_name} ${user.last_name || ""}`
          .toLowerCase()
          .includes(searchTerm.toLowerCase()) ||
        user.username.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [allUsers, searchTerm]);

  const handleSelectUser = (user: User) => {
    const updatedUsers = [...selectedUsers, user];
    setSelectedUsers(updatedUsers);
  };

  const handleRemoveUser = (userId: string) => {
    const updated = selectedUsers.filter((user) => user.to_user !== userId);
    setSelectedUsers(updated);
  };

  const handleAddUsers = () => {
    const selectedUserIds = selectedUsers.map((user) => user.to_user);
    localStorage.setItem("selectedUsers", JSON.stringify(selectedUserIds));
    onClose();
    window.dispatchEvent(new Event("storage"));
  };

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm z-[250] p-4">
      <div className="bg-[var(--modal-color)] rounded-3xl shadow-2xl w-full max-w-[420px] md:max-w-[550px] overflow-hidden pb-6 animate-in fade-in zoom-in   flex flex-col max-h-[90vh]">
        
        {/* Header */}
        <div className="relative flex items-center justify-center px-4 py-4 border-b border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_07%)]">
          <button
            onClick={onClose}
            className="absolute left-6 text-[var(--text-primary)]/80 hover:text-[var(--text-primary)]  "
          >
            <X size={24} />
          </button>
          <h2 className="text-[var(--text-primary)] font-gilroy_semibold font-bold text-[17px] translate-y-0.5">
            <TextTranslate text="Tag Profile" />
          </h2>
        </div>

        {/* Search Input Section */}
        <div className="flex items-center px-4 sm:px-6 py-2 mb-2 border-b border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_07%)]">
          <img
            src="/assets/follower_search.png"
            alt="Search"
            className="w-4 h-4 mr-3 opacity-50 brightness-0 dark:invert"
          />
          <input
            type="text"
            placeholder="Search for a User..."
            className="bg-transparent border-none outline-none text-[var(--text-primary)] text-[14px] w-full py-1 placeholder:text-[var(--text-primary)]/30 font-gilroy_md"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

        {/* User List Area */}
        <div className="max-h-[400px] overflow-y-auto theme-scrollbar">
          {isLoading ? (
            <div className="py-10 text-center text-[var(--text-secondary)] font-gilroy_md text-[14px]">
              <TextTranslate text="Loading..." />
            </div>
          ) : displayedUsers.length > 0 ? (
            <div className="flex flex-col">
              {displayedUsers.map((user) => {
                const selected = isUserSelected(user.to_user);
                return (
                  <div
                    key={user.to_user}
                    className="flex items-center justify-between px-4 sm:px-5 py-3 hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)] 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-gilroy_semibold font-bold text-[14px]">
                          {user.first_name} {user.last_name || ""}
                        </span>
                        <span className="text-[var(--text-secondary)] font-gilroy_md text-[13px]">
                          {user.username}
                        </span>
                      </div>
                    </div>

                    {/* Updated Button Styling to match Discover.tsx */}
                    <button
                      onClick={() =>
                        selected
                          ? handleRemoveUser(user.to_user)
                          : handleSelectUser(user)
                      }
                      className={`rounded-xl font-gilroy_semibold text-[12px] h-fit w-[85px] py-1.5   active:scale-95 ${
                        !selected
                          ? "bg-gradient-custom text-white hover:opacity-90 border border-transparent"
                          : "text-[#341F60] dark:text-[var(--text-primary)] bg-transparent border border-[#341F60] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)]"
                      }`}
                    >
                      <TextTranslate text={selected ? "Remove" : "Add"} />
                    </button>
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="py-20 text-center text-[var(--text-secondary)] font-gilroy_md text-[14px]">
              <TextTranslate text="No users found" />
            </div>
          )}
        </div>

        {/* Footer Submit Button */}
        <div className="px-4 sm:px-5 mt-2 -mb-3">
          <button
            onClick={handleAddUsers}
            className="w-full py-2.5 bg-[#341F60] hover:bg-[#6C47B7] text-white font-gilroy_semibold font-bold rounded-xl text-[15px] active:scale-[0.98]  "
            type="button"
          >
            <TextTranslate text="Submit" />
          </button>
        </div>
      </div>
    </div>
  );
};

export default TagPeople;