"use client";
import { useState } from "react";
import { projectsData } from "@/data/projects";
import React from "react";
import Image from "next/image";
import AnimatedText from "../common/AnimatedText";
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";

const tabOptions = [
  { key: "desiccated", label: "Coconut Milk Extraction" },
  { key: "virgin", label: "Coconut Dryer Projects" },
  { key: "pare", label: "Coconut Pulverizing & Grinding" },
];

export default function ProjectsData() {
  const [activeTab, setActiveTab] = useState("desiccated");
  const [lightboxOpen, setLightboxOpen] = useState(false);
  const [lightboxImages, setLightboxImages] = useState([]);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  // Filtered projects based on active tab
  const filteredProjects = projectsData.filter(
    (project) =>
      project.category &&
      project.category.toLowerCase().includes(activeTab)
  );

  // Collect unique images from filtered projects
  const displayedImages = Array.from(
    new Set(
      filteredProjects.map((project) => project.images[0]) // Only first image
    )
  );

  // Open lightbox
  const handleImageClick = (imageSrc) => {
    const index = displayedImages.findIndex((img) => img === imageSrc);
    const slides = displayedImages.map((img) => ({ src: img }));
    setLightboxImages(slides);
    setCurrentImageIndex(index >= 0 ? index : 0);
    setLightboxOpen(true);
  };

  return (
    <section className="project-section section-padding fix">
      <div className="container">
        <div className="section-title text-center">
          <h6>
            <i className="fa-regular fa-arrow-left-long" />
            Our Global Footprint
            <i className="fa-regular fa-arrow-right-long" />
          </h6>
          <h2 className="splt-txt">
            <AnimatedText text=" Featured Turnkey Coconut" />
            <br />
            <AnimatedText text=" Processing Projects" />
          </h2>

          {/* Tabs */}
          <div className="project-tabs mt-4 d-flex justify-content-center gap-4">
            {tabOptions.map((tab) => (
              <button
                key={tab.key}
                onClick={() => setActiveTab(tab.key)}
                className={`nav-link ${activeTab === tab.key ? "active fw-bold text-dark" : ""}`}
                style={{
                  border: "none",
                  background: "transparent",
                  fontSize: "1rem",
                  position: "relative",
                }}
              >
                {tab.label}
                {activeTab === tab.key && (
                  <div
                    style={{
                      height: "3px",
                      backgroundColor: "#ff5502",
                      width: "100%",
                      position: "absolute",
                      bottom: "-4px",
                      left: 0,
                      borderRadius: "2px",
                    }}
                  />
                )}
              </button>
            ))}
          </div>
        </div>

        <div className="row g-4 mt-5">
          {filteredProjects.map((project) => (
            <div key={project.id} className="col-xl-4 col-lg-6 col-md-6">
              <div className="project-card-items">
                <div
                  className="project-image"
                  style={{ cursor: "pointer" }}
                  onClick={() => handleImageClick(project.images[0])}
                >
                  <Image
                    width={370}
                    height={331}
                    src={project.images[0]}
                    alt={project.title}
                    style={{
                      width: "100%",
                      height: "auto",
                      display: "block",
                      background: "transparent",
                      transition: "none",
                    }}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Lightbox */}
      {lightboxOpen && (
        <Lightbox
          open={lightboxOpen}
          close={() => setLightboxOpen(false)}
          slides={lightboxImages}
          index={currentImageIndex}
        />
      )}
    </section>
  );
}