import { IoCloseOutline, IoSearchOutline } from "react-icons/io5";
import { FaStar } from "react-icons/fa";
import SideDrawer from "@/components/common/SideDrawer";
import { FollowData } from "@/lib/actions/profileActions";

interface FollowingDrawerProps {
  isOpen: boolean;
  followData:  FollowData;
  totalFollowing: number;
  followSearch: string;
  setFollowSearch: (value: string) => void;
  isSearching: boolean;
  isFollowLoading: boolean;
  isLoadingMore: boolean;
  handleFollowSearch: (query: string) => void;
  clearSearch: () => void;
  handleFollowAction: (id: string, action: "follow" | "unfollow") => void;
  handleScroll: (e: React.UIEvent<HTMLDivElement>, type: "followers" | "following") => void;
  getFilteredData: (type: "followers" | "following") => any[];
  t: (key: string) => string;
  getImageUrl: (path: string) => string;
}

export const FollowingDrawer = ({
  isOpen,
  followData,
  totalFollowing,
  followSearch,
  setFollowSearch,
  isSearching,
  isFollowLoading,
  isLoadingMore,
  handleFollowSearch,
  clearSearch,
  handleFollowAction,
  handleScroll,
  getFilteredData,
  t,
  getImageUrl,
}: FollowingDrawerProps) => {
  return (
    <SideDrawer
      isOpen={isOpen}
      title={t("dashboard_page.following")}
      onClose={() => setFollowSearch("")} // optional: reset search
    >
      <div className="flex flex-col h-full">
        {/* Search bar */}
        <div className="flex-shrink-0">
          <div className="flex items-center p-1 pr-2 border border-neutrals200 rounded-md overflow-hidden w-full mb-7 dark:border-darkborder">
            <input
              type="text"
              placeholder={t("dashboard_page.search_following_users")}
              value={followSearch}
              onChange={(e) => setFollowSearch(e.target.value)}
              onKeyDown={(e) =>
                e.key === "Enter" && handleFollowSearch(followSearch)
              }
              className="flex-grow px-4 py-3 pl-1 text-gray-500 placeholder-gray-400 focus:outline-none max-md:py-1.5 max-md:text-sm dark:bg-background dark:text-neutrals400"
            />
            {followSearch && (
              <button
                onClick={clearSearch}
                className="px-3 py-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                type="button"
              >
                <IoCloseOutline size={24} />
              </button>
            )}
            <button
              onClick={() => handleFollowSearch(followSearch)}
              disabled={isSearching}
              className="flex items-center gap-2 px-4 py-2.5 text-white bg-primary500 hover:bg-primary600 text-base rounded-lg max-md:p-0 max-md:bg-transparent  max-md:hover:bg-transparent max-md:text-neutrals400 max-md:text-sm max-md:font-normal dark:bg-primary400"
            >
              {isSearching ? (
                <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
              ) : (
                <IoSearchOutline size={24} />
              )}
              <span className="max-md:hidden">
                {isSearching
                  ? t("dashboard_page.searching")
                  : t("dashboard_page.search")}
              </span>
            </button>
          </div>

          {followSearch && (
            <div className="mb-4 text-sm text-gray-600 dark:text-neutrals400">
              <span>
                {t("dashboard_page.searching_for")} "{followSearch}"
              </span>
              {getFilteredData("following").length > 0 && (
                <span className="ml-2">
                  • {getFilteredData("following").length}{" "}
                  {t("dashboard_page.results_of")} {totalFollowing}{" "}
                  {t("dashboard_page.total")}
                </span>
              )}
            </div>
          )}
        </div>

        {/* List */}
        <div
          className="flex-1 overflow-y-auto pt-2"
          onScroll={(e) => handleScroll(e, "following")}
        >
          {isFollowLoading ? (
            <div className="flex justify-center items-center h-32">
              <div className="w-6 h-6 border-2 border-primary500 border-t-transparent rounded-full animate-spin"></div>
            </div>
          ) : getFilteredData("following").length > 0 ? (
            <ul className="space-y-4">
              {getFilteredData("following").map((item: any, index: number) => (
                <li key={index} className="pb-4 border-b border-neutrals100 dark:border-darkborder">
                  {item.followingId && (
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-3">
                        <div className="relative">
                          {item.followingId.profile?.file_path ? (
                            <img
                              src={getImageUrl(item.followingId.profile.file_path)}
                              alt={item.followingId.username || "User"}
                              className="w-12 h-12 rounded-full border-2 border-primary100 shadow-md cursor-pointer dark:border-darkborder"
                              onError={(e) => {
                                const target = e.target as HTMLImageElement;
                                if (!target.src.endsWith("/profile-avatar.png")) {
                                  target.onerror = null;
                                  target.src = "/profile-avatar.png";
                                }
                              }}
                            />
                          ) : (
                            <div className="w-12 h-12 rounded-full border-2 border-primary100 shadow-md cursor-pointer bg-primary400 dark:bg-primary400 flex items-center justify-center text-xl font-medium text-white">
                              {(item.followingId.first_name?.[0] || item.followingId.username?.[0] || "U").toUpperCase()}
                            </div>
                          )}
                          {item.followingId.isVerified && (
                            <span className="absolute -top-1 -right-1">
                              <img src="/checkmark.svg" alt="verified" className="w-4 h-4" />
                            </span>
                          )}
                        </div>
                        <div>
                          <h4 className="font-semibold text-neutrals900 dark:text-neutrals400">
                            {item.followingId.first_name && item.followingId.last_name
                              ? `${item.followingId.first_name} ${item.followingId.last_name}`
                              : item.followingId.username || item.followingId.first_name || "Unknown User"}
                          </h4>
                          <div className="flex items-center text-sm text-gray-600 dark:text-neutrals400">
                            <FaStar className="text-yellow-500 mr-1" />
                            {item.followingId.rating !== undefined && item.followingId.rating !== null
                              ? `${item.followingId.rating}/5`
                              : "No rating"}
                          </div>
                        </div>
                      </div>
                      <button
                        onClick={() => handleFollowAction(item.followingId._id, "unfollow")}
                        className="px-4 py-2 text-sm font-medium text-primary500 hover:text-primary600 dark:text-primary400 dark:hover:text-primary300"
                      >
                        {t("dashboard_page.unfollow")}
                      </button>
                    </div>
                  )}
                </li>
              ))}
              {isLoadingMore && (
                <li className="flex justify-center py-4">
                  <div className="w-5 h-5 border-2 border-primary500 border-t-transparent rounded-full animate-spin"></div>
                </li>
              )}
            </ul>
          ) : (
            <div className="text-center py-8 text-gray-500 dark:text-neutrals400">
              {t("dashboard_page.no_following_users_found")}
            </div>
          )}
        </div>
      </div>
    </SideDrawer>
  );
};



// used this in the place of sidedrawer in the dashboard panel

{/* <FollowingDrawer
  isOpen={activeDrawer === "following"}
  followData={followData} // your following users array
  totalFollowing={followData.totalFollowing}
  followSearch={followSearch}
  setFollowSearch={setFollowSearch}
  isSearching={isSearching}
  isFollowLoading={isFollowLoading}
  isLoadingMore={isLoadingMore}
  handleFollowSearch={handleFollowSearch}
  clearSearch={clearSearch}
  handleFollowAction={handleFollowAction}
  handleScroll={handleScroll}
  getFilteredData={getFilteredData}
  t={t}
  getImageUrl={getImageUrl}
/>

 <FollowersDrawer
  isOpen={activeDrawer === "followers"}
  followData={followData}
  followSearch={followSearch}
  setFollowSearch={setFollowSearch}
  isSearching={isSearching}
  isFollowLoading={isFollowLoading}
  isLoadingMore={isLoadingMore}
  t={t}
  onClose={closeDrawer}
  handleFollowSearch={handleFollowSearch}
  clearSearch={clearSearch}
  handleScroll={handleScroll}
  handleFollowAction={handleFollowAction}
  isUserFollowed={isUserFollowed}
  getFilteredData={getFilteredData}
  getImageUrl={getImageUrl}
/> */}