import Explore from '@/components/Explore'
import FollowingFavoriteRelayList from '@/components/FollowingFavoriteRelayList'
import NoteList from '@/components/NoteList'
import Tabs from '@/components/Tabs'
import { ExtendedKind } from '@/constants'
import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
import { getReplaceableEventIdentifier } from '@/lib/event'
import { getDefaultRelayUrls } from '@/lib/relay'
import { isLocalNetworkUrl, isOnionUrl, isWebsocketUrl } from '@/lib/url'
import storage from '@/services/local-storage.service'
import { TPageRef } from '@/types'
import { Compass } from 'lucide-react'
import { NostrEvent } from 'nostr-tools'
import { forwardRef, useCallback, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'

type TExploreTabs = 'following' | 'explore' | 'reviews'

const ExplorePage = forwardRef<TPageRef>((_, ref) => {
  const [tab, setTab] = useState<TExploreTabs>('explore')
  const topRef = useRef<HTMLDivElement | null>(null)

  const relayReviewFilterFn = useCallback((evt: NostrEvent) => {
    const d = getReplaceableEventIdentifier(evt)
    if (!d) return false

    if (!isWebsocketUrl(d)) {
      return false
    }
    if (isLocalNetworkUrl(d)) {
      return false
    }
    if (storage.getFilterOutOnionRelays() && isOnionUrl(d)) {
      return false
    }
    return true
  }, [])

  const content = useMemo(() => {
    return tab === 'explore' ? (
      <Explore />
    ) : tab === 'reviews' ? (
      <NoteList
        showKinds={[ExtendedKind.RELAY_REVIEW]}
        subRequests={[{ urls: getDefaultRelayUrls(), filter: {} }]}
        filterFn={relayReviewFilterFn}
        filterMutedNotes
        hideSpam
      />
    ) : (
      <FollowingFavoriteRelayList />
    )
  }, [tab, relayReviewFilterFn])

  return (
    <PrimaryPageLayout
      ref={ref}
      pageName="explore"
      titlebar={<ExplorePageTitlebar />}
      displayScrollToTopButton
    >
      <Tabs
        value={tab}
        tabs={[
          { value: 'explore', label: 'Explore' },
          { value: 'reviews', label: 'Reviews' },
          { value: 'following', label: "Following's Favorites" }
        ]}
        onTabChange={(tab) => {
          setTab(tab as TExploreTabs)
          topRef.current?.scrollIntoView({ behavior: 'instant' })
        }}
      />
      <div ref={topRef} className="scroll-mt-[calc(6rem+1px)]" />
      {content}
    </PrimaryPageLayout>
  )
})
ExplorePage.displayName = 'ExplorePage'
export default ExplorePage

function ExplorePageTitlebar() {
  const { t } = useTranslation()

  return (
    <div className="flex h-full justify-between gap-2">
      <div className="flex h-full items-center gap-2 pl-3">
        <Compass />
        <div className="text-lg font-semibold">{t('Explore')}</div>
      </div>
      {/* Placeholder for future right-aligned items */}
    </div>
  )
}
