import React from 'react'
import ActivityCard from './ActivityCard'

function ActivitySkeleton() {
  return (
    <div className="space-y-4 animate-pulse">
      {Array.from({ length: 5 }).map((_, index) => (
        <div key={index} className="rounded-[28px] border border-white/[0.06] bg-white/[0.025] p-5">
          <div className="flex flex-col gap-4 sm:flex-row">
            <div className="flex items-start gap-3 sm:w-[220px]">
              <div className="h-11 w-11 rounded-2xl bg-white/[0.08]" />
              <div className="flex-1 space-y-2">
                <div className="h-3 w-24 rounded bg-white/[0.08]" />
                <div className="h-2.5 w-16 rounded bg-white/[0.06]" />
              </div>
            </div>
            <div className="flex-1 space-y-3">
              <div className="h-3 w-4/5 rounded bg-white/[0.08]" />
              <div className="rounded-2xl border border-white/[0.04] bg-white/[0.02] px-4 py-3">
                <div className="h-3 w-full rounded bg-white/[0.06]" />
                <div className="mt-2 h-3 w-3/4 rounded bg-white/[0.05]" />
              </div>
              <div className="h-8 w-48 rounded-full bg-white/[0.05]" />
            </div>
            <div className="h-[132px] w-full rounded-2xl bg-white/[0.05] sm:w-[120px]" />
          </div>
        </div>
      ))}
    </div>
  )
}

function EmptyState({ isFiltered }) {
  return (
    <div className="rounded-[28px] border border-white/[0.06] bg-white/[0.025] px-6 py-16 text-center">
      <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl border border-white/[0.06] bg-white/[0.03] text-white/35">
        <i className="fa-solid fa-wave-square text-xl" />
      </div>
      <h3 className="text-lg font-semibold text-white/80">No activity yet</h3>
      <p className="mx-auto mt-2 max-w-md text-sm leading-6 text-white/45">
        {isFiltered ? 'This filter has no recent activity right now.' : 'When creators and members interact around artworks, their activity will appear here.'}
      </p>
    </div>
  )
}

export default function ActivityFeed({
  activities = [],
  isLoggedIn = false,
  loading = false,
  loadingMore = false,
  error = null,
  sentinelRef,
}) {
  if (loading && activities.length === 0) {
    return <ActivitySkeleton />
  }

  if (!loading && activities.length === 0) {
    return <EmptyState isFiltered={Boolean(error) === false} />
  }

  return (
    <div className="space-y-4">
      {error ? (
        <div className="rounded-2xl border border-rose-500/20 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">
          {error}
        </div>
      ) : null}

      {activities.map((activity) => (
        <ActivityCard key={activity.id} activity={activity} isLoggedIn={isLoggedIn} />
      ))}

      {loadingMore ? <ActivitySkeleton /> : null}

      <div ref={sentinelRef} className="h-6" aria-hidden="true" />
    </div>
  )
}