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 { t } from '@/lib/i18n'
import Link from 'next/link'

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

function ArticleHeader({ article }: { article: Article }) {
  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
}) {
  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}
        />
      )}
    </>
  )
}

export function ArticleCard({ article, onUnlock }: ArticleCardProps) {
  const { pubkey, connect } = useNostrAuth()
  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">
      <ArticleHeader article={article} />
      <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>
  )
}