import React, { useState } from 'react';

const GallerySection = () => {
  const [mediaType, setMediaType] = useState('photo'); // 'photo' or 'video'
  const [activeProject, setActiveProject] = useState('winter-relief');

  const projects = [
    { id: 'winter-relief', label: 'শীতবস্ত্র বিতরণ প্রকল্প' },
    { id: 'medical-help', label: 'অসহায়দের চিকিৎসা সহায়তা প্রকল্প' },
    { id: 'wudu-project', label: 'অজুখানার ব্যবস্থা দান প্রকল্প' },
    { id: 'rehab-project', label: 'পুনর্বাসন প্রকল্প' },
    { id: 'duostho-medical', label: 'দুস্থদের চিকিৎসা সহায়তা প্রকল্প' },
    { id: 'orphan-rehab', label: 'এতিমদের পুনর্বাসন প্রকল্প' },
    { id: 'van-donation', label: 'ভ্যান/রিকশা দান প্রকল্প' }
  ];

  const categories = [
    { id: 'all', label: 'সবগুলো' },
    { id: 'distributed', label: 'বিতরণ কার্যক্রম' },
    { id: '2023', label: '২০২৩' },
    { id: '2024', label: '২০২৪' }
  ];

  return (
    <section className="gallery-section py-5 bg-white">
      <div className="container">
        <div className="row g-4">

          {/* Sidebar: Project Navigation */}
          <div className="col-lg-3">
            <div className="card border-0 shadow-sm rounded-4 overflow-hidden">
              <div className="d-flex border-bottom">
                <button
                  className={`flex-fill py-3 border-0 fw-bold ${mediaType === 'photo' ? 'bg-success text-white' : 'bg-light text-dark'}`}
                  onClick={() => setMediaType('photo')}
                >
                  ফটো
                </button>
                <button
                  className={`flex-fill py-3 border-0 fw-bold ${mediaType === 'video' ? 'bg-success text-white' : 'bg-light text-dark'}`}
                  onClick={() => setMediaType('video')}
                >
                  ভিডিও
                </button>
              </div>
              <ul className="list-group list-group-flush">
                {projects.map((project) => (
                  <button
                    key={project.id}
                    onClick={() => setActiveProject(project.id)}
                    className={`list-group-item list-group-item-action border-0 py-3 small d-flex align-items-center ${activeProject === project.id ? 'text-success fw-bold border-start border-success border-4' : 'text-muted'}`}
                  >
                    {project.label}
                  </button>
                ))}
              </ul>
            </div>
          </div>

          {/* Main Content: Gallery Grid */}
          <div className="col-lg-9">
            {/* Filter Tabs */}
            <div className="d-flex flex-wrap gap-2 mb-4">
              {categories.map((cat) => (
                <button
                  key={cat.id}
                  className="btn btn-outline-secondary rounded-pill px-4 btn-sm fw-bold border-light-subtle text-dark hover-success"
                >
                  {cat.label}
                </button>
              ))}
            </div>

            {/* Image/Video Grid */}
            <div className="row g-3">
              {[1, 2, 3, 4, 5, 6].map((item) => (
                <div className="col-md-6 col-12" key={item}>
                  <div className="position-relative overflow-hidden rounded-4 shadow-sm group" style={{ height: '260px' }}>
                    <img
                      src={`/images/gallery/project-media-${item}.jpg`}
                      alt="Project Activity"
                      className="w-100 h-100 object-fit-cover transition-transform"
                    />

                    {/* Video Overlay (Conditional) */}
                    {item === 4 && (
                      <div className="position-absolute top-50 start-50 translate-middle">
                        <div className="d-flex align-items-center justify-content-center rounded-circle bg-danger text-white shadow-lg" style={{ width: '55px', height: '55px' }}>
                          <i className="fas fa-play"></i>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>

        </div>
      </div>

      <style jsx>{`
        .hover-success:hover {
          background-color: #198754 !important;
          color: white !important;
          border-color: #198754 !important;
        }
        .transition-transform {
          transition: transform 0.4s ease;
        }
        .group:hover .transition-transform {
          transform: scale(1.05);
        }
        .border-start {
            border-left: 4px solid #198754 !important;
        }
      `}</style>
    </section>
  );
};

export default GallerySection;
