import React from 'react'
import ActivityAvatar from './ActivityAvatar'
import ActivityArtworkPreview from './ActivityArtworkPreview'
import ActivityReactions from './ActivityReactions'

function ActivityHeadline({ activity }) {
  const artworkLink = activity?.artwork?.url
  const artworkTitle = activity?.artwork?.title || 'an artwork'
  const mentionedUser = activity?.mentioned_user
  const reaction = activity?.reaction
  const commentAuthor = activity?.comment?.author

  switch (activity?.type) {
    case 'comment':
      return (
        <p className="text-sm leading-6 text-white/70">
          <span className="font-medium text-white">commented on </span>
          {artworkLink ? <a href={artworkLink} className="text-sky-300 hover:text-sky-200">{artworkTitle}</a> : <span className="text-white">{artworkTitle}</span>}
        </p>
      )
    case 'reply':
      return (
        <p className="text-sm leading-6 text-white/70">
          <span className="font-medium text-white">replied on </span>
          {artworkLink ? <a href={artworkLink} className="text-sky-300 hover:text-sky-200">{artworkTitle}</a> : <span className="text-white">{artworkTitle}</span>}
        </p>
      )
    case 'reaction':
      return (
        <p className="text-sm leading-6 text-white/70">
          <span className="font-medium text-white">reacted {reaction?.emoji || '👍'} {reaction?.label || 'Like'} </span>
          <span>to </span>
          {commentAuthor?.profile_url ? <a href={commentAuthor.profile_url} className="text-sky-300 hover:text-sky-200">{commentAuthor.name || commentAuthor.username || 'a creator'}</a> : <span className="text-white">a creator</span>}
          <span> on </span>
          {artworkLink ? <a href={artworkLink} className="text-sky-300 hover:text-sky-200">{artworkTitle}</a> : <span className="text-white">{artworkTitle}</span>}
        </p>
      )
    case 'mention':
      return (
        <p className="text-sm leading-6 text-white/70">
          <span className="font-medium text-white">mentioned </span>
          {mentionedUser?.profile_url ? <a href={mentionedUser.profile_url} className="text-sky-300 hover:text-sky-200">@{mentionedUser.username || mentionedUser.name}</a> : <span className="text-white">someone</span>}
          <span> on </span>
          {artworkLink ? <a href={artworkLink} className="text-sky-300 hover:text-sky-200">{artworkTitle}</a> : <span className="text-white">{artworkTitle}</span>}
        </p>
      )
    default:
      return <p className="text-sm leading-6 text-white/70">Shared new activity.</p>
  }
}

export default function ActivityCard({ activity, isLoggedIn = false }) {
  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-4 shadow-[0_18px_45px_rgba(0,0,0,0.28)] backdrop-blur-xl sm:p-5">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
        <div className="sm:w-[220px] sm:shrink-0">
          <ActivityAvatar user={activity.user} />
        </div>

        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-2">
            <ActivityHeadline activity={activity} />
            <span className="text-[11px] uppercase tracking-[0.18em] text-white/25">{activity.time_ago || ''}</span>
          </div>

          {activity.comment?.body ? (
            <div className="mt-3 rounded-2xl border border-white/[0.06] bg-white/[0.025] px-4 py-3">
              <p className="whitespace-pre-line break-words text-sm leading-6 text-white/80">{activity.comment.body}</p>
            </div>
          ) : null}

          {activity.type === 'mention' && activity.mentioned_user ? (
            <div className="mt-3 inline-flex items-center gap-2 rounded-full border border-sky-400/20 bg-sky-500/10 px-3 py-1 text-xs text-sky-200">
              <i className="fa-solid fa-at" />
              Mentioned @{activity.mentioned_user.username || activity.mentioned_user.name}
            </div>
          ) : null}

          <ActivityReactions activity={activity} isLoggedIn={isLoggedIn} />
        </div>

        <div className="sm:ml-auto">
          <ActivityArtworkPreview artwork={activity.artwork} />
        </div>
      </div>
    </article>
  )
}