story-research-zapwall/components/UserArticles.tsx

import { useState } from 'react'
import { ArticleCard } from './ArticleCard'
import type { Article } from '@/types/nostr'

interface UserArticlesProps {
  articles: Article[]
  loading: boolean
  error: string | null
  onLoadContent: (articleId: string, authorPubkey: string) => Promise<Article | null>
  showEmptyMessage?: boolean
}

function ArticlesLoading() {
  return (
    <div className="text-center py-12">
      <p className="text-gray-500">Loading articles...</p>
    </div>
  )
}

function ArticlesError({ message }: { message: string }) {
  return (
    <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
      <p className="text-red-800">{message}</p>
    </div>
  )
}

function EmptyState({ show }: { show: boolean }) {
  if (!show) {
    return null
  }
  return (
    <div className="text-center py-12">
      <p className="text-gray-500">No articles published yet.</p>
    </div>
  )
}

function UserArticlesView({
  articles,
  loading,
  error,
  showEmptyMessage,
  unlockedArticles,
  onUnlock,
}: Omit<UserArticlesProps, 'onLoadContent'> & { unlockedArticles: Set<string>; onUnlock: (article: Article) => void }) {
  if (loading) {
    return <ArticlesLoading />
  }
  if (error) {
    return <ArticlesError message={error} />
  }
  if (articles.length === 0) {
    return <EmptyState show={showEmptyMessage} />
  }

  return (
    <div className="space-y-6">
      {articles.map((article) => (
        <ArticleCard
          key={article.id}
          article={{
            ...article,
            paid: unlockedArticles.has(article.id) || article.paid,
          }}
          onUnlock={onUnlock}
        />
      ))}
    </div>
  )
}

export function UserArticles({
  articles,
  loading,
  error,
  onLoadContent,
  showEmptyMessage = true,
}: UserArticlesProps) {
  const [unlockedArticles, setUnlockedArticles] = useState<Set<string>>(new Set())

  const handleUnlock = async (article: Article) => {
    const fullArticle = await onLoadContent(article.id, article.pubkey)
    if (fullArticle?.paid) {
      setUnlockedArticles((prev) => new Set([...prev, article.id]))
    }
  }

  return (
    <UserArticlesView
      articles={articles}
      loading={loading}
      error={error}
      onLoadContent={onLoadContent}
      showEmptyMessage={showEmptyMessage}
      unlockedArticles={unlockedArticles}
      onUnlock={(a) => {
        void handleUnlock(a)
      }}
    />
  )
}