"use client";
import { useState } from "react";
import { projectsData } from "@/data/projects";
import React from "react";
import Image from "next/image";
import AnimatedText from "@/components/common/AnimatedText";
import Link from "next/link";
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 ProjectsHomePreview() {
  const [activeTab, setActiveTab] = useState("desiccated");
  const [lightboxOpen, setLightboxOpen] = useState(false);
  const [lightboxImages, setLightboxImages] = useState([]);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  // Filter and limit projects based on tab
  const filteredProjects = projectsData
    .filter(
      (project) =>
        project.category &&
        project.category.toLowerCase().includes(activeTab)
    )
    .slice(0, 6); // Limit to 6 per tab

  // Get all image URLs from filtered projects
  const imageList = filteredProjects.map((project) => project.images[0]);

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

  return (
    <section className="project-section section-padding3 fix">
      <div className="container">
        {/* Section Title */}
        <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>

        {/* Project Cards */}
        <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>

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

        {/* View More Button */}
        <div className="text-center mt-5">
          <Link
            href="/projects"
            className="theme-btn theme-color wow fadeInUp"
            data-wow-delay=".6s"
          >
            View More Projects
            <i className="fa-regular fa-arrow-right" />
          </Link>
        </div>
      </div>
    </section>
  );
}