import React from 'react'
import CreatorJourneySection from '../CreatorJourneySection'

const SOCIAL_ICONS = {
  twitter:    { icon: 'fa-brands fa-x-twitter',  label: 'X / Twitter',  hoverClass: 'hover:border-slate-300/30 hover:text-slate-100 hover:bg-white/[0.08]' },
  deviantart: { icon: 'fa-brands fa-deviantart', label: 'DeviantArt',   hoverClass: 'hover:border-green-400/35 hover:text-green-300 hover:bg-green-900/20' },
  instagram:  { icon: 'fa-brands fa-instagram',  label: 'Instagram',    hoverClass: 'hover:border-pink-400/35 hover:text-pink-300 hover:bg-pink-900/20' },
  behance:    { icon: 'fa-brands fa-behance',     label: 'Behance',      hoverClass: 'hover:border-blue-400/35 hover:text-blue-300 hover:bg-blue-900/20' },
  artstation: { icon: 'fa-solid fa-palette',      label: 'ArtStation',   hoverClass: 'hover:border-orange-400/35 hover:text-orange-300 hover:bg-orange-900/20' },
  youtube:    { icon: 'fa-brands fa-youtube',     label: 'YouTube',      hoverClass: 'hover:border-red-400/35 hover:text-red-300 hover:bg-red-900/20' },
  website:    { icon: 'fa-solid fa-link',         label: 'Website',      hoverClass: 'hover:border-sky-400/35 hover:text-sky-200 hover:bg-sky-900/20' },
}

const CATEGORY_ICONS = {
  animals:       'fa-solid fa-paw',
  birds:         'fa-solid fa-dove',
  flowers:       'fa-solid fa-seedling',
  fruit:         'fa-solid fa-apple-whole',
  'sci-fi':      'fa-solid fa-rocket',
  scifi:         'fa-solid fa-rocket',
  fantasy:       'fa-solid fa-dragon',
  nature:        'fa-solid fa-leaf',
  landscape:     'fa-solid fa-mountain',
  abstract:      'fa-solid fa-shapes',
  architecture:  'fa-solid fa-building',
  people:        'fa-solid fa-person',
  portrait:      'fa-solid fa-face-smile',
  cars:          'fa-solid fa-car',
  space:         'fa-solid fa-star',
  games:         'fa-solid fa-gamepad',
  food:          'fa-solid fa-utensils',
  travel:        'fa-solid fa-plane',
  sports:        'fa-solid fa-football',
  ocean:         'fa-solid fa-water',
  underwater:    'fa-solid fa-fish',
  insects:       'fa-solid fa-bug',
  reptiles:      'fa-solid fa-dragon',
  cats:          'fa-solid fa-cat',
  dogs:          'fa-solid fa-dog',
}

const CONTENT_TYPE_ICONS = {
  photography:   'fa-solid fa-camera',
  wallpapers:    'fa-solid fa-desktop',
  'digital art': 'fa-solid fa-wand-magic-sparkles',
  illustration:  'fa-solid fa-pen-nib',
  '3d':          'fa-solid fa-cube',
  vector:        'fa-solid fa-bezier-curve',
  fractal:       'fa-solid fa-infinity',
  gif:           'fa-solid fa-film',
  drawing:       'fa-solid fa-pencil',
  painting:      'fa-solid fa-paintbrush',
  photo:         'fa-solid fa-camera',
}

function getCategoryIcon(label) {
  const key = String(label || '').toLowerCase().trim()
  return CATEGORY_ICONS[key] ?? null
}

function getContentTypeIcon(label) {
  const key = String(label || '').toLowerCase().trim()
  return CONTENT_TYPE_ICONS[key] ?? null
}

function formatNumber(value) {
  return Number(value ?? 0).toLocaleString()
}

function formatRelativeDate(value) {
  if (!value) return null

  try {
    const date = new Date(value)
    if (Number.isNaN(date.getTime())) return null

    const now = new Date()
    const diffSeconds = Math.round((date.getTime() - now.getTime()) / 1000)
    const absSeconds = Math.abs(diffSeconds)
    const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })

    if (absSeconds < 3600) {
      return formatter.format(Math.round(diffSeconds / 60), 'minute')
    }

    if (absSeconds < 86400) {
      return formatter.format(Math.round(diffSeconds / 3600), 'hour')
    }

    if (absSeconds < 604800) {
      return formatter.format(Math.round(diffSeconds / 86400), 'day')
    }

    if (absSeconds < 2629800) {
      return formatter.format(Math.round(diffSeconds / 604800), 'week')
    }

    return formatter.format(Math.round(diffSeconds / 2629800), 'month')
  } catch {
    return null
  }
}

function formatShortDate(value) {
  if (!value) return null

  try {
    const date = new Date(value)
    if (Number.isNaN(date.getTime())) return null

    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
  } catch {
    return null
  }
}

function truncateText(value, maxLength = 140) {
  const text = String(value ?? '').trim()
  if (!text) return ''
  if (text.length <= maxLength) return text

  return `${text.slice(0, maxLength).trimEnd()}...`
}

function formatContributionDate(value) {
  if (!value) return null

  try {
    const date = new Date(value)
    if (Number.isNaN(date.getTime())) return null

    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
  } catch {
    return null
  }
}

function buildInterestGroups(artworks = []) {
  const categoryMap = new Map()
  const contentTypeMap = new Map()

  artworks.forEach((artwork) => {
    const categoryKey = String(artwork?.category_slug || artwork?.category || '').trim().toLowerCase()
    const categoryLabel = String(artwork?.category || '').trim()
    const contentTypeKey = String(artwork?.content_type_slug || artwork?.content_type || '').trim().toLowerCase()
    const contentTypeLabel = String(artwork?.content_type || '').trim()

    if (categoryKey && categoryLabel) {
      categoryMap.set(categoryKey, {
        label: categoryLabel,
        count: (categoryMap.get(categoryKey)?.count ?? 0) + 1,
      })
    }

    if (contentTypeKey && contentTypeLabel) {
      contentTypeMap.set(contentTypeKey, {
        label: contentTypeLabel,
        count: (contentTypeMap.get(contentTypeKey)?.count ?? 0) + 1,
      })
    }
  })

  const toSortedList = (source) => Array.from(source.values())
    .sort((left, right) => right.count - left.count || left.label.localeCompare(right.label))
    .slice(0, 5)

  return {
    categories: toSortedList(categoryMap),
    contentTypes: toSortedList(contentTypeMap),
  }
}

function InfoRow({ icon, label, children }) {
  return (
    <div className="flex items-center gap-3 rounded-2xl border border-white/[0.07] bg-white/[0.025] px-3.5 py-3 transition-colors hover:bg-white/[0.045]">
      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/[0.05] text-slate-400">
        <i className={`fa-solid ${icon} fa-fw text-[13px]`} />
      </div>
      <div className="min-w-0 flex-1">
        <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500 block">{label}</span>
        <div className="mt-0.5 text-sm text-slate-200">{children}</div>
      </div>
    </div>
  )
}

function StatCard({ icon, label, value, tone = 'sky' }) {
  const tones = {
    sky:     { icon: 'text-sky-300 bg-sky-400/10 border-sky-300/20',     bar: 'from-sky-400/60 via-sky-400/20 to-transparent',     glow: 'shadow-[0_0_28px_rgba(56,189,248,0.10)]' },
    amber:   { icon: 'text-amber-200 bg-amber-300/10 border-amber-300/20',   bar: 'from-amber-400/60 via-amber-400/20 to-transparent',   glow: 'shadow-[0_0_28px_rgba(251,191,36,0.10)]' },
    emerald: { icon: 'text-emerald-200 bg-emerald-400/10 border-emerald-300/20', bar: 'from-emerald-400/60 via-emerald-400/20 to-transparent', glow: 'shadow-[0_0_28px_rgba(52,211,153,0.10)]' },
    violet:  { icon: 'text-violet-200 bg-violet-400/10 border-violet-300/20',  bar: 'from-violet-400/60 via-violet-400/20 to-transparent',  glow: 'shadow-[0_0_28px_rgba(167,139,250,0.10)]' },
  }
  const t = tones[tone] || tones.sky

  return (
    <div className={`relative overflow-hidden rounded-[24px] border border-white/10 bg-white/[0.04] p-4 shadow-[0_18px_44px_rgba(2,6,23,0.18)] ${t.glow}`}>
      <div className={`absolute inset-x-0 top-0 h-[2px] bg-gradient-to-r ${t.bar}`} />
      <div className={`inline-flex h-11 w-11 items-center justify-center rounded-2xl border ${t.icon}`}>
        <i className={`fa-solid ${icon} text-base`} />
      </div>
      <div className="mt-4 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{label}</div>
      <div className="mt-1 text-2xl font-bold tracking-tight text-white">{value}</div>
    </div>
  )
}

function SectionCard({ icon, eyebrow, title, children, className = '' }) {
  return (
    <section className={`rounded-[28px] border border-white/10 bg-white/[0.04] p-5 shadow-[0_20px_52px_rgba(2,6,23,0.18)] md:p-6 ${className}`.trim()}>
      <div className="flex items-start gap-3">
        <div className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.05] text-sky-300">
          <i className={`${icon} text-base`} />
        </div>
        <div className="min-w-0">
          <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">{eyebrow}</p>
          <h2 className="mt-1 text-xl font-semibold tracking-[-0.02em] text-white md:text-2xl">{title}</h2>
        </div>
      </div>
      <div className="mt-5">{children}</div>
    </section>
  )
}

/**
 * TabAbout
 * Bio, social links, metadata - replaces old sidebar profile card.
 */
export default function TabAbout({ user, profile, stats, achievements, artworks, creatorStories, profileComments, socialLinks, countryName, followerCount, recentFollowers, leaderboardRank, groupContributionHistory, journey }) {
  const uname = user.username || user.name
  const displayName = user.name || uname
  const about = profile?.about
  const website = profile?.website

  const joinDate = user.created_at
    ? new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
    : null

  const lastVisit = user.last_visit_at
    ? (() => {
        try {
          const d = new Date(user.last_visit_at)
          return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
        } catch { return null }
      })()
    : null

  const genderMap = { M: 'Male', F: 'Female', X: 'Non-binary / N/A' }
  const genderLabel = genderMap[profile?.gender?.toUpperCase()] ?? null
  const birthDate = profile?.birthdate
    ? (() => {
        try {
          return new Date(profile.birthdate).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
        } catch { return null }
      })()
    : null
  const lastSeenRelative = formatRelativeDate(user.last_visit_at)

  const socialEntries = socialLinks
    ? Object.entries(socialLinks).filter(([, link]) => link?.url)
    : []
  const followers = recentFollowers ?? []
  const recentAchievements = Array.isArray(achievements?.recent) ? achievements.recent : []
  const stories = Array.isArray(creatorStories) ? creatorStories : []
  const comments = Array.isArray(profileComments) ? profileComments : []
  const contributionHistory = Array.isArray(groupContributionHistory) ? groupContributionHistory : []
  const interestGroups = buildInterestGroups(Array.isArray(artworks) ? artworks : [])
  const summaryCards = [
    { icon: 'fa-user-group', label: 'Followers', value: formatNumber(followerCount), tone: 'sky' },
    { icon: 'fa-images', label: 'Uploads', value: formatNumber(stats?.uploads_count ?? 0), tone: 'violet' },
    { icon: 'fa-eye', label: 'Profile views', value: formatNumber(stats?.profile_views_count ?? 0), tone: 'emerald' },
    { icon: 'fa-trophy', label: 'Weekly rank', value: leaderboardRank?.rank ? `#${formatNumber(leaderboardRank.rank)}` : 'Unranked', tone: 'amber' },
  ]

  return (
    <div
      id="tabpanel-about"
      role="tabpanel"
      aria-labelledby="tab-about"
      className="pt-4 pb-10"
    >
      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        {summaryCards.map((card) => (
          <StatCard key={card.label} {...card} />
        ))}
      </div>

      <div className="mt-6 grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_380px]">
        <div className="space-y-6">
          <SectionCard icon="fa-solid fa-circle-info" eyebrow="Profile story" title={`About ${displayName}`} className="bg-[linear-gradient(135deg,rgba(56,189,248,0.08),rgba(255,255,255,0.04),rgba(249,115,22,0.05))]">
            {about ? (
              <div className="relative">
                <div className="-mt-2 mb-0 select-none font-serif text-7xl leading-none text-slate-500/20" aria-hidden="true">&ldquo;</div>
                <p className="whitespace-pre-line text-[15px] leading-8 text-slate-200/90">{about}</p>
              </div>
            ) : (
              <div className="flex flex-col items-center gap-3 rounded-2xl border border-dashed border-white/10 bg-white/[0.03] px-5 py-8 text-center">
                <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.04] text-slate-500">
                  <i className="fa-regular fa-comment-dots text-lg" />
                </div>
                <p className="text-sm text-slate-400">This creator has not written a public bio yet.</p>
              </div>
            )}
          </SectionCard>

          <CreatorJourneySection journey={journey} username={uname} />

          <SectionCard icon="fa-solid fa-address-card" eyebrow="Details" title="Profile information">
            <div className="grid gap-3 md:grid-cols-2">
              {displayName && displayName !== uname ? (
                <InfoRow icon="fa-user" label="Display name">{displayName}</InfoRow>
              ) : null}
              <InfoRow icon="fa-at" label="Username"><span className="font-mono">@{uname}</span></InfoRow>
              {genderLabel ? <InfoRow icon="fa-venus-mars" label="Gender">{genderLabel}</InfoRow> : null}
              {countryName ? (
                <InfoRow icon="fa-earth-americas" label="Country">
                  <span className="flex items-center gap-2">
                    {profile?.country_code ? (
                      <img
                        src={`/gfx/flags/shiny/24/${encodeURIComponent(String(profile.country_code).toUpperCase())}.png`}
                        alt={countryName}
                        className="h-auto w-4 rounded-sm"
                        onError={(e) => { e.target.style.display = 'none' }}
                      />
                    ) : null}
                    {countryName}
                  </span>
                </InfoRow>
              ) : null}
              {website ? (
                <InfoRow icon="fa-link" label="Website">
                  <a
                    href={website.startsWith('http') ? website : `https://${website}`}
                    target="_blank"
                    rel="nofollow noopener noreferrer"
                    className="text-sky-300 transition-colors hover:text-sky-200 hover:underline"
                  >
                    {(() => {
                      try {
                        const url = website.startsWith('http') ? website : `https://${website}`
                        return new URL(url).hostname
                      } catch { return website }
                    })()}
                  </a>
                </InfoRow>
              ) : null}
              {birthDate ? <InfoRow icon="fa-cake-candles" label="Birth date">{birthDate}</InfoRow> : null}
              {joinDate ? <InfoRow icon="fa-calendar-days" label="Member since">{joinDate}</InfoRow> : null}
              {lastVisit ? <InfoRow icon="fa-clock" label="Last seen">{lastSeenRelative ? `${lastSeenRelative} · ${lastVisit}` : lastVisit}</InfoRow> : null}
            </div>
          </SectionCard>

          {contributionHistory.length > 0 ? (
            <SectionCard icon="fa-solid fa-people-group" eyebrow="Collaborative work" title="Group contribution history">
              <div className="grid gap-4">
                {contributionHistory.map((entry) => (
                  <a
                    key={entry.group?.slug}
                    href={entry.group?.profile_url || '#'}
                    className="rounded-[24px] border border-white/8 bg-white/[0.03] p-4 transition-colors hover:border-white/14 hover:bg-white/[0.06]"
                  >
                    <div className="flex items-start gap-3">
                      {entry.group?.avatar_url ? (
                        <img src={entry.group.avatar_url} alt={entry.group?.name} className="h-12 w-12 rounded-2xl object-cover ring-1 ring-white/10" />
                      ) : (
                        <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.04] text-slate-400">
                          <i className="fa-solid fa-people-group" />
                        </div>
                      )}
                      <div className="min-w-0 flex-1">
                        <div className="flex flex-wrap items-center gap-2">
                          <div className="truncate text-sm font-semibold text-white">{entry.group?.name}</div>
                          {entry.role ? <span className="rounded-full border border-white/10 bg-black/20 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{String(entry.role).replaceAll('_', ' ')}</span> : null}
                          {entry.trusted_indicator ? <span className="rounded-full border border-emerald-300/20 bg-emerald-300/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-emerald-100">Trusted</span> : null}
                        </div>
                        {entry.group?.headline ? <p className="mt-1 text-sm text-slate-400">{truncateText(entry.group.headline, 100)}</p> : null}
                        {entry.summary ? <p className="mt-3 text-sm text-slate-300">{entry.summary}</p> : null}
                        <div className="mt-3 flex flex-wrap gap-3 text-xs text-slate-500">
                          <span>{Number(entry.counts?.credited_artworks || 0).toLocaleString()} credited artworks</span>
                          <span>{Number(entry.counts?.releases || 0).toLocaleString()} releases</span>
                          <span>{Number(entry.counts?.projects || 0).toLocaleString()} projects</span>
                          {entry.joined_at ? <span>Joined {formatContributionDate(entry.joined_at)}</span> : null}
                        </div>
                        {Array.isArray(entry.role_labels) && entry.role_labels.length > 0 ? (
                          <div className="mt-3 flex flex-wrap gap-2">
                            {entry.role_labels.map((label) => (
                              <span key={`${entry.group?.slug}-${label}`} className="rounded-full border border-sky-300/15 bg-sky-400/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-sky-100">
                                {label}
                              </span>
                            ))}
                          </div>
                        ) : null}
                        {Array.isArray(entry.recent_release_titles) && entry.recent_release_titles.length > 0 ? (
                          <div className="mt-3 text-xs text-slate-400">
                            Recent releases: {entry.recent_release_titles.join(' • ')}
                          </div>
                        ) : null}
                      </div>
                    </div>
                  </a>
                ))}
              </div>
            </SectionCard>
          ) : null}

          {followers.length > 0 ? (
            <SectionCard icon="fa-solid fa-user-group" eyebrow="Community" title="Recent followers">
              <div className="grid gap-3 sm:grid-cols-2">
                {followers.slice(0, 6).map((follower) => (
                  <a
                    key={follower.id}
                    href={follower.profile_url ?? `/@${follower.username}`}
                    className="group flex items-center gap-3 rounded-2xl border border-white/8 bg-white/[0.03] px-4 py-3 transition-colors hover:border-white/14 hover:bg-white/[0.06]"
                  >
                    <img
                      src={follower.avatar_url ?? '/images/avatar_default.webp'}
                      alt={follower.username}
                      className="h-11 w-11 rounded-2xl object-cover ring-1 ring-white/10 transition-all group-hover:ring-sky-400/30"
                      loading="lazy"
                    />
                    <div className="min-w-0 flex-1">
                      <div className="truncate text-sm font-medium text-slate-200 group-hover:text-white">{follower.uname || follower.username}</div>
                      <div className="truncate text-xs text-slate-500">@{follower.username}</div>
                    </div>
                  </a>
                ))}
              </div>
            </SectionCard>
          ) : null}

          {recentAchievements.length > 0 ? (
            <SectionCard icon="fa-solid fa-trophy" eyebrow="Recent wins" title="Latest achievements">
              <div className="grid gap-3 sm:grid-cols-2">
                {recentAchievements.slice(0, 4).map((achievement) => (
                  <div
                    key={achievement.id}
                    className="group relative overflow-hidden rounded-2xl border border-amber-300/10 bg-white/[0.03] px-4 py-4 transition-all hover:border-amber-300/25 hover:bg-white/[0.06]"
                  >
                    <div className="absolute inset-x-0 top-0 h-[2px] bg-gradient-to-r from-amber-400/50 via-amber-400/20 to-transparent" />
                    <div className="flex items-start gap-3">
                      <div className="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border border-amber-300/20 bg-amber-300/10 text-amber-200 shadow-[0_0_18px_rgba(251,191,36,0.12)] transition-shadow group-hover:shadow-[0_0_24px_rgba(251,191,36,0.2)]">
                        <i className={`fa-solid ${achievement.icon || 'fa-trophy'} text-base`} />
                      </div>
                      <div className="min-w-0 flex-1">
                        <div className="truncate text-sm font-semibold text-white">{achievement.name}</div>
                        {achievement.description ? (
                          <div className="mt-1 line-clamp-2 text-sm leading-relaxed text-slate-400">{achievement.description}</div>
                        ) : null}
                        <div className="mt-3 flex flex-wrap gap-2">
                          {achievement.unlocked_at ? (
                            <span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-black/20 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-400">
                              <i className="fa-solid fa-calendar-check text-[10px]" />
                              {formatShortDate(achievement.unlocked_at) || 'Unlocked'}
                            </span>
                          ) : null}
                          <span className="inline-flex items-center gap-1.5 rounded-full border border-amber-300/20 bg-amber-300/10 px-2.5 py-1 text-[11px] font-bold uppercase tracking-[0.14em] text-amber-200">
                            <i className="fa-solid fa-bolt text-[9px]" />
                            +{formatNumber(achievement.xp_reward ?? 0)} XP
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </SectionCard>
          ) : null}

          {stories.length > 0 || comments.length > 0 ? (
            <SectionCard icon="fa-solid fa-wave-square" eyebrow="Fresh from this creator" title="Recent activity">
              <div className="grid gap-3 lg:grid-cols-2">
                {stories.length > 0 ? (
                  <div className="rounded-[24px] border border-white/8 bg-white/[0.03] p-4">
                    <div className="flex items-center justify-between gap-3">
                      <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Latest story</div>
                      <span className="rounded-full border border-sky-300/15 bg-sky-400/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-sky-100/80">
                        {formatShortDate(stories[0]?.published_at) || 'Published'}
                      </span>
                    </div>
                    <a
                      href={`/stories/${stories[0].slug}`}
                      className="mt-3 block text-lg font-semibold tracking-tight text-white transition-colors hover:text-sky-200"
                    >
                      {stories[0].title}
                    </a>
                    {stories[0].excerpt ? (
                      <p className="mt-2 text-sm leading-7 text-slate-400">
                        {truncateText(stories[0].excerpt, 180)}
                      </p>
                    ) : null}
                    <div className="mt-4 flex flex-wrap gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-300/75">
                      {stories[0].reading_time ? (
                        <span className="rounded-full border border-white/10 bg-black/20 px-2.5 py-1">
                          {stories[0].reading_time} min read
                        </span>
                      ) : null}
                      <span className="rounded-full border border-white/10 bg-black/20 px-2.5 py-1">
                        {formatNumber(stories[0].views ?? 0)} views
                      </span>
                      <span className="rounded-full border border-white/10 bg-black/20 px-2.5 py-1">
                        {formatNumber(stories[0].comments_count ?? 0)} comments
                      </span>
                    </div>
                  </div>
                ) : null}

                {comments.length > 0 ? (
                  <div className="rounded-[24px] border border-white/8 bg-white/[0.03] p-4">
                    <div className="flex items-center justify-between gap-3">
                      <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Latest guestbook comment</div>
                      <span className="rounded-full border border-amber-300/15 bg-amber-300/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-amber-100/80">
                        {formatRelativeDate(comments[0]?.created_at) || 'Recently'}
                      </span>
                    </div>
                    <div className="mt-3 flex items-start gap-3">
                      <img
                        src={comments[0].author_avatar || '/images/avatar_default.webp'}
                        alt={comments[0].author_name}
                        className="h-11 w-11 rounded-2xl object-cover ring-1 ring-white/10"
                        loading="lazy"
                        onError={(e) => { e.target.src = '/images/avatar_default.webp' }}
                      />
                      <div className="min-w-0 flex-1">
                        <a
                          href={comments[0].author_profile_url}
                          className="text-sm font-semibold text-white transition-colors hover:text-sky-200"
                        >
                          {comments[0].author_name}
                        </a>
                        <p className="mt-2 text-sm leading-7 text-slate-400">
                          {truncateText(comments[0].body, 180)}
                        </p>
                      </div>
                    </div>
                  </div>
                ) : null}
              </div>
            </SectionCard>
          ) : null}
        </div>

        <div className="space-y-6">
          <SectionCard icon="fa-solid fa-sparkles" eyebrow="Creator snapshot" title="Profile snapshot" className="bg-[linear-gradient(180deg,rgba(15,23,42,0.72),rgba(2,6,23,0.5))]">
            <div className="space-y-4">
              <div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-4">
                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Creator level</div>
                <div className="mt-2 flex items-end justify-between gap-4">
                  <div>
                    <div className="text-3xl font-semibold tracking-tight text-white">Lv {formatNumber(user?.level ?? 1)}</div>
                    <div className="mt-1 text-sm text-slate-400">{user?.rank || 'Creator'}</div>
                  </div>
                  <div className="rounded-2xl border border-sky-300/15 bg-sky-400/10 px-3 py-2 text-right">
                    <div className="text-[10px] font-semibold uppercase tracking-[0.16em] text-sky-100/70">XP</div>
                    <div className="mt-1 text-lg font-semibold text-sky-100">{formatNumber(user?.xp ?? 0)}</div>
                  </div>
                </div>
                <div className="mt-4 h-2 overflow-hidden rounded-full bg-white/8">
                  <div className="h-full rounded-full bg-[linear-gradient(90deg,#38bdf8,#60a5fa,#f59e0b)]" style={{ width: `${Math.max(0, Math.min(100, Number(user?.progress_percent ?? 0)))}%` }} />
                </div>
              </div>

              <div className="grid gap-3 sm:grid-cols-2">
                <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
                  <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Weekly rank</div>
                  <div className="mt-2 text-2xl font-semibold tracking-tight text-white">{leaderboardRank?.rank ? `#${formatNumber(leaderboardRank.rank)}` : 'Not ranked'}</div>
                  {leaderboardRank?.score ? <div className="mt-1 text-sm text-slate-400">Score {formatNumber(leaderboardRank.score)}</div> : null}
                </div>
                <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
                  <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Community size</div>
                  <div className="mt-2 text-2xl font-semibold tracking-tight text-white">{formatNumber(followerCount)}</div>
                  <div className="mt-1 text-sm text-slate-400">Followers</div>
                </div>
              </div>
            </div>
          </SectionCard>

          <SectionCard icon="fa-solid fa-chart-simple" eyebrow="Highlights" title="Useful stats">
            <div className="space-y-3">
              <InfoRow icon="fa-images" label="Uploads">{formatNumber(stats?.uploads_count ?? 0)}</InfoRow>
              <InfoRow icon="fa-eye" label="Artwork views received">{formatNumber(stats?.artwork_views_received_count ?? 0)}</InfoRow>
              <InfoRow icon="fa-download" label="Downloads received">{formatNumber(stats?.downloads_received_count ?? 0)}</InfoRow>
              <InfoRow icon="fa-heart" label="Favourites received">{formatNumber(stats?.favourites_received_count ?? 0)}</InfoRow>
              <InfoRow icon="fa-comment" label="Comments received">{formatNumber(stats?.comments_received_count ?? 0)}</InfoRow>
            </div>
          </SectionCard>

          {interestGroups.categories.length > 0 || interestGroups.contentTypes.length > 0 ? (
            <SectionCard icon="fa-solid fa-layer-group" eyebrow="Creative focus" title="Favourite categories & formats">
              <div className="space-y-5">
                {interestGroups.categories.length > 0 ? (
                  <div>
                    <div className="mb-3 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">
                      <i className="fa-solid fa-tag text-slate-600" />
                      Top categories
                    </div>
                    <div className="flex flex-wrap gap-2.5">
                      {interestGroups.categories.map((category) => {
                        const catIcon = getCategoryIcon(category.label)
                        return (
                          <span
                            key={category.label}
                            className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-3.5 py-2 text-sm text-slate-200 transition-colors hover:bg-white/[0.07]"
                          >
                            {catIcon ? <i className={`${catIcon} text-[12px] text-slate-400`} /> : null}
                            <span>{category.label}</span>
                            <span className="rounded-full bg-black/20 px-2 py-0.5 text-[11px] font-semibold text-slate-400">{formatNumber(category.count)}</span>
                          </span>
                        )
                      })}
                    </div>
                  </div>
                ) : null}

                {interestGroups.contentTypes.length > 0 ? (
                  <div>
                    <div className="mb-3 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">
                      <i className="fa-solid fa-layer-group text-slate-600" />
                      Preferred formats
                    </div>
                    <div className="flex flex-wrap gap-2.5">
                      {interestGroups.contentTypes.map((contentType) => {
                        const ctIcon = getContentTypeIcon(contentType.label)
                        return (
                          <span
                            key={contentType.label}
                            className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/20 bg-sky-400/10 px-3.5 py-2 text-sm text-sky-100 transition-colors hover:bg-sky-400/15"
                          >
                            {ctIcon ? <i className={`${ctIcon} text-[12px] text-sky-300/70`} /> : null}
                            <span>{contentType.label}</span>
                            <span className="rounded-full bg-black/20 px-2 py-0.5 text-[11px] font-semibold text-sky-100/70">{formatNumber(contentType.count)}</span>
                          </span>
                        )
                      })}
                    </div>
                  </div>
                ) : null}
              </div>
            </SectionCard>
          ) : null}

          {socialEntries.length > 0 ? (
            <SectionCard icon="fa-solid fa-share-nodes" eyebrow="Links" title="Social links">
              <div className="flex flex-wrap gap-2.5">
                {socialEntries.map(([platform, link]) => {
                  const si = SOCIAL_ICONS[platform] ?? { icon: 'fa-solid fa-link', label: platform }
                  const href = link.url.startsWith('http') ? link.url : `https://${link.url}`

                  return (
                    <a
                      key={platform}
                      href={href}
                      target="_blank"
                      rel="nofollow noopener noreferrer"
                      className={`inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-3.5 py-2.5 text-sm text-slate-300 transition-all ${si.hoverClass || 'hover:border-sky-400/30 hover:bg-white/[0.07] hover:text-white'}`}
                      aria-label={si.label}
                    >
                      <i className={`${si.icon} fa-fw`} />
                      <span>{si.label}</span>
                    </a>
                  )
                })}
              </div>
            </SectionCard>
          ) : null}
        </div>
      </div>
    </div>
  )
}