import type { Article } from '@/types/nostr'
import { Button } from './ui'
import { ArticlePages } from './ArticlePages'
import { ReadingMode } from './ReadingMode'
import { ShareButtons } from './ShareButtons'
import { ArticleSuggestions } from './ArticleSuggestions'
import { findSimilarArticles, findAuthorArticles } from '@/lib/articleSuggestions'

interface ArticlePreviewProps {
  article: Article
  loading: boolean
  onUnlock: () => void
  allArticles?: Article[]
  unlockedArticles?: Set<string>
}

function PaidArticleContent({
  article,
  onUnlock,
  allArticles,
  unlockedArticles,
}: {
  article: Article
  onUnlock: () => void
  allArticles: Article[]
  unlockedArticles: Set<string>
}): React.ReactElement {
  const similarArticles = findSimilarArticles(article, allArticles)
  const authorArticles = findAuthorArticles(article, allArticles)

  return (
    <ReadingMode>
      <div>
        <p className="mb-2 text-cyber-accent">{article.preview}</p>
        <p className="text-sm text-cyber-accent/80 mt-4 whitespace-pre-wrap">{article.content}</p>
        {article.pages && article.pages.length > 0 && <ArticlePages pages={article.pages} articleId={article.id} />}
        <div className="mt-6 pt-4 border-t border-neon-cyan/30">
          <ShareButtons articleId={article.id} articleTitle={article.title} authorPubkey={article.pubkey} />
        </div>
        <ArticleSuggestions
          similarArticles={similarArticles}
          authorArticles={authorArticles}
          onUnlock={onUnlock}
          unlockedArticles={unlockedArticles}
        />
      </div>
    </ReadingMode>
  )
}

export function ArticlePreview({
  article,
  loading,
  onUnlock,
  allArticles = [],
  unlockedArticles = new Set(),
}: ArticlePreviewProps): React.ReactElement {
  if (article.paid) {
    return (
      <PaidArticleContent
        article={article}
        onUnlock={onUnlock}
        allArticles={allArticles}
        unlockedArticles={unlockedArticles}
      />
    )
  }

  return (
    <div>
      <p className="mb-4 text-cyber-accent">{article.preview}</p>
      <div className="border-t border-neon-cyan/30 pt-4">
        <p className="text-sm text-cyber-accent/70 mb-4">
          Contenu complet disponible après un zap de {article.zapAmount} sats
        </p>
        <Button
          variant="success"
          onClick={onUnlock}
          disabled={loading}
          loading={loading}
        >
          {loading ? 'Traitement...' : `Débloquer avec ${article.zapAmount} sats zap`}
        </Button>
      </div>
    </div>
  )
}