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, Badge } 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
  allArticles?: Article[]
  unlockedArticles?: Set<string>
}

function ArticleHeader({ article }: { article: Article }): React.ReactElement {
  return (
    <div className="mb-2 flex items-center justify-between">
      <div className="flex items-center gap-3 flex-1">
        <h2 className="text-2xl font-bold text-neon-cyan">{article.title}</h2>
        {article.paid && (
          <Badge variant="success" className="flex items-center gap-1" aria-label={t('article.unlocked.badge')}>
            <svg
              className="w-3 h-3"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"
              />
            </svg>
            {t('article.unlocked.badge')}
          </Badge>
        )}
      </div>
      <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
  allArticles?: Article[]
  unlockedArticles?: Set<string>
}): 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()
          }}
          {...(params.allArticles !== undefined ? { allArticles: params.allArticles } : {})}
          {...(params.unlockedArticles !== undefined ? { unlockedArticles: params.unlockedArticles } : {})}
        />
      </div>
      <ArticleMeta
        article={params.article}
        error={params.error}
        paymentInvoice={params.paymentInvoice}
        onClose={params.handleCloseModal}
        onPaymentComplete={() => {
          void params.handlePaymentComplete()
        }}
      />
    </>
  )
}

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

  const cardClassName = article.paid
    ? 'mb-0 border-2 border-neon-green/40 shadow-[0_0_5px_#00ff41,0_0_10px_#00ff41]'
    : 'mb-0'

  return (
    <Card variant="interactive" className={cardClassName}>
      <ArticleCardContent
        article={article}
        loading={state.loading}
        error={state.error}
        paymentInvoice={state.paymentInvoice}
        handleUnlock={state.handleUnlock}
        handlePaymentComplete={state.handlePaymentComplete}
        handleCloseModal={state.handleCloseModal}
        {...(allArticles !== undefined ? { allArticles } : {})}
        {...(unlockedArticles !== undefined ? { unlockedArticles } : {})}
      />
    </Card>
  )
}