import React from 'react'

function typeMeta(type) {
  switch (type) {
    case 'upload':
      return { icon: 'fa-solid fa-image', label: 'Upload', tone: 'text-sky-200 bg-sky-400/12 border-sky-300/20' }
    case 'comment':
      return { icon: 'fa-solid fa-comment-dots', label: 'Comment', tone: 'text-amber-100 bg-amber-400/12 border-amber-300/20' }
    case 'reply':
      return { icon: 'fa-solid fa-reply', label: 'Reply', tone: 'text-orange-100 bg-orange-400/12 border-orange-300/20' }
    case 'like':
      return { icon: 'fa-solid fa-heart', label: 'Like', tone: 'text-rose-100 bg-rose-400/12 border-rose-300/20' }
    case 'favourite':
      return { icon: 'fa-solid fa-bookmark', label: 'Favourite', tone: 'text-pink-100 bg-pink-400/12 border-pink-300/20' }
    case 'follow':
      return { icon: 'fa-solid fa-user-plus', label: 'Follow', tone: 'text-emerald-100 bg-emerald-400/12 border-emerald-300/20' }
    case 'achievement':
      return { icon: 'fa-solid fa-trophy', label: 'Achievement', tone: 'text-yellow-100 bg-yellow-400/12 border-yellow-300/20' }
    case 'forum_post':
      return { icon: 'fa-solid fa-signs-post', label: 'Forum thread', tone: 'text-violet-100 bg-violet-400/12 border-violet-300/20' }
    case 'forum_reply':
      return { icon: 'fa-solid fa-comments', label: 'Forum reply', tone: 'text-indigo-100 bg-indigo-400/12 border-indigo-300/20' }
    default:
      return { icon: 'fa-solid fa-bolt', label: 'Activity', tone: 'text-slate-100 bg-white/6 border-white/10' }
  }
}

function profileName(actor) {
  if (!actor) return 'Creator'
  return actor.username ? `@${actor.username}` : actor.name || 'Creator'
}

function headline(activity) {
  switch (activity?.type) {
    case 'upload':
      return activity?.artwork?.title ? `Uploaded ${activity.artwork.title}` : 'Uploaded new artwork'
    case 'comment':
      return activity?.artwork?.title ? `Commented on ${activity.artwork.title}` : 'Posted a new comment'
    case 'reply':
      return activity?.artwork?.title ? `Replied on ${activity.artwork.title}` : 'Posted a reply'
    case 'like':
      return activity?.artwork?.title ? `Liked ${activity.artwork.title}` : 'Liked an artwork'
    case 'favourite':
      return activity?.artwork?.title ? `Favourited ${activity.artwork.title}` : 'Saved an artwork'
    case 'follow':
      return activity?.target_user ? `Started following @${activity.target_user.username || activity.target_user.name}` : 'Started following a creator'
    case 'achievement':
      return activity?.achievement?.name ? `Unlocked ${activity.achievement.name}` : 'Unlocked a new achievement'
    case 'forum_post':
      return activity?.forum?.thread?.title ? `Started forum thread ${activity.forum.thread.title}` : 'Started a new forum thread'
    case 'forum_reply':
      return activity?.forum?.thread?.title ? `Replied in ${activity.forum.thread.title}` : 'Posted a forum reply'
    default:
      return 'Shared new activity'
  }
}

function body(activity) {
  if (activity?.comment?.body) return activity.comment.body
  if (activity?.forum?.post?.excerpt) return activity.forum.post.excerpt
  if (activity?.achievement?.description) return activity.achievement.description
  return ''
}

function cta(activity) {
  if (activity?.comment?.url) return { href: activity.comment.url, label: 'Open comment' }
  if (activity?.artwork?.url) return { href: activity.artwork.url, label: 'View artwork' }
  if (activity?.forum?.post?.url) return { href: activity.forum.post.url, label: 'Open reply' }
  if (activity?.forum?.thread?.url) return { href: activity.forum.thread.url, label: 'Open thread' }
  if (activity?.target_user?.profile_url) return { href: activity.target_user.profile_url, label: 'View profile' }
  return null
}

function AchievementIcon({ achievement }) {
  const raw = String(achievement?.icon || '').trim()
  const className = raw.startsWith('fa-') ? raw : `fa-solid ${raw || 'fa-trophy'}`

  return (
    <div className="inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-yellow-300/20 bg-yellow-400/12 text-yellow-100">
      <i className={className} />
    </div>
  )
}

export default function ActivityCard({ activity }) {
  const meta = typeMeta(activity?.type)
  const nextAction = cta(activity)
  const copy = body(activity)

  return (
    <article className="rounded-[28px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(11,16,26,0.96),rgba(7,11,19,0.92))] p-5 shadow-[0_18px_45px_rgba(0,0,0,0.28)] backdrop-blur-xl">
      <div className="flex flex-col gap-4 md:flex-row md:items-start">
        <div className="flex items-start gap-4 md:w-[17rem] md:shrink-0">
          <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-[20px] border border-white/10 bg-slate-950/70">
            {activity?.actor?.avatar_url ? (
              <img src={activity.actor.avatar_url} alt={profileName(activity.actor)} className="h-full w-full object-cover" loading="lazy" />
            ) : (
              <div className="flex h-full w-full items-center justify-center text-slate-500">
                <i className="fa-solid fa-user" />
              </div>
            )}
          </div>

          <div className="min-w-0 flex-1">
            <div className="text-sm font-semibold text-white">{profileName(activity.actor)}</div>
            {activity?.actor?.badge?.label ? (
              <div className="mt-1 inline-flex items-center rounded-full border border-white/10 bg-white/[0.04] px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-300">
                {activity.actor.badge.label}
              </div>
            ) : null}
            <div className="mt-2 text-xs uppercase tracking-[0.18em] text-slate-500">{activity?.time_ago || ''}</div>
          </div>
        </div>

        <div className="min-w-0 flex-1">
          <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
            <div className="min-w-0">
              <div className="flex flex-wrap items-center gap-2">
                <span className={`inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] ${meta.tone}`}>
                  <i className={meta.icon} />
                  {meta.label}
                </span>
              </div>
              <h3 className="mt-3 text-lg font-semibold tracking-[-0.02em] text-white">{headline(activity)}</h3>
              {copy ? <p className="mt-2 max-w-3xl text-sm leading-7 text-slate-400">{copy}</p> : null}
            </div>

            <div className="text-xs text-slate-500 md:text-right">{activity?.created_at ? new Date(activity.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : ''}</div>
          </div>

          {activity?.artwork ? (
            <div className="mt-4 flex items-center gap-3 rounded-2xl border border-white/[0.06] bg-white/[0.03] p-3">
              {activity.artwork.thumb ? (
                <img src={activity.artwork.thumb} alt={activity.artwork.title} className="h-16 w-16 rounded-2xl object-cover ring-1 ring-white/10" loading="lazy" />
              ) : (
                <div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.04] text-slate-500">
                  <i className="fa-solid fa-image" />
                </div>
              )}
              <div className="min-w-0 flex-1">
                <div className="truncate text-sm font-medium text-white">{activity.artwork.title}</div>
                <div className="mt-2 flex flex-wrap gap-3 text-xs text-slate-400">
                  <span>{Number(activity.artwork.stats?.likes || 0).toLocaleString()} likes</span>
                  <span>{Number(activity.artwork.stats?.views || 0).toLocaleString()} views</span>
                  <span>{Number(activity.artwork.stats?.comments || 0).toLocaleString()} comments</span>
                </div>
              </div>
            </div>
          ) : null}

          {activity?.target_user ? (
            <div className="mt-4 flex items-center gap-3 rounded-2xl border border-white/[0.06] bg-white/[0.03] p-3">
              <div className="h-12 w-12 overflow-hidden rounded-2xl border border-white/10 bg-slate-950/70">
                {activity.target_user.avatar_url ? (
                  <img src={activity.target_user.avatar_url} alt={activity.target_user.username || activity.target_user.name} className="h-full w-full object-cover" loading="lazy" />
                ) : null}
              </div>
              <div className="min-w-0 flex-1">
                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Target creator</div>
                <div className="mt-1 text-sm font-medium text-white">@{activity.target_user.username || activity.target_user.name}</div>
              </div>
            </div>
          ) : null}

          {activity?.achievement ? (
            <div className="mt-4 flex items-center gap-3 rounded-2xl border border-white/[0.06] bg-white/[0.03] p-3">
              <AchievementIcon achievement={activity.achievement} />
              <div className="min-w-0 flex-1">
                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Achievement unlocked</div>
                <div className="mt-1 text-sm font-medium text-white">{activity.achievement.name}</div>
                {activity.achievement.description ? <div className="mt-1 text-sm text-slate-400">{activity.achievement.description}</div> : null}
              </div>
            </div>
          ) : null}

          {activity?.forum?.thread ? (
            <div className="mt-4 rounded-2xl border border-white/[0.06] bg-white/[0.03] p-3">
              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Forum activity</div>
              <div className="mt-1 text-sm font-medium text-white">{activity.forum.thread.title}</div>
              <div className="mt-2 text-xs text-slate-400">{activity.forum.thread.category_name}</div>
            </div>
          ) : null}

          {nextAction ? (
            <a
              href={nextAction.href}
              className="mt-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-3.5 py-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-200 transition hover:border-white/20 hover:bg-white/[0.1] hover:text-white"
            >
              {nextAction.label}
              <i className="fa-solid fa-arrow-right text-[10px]" />
            </a>
          ) : null}
        </div>
      </div>
    </article>
  )
}