import { cardEventBodyBlurb } from '@/lib/card-event-body-blurb'
import { getLongFormArticleMetadataFromEvent } from '@/lib/event-metadata'
import { toNote, toNoteList } from '@/lib/link'
import { useSecondaryPageOptional } from '@/PageManager'
import { useContentPolicyOptional } from '@/providers/ContentPolicyProvider'
import { useScreenSizeOptional } from '@/providers/ScreenSizeProvider'
import { Event, kinds } from 'nostr-tools'
import { useMemo } from 'react'
import ArticleCardCoverImage from './ArticleCardCoverImage'

export default function WikiCard({
  event,
  className
}: {
  event: Event
  className?: string
}) {
  const screenSize = useScreenSizeOptional()
  const isSmallScreen = screenSize?.isSmallScreen ?? false
  const secondaryPage = useSecondaryPageOptional()
  const push = secondaryPage?.push ?? ((url: string) => { window.location.href = url })
  const contentPolicy = useContentPolicyOptional()
  const autoLoadMedia = contentPolicy?.autoLoadMedia ?? true
  const metadata = useMemo(() => getLongFormArticleMetadataFromEvent(event), [event])
  const bodyBlurb = useMemo(() => cardEventBodyBlurb(event.content), [event.content])
  const summaryText = (metadata.summary?.trim() || bodyBlurb).trim()

  const handleCardClick = (e: React.MouseEvent) => {
    e.stopPropagation()
    push(toNote(event))
  }

  const titleComponent = <div className="text-xl font-semibold break-words min-w-0 sm:line-clamp-2">{metadata.title}</div>

  const tagsComponent = metadata.tags.length > 0 && (
    <div className="flex gap-1 flex-wrap">
      {metadata.tags.map((tag) => (
        <div
          key={tag}
          className="flex items-center rounded-full text-xs px-2.5 py-0.5 bg-muted text-muted-foreground max-w-32 cursor-pointer hover:bg-accent hover:text-accent-foreground"
          onClick={(e) => {
            e.stopPropagation()
            push(toNoteList({ hashtag: tag, kinds: [kinds.LongFormArticle] }))
          }}
        >
          #<span className="truncate">{tag}</span>
        </div>
      ))}
    </div>
  )

  const summaryComponent = summaryText ? (
    <div className="text-base text-muted-foreground line-clamp-4 break-words">{summaryText}</div>
  ) : null

  if (isSmallScreen) {
    return (
      <div className={className}>
        <div 
          className="cursor-pointer rounded-lg border p-4 hover:bg-muted/50 transition-colors"
          onClick={handleCardClick}
        >
          <ArticleCardCoverImage
            event={event}
            imageUrl={metadata.image}
            autoLoadMedia={autoLoadMedia}
            layout="stacked"
            hideImageIfError
          />
          <div className="space-y-2">
            {titleComponent}
            {summaryComponent}
            {tagsComponent}
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className={className}>
      <div 
        className="cursor-pointer rounded-lg border p-4 hover:bg-muted/50 transition-colors"
        onClick={handleCardClick}
      >
        <div className="flex gap-4">
          <ArticleCardCoverImage
            event={event}
            imageUrl={metadata.image}
            autoLoadMedia={autoLoadMedia}
            layout="row"
            hideImageIfError
          />
          <div className="flex-1 w-0 space-y-2">
            {titleComponent}
            {summaryComponent}
            {tagsComponent}
          </div>
        </div>
      </div>
    </div>
  )
}