import React, { useCallback, useEffect, useRef, useState } from 'react'
import LevelBadge from '../../components/xp/LevelBadge'

function ScrollBtn({ direction, onClick }) {
  const isLeft = direction === 'left'
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={`Scroll ${direction}`}
      className={[
        'absolute top-1/2 z-30 -translate-y-1/2 hidden lg:flex h-9 w-9 items-center justify-center',
        'rounded-full bg-black/60 text-white ring-1 ring-white/12 backdrop-blur-md',
        'transition hover:bg-black/80 hover:ring-white/20',
        isLeft ? 'left-1' : 'right-1',
      ].join(' ')}
    >
      <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.2}>
        {isLeft
          ? <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
          : <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />}
      </svg>
    </button>
  )
}

export default function TrendingArtworks() {
  const [items, setItems] = useState([])
  const [loading, setLoading] = useState(true)
  const scrollRef = useRef(null)
  const touchStartRef = useRef({ x: 0, y: 0 })
  const draggedRef = useRef(false)
  const suppressClickRef = useRef(false)
  const suppressTimerRef = useRef(null)

  useEffect(() => {
    let cancelled = false

    async function load() {
      try {
        const response = await window.axios.get('/api/dashboard/trending-artworks')
        if (!cancelled) {
          setItems(Array.isArray(response.data?.data) ? response.data.data : [])
        }
      } finally {
        if (!cancelled) {
          setLoading(false)
        }
      }
    }

    load()

    return () => {
      cancelled = true
    }
  }, [])

  const scroll = useCallback((dir) => {
    const el = scrollRef.current
    if (!el) return
    el.scrollBy({ left: dir === 'left' ? -320 : 320, behavior: 'smooth' })
  }, [])

  const onTouchStart = useCallback((e) => {
    if (!e.touches?.length) return
    touchStartRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY }
    draggedRef.current = false
  }, [])

  const onTouchMove = useCallback((e) => {
    if (!e.touches?.length) return
    const dx = Math.abs(e.touches[0].clientX - touchStartRef.current.x)
    const dy = Math.abs(e.touches[0].clientY - touchStartRef.current.y)
    if (dx > 10 && dx > dy) draggedRef.current = true
  }, [])

  const onTouchEnd = useCallback(() => {
    if (!draggedRef.current) return
    suppressClickRef.current = true
    clearTimeout(suppressTimerRef.current)
    suppressTimerRef.current = setTimeout(() => { suppressClickRef.current = false }, 260)
  }, [])

  const onClickCapture = useCallback((e) => {
    if (!suppressClickRef.current) return
    const link = e.target?.closest?.('a')
    if (link) { e.preventDefault(); e.stopPropagation() }
  }, [])

  return (
    <section className="rounded-[28px] border border-white/10 bg-[#08111c]/90 shadow-2xl shadow-black/20">
      <div className="flex items-center justify-between px-5 pt-5 pb-4 sm:px-6 sm:pt-6">
        <div>
          <p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/70">Discover</p>
          <h2 className="mt-1 text-xl font-semibold text-white">Trending Artworks</h2>
        </div>
        <a
          className="inline-flex items-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-400/15"
          href="/discover/trending"
        >
          Explore more
          <i className="fa-solid fa-arrow-right text-[10px]" />
        </a>
      </div>

      {loading ? (
        <div className="flex gap-3 overflow-hidden px-5 pb-5 sm:px-6 sm:pb-6">
          {[...Array(4)].map((_, i) => (
            <div key={i} className="h-52 w-36 shrink-0 animate-pulse rounded-2xl bg-white/5" />
          ))}
        </div>
      ) : null}

      {!loading && items.length === 0 ? (
        <p className="px-5 pb-5 text-sm text-slate-400 sm:px-6 sm:pb-6">No trending artworks available.</p>
      ) : null}

      {!loading && items.length > 0 ? (
        <div className="relative pb-5 sm:pb-6" data-nav-swipe-ignore="1">
          <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-10 bg-gradient-to-r from-[#08111c] to-transparent" />
          <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-10 bg-gradient-to-l from-[#08111c] to-transparent" />
          <ScrollBtn direction="left" onClick={() => scroll('left')} />
          <ScrollBtn direction="right" onClick={() => scroll('right')} />
          <div
            ref={scrollRef}
            onTouchStart={onTouchStart}
            onTouchMove={onTouchMove}
            onTouchEnd={onTouchEnd}
            onClickCapture={onClickCapture}
            className="flex gap-3 overflow-x-auto px-5 snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:px-6"
          >
            {items.map((item) => (
              <a
                key={item.id}
                href={item.url}
                className="group relative w-36 shrink-0 snap-start overflow-hidden rounded-2xl ring-1 ring-white/8 transition hover:-translate-y-0.5 hover:ring-sky-400/25 sm:w-40"
              >
                <div className="relative aspect-[3/4] bg-neutral-900">
                  <div className="pointer-events-none absolute inset-0 z-10 bg-gradient-to-br from-white/8 via-transparent to-transparent" />
                  <img
                    src={item.thumbnail || '/images/placeholder.jpg'}
                    alt={item.title}
                    loading="lazy"
                    className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04]"
                  />
                  <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/85 via-black/55 to-transparent p-3">
                    <p className="line-clamp-2 text-xs font-semibold leading-snug text-white">{item.title}</p>
                    {item.creator ? (
                      <>
                        <p className="mt-1 truncate text-[11px] text-white/65">
                          {item.creator.username ? `@${item.creator.username}` : item.creator.name}
                        </p>
                        <div className="mt-1.5">
                          <LevelBadge level={item.creator.level} rank={item.creator.rank} compact />
                        </div>
                      </>
                    ) : null}
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      ) : null}
    </section>
  )
}