import Feather from '@expo/vector-icons/Feather'
import { useMMKVBoolean, useMMKVString } from 'react-native-mmkv'
import { ScreenScrollContainer } from 'src/components/layout'
import { SectionHeader, SettingRow } from 'src/components/ui'
import { haptic } from 'src/lib/haptics'
import {
  appStorage,
  type OpenLinksTarget,
  setOpenLinksTarget,
  setShowLinkFavicons,
  uiKeys,
} from 'src/state/storage'
import { Separator, useTheme, YStack } from 'tamagui'

type OpenLinksOption = {
  value: OpenLinksTarget
  label: string
  description: string
}

const OPEN_LINKS_OPTIONS: OpenLinksOption[] = [
  {
    value: 'external',
    label: 'External browser',
    description:
      'Default — open in your system default browser (iOS Settings → Default Browser App; Android default browser app).',
  },
  {
    value: 'inApp',
    label: 'In-app browser',
    description: 'Open links in an in-app browser without leaving Halflight.',
  },
]

const SHOW_LINK_FAVICONS_DEFAULT = true

export default function Screen() {
  const theme = useTheme()
  const [stored] = useMMKVString(uiKeys.openLinks, appStorage)
  const active: OpenLinksTarget = stored === 'inApp' ? 'inApp' : 'external'

  const [storedFavicons] = useMMKVBoolean(uiKeys.showLinkFavicons, appStorage)
  const faviconsEnabled = storedFavicons ?? SHOW_LINK_FAVICONS_DEFAULT

  return (
    <ScreenScrollContainer variant="scroll" header="App Behavior">
      <SectionHeader>Links</SectionHeader>
      {OPEN_LINKS_OPTIONS.map((opt, idx) => {
        const selected = active === opt.value
        return (
          <YStack key={opt.value}>
            <SettingRow
              title={opt.label}
              description={opt.description}
              onPress={() => {
                if (selected) return
                haptic.selection()
                setOpenLinksTarget(opt.value)
              }}
              accessibility={{
                role: 'radio',
                label: opt.label,
                hint: opt.description,
                state: { selected },
              }}
              trailing={
                selected ? (
                  <Feather name="check" size={20} color={theme.interactiveActive.val} />
                ) : null
              }
              tone="secondary"
            />
            {idx < OPEN_LINKS_OPTIONS.length - 1 ? (
              <Separator borderColor="$borderColor" />
            ) : null}
          </YStack>
        )
      })}
      <Separator borderColor="$borderColor" />

      <SectionHeader>Inline content</SectionHeader>
      <SettingRow
        title="Show link favicons"
        description="Display a tiny site icon next to links in posts, link previews, and profile websites. Halflight contacts each linked site once (its /favicon.ico) and caches the result locally."
        onPress={() => {
          haptic.selection()
          setShowLinkFavicons(!faviconsEnabled)
        }}
        accessibility={{
          role: 'switch',
          label: 'Show link favicons',
          state: { selected: faviconsEnabled },
        }}
        trailing={
          faviconsEnabled ? (
            <Feather name="check" size={20} color={theme.interactiveActive.val} />
          ) : null
        }
        tone="secondary"
      />
      <Separator borderColor="$borderColor" />
    </ScreenScrollContainer>
  )
}
