"use client";
import React, { useState, useEffect } from "react";
import useApiPost from "@/app/hooks/postData";
import Image from "next/image";
import NoPostGif from "../../../../public/assets/NoPost.png";
import { useRouter } from "next/navigation";
import { ClipLoader } from "react-spinners";
import { useAppDispatch } from "@/app/hooks/hooks";
import { setUserId } from "@/app/store/Slice/SetUserIdForChatOpen";
import TextTranslate from "@/app/utils/TextTranslate";
import { useTranslateText } from "@/app/hooks/useTranslate";
import { X } from "lucide-react";
import { MdOutlineKeyboardArrowRight } from "react-icons/md";

function StorySeenUsers({
  onClose,
  storyid,
}: {
  onClose: () => void;
  storyid: number;
}) {
  const { data, loading, postData } = useApiPost();
  const [searchTerm, setSearchTerm] = useState("");
  const router = useRouter();
  const dispatch = useAppDispatch();
  const translate = useTranslateText();

  useEffect(() => {
    if (storyid) {
      try {
        postData("/story_seen_list", { story_id: storyid });
      } catch (error: any) {
        console.error("Error fetching story seen list:", error);
      }
    }
  }, [storyid]);

  const StorySeenList = data?.story_seen || [];

  const filteredList = StorySeenList?.filter((user: any) => {
    const fullName = `${user.first_name} ${user.last_name}`.toLowerCase();
    const username = user.username?.toLowerCase() || "";
    return (
      fullName.includes(searchTerm.toLowerCase()) ||
      username.includes(searchTerm.toLowerCase())
    );
  });

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

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm z-[210] p-4">
      {/* Modal Container: Matched width and height to ShareStory code */}
      <div className="relative bg-[var(--modal-color)] rounded-3xl shadow-2xl w-full max-w-[420px] md:max-w-[550px] overflow-hidden flex flex-col animate-in fade-in zoom-in duration-200 border border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_07%)] pb-4">
        
        {/* Header: Matched exactly to ShareStory structure */}
        <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)] transition-colors">
            <X size={24} />
          </button>
          <h2 className="text-[var(--text-primary)] font-medium text-[16px] translate-y-0.5">
            <TextTranslate text="Viewers" />
          </h2>
        </div>

        {/* Search Input Section: Matched "To:" logic from ShareStory */}
        <div className="flex items-center px-4 py-2 border-b border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_07%)]">
          <span className="text-[var(--text-primary)] font-bold text-[15px] mr-2">Users:</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-[400px] overflow-y-auto scrollbar-hide flex-1  py-2">
          {loading ? (
            <div className="flex justify-center items-center h-full py-10">
              <ClipLoader loading={loading} size={25} color="#452B7A" />
            </div>
          ) : filteredList?.length > 0 ? (
            <div className="space-y-1">
               <p className="text-[var(--text-primary)] font-medium text-[14px] py-2 px-4 ">
                <TextTranslate text="Recent Viewers" />
              </p>
              {filteredList.map((user: any, index: number) => (
                <div
  key={index}
  className="flex justify-between items-center group cursor-pointer py-2 px-4 hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)] transition-colors"
  onClick={() => handleUsernameClick(user)}
>
                  <div className="flex gap-3 items-center">
                    <img
                      src={user?.profile_pic || "/assets/ProfilePicRounded"}
                      alt="Profile"
                      className="h-12 w-12 object-cover rounded-full border border-[var(--border-color)]"
                    />
                    <div className="text-left">
                      <p className="font-bold text-[var(--text-primary)] text-[14px]">
                        {user.first_name} {user.last_name}
                      </p>
                      <p className="text-[var(--text-secondary)] font-gilroy_md text-[13px]">
                        @{user.username}
                      </p>
                    </div>
                  </div>
                 <MdOutlineKeyboardArrowRight size={24} className="text-[var(--text-primary)]"/>
                </div>
              ))}
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center h-full py-12 opacity-60">
              <Image
                src={NoPostGif}
                alt="no post"
                className="w-16 h-16 opacity-20 img-theme"
                style={{ filter: "var(--image-filter)" }}
                width={64}
                height={64}
              />
              <p className="text-sm text-[var(--text-secondary)] font-gilroy_md mt-2">
                <TextTranslate text="No account found." />
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default StorySeenUsers;