/* global React */
const { useState: useStateVT, useRef: useRefVT, useEffect: useEffectVT, useCallback: useCallbackVT } = React;

const VIDEOS_TEST = [
  R('assets/video-testimonio-01.mp4'),
  R('assets/video-testimonio-04.mp4'),
  R('assets/video-testimonio-06.mp4'),
  R('assets/video-testimonio-03.mp4'),
  R('assets/video-testimonio-05.mp4'),
  R('assets/video-testimonio-02.mp4'),
];

function VideoCard({ src, isActive, onClick }) {
  const ref = useRefVT(null);
  const [playing, setPlaying] = useStateVT(false);

  useEffectVT(() => {
    if (!ref.current) return;
    if (!isActive) {
      ref.current.pause();
      ref.current.currentTime = 0;
      setPlaying(false);
    }
  }, [isActive]);

  const toggle = useCallbackVT((e) => {
    e.stopPropagation();
    if (!isActive) { onClick(); return; }
    if (!ref.current) return;
    if (ref.current.paused) {
      ref.current.play();
      setPlaying(true);
    } else {
      ref.current.pause();
      setPlaying(false);
    }
  }, [isActive, onClick]);

  const handleEnded = () => setPlaying(false);

  return (
    <div
      className={'acmp-vtest-card' + (isActive ? ' is-active' : '')}
      onClick={!isActive ? onClick : undefined}
      role={!isActive ? 'button' : undefined}
      tabIndex={!isActive ? 0 : undefined}
      aria-label={!isActive ? 'Ver este testimonio' : undefined}
    >
      <video
        ref={ref}
        src={src}
        className="acmp-vtest-video"
        playsInline
        preload="metadata"
        onEnded={handleEnded}
      />
      <button
        className={'acmp-vtest-btn' + (playing ? ' is-playing' : '')}
        onClick={toggle}
        aria-label={playing ? 'Pausar' : 'Reproducir'}
        type="button"
      >
        {playing
          ? (
            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <rect x="5" y="4" width="4" height="16" rx="1" />
              <rect x="15" y="4" width="4" height="16" rx="1" />
            </svg>
          )
          : (
            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <polygon points="5,3 19,12 5,21" />
            </svg>
          )
        }
      </button>
    </div>
  );
}

function TestimonioVideos() {
  const [active, setActive] = useStateVT(0);
  const n = VIDEOS_TEST.length;

  const prev = () => setActive(a => (a - 1 + n) % n);
  const next = () => setActive(a => (a + 1) % n);

  return (
    <section className="acmp-vtest-wrap">
      <style>{`
        .acmp-vtest-wrap {
          background: transparent;
          padding: clamp(8px, 2vw, 16px) 0 clamp(32px, 5vw, 56px);
          overflow: hidden;
          width: 100%;
        }
        .acmp-vtest-head {
          text-align: center;
          padding: 0 24px;
          margin-bottom: 48px;
        }
        .acmp-vtest-head .eyebrow {
          font-family: var(--font-section, sans-serif);
          font-weight: 700;
          font-size: 12px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--acmp-orange);
          margin-bottom: 12px;
        }
        .acmp-vtest-head h2 {
          font-family: var(--font-display, 'Poppins', sans-serif);
          font-weight: 700;
          font-size: clamp(1.5rem, 2.8vw, 2.2rem);
          line-height: 1.1;
          letter-spacing: -0.03em;
          color: #fff;
          margin: 0;
        }
        .acmp-vtest-head h2 .kw { color: var(--acmp-orange); }

        .acmp-vtest-stage {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 20px;
          position: relative;
          padding: 0 clamp(24px, 5vw, 80px);
          width: 100%;
          box-sizing: border-box;
        }
        .acmp-vtest-cards {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 16px;
          flex: 1;
          overflow: hidden;
        }
        .acmp-vtest-card {
          position: relative;
          width: clamp(207px, 23vw, 322px);
          aspect-ratio: 9/16;
          border-radius: 20px;
          overflow: hidden;
          background: #111;
          flex-shrink: 0;
          opacity: 0.45;
          transform: scale(0.88);
          transition: opacity 0.3s ease, transform 0.3s ease;
          cursor: pointer;
        }
        .acmp-vtest-card.is-active {
          opacity: 1;
          transform: scale(1);
          cursor: default;
          box-shadow: 0 24px 60px rgba(0,0,0,0.22);
        }
        .acmp-vtest-video {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
        .acmp-vtest-btn {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: none;
          border: none;
          cursor: pointer;
          transition: opacity 0.2s;
          z-index: 2;
        }
        .acmp-vtest-btn::before {
          content: '';
          position: absolute;
          inset: 0;
          background: rgba(0,0,0,0.18);
          transition: background 0.2s;
        }
        .acmp-vtest-btn.is-playing::before {
          background: transparent;
        }
        .acmp-vtest-btn:hover::before {
          background: rgba(0,0,0,0.28);
        }
        .acmp-vtest-btn svg {
          position: relative;
          z-index: 1;
          color: #fff;
          filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
          width: 52px;
          height: 52px;
        }
        .acmp-vtest-btn.is-playing svg {
          opacity: 0;
        }
        .acmp-vtest-btn.is-playing:hover svg {
          opacity: 1;
        }
        .acmp-vtest-arrow {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          border: 2px solid rgba(34,43,73,0.18);
          background: rgba(34,43,73,0.06);
          color: var(--acmp-navy);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          flex-shrink: 0;
          transition: background 0.2s, border-color 0.2s, color 0.2s;
        }
        .acmp-vtest-arrow:hover {
          background: var(--acmp-orange);
          border-color: var(--acmp-orange);
          color: #fff;
        }
        .acmp-vtest-dots {
          display: flex;
          justify-content: center;
          gap: 8px;
          margin-top: 28px;
        }
        .acmp-vtest-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: rgba(34,43,73,0.2);
          border: none;
          cursor: pointer;
          transition: background 0.2s, transform 0.2s;
        }
        .acmp-vtest-dot.is-active {
          background: var(--acmp-orange);
          transform: scale(1.3);
        }
        @media (max-width: 700px) {
          .acmp-vtest-card { border-radius: 14px; }
          .acmp-vtest-arrow { width: 38px; height: 38px; }
          .acmp-vtest-cards { gap: 10px; }
        }
      `}</style>

      <div className="acmp-vtest-stage">
        <button className="acmp-vtest-arrow" onClick={prev} aria-label="Video anterior">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="15 18 9 12 15 6" />
          </svg>
        </button>

        <div className="acmp-vtest-cards">
          {VIDEOS_TEST.map((src, i) => {
            const offset = i - active;
            const visible = Math.abs(offset) <= 2;
            if (!visible) return null;
            return (
              <VideoCard
                key={i}
                src={src}
                isActive={i === active}
                onClick={() => setActive(i)}
              />
            );
          })}
        </div>

        <button className="acmp-vtest-arrow" onClick={next} aria-label="Video siguiente">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="9 18 15 12 9 6" />
          </svg>
        </button>
      </div>

      <div className="acmp-vtest-dots">
        {VIDEOS_TEST.map((_, i) => (
          <button
            key={i}
            className={'acmp-vtest-dot' + (i === active ? ' is-active' : '')}
            onClick={() => setActive(i)}
            aria-label={'Video ' + (i + 1)}
          />
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { TestimonioVideos, VideoCard });