import "./styles/Work.css";
import WorkImage from "./WorkImage";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useEffect } from "react";

gsap.registerPlugin(ScrollTrigger);

const Work = () => {
  useEffect(() => {
  let translateX: number = 0;

  function setTranslateX() {
    const box = document.getElementsByClassName("work-box");
    const rectLeft = document
      .querySelector(".work-container")!
      .getBoundingClientRect().left;
    const rect = box[0].getBoundingClientRect();
    const parentWidth = box[0].parentElement!.getBoundingClientRect().width;
    let padding: number =
      parseInt(window.getComputedStyle(box[0]).padding) / 2;
    translateX = rect.width * box.length - (rectLeft + parentWidth) + padding;
  }

  setTranslateX();

  let timeline = gsap.timeline({
    scrollTrigger: {
      trigger: ".work-section",
      start: "top top",
      end: `+=${translateX}`, // Use actual scroll width
      scrub: true,
      pin: true,
      id: "work",
    },
  });

  timeline.to(".work-flex", {
    x: -translateX,
    ease: "none",
  });

  // Clean up (optional, good practice)
  return () => {
    timeline.kill();
    ScrollTrigger.getById("work")?.kill();
  };
}, []);
  const projects = [
    {
      title: "UVita - UV Application",
      category: "QA & Development",
      description: "Led QC activities and data integrity testing for real-time UV-index app. Managed bug life cycle within 48-hour hackathon deadline.",
      tools: "Postman, TestRail, Git, Agile Workflow",
      image: "/project_img/UVIita.png",
      link: "https://github.com/Phong12HexDockwork/UVita"
    },
    {
      title: "LACA City Platform",
      category: "Software Testing",
      description: "API and database testing for parking management platform serving 5,000+ users. Improved release stability by 20%.",
      tools: "Jira, Postman, Chrome DevTools, SQL",
      image: "/project_img/Laca City.png",
      link: "https://new.laca.city"
    },
    {
      title: "NASA Space Apps Challenge",
      category: "Quality Control & Operations",
      description: "Designed QC processes for event with 500+ participants. Increased participation by 126% compared to previous year.",
      tools: "n8n, TestRail, Meta Console, API Testing",
      image: "/project_img/NASA Space app.jpg",
      link: "https://www.facebook.com/spaceappshochiminh"
    },
    {
      title: "VSIG Platform",
      category: "Testing & Automation",
      description: "Executed 150+ test cases achieving >98% release stability. Reduced issue resolution time by 25%.",
      tools: "TestRail, Postman, Swagger, Jira, n8n",
      image: "/project_img/VSIG .png",
      link: ""
    },
    {
      title: "CSED Conference 2024",
      category: "Development & Automation",
      description: "Developed automated submission system reducing processing time by 40%. Supported 200+ submissions with workflow automation.",
      tools: "Google App Scripts, n8n, JavaScript",
      image: "/project_img/CSED.jpg",
      link: ""
    }
  ];

  return (
    <div className="work-section" id="work">
      <div className="work-container section-container">
        <h2>
          My <span>Work</span>
        </h2>
        <div className="work-flex">
          {projects.map((project, index) => (
            <div className="work-box" key={index}>
              <div className="work-info">
                <div className="work-title">
                  <h3>0{index + 1}</h3>

                  <div>
                    <h4>{project.title}</h4>
                    <p>{project.category}</p>
                  </div>
                </div>
                <h4>{project.description}</h4>
                <p>{project.tools}</p>
              </div>
              {project.link ? (
                <a href={project.link} target="_blank" rel="noopener noreferrer">
                  <WorkImage image={project.image} alt={project.title} />
                </a>
              ) : (
                <WorkImage image={project.image} alt={project.title} />
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Work;
