import React, { useState, useEffect } from 'react';
import $ from 'jquery';
import FsLightbox from 'fslightbox-react';

const GallerySection = () => {
  // Lightbox State
  const [toggler, setToggler] = useState(false);
  const [productIndex, setProductIndex] = useState(0);

  useEffect(() => {
    // jQuery Tab Logic
    $('.gallery-tab-btn').on('click', function() {
      const target = $(this).data('target');
      $('.gallery-tab-btn').removeClass('btn-success text-white').addClass('btn-outline-success');
      $(this).addClass('btn-success text-white').removeClass('btn-outline-success');

      if (target === 'all') {
        $('.gallery-item').fadeIn(400);
      } else {
        $('.gallery-item').hide();
        $(`.gallery-item[data-type="${target}"]`).fadeIn(400);
      }
    });
  }, []);

  // Gallery Data
  const galleryData = [
    { id: 1, type: 'image', src: '/images/bannar/programs/floods.png', link: '/public/images/bannar/programs/floods.png' },
    { id: 2, type: 'image', src: '/images/bannar/programs/floods.png', link: '/images/gallery/img2.jpg' },
    { id: 3, type: 'video', src: '/images/bannar/programs/iftar.png', link: 'https://www.youtube.com/watch?v=your-video-id' },
    { id: 4, type: 'image', src: '/images/bannar/programs/floods.png', link: '/images/gallery/img3.jpg' },
    { id: 5, type: 'video', src: '/images/bannar/programs/iftar.png', link: 'https://www.youtube.com/watch?v=another-id' },
    { id: 6, type: 'image', src: '/images/bannar/programs/floods.png', link: '/images/gallery/img4.jpg' },
  ];

  // Helper to open lightbox at specific index
  const openLightbox = (index) => {
    setProductIndex(index);
    setToggler(!toggler);
  };

  return (
    <section className="gallery-section py-5" style={{ backgroundColor: '#f4fbf7' }}>
      <div className="container py-4">
        <div className="text-center mb-4">
          <h2 className="fw-bold mb-3" style={{ color: '#006430' }}>আমাদের কার্যক্রম সম্পর্কে ছবি এবং ভিডিও সমূহ</h2>
          <p className="text-muted mx-auto mb-4" style={{ maxWidth: '600px' }}>সাম্প্রতিক আমাদের কার্যক্রমের কিছু ফটো এন্ড ভিডিও</p>

          <div className="d-flex justify-content-center gap-2 mb-5">
            <button className="btn btn-success text-white px-4 py-2 rounded-pill gallery-tab-btn shadow-sm" data-target="all">সবগুলো</button>
            <button className="btn btn-outline-success px-4 py-2 rounded-pill gallery-tab-btn shadow-sm" data-target="image">ছবি</button>
            <button className="btn btn-outline-success px-4 py-2 rounded-pill gallery-tab-btn shadow-sm" data-target="video">ভিডিও</button>
          </div>
        </div>

        <div className="row g-4">
          {galleryData.map((item, index) => (
            <div className="col-lg-4 col-md-6 gallery-item" key={item.id} data-type={item.type}>
              <div
                className="position-relative overflow-hidden shadow-sm shadow-hover"
                style={{ borderRadius: '15px', height: '240px', cursor: 'pointer' }}
                onClick={() => openLightbox(index)}
              >
                <img src={item.src} alt="Gallery" className="w-100 h-100 object-fit-cover transition-transform" />

                {item.type === 'video' && (
                  <div className="position-absolute top-50 start-50 translate-middle">
                    <div className="bg-danger rounded-circle d-flex align-items-center justify-content-center shadow" style={{ width: '50px', height: '50px' }}>
                      <i className="fas fa-play text-white ms-1"></i>
                    </div>
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>

        {/* See More Button */}
        <div className="text-center mt-5">
          <a
            href="#"
            className="btn btn-success px-5 py-2 fw-semibold rounded-3 shadow-sm"
            style={{ backgroundColor: '#008542', border: 'none' }}
          >
            আরও দেখুন
          </a>
        </div>
        {/* Lightbox Component */}
        <FsLightbox
          toggler={toggler}
          sources={galleryData.map(item => item.link)}
          sourceIndex={productIndex}
          type="image" // fslightbox auto-detects youtube/video links
        />
      </div>

      <style>{`
        .object-fit-cover { object-fit: cover; }
        .transition-transform { transition: transform 0.5s ease; }
        .gallery-item:hover img { transform: scale(1.08); }
        .shadow-hover { transition: box-shadow 0.3s ease; }
        .shadow-hover:hover { box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; }
      `}</style>
    </section>
  );
};

export default GallerySection;
