"use client";
import React, { useState, useRef, useEffect } from "react";
import toast from "react-hot-toast";
import Cookies from "js-cookie";
import { useGetAllUsersQuery } from "../store/api/AllUsersList";
import TagPeople from "./TagPeople";
import { useGetAllPostReelsQuery } from "../store/api/GetAllPostReel";
import { IoMdPhotos } from "react-icons/io";
import { hideModal, showModal } from "../store/Slice/modalSlice";
import { useAppDispatch, useAppSelector } from "../hooks/hooks";
import { useGetMyAllFollowingQuery } from "../store/api/GetMyFollowing";
import { ClipLoader } from "react-spinners";
import { useGetHashtagListQuery } from "../store/api/GetHashtagList";
import TaggedPeopleList from "./TaggedPeopleList";
import TextTranslate from "../utils/TextTranslate";
import { useTranslateText } from "../hooks/useTranslate";
import { X, Plus } from "lucide-react";
import { IoCloseOutline } from "react-icons/io5";
import { LuFileText } from "react-icons/lu";
import { showSuccessToast } from "./Toast/SuccessToast";
import { showErrorToast } from "./Toast/ErrorToast";
import { closeAddPostModal } from "../store/Slice/AddPostSlice";

interface FormDataType {
  text: string;
  location: string;
  post_type: string;
  post_image: File[];
  post_video: File[];
  post_video_thumbnail: File[];
  tag_users: string;
}

function AddPostModal() {
  const dispatch = useAppDispatch();
  const { isOpen, postType } = useAppSelector((state) => state.addPost);
  
  // ✅ ALL HOOKS MUST BE CALLED BEFORE ANY CONDITIONAL RETURN
  const token = Cookies.get("Snapta_auth_token");
  const [tagPeopleOpen, setIsTagPeopleOpen] = useState(false);
  const [uploadedImages, setUploadedImages] = useState<File[]>([]);
  const [uploadedVideos, setUploadedVideos] = useState<
    { file: File; url: string }[]
  >([]);
  const [videoThumbnails, setVideoThumbnails] = useState<(string | File)[]>([]);
  
  const scrollRef = useRef<HTMLDivElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const locationInputRef = useRef(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const mapRef = useRef(null);

  const { data: postData1, refetch } = useGetAllPostReelsQuery({
    token: token || "",
  });
  const translate = useTranslateText();
  const [loading, setLoading] = useState(false);

  const [formData, setFormData] = useState<FormDataType>({
    text: "",
    location: "",
    post_type: "",
    post_image: [],
    post_video: [],
    post_video_thumbnail: [],
    tag_users: "",
  });

  const { data: MyFollowingData } = useGetMyAllFollowingQuery({ token: token || "" });
  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
  
  const { data: HashtagWords } = useGetHashtagListQuery({ token: token || "" });
  const [showList, setShowList] = useState(false);
  const [filteredList, setFilteredList] = useState<string[]>([]);
  const [text, setText] = useState("");
  const [activeIndex, setActiveIndex] = useState(0);
  const [hashtagStart, setHashtagStart] = useState<number | null>(null);

  // ✅ Now we can conditionally return after all hooks are called
  // if (!isOpen) return null;

  const selectedUserDetails = MyFollowingData?.follower?.filter((user) => selectedUsers.includes(user.to_user)) || [];

  // Reset internal state when modal opens/closes or type changes
  useEffect(() => {
    if (isOpen) {
      setUploadedImages([]);
      setUploadedVideos([]);
      setVideoThumbnails([]);
      setText("");
      setSelectedUsers([]);
      setFormData({
        text: "",
        location: "",
        post_type: postType === "video" ? "reel" : postType === "feed" ? "feed" : "image",
        post_image: [],
        post_video: [],
        post_video_thumbnail: [],
        tag_users: "",
      });
    }
  }, [isOpen, postType]);

  // Auto-scroll to the end when new media is added
  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTo({
        left: scrollRef.current.scrollWidth,
        behavior: "smooth",
      });
    }
  }, [uploadedImages.length, uploadedVideos.length]);
  
  useEffect(() => {
    return () => {
      uploadedVideos.forEach((v) => URL.revokeObjectURL(v.url));
    };
  }, [uploadedVideos]);

  useEffect(() => {
    const handleStorageChange = () => {
      const storedUsers = JSON.parse(localStorage.getItem("selectedUsers") || "[]");
      setSelectedUsers(storedUsers);
    };
    handleStorageChange();
    window.addEventListener("storage", handleStorageChange);
    return () => window.removeEventListener("storage", handleStorageChange);
  }, []);

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      const fileArray: File[] = Array.from(files);
      const imageFiles: File[] = [];
      const videoFiles: { file: File; url: string }[] = [];
      const generatedThumbnails: File[] = [];
      const invalidFiles: string[] = [];

      for (const file of fileArray) {
        if (postType === "image") {
          if (file.type.startsWith("image/")) {
            imageFiles.push(file);
          } else {
            invalidFiles.push(file.name);
          }
        } 
        else if (postType === "video") {
          if (file.type.startsWith("video/")) {
            const videoUrl = URL.createObjectURL(file);
            videoFiles.push({
              file,
              url: videoUrl,
            });

            try {
              const thumbnailFile = await generateThumbnail(file);
              generatedThumbnails.push(thumbnailFile);
            } catch (error) {
              console.error("Thumbnail generation error:", error);
            }
          } else {
            invalidFiles.push(file.name);
          }
        }
      }

      if (invalidFiles.length > 0) {
        const message = postType === "image" 
          ? `${invalidFiles.length} file(s) skipped. Only image files are allowed.`
          : `${invalidFiles.length} file(s) skipped. Only video files are allowed.`;
        showErrorToast(message);
      }

      if (postType === "image" && imageFiles.length > 0) {
        setUploadedImages((prev) => [...prev, ...imageFiles]);
        setFormData((prev) => ({
          ...prev,
          post_image: [...prev.post_image, ...imageFiles],
          post_type: "image",
        }));
      } else if (postType === "video" && videoFiles.length > 0) {
        setUploadedVideos((prev) => [...prev, ...videoFiles]);
        setVideoThumbnails((prev) => [...prev, ...generatedThumbnails]);
        setFormData((prev) => ({
          ...prev,
          post_video: [...prev.post_video, ...videoFiles.map(v => v.file)],
          post_video_thumbnail: [...prev.post_video_thumbnail, ...generatedThumbnails],
          post_type: "reel",
        }));
      }

      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
    }
  };

  const generateThumbnail = (videoFile: File) => {
    return new Promise<File>((resolve, reject) => {
      const video = document.createElement("video");
      video.src = URL.createObjectURL(videoFile);
      video.crossOrigin = "anonymous";
      video.muted = true;
      video.preload = "metadata";
      
      video.onloadedmetadata = () => {
        video.currentTime = 1;
      };
      
      video.onseeked = () => {
        const canvas = document.createElement("canvas");
        canvas.width = 200;
        canvas.height = 200;
        const ctx = canvas.getContext("2d");
        if (ctx) {
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
          canvas.toBlob((blob) => {
            if (blob) {
              const thumbnailFile = new File([blob], `thumbnail_${videoFile.name}.jpg`, { type: "image/jpeg" });
              resolve(thumbnailFile);
            } else { 
              reject(new Error("Blob failed")); 
            }
          }, "image/jpeg");
        }
        URL.revokeObjectURL(video.src);
      };
      
      video.onerror = () => {
        reject(new Error("Failed to load video"));
      };
    });
  };

  useEffect(() => {
    const loadGoogleMapsScript = () => {
      const script = document.createElement("script");
      script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyAMZ4GbRFYSevy7tMaiH5s0JmMBBXc0qBA&libraries=places";
      script.async = true;
      script.defer = true;
      script.onload = () => initializeAutocomplete();
      document.head.appendChild(script);
    };

    const initializeAutocomplete = () => {
      if (locationInputRef.current) {
        const autocomplete = new window.google.maps.places.Autocomplete(locationInputRef.current, { types: ["geocode"] });
        autocomplete.addListener("place_changed", () => {
          const place = autocomplete.getPlace();
          if (place.geometry && place.geometry.location) {
            handleLocationSelect({ name: place.formatted_address, lat: place.geometry.location.lat(), lng: place.geometry.location.lng() });
          }
        });
      }
    };
    loadGoogleMapsScript();
  }, []);

  const handleLocationSelect = (selectedLoc: any) => {
    setFormData((prev) => ({ ...prev, location: selectedLoc.name }));
  };

  const handleRemoveTag = (userId: string) => {
    const updated = selectedUsers.filter((id) => id !== userId);
    setSelectedUsers(updated);
    localStorage.setItem("selectedUsers", JSON.stringify(updated));
    window.dispatchEvent(new Event("storage"));
  };

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const val = e.target.value;
    const caretPos = e.target.selectionStart;
    setText(val);
    const lastHashIndex = val.lastIndexOf("#", caretPos - 1);
    const afterHash = val.slice(lastHashIndex + 1, caretPos);
    if (lastHashIndex !== -1 && /^[\w]{0,20}$/.test(afterHash) && (lastHashIndex === 0 || /\s/.test(val[lastHashIndex - 1]))) {
      const filtered = HashtagWords?.hashtags?.filter((tag) => tag.toLowerCase().startsWith(afterHash.toLowerCase())) || [];
      setFilteredList(filtered);
      setShowList(true);
      setHashtagStart(lastHashIndex);
      setActiveIndex(0);
    } else {
      setShowList(false);
    }
  };

  const addHashtag = (tag: string) => {
    if (hashtagStart === null) return;
    const before = text.slice(0, hashtagStart);
    const after = text.slice(textareaRef.current?.selectionStart || 0);
    setText(`${before}#${tag} ${after}`);
    setShowList(false);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (postType === "image" && uploadedImages.length === 0) {
      showErrorToast("Please select at least one photo");
      return;
    }
    if (postType === "video" && uploadedVideos.length === 0) {
      showErrorToast("Please select at least one video");
      return;
    }
    
    const formDataToSend = new FormData();
    formDataToSend.append("text", text);
    formDataToSend.append("location", formData.location);
    formDataToSend.append("post_type", postType === "video" ? "reel" : postType === "feed" ? "feed" : "image");
    formDataToSend.append("tag_users", selectedUsers.join(","));
    uploadedImages.forEach((file) => formDataToSend.append("post_image[]", file));
    uploadedVideos.forEach((video) => 
      formDataToSend.append("post_video[]", video.file)
    );
    videoThumbnails.forEach((file) => formDataToSend.append("post_video_thumbnail[]", file as File));

    try {
      setLoading(true);
      let res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/add_post`, {
        method: "POST",
        body: formDataToSend,
        headers: { Authorization: `Bearer ${token}` },
      });
      const resData = await res.json();
      showSuccessToast(resData?.message);
      close();
      refetch();
    } catch (err) {
      console.error(err);
      showErrorToast("Failed to submit post", "Please try again later.");
    } finally {
      setLoading(false);
      localStorage.removeItem("selectedUsers");
    }
  };

  const close = () => {
    dispatch(closeAddPostModal());
    localStorage.removeItem("selectedUsers");
  };
if (!isOpen) return null;
  return (
    <>
      <style>{`
        .pac-container { background-color: var(--modal-color); border: 1px solid var(--border-color); border-radius: 0 0 12px 12px; z-index: 2000 !important; }
        .pac-item { border-top: 1px solid var(--border-color); padding: 8px 12px; color: var(--text-primary); cursor: pointer; }
        .pac-item:hover { background-color: var(--border-color); }
        .pac-item-query { color: var(--text-primary); }
        .theme-scrollbar::-webkit-scrollbar { height: 4px; width: 4px; }
        .theme-scrollbar::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
      `}</style>
      <div className="fixed inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm z-[1000] p-4">
        <div className="bg-[var(--modal-color)] rounded-3xl shadow-2xl w-full max-w-[420px] md:max-w-[550px] overflow-hidden flex flex-col max-h-[70vh]">
          
          {/* Fixed Header */}
          <div className="relative border-b border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] h-[54px] flex items-center justify-center">
            <button 
              onClick={close}
              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={postType === "image" ? "Add Photo Post" : postType === "video" ? "Add Video/Reel" : postType === "feed" ? "Add Feed" : "Add Post"} />
            </h2>
          </div>

          {/* Scrollable Content Area */}
          <div className="flex-1 overflow-y-auto p-4 sm:px-6 theme-scrollbar">
            <form onSubmit={(e) => e.preventDefault()}>
              <div className="relative w-full">
                <textarea
                  ref={textareaRef}
                  value={text}
                  onChange={handleChange}
                  rows={5}
                  className="w-full border border-[var(--border-color)] rounded-md p-2 bg-transparent text-[var(--text-primary)] outline-none text-sm duration-200 hover:border-[color-mix(in_srgb,var(--text-primary),transparent_90%)] focus:border-[color-mix(in_srgb,var(--text-primary),transparent_80%)]"
                  placeholder={translate("Write a caption")}
                />
                {showList && filteredList.length > 0 && (
                  <ul className="absolute z-10 bg-[var(--modal-color)] border border-[var(--border-color)] rounded-md mt-1 w-full max-h-40 overflow-auto shadow-xl">
                    {filteredList.map((tag) => (
                      <li 
                        key={tag} 
                        onClick={() => addHashtag(tag)} 
                        className="px-4 py-2 cursor-pointer hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_90%)] text-[var(--text-primary)]"
                      >
                        #{tag}
                      </li>
                    ))}
                  </ul>
                )}
              </div>

              {/* Location Input */}
              <div className="flex flex-col mt-2">
                <label className="text-[var(--text-primary)] text-sm mb-1 font-gilroy_md">
                  <TextTranslate text="Location" />
                </label>
                <div className="relative group">
                  <img src="/assets/tag_location.png" className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 opacity-70 group-focus-within:opacity-100 img-theme" alt="" />
                  <input
                    ref={locationInputRef}
                    type="text"
                    placeholder={translate("Search Location")}
                    className="border border-[var(--border-color)] rounded-lg w-full py-2 pl-9 bg-transparent text-[var(--text-primary)] outline-none duration-200 hover:border-[color-mix(in_srgb,var(--text-primary),transparent_90%)] focus:border-[color-mix(in_srgb,var(--text-primary),transparent_80%)]"
                  />
                </div>
              </div>

              {/* Tag People Input */}
              <div className="flex flex-col mt-4">
                <label className="text-[var(--text-primary)] text-sm mb-1 font-gilroy_md">
                  <TextTranslate text="Tag People" />
                </label>
                <div className="relative group">
                  <img src="/assets/tag_profile.png" className="img-theme absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 opacity-70 group-focus-within:opacity-100" alt="" />
                  <input
                    type="text"
                    readOnly
                    onClick={() => setIsTagPeopleOpen(true)}
                    className="border border-[var(--border-color)] rounded-lg w-full py-2 pl-9 bg-transparent text-[var(--text-primary)] cursor-pointer outline-none duration-200 hover:border-[color-mix(in_srgb,var(--text-primary),transparent_90%)] focus:border-[color-mix(in_srgb,var(--text-primary),transparent_80%)]"
                    placeholder={translate("Tag people")}
                  />
                  {selectedUsers.length > 0 && (
                    <div className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-blue-600 cursor-pointer font-gilroy_md" onClick={() => dispatch(showModal("TaggedPeopleList"))}>
                      {selectedUsers.length === 1 ? selectedUserDetails[0]?.first_name : `${selectedUsers.length} people`}
                    </div>
                  )}
                </div>
              </div>

              {/* Display Selected Tags */}
              {selectedUserDetails.length > 0 && (
                <div className="flex flex-wrap gap-2 mt-3">
                  {selectedUserDetails.map((user) => (
                    <div key={user.to_user} className="flex items-center gap-2 bg-[var(--border-color)] pl-1 pr-2 py-1 rounded-full border border-[var(--border-color)] hover:border-[color-mix(in_srgb,var(--text-primary),transparent_70%)]">
                      <img src={user.profile_pic || "/assets/default_user.png"} className="w-6 h-6 rounded-full object-cover" alt="" />
                      <span className="text-[var(--text-primary)] text-[12px] font-gilroy_md">{user.first_name}</span>
                      <button type="button" onClick={() => handleRemoveTag(user.to_user)} className="text-[var(--text-primary)] hover:text-red-500">
                        <X size={14} />
                      </button>
                    </div>
                  ))}
                </div>
              )}

              {/* Combined Upload & Preview Container - Only show for image/video posts */}
              {postType !== "feed" && (
                <div className="border border-[var(--border-color)] rounded-lg mt-4 overflow-hidden bg-gradient-bg duration-200 hover:border-[color-mix(in_srgb,var(--text-primary),transparent_90%)] min-h-[176px] flex flex-col justify-center">
                  {uploadedImages.length === 0 && uploadedVideos.length === 0 ? (
                    <div className="flex flex-col items-center justify-center h-44 cursor-pointer group/upload" onClick={() => fileInputRef.current?.click()}>
                      <img src="/assets/gallery1.png" className="w-10 h-10 mb-2 opacity-100 img-theme" alt="" />
                      <div className="text-sm font-gilroy_md text-[var(--text-primary)] text-center">
                        <TextTranslate text={`Browse to Upload ${postType === "image" ? "Photos" : "Videos/Reels"}`} /><br />
                        <span className="text-[var(--text-secondary)] text-xs">
                          {postType === "image" ? "(All image formats supported)" : "(All video formats supported)"}
                        </span>
                      </div>
                    </div>
                  ) : (
                    <div className="p-1">
                      <div
                        ref={scrollRef}
                        className="flex items-center gap-4 overflow-x-auto p-2 theme-scrollbar snap-x"
                      >
                        {uploadedImages.map((file, index) => (
                          <div key={`img-${index}`} className="relative flex-shrink-0 w-[140px] h-36 snap-start">
                            <img
                              src={URL.createObjectURL(file)}
                              className="w-full h-full object-cover rounded-md border border-[var(--border-color)]"
                              alt=""
                            />
                            <button
                              type="button"
                              onClick={() => setUploadedImages(prev => prev.filter((_, i) => i !== index))}
                              className="absolute z-[60] -top-2 -right-2 flex items-center justify-center rounded-full bg-[var(--modal-color)] w-7 h-7 shadow-lg border border-[var(--border-color)] hover:bg-red-500 group"
                            >
                              <X size={14} className="text-[var(--text-primary)] group-hover:text-white" />
                            </button>
                          </div>
                        ))}

                        {uploadedVideos.map((file, index) => (
                          <div key={`vid-${index}`} className="relative flex-shrink-0 w-[140px] h-36 snap-start">
                            <video 
                              src={file.url}
                              className="w-full h-full object-cover rounded-md border border-[var(--border-color)]"
                            />
                            <button
                              type="button"
                              onClick={() => {
                                setUploadedVideos(prev => prev.filter((_, i) => i !== index));
                                setVideoThumbnails(prev => prev.filter((_, i) => i !== index));
                              }}
                              className="absolute z-[60] -top-2 -right-2 flex items-center justify-center rounded-full bg-[var(--modal-color)] w-7 h-7 shadow-lg border border-[var(--border-color)] hover:bg-red-500 group"
                            >
                              <X size={14} className="text-[var(--text-primary)] group-hover:text-white" />
                            </button>
                          </div>
                        ))}

                        <div
                          className="flex-shrink-0 w-[140px] h-36 border border-dashed border-[var(--border-colordark)] rounded-md flex flex-col items-center justify-center cursor-pointer hover:border-[color-mix(in_srgb,var(--text-primary),transparent_90%)] hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)] snap-end"
                          onClick={() => fileInputRef.current?.click()}
                        >
                          <Plus size={20} className="text-[var(--text-primary)] opacity-60" />
                          <span className="text-[10px] mt-1 font-gilroy_md text-[var(--text-primary)] opacity-60">Add More</span>
                        </div>
                      </div>
                    </div>
                  )}
                  <input
                    type="file"
                    ref={fileInputRef}
                    className="hidden"
                    multiple
                    accept={
                      postType === "image"
                        ? "image/*"
                        : postType === "video"
                        ? "video/*"
                        : ""
                    }
                    onChange={handleFileChange}
                  />
                </div>
              )}
            </form>
          </div>

          {/* Fixed Footer with Submit Button */}
          <div className="flex-shrink-0 p-3 sm:px-6 border-t border-[var(--border-color)] bg-[var(--modal-color)]">
            <button 
              onClick={handleSubmit} 
              disabled={loading} 
              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]"
            >
              {loading ? <ClipLoader size={12} color="currentColor" /> : <TextTranslate text="Submit" />}
            </button>
          </div>
        </div>
        <TagPeople isOpen={tagPeopleOpen} onClose={() => setIsTagPeopleOpen(false)} />
      </div>
    </>
  );
}

export default AddPostModal;