import type { Article } from '@/types/nostr'
import { useNostrConnect } from '@/hooks/useNostrConnect'
import { useArticlePayment } from '@/hooks/useArticlePayment'
import { ArticlePreview } from './ArticlePreview'
import { PaymentModal } from './PaymentModal'

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

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

export function ArticleCard({ article, onUnlock }: ArticleCardProps) {
  const { pubkey, connect } = useNostrConnect()
  const {
    loading,
    error,
    paymentInvoice,
    handleUnlock,
    handlePaymentComplete,
    handleCloseModal,
  } = useArticlePayment(article, pubkey ?? null, () => {
    onUnlock?.(article)
  }, connect)

  return (
    <article className="border border-neon-cyan/30 rounded-lg p-6 bg-cyber-dark hover:border-neon-cyan/50 hover:shadow-glow-cyan transition-all">
      <h2 className="text-2xl font-bold mb-2 text-neon-cyan">{article.title}</h2>
      <div className="text-cyber-accent mb-4">
        <ArticlePreview
          article={article}
          loading={loading}
          onUnlock={() => {
            void handleUnlock()
          }}
        />
      </div>
      <ArticleMeta
        article={article}
        error={error}
        paymentInvoice={paymentInvoice}
        onClose={handleCloseModal}
        onPaymentComplete={() => {
          void handlePaymentComplete()
        }}
      />
    </article>
  )
}