import React from 'react'
import { usePage } from '@inertiajs/react'
import ProfileHero from '../../components/profile/ProfileHero'
import ProfileGalleryPanel from '../../components/profile/ProfileGalleryPanel'
import SeoHead from '../../components/seo/SeoHead'

export default function ProfileGallery() {
  const { props } = usePage()
  const {
    user,
    profile,
    artworks,
    featuredArtworks,
    followerCount,
    viewerIsFollowing,
    heroBgUrl,
    leaderboardRank,
    countryName,
    isOwner,
    profileUrl,
    seo = {},
  } = props

  const username = user.username || user.name
  const displayName = user.name || user.username || 'Creator'

  return (
    <>
      <SeoHead seo={seo} />
      <div className="min-h-screen pb-16">
      <ProfileHero
        user={user}
        profile={profile}
        isOwner={isOwner}
        viewerIsFollowing={viewerIsFollowing}
        followerCount={followerCount}
        heroBgUrl={heroBgUrl}
        countryName={countryName}
        leaderboardRank={leaderboardRank}
        extraActions={profileUrl ? (
          <a
            href={profileUrl}
            className="inline-flex items-center gap-2 rounded-xl border border-white/15 px-4 py-2.5 text-sm font-medium text-slate-300 transition-all hover:bg-white/5 hover:text-white"
          >
            <i className="fa-solid fa-user fa-fw" />
            View Profile
          </a>
        ) : null}
      />

      <div className="border-y border-white/10 bg-white/[0.02]">
        <div className="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-5 md:flex-row md:items-end md:justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-300/80">Public Gallery</p>
            <h2 className="mt-1 text-2xl font-semibold tracking-tight text-white md:text-3xl">
              {displayName}'s artworks
            </h2>
            <p className="mt-2 max-w-2xl text-sm leading-relaxed text-slate-400">
              Browse published work with the same infinite-scroll gallery used across the profile experience.
            </p>
          </div>

          <a
            href={profileUrl || '#'}
            className="inline-flex items-center gap-2 self-start rounded-xl border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-slate-300 transition-all hover:bg-white/[0.06] hover:text-white"
          >
            <i className="fa-solid fa-arrow-left fa-fw" />
            Back to profile
          </a>
        </div>
      </div>

      <div className="w-full pt-6">
        <ProfileGalleryPanel
          artworks={artworks}
          username={username}
        />
      </div>
    </div>
    </>
  )
}