story-research-zapwall/components/ArticleCard.tsx

import type { Article } from '@/types/nostr'
import { useNostrAuth } from '@/hooks/useNostrAuth'
import { useArticlePayment } from '@/hooks/useArticlePayment'
import { ArticlePreview } from './ArticlePreview'
import { PaymentModal } from './PaymentModal'
import { Card } from './ui'
import { useToast } from './ui/ToastContainer'
import { t } from '@/lib/i18n'
import Link from 'next/link'

interface ArticleCardProps {
  article: Article
  onUnlock?: (article: Article) => void
}

function ArticleHeader({ article }: { article: Article }): React.ReactElement {
  return (
    <div className="mb-2 flex items-center justify-between">
      <h2 className="text-2xl font-bold text-neon-cyan">{article.title}</h2>
      <Link
        href={`/author/${article.pubkey}`}
        className="text-xs text-cyber-accent/70 hover:text-neon-cyan transition-colors"
      >
        {t('publication.viewAuthor')}
      </Link>
    </div>
  )
}

function ArticleMeta({
  article,
  error,
  paymentInvoice,
  onClose,
  onPaymentComplete,
}: {
  article: Article
  error: string | null
  paymentInvoice: ReturnType<typeof useArticlePayment>['paymentInvoice']
  onClose: () => void
  onPaymentComplete: () => void
}): React.ReactElement {
  return (
    <>
      {error && <p className="text-sm text-red-400 mt-2">{error}</p>}
      <div className="text-xs text-cyber-accent/50 mt-4">
        {t('publication.published', { date: new Date(article.createdAt * 1000).toLocaleDateString() })}
      </div>
      {paymentInvoice && (
        <PaymentModal
          invoice={paymentInvoice}
          onClose={onClose}
          onPaymentComplete={onPaymentComplete}
        />
      )}
    </>
  )
}

interface UseArticleCardStateParams {
  article: Article
  pubkey: string | null
  connect: (() => Promise<void>) | undefined
  onUnlock: ((article: Article) => void) | undefined
  showToast: (message: string, variant?: 'success' | 'info' | 'warning' | 'error', duration?: number) => void
}

function useArticleCardState(params: UseArticleCardStateParams): {
  loading: boolean
  error: string | null
  paymentInvoice: ReturnType<typeof useArticlePayment>['paymentInvoice']
  handleUnlock: () => Promise<void>
  handlePaymentComplete: () => Promise<void>
  handleCloseModal: () => void
} {
  return useArticlePayment({
    article: params.article,
    pubkey: params.pubkey,
    onUnlockSuccess: () => {
      params.showToast(t('article.unlock.success'), 'success')
      params.onUnlock?.(params.article)
    },
    connect: params.connect,
    showToast: params.showToast,
  })
}

function ArticleCardContent(params: {
  article: Article
  loading: boolean
  error: string | null
  paymentInvoice: ReturnType<typeof useArticlePayment>['paymentInvoice']
  handleUnlock: () => Promise<void>
  handlePaymentComplete: () => Promise<void>
  handleCloseModal: () => void
}): React.ReactElement {
  return (
    <>
      <ArticleHeader article={params.article} />
      <div className="text-cyber-accent mb-4">
        <ArticlePreview
          article={params.article}
          loading={params.loading}
          onUnlock={() => {
            void params.handleUnlock()
          }}
        />
      </div>
      <ArticleMeta
        article={params.article}
        error={params.error}
        paymentInvoice={params.paymentInvoice}
        onClose={params.handleCloseModal}
        onPaymentComplete={() => {
          void params.handlePaymentComplete()
        }}
      />
    </>
  )
}

export function ArticleCard({ article, onUnlock }: ArticleCardProps): React.ReactElement {
  const { pubkey, connect } = useNostrAuth()
  const { showToast } = useToast()
  const state = useArticleCardState({
    article,
    pubkey: pubkey ?? null,
    connect,
    onUnlock,
    showToast,
  })

  return (
    <Card variant="interactive" className="mb-0">
      <ArticleCardContent
        article={article}
        loading={state.loading}
        error={state.error}
        paymentInvoice={state.paymentInvoice}
        handleUnlock={state.handleUnlock}
        handlePaymentComplete={state.handlePaymentComplete}
        handleCloseModal={state.handleCloseModal}
      />
    </Card>
  )
}