import React, { useEffect, useRef } from 'react'

export const TABS = [
  { id: 'artworks',    label: 'Artworks',    icon: 'fa-images' },
  { id: 'stories',     label: 'Stories',     icon: 'fa-feather-pointed' },
  { id: 'achievements', label: 'Achievements', icon: 'fa-trophy' },
  { id: 'posts',       label: 'Posts',       icon: 'fa-newspaper' },
  { id: 'collections', label: 'Collections', icon: 'fa-layer-group' },
  { id: 'about',       label: 'About',       icon: 'fa-id-card' },
  { id: 'stats',       label: 'Stats',       icon: 'fa-chart-bar' },
  { id: 'favourites',  label: 'Favourites',  icon: 'fa-heart' },
  { id: 'activity',    label: 'Activity',    icon: 'fa-bolt' },
]

/**
 * ProfileTabs
 * Sticky tab navigation that:
 *  - Scrolls horizontally on mobile
 *  - Shows active underline / glow
 *  - Updates URL query param on tab change
 */
export default function ProfileTabs({ activeTab, onTabChange }) {
  const navRef = useRef(null)
  const activeRef = useRef(null)

  // Scroll active tab into view on mount/change
  useEffect(() => {
    if (activeRef.current && navRef.current) {
      activeRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
    }
  }, [activeTab])

  return (
    <nav
      ref={navRef}
      className="profile-tabs-sticky sticky z-30 bg-[#0c1525]/95 backdrop-blur-xl border-b border-white/10 overflow-x-auto scrollbar-hide"
      aria-label="Profile sections"
      role="tablist"
    >
      <div className="max-w-6xl mx-auto px-3 flex gap-1 py-1 min-w-max sm:min-w-0">
        {TABS.map((tab) => {
          const isActive = activeTab === tab.id
          return (
            <button
              key={tab.id}
              ref={isActive ? activeRef : null}
              onClick={() => onTabChange(tab.id)}
              role="tab"
              aria-selected={isActive}
              aria-controls={`tabpanel-${tab.id}`}
              className={`
                relative flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap rounded-lg
                transition-colors duration-150 outline-none
                focus-visible:ring-2 focus-visible:ring-sky-400/70 rounded-t
                ${isActive
                  ? 'text-white bg-white/[0.05]'
                  : 'text-slate-400 hover:text-slate-200 hover:bg-white/[0.03]'
                }
              `}
            >
              <i className={`fa-solid ${tab.icon} fa-fw text-xs ${isActive ? 'text-sky-400' : 'opacity-75'}`} />
              {tab.label}
              {/* Active indicator bar */}
              {isActive && (
                <span
                  className="absolute bottom-0 inset-x-0 h-0.5 rounded-full bg-sky-400 shadow-[0_0_8px_rgba(56,189,248,0.6)]"
                  aria-hidden="true"
                />
              )}
            </button>
          )
        })}
      </div>
    </nav>
  )
}
