"use client";
import React, { useEffect, useState } from "react";
import { RxCross2 } from "react-icons/rx";
import { useAppDispatch } from "../hooks/hooks";
import Cookies from "js-cookie";
import { useGetAllLanguageQuery } from "../store/api/useFetchLanguageList";
import { FaRegCircle, FaRegCircleDot } from "react-icons/fa6";
import { hideModal } from "../store/Slice/modalSlice";
import { ClipLoader } from "react-spinners";
import { useFetchDefaultLanguageMutation } from "../store/api/useFetchDefaultLanguageTextList";
import { updateLanguageTextList } from "../store/Slice/LanguageTextListSlice";
import TextTranslate from "../utils/TextTranslate";
import { X } from "lucide-react";

const SelectLanguageModal: React.FC = () => {
  const dispatch = useAppDispatch();
  const [IsLoading, setIsLoading] = useState(false);
  const token = Cookies.get("Snapta_auth_token");
  
  let { data: languageListRes, isLoading } = useGetAllLanguageQuery({
    token: token || "",
  });
  
  const [status_id, setStatus_id] = useState(1);

  const handleCloseModal = () => {
    dispatch(hideModal("Language"));
  };

  useEffect(() => {
    let tempStatus_id = Cookies.get("status_id");
    if (tempStatus_id) {
      setStatus_id(Number(tempStatus_id));
    } else {
      setStatus_id(1);
    }
  }, []);

  const [fetchLanguageText] = useFetchDefaultLanguageMutation();

  const handleSave = async () => {
    setIsLoading(true);
   try {
  Cookies.set("status_id", status_id.toString());
  const res = await fetchLanguageText({ status_id: status_id.toString() });
  
  // Check if "data" exists in res AND that res.data itself is not undefined
  if ("data" in res && res.data) {
    dispatch(updateLanguageTextList(res.data));
  } else {
    // Optional: Handle the case where data is missing
    console.error("Language data was undefined");
  }

  dispatch(hideModal("Language"));
}catch (err) {
      console.error("Error fetching language text:", err);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm z-[160] p-4">
      {/* Container: Updated width/max-width and rounded-3xl to match ReportSuccessModal ref */}
      <div className="relative bg-[var(--modal-color)] rounded-3xl shadow-2xl w-full max-w-[420px] md:max-w-[550px] overflow-hidden pt-0 pb-5 transition-all duration-300 ease-out animate-in fade-in zoom-in duration-200">
        
       
        {/* Header */}
        <div className="relative flex items-center justify-center px-4 py-4 border-b border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]">
          <button onClick={handleCloseModal} className="absolute left-5 text-[var(--text-primary)] 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="Language" />
          </h2>
        </div>

        <div className="relative pb-0 h-fit">
          {/* Language List Box: Styled like the action list in ReportSuccessModal */}
          <div className="my-2 overflow-auto  rounded-[10px] max-h-96 divide-y divide-[var(--border-color)] dark:divide-[color-mix(in_srgb,var(--border-color),black_10%)]">
            {isLoading ? (
              <div className="flex justify-center items-center py-12">
                <ClipLoader color="var(--text-primary)" size={20} />
              </div>
            ) : (
              <>
                {languageListRes?.languages.map((e) => (
                  <div
                    key={e.status_id}
                    onClick={() => setStatus_id(e.status_id)}
                    className="flex items-center px-4 sm:px-6 py-4 cursor-pointer hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)] "
                  >
                    <div className="w-8 flex justify-start">
                      {e.status_id === status_id ? (
                        <FaRegCircleDot className="text-xl text-[#341F60] dark:text-[var(--text-primary)]" />
                      ) : (
                        <FaRegCircle className="text-xl text-[#341F60] dark:text-[var(--text-secondary)]" />
                      )}
                    </div>
                    <div className="px-1 text-[var(--text-primary)] font-gilroy_semibold font-medium text-[15px]">
                      {e.language}
                    </div>
                  </div>
                ))}
              </>
            )}
          </div>

          {/* Action Button Section matching ReportSuccessModal close button style */}
          <div className="px-4 sm:px-6 mt-2 -mb-2">
            <button
              onClick={handleSave}
              disabled={IsLoading}
              className="w-full  py-2.5 bg-[#341F60] hover:bg-[#6C47B7] text-white font-gilroy_semibold font-medium rounded-xl text-[15px] transition-all active:scale-[0.98] flex justify-center items-center gap-2"
            >
              {IsLoading ? (
                <ClipLoader color="#FFFFFF" size={18}/>
              ) : (
                <TextTranslate text="Save"/>
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SelectLanguageModal;