import { Modal } from './ui'
import type { ArticleDraft } from '@/lib/articlePublisher'
import { t } from '@/lib/i18n'

interface ArticlePreviewModalProps {
  isOpen: boolean
  onClose: () => void
  draft: ArticleDraft
}

export function ArticlePreviewModal({ isOpen, onClose, draft }: ArticlePreviewModalProps): React.ReactElement {
  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title={t('article.preview.title')}
      size="large"
    >
      <ArticlePreviewContent draft={draft} />
    </Modal>
  )
}

function ArticlePreviewContent({ draft }: { draft: ArticleDraft }): React.ReactElement {
  return (
    <div className="space-y-6">
      <ArticlePreviewHeader draft={draft} />
      <ArticlePreviewBody draft={draft} />
      <ArticlePreviewMeta draft={draft} />
    </div>
  )
}

function ArticlePreviewHeader({ draft }: { draft: ArticleDraft }): React.ReactElement {
  return (
    <div className="border-b border-neon-cyan/30 pb-4">
      <h2 className="text-2xl font-bold text-neon-cyan mb-2">{draft.title || t('article.preview.noTitle')}</h2>
      {draft.category && (
        <span className="text-sm text-cyber-accent/70">
          {t(`category.${draft.category}`)}
        </span>
      )}
    </div>
  )
}

function ArticlePreviewBody({ draft }: { draft: ArticleDraft }): React.ReactElement {
  return (
    <div className="space-y-4">
      {draft.preview && (
        <div>
          <h3 className="text-sm font-semibold text-neon-cyan mb-2">{t('article.preview.previewLabel')}</h3>
          <p className="text-cyber-accent whitespace-pre-wrap">{draft.preview}</p>
        </div>
      )}
      {draft.content && (
        <div>
          <h3 className="text-sm font-semibold text-neon-cyan mb-2">{t('article.preview.contentLabel')}</h3>
          <p className="text-sm text-cyber-accent/80 whitespace-pre-wrap">{draft.content}</p>
        </div>
      )}
      {(!draft.preview && !draft.content) && (
        <p className="text-cyber-accent/50 italic">{t('article.preview.empty')}</p>
      )}
    </div>
  )
}

function ArticlePreviewMeta({ draft }: { draft: ArticleDraft }): React.ReactElement {
  return (
    <div className="border-t border-neon-cyan/30 pt-4 text-xs text-cyber-accent/70 space-y-2">
      <div>
        <span className="font-semibold">{t('article.preview.zapAmount')}:</span> {draft.zapAmount} sats
      </div>
      {draft.seriesId && (
        <div>
          <span className="font-semibold">{t('article.preview.series')}:</span> {draft.seriesId}
        </div>
      )}
      {draft.media && draft.media.length > 0 && (
        <div>
          <span className="font-semibold">{t('article.preview.media')}:</span> {draft.media.length} {t('article.preview.mediaItems')}
        </div>
      )}
    </div>
  )
}