import React, { useEffect } from "react";
import RenderOverlay from "./Overlay";
import { LogoIconLarge } from "../icons/Logo";
import { useParams } from "react-router-dom";
import { useProjectName } from "../../store/builder/store";
import { getAllProjects } from "../../services/dashboard/getAllProjects";
import { useComparisonProduct } from "../../store/simulation/useSimulationStore";
import { getUserData } from "../../functions/getUserData";
import { sharedWithMeProjects } from "../../services/dashboard/sharedWithMeProject";

interface LoadingPageProps {
  progress: number; // Expect progress as a percentage (0-100)
}

const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {
  const { projectName, setProjectName } = useProjectName();
  const { projectId } = useParams();
  const { comparisonProduct } = useComparisonProduct();
  const { userId, organization } = getUserData();

  const validatedProgress = Math.min(100, Math.max(0, progress));
  useEffect(() => {
    if (!userId) {
      console.error("User data not found in localStorage");
      return;
    }

    const fetchProjects = async () => {
      try {
        const projects = await getAllProjects(userId, organization);
        const shared = await sharedWithMeProjects();

        const allProjects = [...(projects?.Projects || []), ...(shared || [])];

        const matchedProject = allProjects.find(
          (val: any) => val.projectUuid === projectId || val._id === projectId
        );

        if (matchedProject) {
          setProjectName(matchedProject.projectName);

        } else {
          console.warn("Project not found with given ID:", projectId);
        }
      } catch (error) {
        console.error("Error fetching projects:", error);
      }
    };

    fetchProjects();
  }, []);

  return (
    <RenderOverlay>
      <div
        className={`loading-wrapper ${comparisonProduct != null ? "comparisionLoading" : ""
          }`}
      >
        <div className="loading-container">
          <div className="project-name">{projectName}</div>
          <div className="loading-hero-container">
            <div className="logo">
              <LogoIconLarge />
            </div>
            <div className="content">Entering A New World with your Aalai</div>
          </div>
          <div className="progress-container">
            <div className="progress-value">{validatedProgress}%</div>
            <div className="progress-indicator-container">
              <div
                className="progress-bar"
                style={{ width: `${validatedProgress}%` }} // Dynamic width
              ></div>
            </div>
          </div>
        </div>
      </div>
    </RenderOverlay>
  );
};

export default LoadingPage;
