"use client";
import React, { useState, useRef, useEffect } from "react";
import Image from "next/image";
import Logo from "../../../../public/assets/logo.png";
import snapta from "../../../../public/assets/snapta.png";
import axios from "axios";
import Cookies from "js-cookie";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { updateProfileImage } from "@/app/store/Slice/UserProfileImage";
import { useAppDispatch } from "../../hooks/hooks";
import { useSelector } from "react-redux";
import { RootState } from "../../store/store";
import useApiPost from "@/app/hooks/postData";
import { AllAvtar } from "../../types/Avatar_Image";
import { ClipLoader } from "react-spinners";
import RoundedShimmer from "@/app/components/RoundedShimmer";
import TextTranslate from "@/app/utils/TextTranslate";
import { IoClose } from "react-icons/io5";
import { showErrorToast } from "@/app/components/Toast/ErrorToast";

function Profile() {
  const [selectedAvatar, setSelectedAvatar] = useState("");
  const token = Cookies.get("Snapta_auth_token");
  const [uploadedImage, setUploadedImage] = useState("");
  const [data, setData] = useState<AllAvtar[]>([]);

  const { loading, postData } = useApiPost();
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const router = useRouter();
  const dispatch = useAppDispatch();
  const [imageFile, setImageFile] = useState<File | null>(null);
  const [imagePreview, setImagePreview] = useState<string | null>(null);

  const [formData, setFormData] = useState({
    profile_pic: "",
    avtar_id: "",
  });

  const handleAvatarClick = (
    avatarSrc: string,
    avatarId: string
  ) => {
    setSelectedAvatar(avatarId);
    setUploadedImage(""); 
    dispatch(updateProfileImage(avatarSrc)); 
  };

  const handleImageClick = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  const handleRemoveImage = () => {
    setUploadedImage("");
    setSelectedAvatar(data.length > 0 ? data[0].id : ""); 
    Cookies.remove("selectedProfile"); 
    setImagePreview(null);
  };

  const profileImage = useSelector(
    (state: RootState) => state.profile.profileImage
  );

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const file = e.target.files[0];
      setImageFile(file);
      const reader = new FileReader();
      reader.onloadend = () => {
        setImagePreview(reader.result as string);
      };
      reader.readAsDataURL(file);
      setSelectedAvatar("");
    }
  };

  const [IsLoading, setIsLoading] = useState(false);
  useEffect(() => {
    const fetchAvatars = async () => {
      setIsLoading(true);
      try {
        const response = await axios.post(
          `${process.env.NEXT_PUBLIC_API_URL}/get_avtar_image`
        );
        if (response?.data?.all_avtar) {
          setData(response.data.all_avtar);
          if (response.data.all_avtar.length > 0) {
            setSelectedAvatar(response.data.all_avtar[0].id);
          }
        } else {
          showErrorToast("Failed to fetch avatars.", "Please try again later.");
        }
      } catch (error) {
        console.error("Error fetching avatars:", error);
      } finally {
        setIsLoading(false);
      }
    };
    fetchAvatars();
  }, []);

  const [isLoading, setLoading] = useState(false);
  const handleSubmit = async (e: React.FormEvent) => {
    setLoading(true);
    const formDataToSend = new FormData();
    if (imageFile instanceof File) {
      formDataToSend.append("profile_pic", imageFile);
    } else if (selectedAvatar) {
      formDataToSend.append("avtar_id", selectedAvatar);
    } else {
    showErrorToast("Please select an avatar or upload an image.", "One of the options is required.");
      setLoading(false);
      return;
    }

    try {
      let response = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/user_profile`,
        {
          method: "POST",
          body: formDataToSend,
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );
      router.push("/Home");
    } catch (error) {
      console.error("Upload Error:", error);
    } finally {
      setLoading(false);
    }
  };

  const scrollRef = useRef<HTMLDivElement>(null);
  const scrollLeft = () => scrollRef.current?.scrollBy({ left: -100, behavior: "smooth" });
  const scrollRight = () => scrollRef.current?.scrollBy({ left: 100, behavior: "smooth" });

  return (
    <div className="h-screen bg-[var(--bg-primary)] overflow-y-auto overflow-x-hidden flex flex-col items-center theme-scrollbar">
      {/* Logo & Title - Responsive Padding to ensure it stays at top */}
      <div className="w-full pt-8 pb-4 px-6 lg:px-12 flex justify-start items-center shrink-0">
        <div className="flex gap-3 items-center">
          <Image src={Logo} alt="logo" width={45} height={35} className="xl:w-[55px]" />
          <Image
            src={snapta}
            alt="snapta"
            className="h-auto py-1 xl:w-[120px]"
            width={100}
            height={30}
          />
        </div>
      </div>

      {/* Main Content Area - Center using flex-grow */}
      <div className="flex-grow flex items-center justify-center w-full px-4 pb-12">
        <div className="flex flex-col relative w-full max-w-lg xl:max-w-xl rounded-2xl h-fit z-10 ">
          
          
          {/* Background Decorations */}
          {/* <Image src="/assets/LeftUpperCircle.png" alt="gradient" width={200} height={200} className="absolute left-[-80px] top-10 -z-10 opacity-50 pointer-events-none" />
          <Image src="/assets/TopRight.png" alt="gradient" width={200} height={200} className="absolute right-[-100px] top-[-50px] -z-20 opacity-50 pointer-events-none" /> */}

          <div className="mt-8">
            <h2 className="text-center font-poppins text-base xl:text-lg font-bold text-[var(--text-primary)]">
              <TextTranslate text="Pick your Avatar or select a photo"/>
            </h2>

            {/* Profile Circle */}
            <div className="flex justify-center items-center w-full py-6">
              <div className="shadow-lg p-1 rounded-full bg-[var(--bg-primary)]">
                <div className="relative w-24 h-24 xl:w-28 xl:h-28 flex justify-center items-center">
                  <img src="/assets/Border.png" alt="border" className="absolute inset-0 w-full h-full" />
                  {IsLoading ? (
                    <div className="w-20 h-20 xl:w-24 xl:h-24 rounded-full overflow-hidden">
                      <RoundedShimmer />
                    </div>
                  ) : (
                    <img
                      src={(imagePreview || data.find((a) => a.id === selectedAvatar)?.image || profileImage) as string}
                      alt="User"
                      className="absolute inset-0 rounded-full m-auto h-20 w-20 xl:h-24 xl:w-24 object-cover"
                    />
                  )}
                </div>
              </div>
            </div>
{/* Choose Avatar */}
<div className="border border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] rounded-[10px] px-4 py-4 bg-[var(--bg-primary)] bg-opacity-40">
  <h2 className="text-left font-semibold font-poppins text-sm xl:text-base text-[var(--text-primary)]">
    <TextTranslate text="Choose Avatar"/>
  </h2>

  {/* Main Container */}
  <div className="relative py-4 group px-10"> 
    {/* Left Button */}
    <button
      className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white/20 text-[var(--text-primary)] shadow-md p-2 rounded-full border border-[var(--border-colordark)] hover:scale-110 transition-transform flex items-center justify-center"
      onClick={scrollLeft}
      type="button"
    >
      <img src="/assets/arrow-left.png" className="w-3 h-3 xl:w-4 xl:h-4 img-theme" alt="Left" />
    </button>

    {/* Scrollable Area - Added py-4 for safe zone and overflow control */}
    <div 
      ref={scrollRef} 
      className="flex gap-4 overflow-x-auto no-scrollbar scroll-smooth py-4 px-1"
    >
      {data.map((avatar) => (
        <div
          key={avatar.id}
          onClick={() => handleAvatarClick(avatar.image, avatar.id)}
          // Width set to fit exactly 4 items: (Total Width - Gaps) / 4
          className={`relative cursor-pointer flex-shrink-0 flex justify-center items-center p-1 rounded-full transition-all ${
            selectedAvatar === avatar.id ? "border border-[#6C47B7]" : "border border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]"
          }`}
          style={{ width: 'calc((100% - 48px) / 4)' }} 
        >
          {/* Selected Tick */}
          {selectedAvatar === avatar.id && (
            <img 
              src="/assets/RightClick.png" 
              className="absolute top-1 right-1.5 w-5 h-5 z-20 translate-x-1 -translate-y-1" 
              alt="selected" 
            />
          )}
          <img 
            src={avatar.image} 
            alt="Avatar" 
            className="w-full aspect-square rounded-full object-cover" 
          />
        </div>
      ))}
    </div>

    {/* Right Button */}
    <button
      className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white/20 text-[var(--text-primary)] shadow-md p-2 rounded-full border border-[var(--border-colordark)] hover:scale-110 transition-transform flex items-center justify-center"
      onClick={scrollRight}
      type="button"
    >
      <img src="/assets/arrow-right.png" className="w-3 h-3 xl:w-4 xl:h-4 img-theme" alt="Right" />
    </button>
  </div>
</div>

            {/* Divider */}
            <div className="flex items-center w-full max-w-[300px] mx-auto my-3">
                <div className="flex-1 border-t border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_15%)] "></div>
                <p className="px-2 text-[16px] font-semibold text-[var(--text-secondary)]">OR</p>
                <div className="flex-1 border-t border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_15%)] "></div>
              </div>

            {/* Choose photo */}
            <div className="border border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] rounded-[10px] px-4 py-4 bg-[var(--bg-primary)] bg-opacity-40">
              <h2 className="text-left font-semibold text-sm xl:text-base text-[var(--text-primary)] mb-2">
                <TextTranslate text="Choose From"/>
              </h2>

{imagePreview ? (
  <div className="flex justify-center items-center py-2">
    <div className="relative w-24 h-24 xl:w-28 xl:h-28">
      {/* Profile Border */}
      <img src="/assets/Border.png" alt="Border" className="absolute inset-0 w-full h-full" />
      
      {/* Remove Button using React Icons */}
      <button 
        onClick={handleRemoveImage}
        className="absolute top-[4px] right-[4px] bg-red-500 rounded-full p-0.5 z-30 hover:bg-red-600 transition-colors flex items-center justify-center shadow-sm"
      >
        <IoClose className="text-[var(--text-primary)] mb-0.5 text-[10px] xl:text-[12px]" />
      </button>
      
      {/* Uploaded Image */}
      <img 
        src={imagePreview} 
        alt="Uploaded" 
        className="inset-0 rounded-full m-auto h-20 w-20 xl:h-24 xl:w-24 object-cover" 
      />
    </div>
  </div>
) : (
                <div className="flex flex-col items-center justify-center py-2">
                  <div className="cursor-pointer hover:scale-105 transition-transform" onClick={handleImageClick}>
                    <img src="/assets/photo.png" alt="Upload" className="h-16 xl:h-20 img-theme" />
                  </div>
                  <label className="cursor-pointer text-[var(--text-secondary)] mt-2 text-sm xl:text-base font-medium">
                    <TextTranslate text="Add Image"/>
                    <input type="file" accept="image/*" className="hidden" onChange={handleImageChange} ref={fileInputRef} />
                  </label>
                </div>
              )}
            </div>

            {/* Submit button */}
            <div className="flex justify-center pt-4">
              <button
                className="h-[48px] mt-4 rounded-xl text-white font-bold text-sm xl:text-base hover:opacity-90 w-[60%] xl:w-[50%] transition-all active:scale-95 shadow-lg flex items-center justify-center"
                style={{ background: "linear-gradient(213deg, #6C47B7 -27.59%, #341F60 105.15%)" }}
                onClick={(e: any) => handleSubmit(e)}
                disabled={isLoading}
              >
                {isLoading ? (
                  <ClipLoader color="#FFFFFF" size={18} loading={isLoading} />
                ) : (
                  <TextTranslate text="Submit"/>
                )}
              </button>
            </div>
          </div>

          <Image src="/assets/BottomLeft.png" alt="gradient" width={200} height={200} className="absolute left-[-100px] bottom-[-80px] -z-20 opacity-40 pointer-events-none" />
        </div>
      </div>

      {/* Decorative Bottom Image */}
      {/* <Image
        src="/assets/Group.png"
        alt="decoration"
        width={300}
        height={300}
        className="fixed right-0 bottom-0 w-[120px] xl:w-[180px] hidden md:block opacity-20 pointer-events-none"
      /> */}
    </div>
  );
}

export default Profile;