import React, { useMemo, useRef } from "react";
import { ChevronLeft, ChevronRight, Heart } from "lucide-react";

export default function SlotsGame() {
  const sliderRef = useRef(null);

   const games = useMemo(
     () => [
       {
         title: "Super Ace",
         image: "/assets/cat/1.png",
         provider: "JILI",
         favorite: false,
       },
       {
         title: "Wild Bounty Showdown",
         image: "/assets/cat/2.png",
         provider: "PG",
         favorite: true,
       },
       {
         title: "Poker Kingdom",
         image: "/assets/cat/3.png",
         provider: "JILI",
         favorite: true,
       },
       {
         title: "Aviator",
         image: "/assets/cat/4.png",
         provider: "",
         favorite: true,
         featured: true,
       },
       {
         title: "FlyX",
         image: "/assets/cat/5.png",
         provider: "",
         favorite: false,
       },
       {
         title: "Fortune Gems",
         image: "/assets/cat/6.png",
         provider: "JILI",
         favorite: false,
       },
       {
         title: "Royal Ace",
         image: "/assets/cat/7.png",
         provider: "YB",
         favorite: false,
       },
       {
         title: "Chicky Run",
         image: "/assets/cat/8.png",
         provider: "PG",
         favorite: false,
       },
       {
         title: "Boxing King",
         image: "/assets/cat/9.png",
         provider: "JILI",
         favorite: false,
       },
       {
         title: "Pinata Wins",
         image: "/assets/cat/10.png",
         provider: "PG",
         favorite: true,
       },
       {
         title: "Super Elements",
         image: "/assets/cat/11.png",
         provider: "FC",
         favorite: true,
       },
       {
         title: "Magic Ace",
         image: "/assets/cat/11.png",
         provider: "JDB",
         favorite: true,
       },
     ],
     []
   );
  const scrollCards = (dir) => {
    if (!sliderRef.current) return;
    sliderRef.current.scrollBy({
      left: dir === "next" ? 330 : -330,
      behavior: "smooth",
    });
  };

  const columns = Math.ceil(games.length / 2);

  return (
    <>
      <section className="slots-section">
        <div className="section-head">
          <h2>SLOTS</h2>

          <div className="head-actions">
            <button className="see-all-btn">See All</button>

            <button
              className="nav-btn"
              onClick={() => scrollCards("prev")}
              aria-label="Previous slots"
            >
              <ChevronLeft size={20} />
            </button>

            <button
              className="nav-btn"
              onClick={() => scrollCards("next")}
              aria-label="Next slots"
            >
              <ChevronRight size={20} />
            </button>
          </div>
        </div>

        <div className="slider" ref={sliderRef}>
          <div className="games-track">
            {games.map((game, index) => {
              const rowClass = index >= columns ? "row-second" : "row-first";

              return (
                <article
                  key={index}
                  className={`game-card ${rowClass} ${
                    game.featured ? "featured" : ""
                  }`}
                >
                  <img src={game.image} alt={game.title} className="game-image" />

                  <div className="card-overlay" />
                  <div className="bottom-fade" />
                  <span className="card-sweep" />

                  {game.favorite && (
                    <button
                      className="fav-btn"
                      aria-label={`Favorite ${game.title}`}
                    >
                      <Heart size={15} fill="currentColor" />
                    </button>
                  )}

                  {game.badge && <div className="provider-badge">{game.badge}</div>}

                  {game.topBadge && (
                    <div className="top-badge">{game.topBadge}</div>
                  )}

                  {game.provider && (
                    <div className="provider-name">{game.provider}</div>
                  )}
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <style jsx>{`
        .slots-section {
          width: 100%;
          padding: 14px 14px 12px;
          border-radius: 18px;
          
          overflow: hidden;
          position: relative;
        }

        .slots-section::before {
          content: "";
          position: absolute;
          inset: 0;
         
          pointer-events: none;
        }

        .section-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          margin-bottom: 14px;
          position: relative;
          z-index: 2;
        }

        .section-head h2 {
          margin: 0;
          font-size: 18px;
          line-height: 1;
          font-weight: 900;
          letter-spacing: 0.8px;
          color: #20ffd2;
          text-transform: uppercase;
        }

        .head-actions {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-shrink: 0;
        }

        .see-all-btn {
          height: 40px;
          padding: 0 14px;
          border: 1px solid rgba(7, 40, 47, 0.9);
          border-radius: 12px;
          background: linear-gradient(180deg, #0f7077 0%, #0a5b61 100%);
          color: #ffcb2f;
          font-size: 14px;
          font-weight: 800;
          box-shadow:
            inset 0 1px 0 rgba(100, 255, 241, 0.08),
            0 3px 0 rgba(0, 0, 0, 0.2);
          cursor: pointer;
        }

        .nav-btn {
          width: 40px;
          height: 40px;
          border: 1px solid rgba(7, 40, 47, 0.9);
          border-radius: 12px;
          background: linear-gradient(180deg, #0d6d74 0%, #0a5860 100%);
          color: #dffffc;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          box-shadow:
            inset 0 1px 0 rgba(100, 255, 241, 0.08),
            0 3px 0 rgba(0, 0, 0, 0.2);
        }

        .slider {
          overflow-x: auto;
          overflow-y: hidden;
          scrollbar-width: none;
          -ms-overflow-style: none;
          scroll-behavior: smooth;
          position: relative;
          z-index: 2;
        }

        .slider::-webkit-scrollbar {
          display: none;
        }

        .games-track {
          display: grid;
          grid-auto-flow: column;
          grid-template-rows: repeat(2, 1fr);
          grid-auto-columns: 145px;
          gap: 4px;
          min-width: max-content;
          padding-right: 8px;
        }

        .game-card {
          position: relative;
          width: 145px;
          height: 200px;
          border-radius: 16px;
          overflow: hidden;
          background: linear-gradient(180deg, #0d6a6d 0%, #0a4d52 100%);
          border: 1px solid rgba(30, 145, 144, 0.58);
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 8px 18px rgba(0, 0, 0, 0.22);
          flex-shrink: 0;
        }

        .game-card.featured {
          border-color: #ff315c;
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 0 0 2px rgba(255, 49, 92, 0.2),
            0 8px 18px rgba(0, 0, 0, 0.24);
        }

        .game-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          transform: scale(1.01);
        }

        .game-card.row-second .game-image {
          opacity: 0.84;
        }

        .card-overlay {
          position: absolute;
          inset: 0;
          background:
            linear-gradient(
              180deg,
              rgba(255, 255, 255, 0.02) 0%,
              rgba(255, 255, 255, 0) 24%,
              rgba(0, 0, 0, 0.05) 52%,
              rgba(0, 0, 0, 0.18) 100%
            );
          pointer-events: none;
          z-index: 1;
        }

        .bottom-fade {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 46%;
          background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 33, 39, 0.16) 28%,
            rgba(0, 28, 34, 0.52) 64%,
            rgba(0, 24, 30, 0.88) 100%
          );
          pointer-events: none;
          z-index: 2;
        }

        .game-card.row-second .bottom-fade {
          background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.04) 0%,
            rgba(0, 24, 30, 0.26) 30%,
            rgba(0, 20, 25, 0.64) 65%,
            rgba(0, 16, 22, 0.96) 100%
          );
        }

        .card-sweep {
          position: absolute;
          inset: -70%;
          pointer-events: none;
          z-index: 3;
          background: linear-gradient(
            110deg,
            rgba(255, 255, 255, 0) 22%,
            rgba(255, 255, 255, 0.05) 38%,
            rgba(255, 255, 255, 0.12) 45%,
            rgba(255, 255, 255, 0.24) 50%,
            rgba(255, 255, 255, 0.12) 55%,
            rgba(255, 255, 255, 0.05) 62%,
            rgba(255, 255, 255, 0) 76%
          );
          mix-blend-mode: screen;
          opacity: 1;
          transform: translateX(-95%) rotate(12deg);
          animation: cardSweepMove 3.2s linear infinite;
          will-change: transform;
        }

        .game-card.row-second .card-sweep {
          opacity: 0.68;
        }

        .fav-btn {
          position: absolute;
          top: 8px;
          right: 8px;
          width: 28px;
          height: 28px;
          border: none;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.96);
          color: #8b8b8b;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
          z-index: 5;
          cursor: pointer;
        }

        .provider-badge {
          position: absolute;
          top: 0;
          right: 0;
          min-width: 42px;
          height: 36px;
          padding: 0 8px;
          border-bottom-left-radius: 12px;
          background: linear-gradient(180deg, #f9d96b 0%, #b87b10 100%);
          color: #fff2c4;
          font-size: 12px;
          font-weight: 900;
          display: flex;
          align-items: center;
          justify-content: center;
          text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
          z-index: 5;
        }

        .top-badge {
          position: absolute;
          top: 8px;
          right: 36px;
          color: #ffd94b;
          font-size: 13px;
          line-height: 1;
          font-weight: 900;
          letter-spacing: 0.4px;
          text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
          z-index: 5;
        }

        .provider-name {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 10px;
          text-align: center;
          color: #ffffff;
          font-size: 11px;
          font-weight: 900;
          letter-spacing: 0.8px;
          text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
          z-index: 4;
        }

        @keyframes cardSweepMove {
          0% {
            transform: translateX(-95%) rotate(12deg);
          }
          100% {
            transform: translateX(95%) rotate(12deg);
          }
        }

        @media (max-width: 768px) {
          .slots-section {
            padding: 12px 12px 10px;
            border-radius: 16px;
          }

          .section-head {
            margin-bottom: 12px;
          }

          .section-head h2 {
            font-size: 17px;
          }

          .head-actions {
            gap: 8px;
          }

          .see-all-btn {
            height: 38px;
            padding: 0 13px;
            border-radius: 11px;
            font-size: 13px;
          }

          .nav-btn {
            width: 38px;
            height: 38px;
            border-radius: 11px;
          }

          .games-track {
            grid-auto-columns: 145px;
            gap: 4px;
          }

          .game-card {
            width: 145px;
            height: 198px;
            border-radius: 15px;
          }

          .bottom-fade {
            height: 48%;
          }
        }
      `}</style>
    </>
  );
}