"use client";
import React, { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import Slider from "react-slick";
import { WebServicesData } from "@/utils/constant.utils";
import GsapReveal from "@/components/common/GsapReveal";
import ImageLightbox from "@/components/common/ImageLightbox";

const tabs = [
    { label: "All items", value: "*" },
    { label: "Next.js", value: "web" },
    { label: "Shopify Store", value: "shopify" },
    { label: "WordPress", value: "wordpress" },
];

const CaseStudies = () => {
    const [activeTab, setActiveTab] = useState("*");
    const [selectedImage, setSelectedImage] = useState<string | null>(null);
    const [isLightboxOpen, setIsLightboxOpen] = useState(false);

    const openLightbox = (image: string) => {
        setSelectedImage(image);
        setIsLightboxOpen(true);
    };

    const closeLightbox = () => {
        setIsLightboxOpen(false);
        setSelectedImage(null);
    };

    const filteredItems =
        activeTab === "*"
            ? WebServicesData
            : WebServicesData.filter((item) => item.category === activeTab);

    const settings = {
        dots: false,
        infinite: filteredItems.length > 3,
        speed: 1000,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        arrows: false,
        pauseOnHover: true,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 2,
                    infinite: filteredItems.length > 2,
                }
            },
            {
                breakpoint: 501,
                settings: {
                    slidesToShow: 1,
                    infinite: filteredItems.length > 1,
                }
            }
        ]
    };

    return (
        <section className="case-studies-section sp1 position-relative" id="portfolio" style={{ overflow: 'hidden' }}>

            <img src="/assets/img/home/section6/1.webp" alt="" className="case-floating-element case-el-left-3" />
            <img src="/assets/img/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" />

            {/* Floating Elements - Right (4) */}
            <img src="/assets/img/home/section6/3.webp" alt="" className="case-floating-element case-el-right-1" />
            <img src="/assets/img/home/section6/4.webp" alt="" className="case-floating-element case-el-right-2" />


            <div className="container">

                {/* Title Section */}
                <div className="row">
                    <div className="col-lg-12">
                        <div className="consen-section-title upper text-center pb-80 heading2">
                            <GsapReveal y={20}>
                                <h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}>
                                    <span><img src="/favicon.ico" alt="" /></span>
                                    Case Studies
                                </h5>
                            </GsapReveal>
                            <div className="space24"></div>
                            <GsapReveal y={20} delay={0.2}>
                                <h2 className="text-anime-style-3">
                                    Websites That Deliver<br />
                                    <span> Real Results</span>
                                </h2>
                            </GsapReveal>
                            <div className="space24"></div>
                            <GsapReveal y={20} delay={0.2}>
                                <p className="text-anime-style-3">
                                    Here are some of the websites we've developed across industries including healthcare,<br /> education, real estate, finance, and e-commerce.
                                </p>
                            </GsapReveal>
                        </div>
                    </div>

                    {/* Tabs */}
                    <div className="col-lg-12 mb-80">

                        <div className="portfolio_nav">
                            <div className="portfolio_menu">
                                <ul className="menu-filtering d-flex justify-content-center flex-wrap gap-3 list-unstyled" style={{ margin: 0, padding: 0 }}>
                                    {tabs.map((tab) => (
                                        <li
                                            key={tab.value}
                                            className={`c-pointer ${activeTab === tab.value ? "current_menu_item" : ""}`}
                                            style={{
                                                padding: '8px 25px',
                                                borderRadius: '50px',
                                                border: '1px solid #e3eaf4',
                                                cursor: 'pointer',
                                                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                                                color: activeTab === tab.value ? '#fff' : '#4a5568',
                                                background: activeTab === tab.value ? '#3779b9' : '#fff',
                                                fontWeight: 700,
                                                boxShadow: activeTab === tab.value ? '0 10px 20px rgba(55, 121, 185, 0.2)' : 'none',
                                                fontSize: 'var(--body-size)'
                                            }}
                                            onClick={() => setActiveTab(tab.value)}
                                        >
                                            {tab.label}
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Portfolio Slider */}
                <div className="case-studies-slider-container">
                    <Slider key={activeTab} {...settings}>
                        {filteredItems.map((item) => (
                            <div
                                key={item.id}
                                className="px-3"
                            >
                                <div className="case-study-single-box">
                                    {/* Monitor Frame */}
                                    <div
                                        className="monitor-frame"
                                        style={{ cursor: 'pointer' }}
                                        onClick={() => openLightbox(item.image)}
                                        title="View Full Image"
                                    >
                                        <div className="monitor-screen">
                                            <Image
                                                src={item.image}
                                                alt={item.alt}
                                                width={600}
                                                height={400}
                                                className="loaded"
                                                priority
                                                style={{ width: "100%", height: "100%", objectFit: "cover" }}
                                            />
                                        </div>
                                    </div>
                                    <div className="monitor-stand"></div>
                                    <div className="monitor-base"></div>

                                    {/* Content */}
                                    <div className="case-study-content text-center mt-4">
                                        <div className="case-study-title">
                                            <h6 style={{ color: '#3779b9', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 600, marginBottom: '5px' }}>{item.title}</h6>
                                            <h3 style={{ margin: 0 }}>
                                                <Link
                                                    href={item.link || "#"}
                                                    target={item.link && item.link !== "#" ? "_blank" : "_self"}
                                                    style={{ color: '#1a1f2b', textDecoration: 'none', transition: 'color 0.3s', fontWeight: 700 }}
                                                    onMouseEnter={(e) => (e.currentTarget.style.color = '#3779b9')}
                                                    onMouseLeave={(e) => (e.currentTarget.style.color = '#1a1f2b')}
                                                >
                                                    {item.name}
                                                </Link>
                                            </h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </Slider>
                </div>
            </div>

            {/* Lightbox Component */}
            <ImageLightbox
                isOpen={isLightboxOpen}
                onClose={closeLightbox}
                imageUrl={selectedImage || ""}
            />
        </section>
    );
};

export default CaseStudies;