import {useCallback, useMemo, useRef, useState} from 'react'
import {StyleSheet, useWindowDimensions, View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {AppBskyFeedDefs} from '@atproto/api'

import {isNative} from '#/platform/detection'
import {cleanError} from '#/lib/strings/errors'
import {HITSLOP_10} from '#/lib/constants'
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
import {makeRecordUri} from '#/lib/strings/url-helpers'
import {useSetMinimalShellMode} from '#/state/shell'
import {PostThread as PostThreadComponent} from '#/view/com/post-thread/PostThread'
import * as Layout from '#/components/Layout'
import {useSession} from '#/state/session'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
import {useGetPostThreadV2, Slice, HiddenReplyKind} from '#/state/queries/useGetPostThreadV2'
import * as Menu from '#/components/Menu'
import {Button, ButtonIcon} from '#/components/Button'
import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
import {Text} from '#/components/Typography'
import {ScrollProvider} from '#/lib/ScrollContext'
import {List, ListMethods} from '#/view/com/util/List'
import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
import {PostThreadItem} from '#/view/com/post-thread/PostThreadItem'
import {PostThreadComposePrompt} from '#/view/com/post-thread/PostThreadComposePrompt'
import {usePreferencesQuery} from '#/state/queries/preferences'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {PostThreadShowHiddenReplies} from '#/view/com/post-thread/PostThreadShowHiddenReplies'

const MAINTAIN_VISIBLE_CONTENT_POSITION = {
  // We don't insert any elements before the root row while loading.
  // So the row we want to use as the scroll anchor is the first row.
  minIndexForVisible: 1,
}

type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
export function PostThreadScreen({route}: Props) {
  const setMinimalShellMode = useSetMinimalShellMode()

  const {name, rkey} = route.params
  const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)

  useFocusEffect(
    useCallback(() => {
      setMinimalShellMode(false)
    }, [setMinimalShellMode]),
  )

  return (
    <Layout.Screen testID="postThreadScreen">
      {/* <PostThreadComponent uri={uri} /> */}
      <Inner uri={uri} />
    </Layout.Screen>
  )
}

function useThreadPreferences() {
  const {data: preferences} = usePreferencesQuery()
  const nextThreadPreferences = preferences?.threadViewPrefs

  /*
   * Create local state representations of server state
   */
  const [sortReplies, setSortReplies] = useState(
    nextThreadPreferences?.sort ?? 'hotness',
  )
  const [prioritizeFollowedUsers, setPrioritizeFollowedUsers] = useState(
    !!nextThreadPreferences?.prioritizeFollowedUsers,
  )
  const [treeViewEnabled, setTreeViewEnabled] = useState(
    !!nextThreadPreferences?.lab_treeViewEnabled,
  )

  /**
   * Cache existing and if we get a server update, reset local state
   */
  const [prevServerPrefs, setPrevServerPrefs] = useState(nextThreadPreferences)
  if (nextThreadPreferences && prevServerPrefs !== nextThreadPreferences) {
    setPrevServerPrefs(nextThreadPreferences)

    /*
     * Reset
     */
    setSortReplies(nextThreadPreferences.sort)
    setPrioritizeFollowedUsers(nextThreadPreferences.prioritizeFollowedUsers)
    setTreeViewEnabled(!!nextThreadPreferences.lab_treeViewEnabled)
  }

  const isLoaded = !!prevServerPrefs

  return useMemo(() => ({
    isLoaded,
    sortReplies,
    setSortReplies,
    prioritizeFollowedUsers,
    setPrioritizeFollowedUsers,
    treeViewEnabled,
    setTreeViewEnabled,
  }), [
    isLoaded,
    sortReplies,
    setSortReplies,
    prioritizeFollowedUsers,
    setPrioritizeFollowedUsers,
    treeViewEnabled,
    setTreeViewEnabled,
  ])
}

export function Inner({uri}: {uri: string | undefined}) {
  const t = useTheme()
  const {_} = useLingui()
  const {gtPhone} = useBreakpoints()
  // const {hasSession, currentAccount} = useSession()
  const initialNumToRender = useInitialNumToRender()
  const {height: windowHeight} = useWindowDimensions()

  const {
    isLoaded: isThreadPreferencesLoaded,
    sortReplies,
    setSortReplies,
    prioritizeFollowedUsers,
    treeViewEnabled,
    setTreeViewEnabled,
  } = useThreadPreferences()

  const [showHiddenReplies, setShowHiddenReplies] = useState<HiddenReplyKind | null>(null)
  const [shownHiddenReplyKinds, setShownHiddenReplyKinds] = useState<Set<HiddenReplyKind>>(new Set())

  const {isFetching, isPlaceholderData, error, data, refetch} = useGetPostThreadV2({
    uri,
    enabled: isThreadPreferencesLoaded,
    params: {
      sort: sortReplies,
      view: treeViewEnabled ? 'tree' : 'linear',
      prioritizeFollows: prioritizeFollowedUsers,
    },
    state: {
      shownHiddenReplyKinds,
    }
  })

  const ref = useRef<ListMethods>(null)
  const layoutHeaderRef = useRef<View | null>(null)
  const anchorPostRef = useRef<View | null>(null)
  // TODO
  const [justPostedUris, setJustPostedUris] = useState(
    () => new Set<string>(),
  )

  const onPostReply = useCallback(
    (postUri: string | undefined) => {
      refetch()
      if (postUri) {
        setJustPostedUris(set => {
          const nextSet = new Set(set)
          nextSet.add(postUri)
          return nextSet
        })
      }
    },
    [refetch],
  )

  const optimisticOnPostReply = ({
    post,
  }: {
    post: AppBskyFeedDefs.ThreadItemPost,
  }) => (_: any, posts: AppBskyFeedDefs.ThreadItemPost[]) => {
    const parentDepth = post.depth
    if (posts.length) {
      for (let i = 0; i < posts.length; i++) {
        const p = posts[i]
        p.depth = parentDepth + 1 + i
      }
    }
  }

  const {openComposer} = useOpenComposer()
  const onReplyToAnchor = () => {
    const anchorPost = data?.slices.find(slice => slice.type === 'threadSlice' && slice.ui.isAnchor)
    if (anchorPost?.type !== 'threadSlice') {
      return
    }
    const post = anchorPost.slice.post
    openComposer({
      replyTo: {
        uri: anchorPost.slice.uri,
        cid: post.cid,
        text: post.record.text,
        author: post.author,
        embed: post.embed,
        moderation: anchorPost.moderation,
      },
      onPost: optimisticOnPostReply({post:anchorPost.slice}),
    })
  }

  const renderItem = ({item, index}: {item: Slice; index: number}) => {
    if (item.type === 'threadSlice') {
      return (
        <View ref={item.ui.isAnchor ? anchorPostRef : undefined}>
          <PostThreadItem
            post={item.slice.post}
            record={item.slice.post.record}
            threadgateRecord={data?.threadgate?.record ?? undefined}
            moderation={item.moderation}
            treeView={treeViewEnabled}
            depth={item.slice.depth}
            // TODO
            // prevPost={prev}
            // nextPost={next}
            isHighlightedPost={item.ui.isAnchor}
            hasMore={item.slice.hasUnhydratedReplies}
            showChildReplyLine={item.ui.showChildReplyLine}
            showParentReplyLine={item.ui.showParentReplyLine}
            hasPrecedingItem={
              item.ui.showParentReplyLine || !!item.slice.hasUnhydratedParents
            } // !!hasUnrevealedParents // TODO
            overrideBlur={
              shownHiddenReplyKinds.has(HiddenReplyKind.Muted) && item.slice.depth > 0
            }
            onPostReply={optimisticOnPostReply({post:item.slice})}
            hideTopBorder={index === 0} // && !item.slice.isParentLoading} // TODO
          />
        </View>
      )
    } else if (item.type === 'threadSliceBlocked') {
      return (
        <View
          style={[
            a.p_lg,
            index !== 0 && a.border_t,
            t.atoms.border_contrast_low,
            t.atoms.bg_contrast_25,
          ]}>
          <Text style={[a.font_bold, a.text_md, t.atoms.text_contrast_medium]}>
            <Trans>Blocked post.</Trans>
          </Text>
        </View>
      )
    } else if (item.type === 'threadSliceNotFound') {
      return (
        <View
          style={[
            a.p_lg,
            index !== 0 && a.border_t,
            t.atoms.border_contrast_low,
            t.atoms.bg_contrast_25,
          ]}>
          <Text style={[a.font_bold, a.text_md, t.atoms.text_contrast_medium]}>
            <Trans>Deleted post.</Trans>
          </Text>
        </View>
      )
    } else if (item.type === 'replyComposer') {
      return (
        <View>
          {gtPhone && <PostThreadComposePrompt onPressCompose={onReplyToAnchor} />}
        </View>
      )
    } else if (item.type === 'showHiddenReplies') {
      return (
        <PostThreadShowHiddenReplies
          type={item.kind === 'muted' ? 'muted' : 'hidden'}
          onPress={() => setShownHiddenReplyKinds(kinds => new Set([...kinds, item.kind]))}
        />
      )
    }
    return null
  }

  /*
   * This is only used on the web to keep the post in view when its parents
   * load. On native, we rely on `maintainVisibleContentPosition` instead.
   *
   * This runs synchronously before layout, meaning by the time the page
   * paints, we've already measured and adjusted the scroll position of the
   * list.
   */
  const didAdjustScrollWeb = useRef<boolean>(false)
  const onContentSizeChangeWeb = () => {
    // only run once
    if (didAdjustScrollWeb.current) return
    if (!isPlaceholderData) {
      // Measure synchronously to avoid a layout jump.
      const anchorPost = anchorPostRef.current as any as Element
      const headerNode = layoutHeaderRef.current as any as Element
      if (anchorPost && headerNode) {
        // get new scroll position
        let pageY = anchorPost.getBoundingClientRect().top
        // subtract header height
        pageY -= headerNode.getBoundingClientRect().height
        // don't scroll past 0
        pageY = Math.max(0, pageY)
        ref.current?.scrollToOffset({
          animated: false,
          offset: pageY,
        })
        didAdjustScrollWeb.current = true
      }
    }
  }

  return (
    <>
      <Layout.Header.Outer headerRef={layoutHeaderRef}>
        <Layout.Header.BackButton />
        <Layout.Header.Content>
          <Layout.Header.TitleText>
            <Trans context="description">Post</Trans>
          </Layout.Header.TitleText>
        </Layout.Header.Content>
        <Layout.Header.Slot>
          <ThreadMenu
            sortReplies={sortReplies}
            treeViewEnabled={treeViewEnabled}
            setSortReplies={setSortReplies}
            setTreeViewEnabled={setTreeViewEnabled}
          />
        </Layout.Header.Slot>
      </Layout.Header.Outer>

      {error ? (
        <PostThreadError error={error} />
      ) : (
        <ScrollProvider
        // onMomentumEnd={onMomentumEnd}
        >
          <List
            ref={ref}
            data={data?.slices ?? []}
            renderItem={renderItem}
            keyExtractor={keyExtractor}
            onContentSizeChange={isNative ? undefined : onContentSizeChangeWeb}
            // onStartReached={onStartReached}
            // onEndReached={onEndReached}
            onEndReachedThreshold={2}
            // onScrollToTop={onScrollToTop}
            /**
             * @see https://reactnative.dev/docs/scrollview#maintainvisiblecontentposition
             */
            maintainVisibleContentPosition={
             isNative // && hasParents // TODO not sure we need this
               ? MAINTAIN_VISIBLE_CONTENT_POSITION
               : undefined
            }
            desktopFixedHeight
            // removeClippedSubviews={isAndroid ? false : undefined}
            ListFooterComponent={
              <ListFooter
                /*
                 * Using `isFetching` over `isFetchingNextPage` is done on
                 * purpose here so we get the loader on initial render
                 */
                isFetchingNextPage={isFetching}
                error={cleanError(error)}
                onRetry={refetch}
                /*
                 * 200 is based on the minimum height of a post. This is enough
                 * extra height for the `maintainVisPos` to work without
                 * causing weird jumps on web or glitches on native
                 */
                height={windowHeight - 200}
              />
            }
            initialNumToRender={initialNumToRender}
            windowSize={11}
            sideBorders={false}
          />
        </ScrollProvider>
      )}
    </>
  )
}

function PostThreadError({error}: {error: Error}) {
  const {_} = useLingui()

  // TODO use new cleanError hook
  const {title, message} = useMemo(() => {
    let title = _(msg`An error occurred`)
    let message = cleanError(error)

    if (error.message.startsWith('Post not found')) {
      title = _(msg`Post not found`)
      message = _(msg`The post may have been deleted.`)
    }
    return {title, message}
  }, [_, error])

  return <View />
}

function ThreadMenu({
  sortReplies,
  treeViewEnabled,
  setSortReplies,
  setTreeViewEnabled,
}: {
  sortReplies: string
  treeViewEnabled: boolean
  setSortReplies: (newValue: string) => void
  setTreeViewEnabled: (newValue: boolean) => void
}): React.ReactNode {
  const {_} = useLingui()
  return (
    <Menu.Root>
      <Menu.Trigger label={_(msg`Thread options`)}>
        {({props}) => (
          <Button
            label={_(msg`Thread options`)}
            size="small"
            variant="ghost"
            color="secondary"
            shape="round"
            hitSlop={HITSLOP_10}
            {...props}>
            <ButtonIcon icon={SettingsSlider} size="md" />
          </Button>
        )}
      </Menu.Trigger>
      <Menu.Outer>
        <Menu.LabelText>
          <Trans>Show replies as</Trans>
        </Menu.LabelText>
        <Menu.Group>
          <Menu.Item
            label={_(msg`Linear`)}
            onPress={() => {
              setTreeViewEnabled(false)
            }}>
            <Menu.ItemText>
              <Trans>Linear</Trans>
            </Menu.ItemText>
            <Menu.ItemRadio selected={!treeViewEnabled} />
          </Menu.Item>
          <Menu.Item
            label={_(msg`Threaded`)}
            onPress={() => {
              setTreeViewEnabled(true)
            }}>
            <Menu.ItemText>
              <Trans>Threaded</Trans>
            </Menu.ItemText>
            <Menu.ItemRadio selected={treeViewEnabled} />
          </Menu.Item>
        </Menu.Group>
        <Menu.Divider />
        <Menu.LabelText>
          <Trans>Reply sorting</Trans>
        </Menu.LabelText>
        <Menu.Group>
          <Menu.Item
            label={_(msg`Hot replies first`)}
            onPress={() => {
              setSortReplies('hotness')
            }}>
            <Menu.ItemText>
              <Trans>Hot replies first</Trans>
            </Menu.ItemText>
            <Menu.ItemRadio selected={sortReplies === 'hotness'} />
          </Menu.Item>
          <Menu.Item
            label={_(msg`Oldest replies first`)}
            onPress={() => {
              setSortReplies('oldest')
            }}>
            <Menu.ItemText>
              <Trans>Oldest replies first</Trans>
            </Menu.ItemText>
            <Menu.ItemRadio selected={sortReplies === 'oldest'} />
          </Menu.Item>
          <Menu.Item
            label={_(msg`Newest replies first`)}
            onPress={() => {
              setSortReplies('newest')
            }}>
            <Menu.ItemText>
              <Trans>Newest replies first</Trans>
            </Menu.ItemText>
            <Menu.ItemRadio selected={sortReplies === 'newest'} />
          </Menu.Item>
          <Menu.Item
            label={_(msg`Most-liked replies first`)}
            onPress={() => {
              setSortReplies('most-likes')
            }}>
            <Menu.ItemText>
              <Trans>Most-liked replies first</Trans>
            </Menu.ItemText>
            <Menu.ItemRadio selected={sortReplies === 'most-likes'} />
          </Menu.Item>
          <Menu.Item
            label={_(msg`Random (aka "Poster's Roulette")`)}
            onPress={() => {
              setSortReplies('random')
            }}>
            <Menu.ItemText>
              <Trans>Random (aka "Poster's Roulette")</Trans>
            </Menu.ItemText>
            <Menu.ItemRadio selected={sortReplies === 'random'} />
          </Menu.Item>
        </Menu.Group>
      </Menu.Outer>
    </Menu.Root>
  )
}

const keyExtractor = (item: Slice) => {
  return item.key
}