import {Fragment, type ReactNode} from 'react'
import {View} from 'react-native'
import {AtUri} from '@atproto/api'
import {Trans, useLingui} from '@lingui/react/macro'

import {makeProfileLink} from '#/lib/routes/links'
import {toNiceDomain} from '#/lib/strings/url-helpers'
import {atoms as a, useTheme} from '#/alf'
import {StandardSite} from '#/components/icons/community/StandardSite'
import {InlineLinkText} from '#/components/Link'
import {
  matchStandardSitePublisher,
  matchStandardSitePublisherByUri,
} from '#/components/Post/Embed/StandardSiteEmbed/publishers'
import type * as ssTypes from '#/components/Post/Embed/StandardSiteEmbed/types'
import {
  isStandardSiteDocumentUri,
  isStandardSitePublicationUri,
} from '#/components/Post/Embed/StandardSiteEmbed/utils'
import {Text} from '#/components/Typography'
import {useAnalytics} from '#/analytics'

export function StandardSiteMetaRow({
  type = 'document',
  preview,
  view,
}: ssTypes.CommonProps &
  ssTypes.PreviewProps & {
    type?: 'document' | 'publication'
  }) {
  const ax = useAnalytics()
  const t = useTheme()
  const {t: l} = useLingui()
  const highlightedPublisher = !!matchStandardSitePublisher(view)
  const didsFromRecords =
    view.associatedRefs
      ?.filter(
        type === 'document'
          ? isStandardSiteDocumentUri
          : isStandardSitePublicationUri,
      )
      .map(ref => new AtUri(ref.uri).host) || []
  // atm should only be one docment
  const authorDid = didsFromRecords.at(0)
  const authorProfile = authorDid
    ? view.associatedProfiles?.find(p => p.did === authorDid)
    : undefined
  const articleDomain = toNiceDomain(view.uri)
  const articlePublisher = matchStandardSitePublisherByUri(view.uri)
  const DomainIcon = articlePublisher?.Icon || StandardSite
  const metaTextStyle = [
    a.text_xs,
    a.leading_tight,
    t.atoms.text_contrast_medium,
  ]

  const items: {key: string; node: ReactNode}[] = []

  if (!highlightedPublisher) {
    items.push({
      key: 'domain',
      node: (
        <View style={[a.flex_shrink, a.flex_row, a.align_center, a.gap_2xs]}>
          {DomainIcon && (
            <DomainIcon size="xs" fill={t.atoms.text_contrast_medium.color} />
          )}
          <Text numberOfLines={1} style={[metaTextStyle, a.flex_shrink]}>
            {articleDomain}
          </Text>
        </View>
      ),
    })
  }

  if (authorProfile) {
    items.push({
      key: 'author',
      node: (
        <Text numberOfLines={1} style={[metaTextStyle]}>
          <Trans>
            by{' '}
            <InlineLinkText
              label={l`View @${authorProfile.handle}'s profile`}
              to={makeProfileLink(authorProfile)}
              style={[
                metaTextStyle,
                preview ? a.pointer_events_none : a.pointer_events_auto,
              ]}
              onPress={e => {
                e.stopPropagation()
                e.preventDefault()
                ax.metric('embed:standardSite:authorHandle:press', {
                  handle: authorProfile.handle,
                })
              }}>
              @{authorProfile.handle}
            </InlineLinkText>
          </Trans>
        </Text>
      ),
    })
  }

  if (items.length === 0) return null

  return (
    <View style={[a.flex_row, a.align_center, a.gap_xs, a.z_10]}>
      {items.map((item, i) => (
        <Fragment key={item.key}>
          {i > 0 && <Text style={metaTextStyle}>•</Text>}
          {item.node}
        </Fragment>
      ))}
    </View>
  )
}