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

export const TABS = [
  { id: 'posts',       label: 'Posts',       icon: 'fa-newspaper' },
  { id: 'artworks',    label: 'Artworks',    icon: 'fa-images' },
  { id: 'stories',     label: 'Stories',     icon: 'fa-feather-pointed' },
  { id: 'achievements', label: 'Achievements', icon: 'fa-trophy' },
  { 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)

  useEffect(() => {
    if (activeRef.current && navRef.current) {
      activeRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
    }
  }, [activeTab])

  return (
    <div className="sticky top-0 z-30 border-b border-white/10 bg-[#08111f]/80 backdrop-blur-2xl">
      <nav
        ref={navRef}
        className="profile-tabs-sticky overflow-x-auto scrollbar-hide"
        aria-label="Profile sections"
        role="tablist"
      >
        <div className="mx-auto flex w-max min-w-full gap-2 px-3 py-3 justify-center xl:items-stretch">
        {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={`
                group relative flex items-center gap-2.5 rounded-2xl border px-3.5 py-3 text-sm font-medium whitespace-nowrap
                outline-none transition-all duration-150 focus-visible:ring-2 focus-visible:ring-sky-400/70
                ${isActive
                  ? 'border-sky-300/25 bg-gradient-to-br from-sky-400/18 via-white/[0.06] to-cyan-400/10 text-white shadow-[0_16px_32px_rgba(14,165,233,0.12)]'
                  : 'border-white/8 bg-white/[0.03] text-slate-400 hover:border-white/15 hover:bg-white/[0.05] hover:text-slate-100'
                }
              `}
            >
              <span className={`inline-flex h-9 w-9 items-center justify-center rounded-xl border text-sm ${isActive ? 'border-sky-300/20 bg-sky-400/10 text-sky-200' : 'border-white/10 bg-white/[0.04] text-slate-500 group-hover:text-slate-300'}`}>
                <i className={`fa-solid ${tab.icon} fa-fw`} />
              </span>
              {tab.label}
              {isActive && (
                <span
                  className="absolute inset-x-4 bottom-0 h-0.5 rounded-full bg-sky-300 shadow-[0_0_10px_rgba(125,211,252,0.8)]"
                  aria-hidden="true"
                />
              )}
            </button>
          )
        })}
        </div>
      </nav>
    </div>
  )
}