import React, { useState, useCallback } from 'react'
import ArtworkCard from '../../gallery/ArtworkCard'

const SORT_OPTIONS = [
  { value: 'latest',    label: 'Latest' },
  { value: 'trending',  label: 'Trending' },
  { value: 'rising',    label: 'Rising' },
  { value: 'views',     label: 'Most Viewed' },
  { value: 'favs',      label: 'Most Favourited' },
]

function ArtworkSkeleton() {
  return (
    <div className="rounded-2xl overflow-hidden bg-white/5 animate-pulse">
      <div className="aspect-[4/3] bg-white/8" />
      <div className="p-2 space-y-1.5">
        <div className="h-3 bg-white/8 rounded w-3/4" />
        <div className="h-2 bg-white/5 rounded w-1/2" />
      </div>
    </div>
  )
}

function EmptyState({ username }) {
  return (
    <div className="col-span-full flex flex-col items-center justify-center py-20 text-center">
      <div className="w-20 h-20 rounded-2xl bg-white/5 flex items-center justify-center mb-5 text-slate-500">
        <i className="fa-solid fa-image text-3xl" />
      </div>
      <p className="text-slate-400 font-medium">No artworks yet</p>
      <p className="text-slate-600 text-sm mt-1">@{username} hasn't uploaded anything yet.</p>
    </div>
  )
}

/**
 * Featured artworks horizontal scroll strip.
 */
function FeaturedStrip({ featuredArtworks }) {
  if (!featuredArtworks?.length) return null

  return (
    <div className="mb-6">
      <h2 className="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-3 flex items-center gap-2">
        <i className="fa-solid fa-star text-yellow-400 fa-fw" />
        Featured
      </h2>
      <div className="flex gap-3 overflow-x-auto pb-2 scrollbar-hide snap-x snap-mandatory">
        {featuredArtworks.map((art) => (
          <a
            key={art.id}
            href={`/art/${art.id}/${slugify(art.name)}`}
            className="group shrink-0 snap-start w-40 sm:w-48"
          >
            <div className="overflow-hidden rounded-xl ring-1 ring-white/10 bg-black/30 aspect-[4/3] hover:ring-sky-400/40 transition-all">
              <img
                src={art.thumb}
                alt={art.name}
                className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                loading="lazy"
              />
            </div>
            <p className="text-xs text-slate-400 mt-1.5 truncate group-hover:text-white transition-colors">
              {art.name}
            </p>
            {art.label && (
              <p className="text-[10px] text-slate-600 truncate">{art.label}</p>
            )}
          </a>
        ))}
      </div>
    </div>
  )
}

function slugify(str) {
  return (str || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
}

/**
 * TabArtworks
 * Features: sort selector, featured strip, masonry-style artwork grid,
 * skeleton loading, empty state, load-more pagination.
 */
export default function TabArtworks({ artworks, featuredArtworks, username, isActive }) {
  const [sort, setSort] = useState('latest')
  const [items, setItems] = useState(artworks?.data ?? artworks ?? [])
  const [nextCursor, setNextCursor] = useState(artworks?.next_cursor ?? null)
  const [loadingMore, setLoadingMore] = useState(false)
  const [isInitialLoad] = useState(false) // data SSR-loaded

  const handleSort = async (newSort) => {
    setSort(newSort)
    setItems([])
    try {
      const res = await fetch(`/api/profile/${encodeURIComponent(username)}/artworks?sort=${newSort}`, {
        headers: { Accept: 'application/json' },
      })
      if (res.ok) {
        const data = await res.json()
        setItems(data.data ?? data)
        setNextCursor(data.next_cursor ?? null)
      }
    } catch (_) {}
  }

  const loadMore = async () => {
    if (!nextCursor || loadingMore) return
    setLoadingMore(true)
    try {
      const res = await fetch(
        `/api/profile/${encodeURIComponent(username)}/artworks?sort=${sort}&cursor=${encodeURIComponent(nextCursor)}`,
        { headers: { Accept: 'application/json' } }
      )
      if (res.ok) {
        const data = await res.json()
        setItems((prev) => [...prev, ...(data.data ?? data)])
        setNextCursor(data.next_cursor ?? null)
      }
    } catch (_) {}
    setLoadingMore(false)
  }

  return (
    <div
      id="tabpanel-artworks"
      role="tabpanel"
      aria-labelledby="tab-artworks"
      className="pt-6"
    >
      {/* Featured strip */}
      <FeaturedStrip featuredArtworks={featuredArtworks} />

      {/* Sort bar */}
      <div className="flex items-center gap-3 mb-5 flex-wrap">
        <span className="text-xs text-slate-500 uppercase tracking-wider font-semibold">Sort</span>
        <div className="flex gap-1 flex-wrap">
          {SORT_OPTIONS.map((opt) => (
            <button
              key={opt.value}
              onClick={() => handleSort(opt.value)}
              className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
                sort === opt.value
                  ? 'bg-sky-500/20 text-sky-300 ring-1 ring-sky-400/40'
                  : 'text-slate-400 hover:text-white hover:bg-white/5'
              }`}
            >
              {opt.label}
            </button>
          ))}
        </div>
      </div>

      {/* Grid */}
      {isInitialLoad ? (
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
          {Array.from({ length: 8 }).map((_, i) => <ArtworkSkeleton key={i} />)}
        </div>
      ) : items.length === 0 ? (
        <div className="grid grid-cols-1">
          <EmptyState username={username} />
        </div>
      ) : (
        <>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
            {items.map((art, i) => (
              <ArtworkCard
                key={art.id ?? i}
                art={art}
                loading={i < 8 ? 'eager' : 'lazy'}
              />
            ))}
            {loadingMore && Array.from({ length: 4 }).map((_, i) => <ArtworkSkeleton key={`sk-${i}`} />)}
          </div>

          {/* Load more */}
          {nextCursor && (
            <div className="mt-8 text-center">
              <button
                onClick={loadMore}
                disabled={loadingMore}
                className="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 text-slate-300 text-sm font-medium border border-white/10 transition-all"
              >
                {loadingMore
                  ? <><i className="fa-solid fa-circle-notch fa-spin fa-fw" /> Loading…</>
                  : <><i className="fa-solid fa-chevron-down fa-fw" /> Load more</>
                }
              </button>
            </div>
          )}
        </>
      )}
    </div>
  )
}