"use client";
import React from "react";
import { useAppSelector, useAppDispatch } from "../hooks/hooks";
import { hideModal } from "../store/Slice/modalSlice";
import { FaRegCircleCheck } from "react-icons/fa6";
import { IoClose } from "react-icons/io5";
import Cookies from "js-cookie";
import { useGetUserProfileDetailsQuery } from "../store/api/GetUserProfileDetails";


export default function UserListLoginPopup() {
  const dispatch = useAppDispatch();
  const isOpen = useAppSelector((state) => state.modals.UserAccountSwitcher);
const token = Cookies.get("Snapta_auth_token");
  const { data: UserData } = useGetUserProfileDetailsQuery({ token: token || "" });
  const currentUser = UserData?.user_data;

  if (!isOpen) return null;

  const handleClose = () => dispatch(hideModal("UserAccountSwitcher"));

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm z-[200] p-4">
      <div className="bg-[#262626] rounded-2xl shadow-2xl w-full max-w-[400px] overflow-hidden animate-in fade-in zoom-in duration-200">
        <div className="relative border-b border-white/10 py-3 text-center">
          <h2 className="text-white font-bold text-base">Switch accounts</h2>
          <button onClick={handleClose} className="absolute right-4 top-3 text-white">
            <IoClose size={24} />
          </button>
        </div>
        <div className="py-2">
          <div className="flex items-center justify-between px-4 py-3 hover:bg-white/5 cursor-pointer">
            <div className="flex items-center gap-3">
              <img 
                src={currentUser?.profile_pic || "https://via.placeholder.com/150"} 
                className="w-10 h-10 rounded-full object-cover" 
                alt="profile" 
              />
              <span className="text-white font-semibold text-sm">{currentUser?.username || "prim.o159"}</span>
            </div>
            <FaRegCircleCheck className="text-[#0095F6]" size={22} />
          </div>
        </div>
        <div className="border-t border-white/10">
          <button className="w-full py-4 text-[#0095F6] font-bold text-sm hover:bg-white/5 transition-colors">
            Log into an Existing Account
          </button>
        </div>
      </div>
    </div>
  );
}