import React, {useState} from 'react'
import {
  View,
  ScrollView,
  StyleSheet,
  Pressable,
  Image,
} from 'react-native'
import * as Clipboard from 'expo-clipboard'
import * as WebBrowser from 'expo-web-browser'
import {Trans} from '@lingui/macro'

import * as Layout from '#/components/Layout'
import {Text} from '#/components/Typography'
import {useSetTitle} from '#/lib/hooks/useSetTitle'
import {atoms as a, useTheme} from '#/alf'

const APP_VERSION = '1.111.0'
const APP_NAME = 'Aiat'
const BITCOIN_ADDRESS = '3BqHXxraZyBapyNpJmniJDh9zqzuB8aoRr'

export function AppInfoScreen() {
  useSetTitle('App Info')
  const t = useTheme()
  const [copied, setCopied] = useState(false)

  const copyToClipboard = async (text: string) => {
    try {
      await Clipboard.setStringAsync(text)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (e) {
      console.log('Clipboard not available')
    }
  }

  const openUrl = (url: string) => {
    WebBrowser.openBrowserAsync(url)
  }

  return (
    <Layout.Screen>
      <Layout.Header.Outer>
        <Layout.Header.BackButton />
        <Layout.Header.Content>
          <Layout.Header.TitleText>
            <Trans>App Info</Trans>
          </Layout.Header.TitleText>
        </Layout.Header.Content>
        <Layout.Header.Slot />
      </Layout.Header.Outer>
      <Layout.Content>
        <ScrollView
          style={[a.flex_1]}
          contentContainerStyle={[a.p_lg, a.pt_xl, a.pb_5xl]}>
          {/* App Header */}
          <View style={styles.appHeader}>
            <View style={[styles.appIconContainer, t.atoms.bg_contrast_25]}>
              <Image
                source={require('../../../assets/logo.png')}
                style={styles.appIcon}
                resizeMode="cover"
              />
            </View>
            <Text style={[styles.appName, t.atoms.text]}>
              {APP_NAME}
            </Text>
            <Text style={[styles.appVersion, t.atoms.text_contrast_medium]}>
              v{APP_VERSION}
            </Text>
          </View>

          {/* Description Section */}
          <View style={[styles.section, t.atoms.bg_contrast_25]}>
            <Text style={[styles.description, t.atoms.text]}>
              {APP_NAME} is a social networking application based on AT Protocol.
              Connect with your community on syu.is.
            </Text>
          </View>

          {/* App Information Section */}
          <View style={[styles.section, t.atoms.bg_contrast_25]}>
            <Text style={[styles.sectionTitle, t.atoms.text_contrast_medium]}>
              App Information
            </Text>
            <View style={styles.infoGrid}>
              <View style={[styles.infoItem, t.atoms.bg_contrast_50]}>
                <Text style={[styles.infoLabel, t.atoms.text_contrast_medium]}>
                  Version
                </Text>
                <Text style={[styles.infoValue, t.atoms.text]}>
                  {APP_VERSION}
                </Text>
              </View>
              <View style={[styles.infoItem, t.atoms.bg_contrast_50]}>
                <Text style={[styles.infoLabel, t.atoms.text_contrast_medium]}>
                  Category
                </Text>
                <Text style={[styles.infoValue, t.atoms.text]}>
                  Social
                </Text>
              </View>
              <View style={[styles.infoItem, t.atoms.bg_contrast_50]}>
                <Text style={[styles.infoLabel, t.atoms.text_contrast_medium]}>
                  Supported OS
                </Text>
                <Text style={[styles.infoValue, t.atoms.text]}>
                  iOS 26.0+
                </Text>
              </View>
              <View style={[styles.infoItem, t.atoms.bg_contrast_50]}>
                <Text style={[styles.infoLabel, t.atoms.text_contrast_medium]}>
                  Price
                </Text>
                <Text style={[styles.infoValue, t.atoms.text]}>
                  Free
                </Text>
              </View>
            </View>
          </View>

          {/* Developer Section */}
          <View style={[styles.section, t.atoms.bg_contrast_25]}>
            <Text style={[styles.sectionTitle, t.atoms.text_contrast_medium]}>
              Developer
            </Text>
            <View style={styles.developerCard}>
              <Text style={[styles.developerName, t.atoms.text]}>syui</Text>
            </View>

            <Pressable
              onPress={() => openUrl('https://github.com/syui')}
              style={[styles.linkRow, t.atoms.border_contrast_low]}>
              <Text style={[styles.linkIcon, t.atoms.text_contrast_medium]}>
                GitHub
              </Text>
              <Text style={[styles.linkValue, {color: '#0084ff'}]}>
                github.com/syui
              </Text>
              <Text style={[styles.linkArrow, t.atoms.text_contrast_low]}>→</Text>
            </Pressable>

            <Pressable
              onPress={() => openUrl('https://syu.is/syui')}
              style={[styles.linkRow, t.atoms.border_contrast_low]}>
              <Text style={[styles.linkIcon, t.atoms.text_contrast_medium]}>
                ATProto
              </Text>
              <Text style={[styles.linkValue, {color: '#0084ff'}]}>
                syu.is/syui
              </Text>
              <Text style={[styles.linkArrow, t.atoms.text_contrast_low]}>→</Text>
            </Pressable>
          </View>

          {/* Bitcoin Section */}
          <View style={[styles.section, t.atoms.bg_contrast_25]}>
            <Text style={[styles.sectionTitle, t.atoms.text_contrast_medium]}>
              Bitcoin
            </Text>
            <Pressable
              onPress={() => copyToClipboard(BITCOIN_ADDRESS)}
              style={styles.bitcoinRow}>
              <Text style={styles.bitcoinLabel}>₿</Text>
              <Text style={[styles.bitcoinAddress, t.atoms.text_contrast_medium]}>
                {BITCOIN_ADDRESS}
              </Text>
              <Text style={[styles.copyHint, copied && styles.copiedHint]}>
                {copied ? 'copied!' : 'copy'}
              </Text>
            </Pressable>
          </View>

          {/* Copyright */}
          <View style={styles.copyright}>
            <Text style={[styles.copyrightText, t.atoms.text_contrast_low]}>
              © syui
            </Text>
          </View>
        </ScrollView>
      </Layout.Content>
    </Layout.Screen>
  )
}

const styles = StyleSheet.create({
  appHeader: {
    alignItems: 'center',
    marginBottom: 24,
  },
  appIconContainer: {
    width: 80,
    height: 80,
    borderRadius: 18,
    overflow: 'hidden',
    marginBottom: 12,
  },
  appIcon: {
    width: '100%',
    height: '100%',
  },
  appName: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  appVersion: {
    fontSize: 14,
  },
  section: {
    marginBottom: 16,
    borderRadius: 16,
    padding: 16,
  },
  sectionTitle: {
    fontSize: 13,
    fontWeight: '600',
    textTransform: 'uppercase',
    letterSpacing: 0.5,
    marginBottom: 12,
  },
  description: {
    fontSize: 15,
    lineHeight: 22,
  },
  infoGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
  },
  infoItem: {
    flex: 1,
    minWidth: '45%',
    alignItems: 'center',
    borderRadius: 12,
    padding: 12,
  },
  infoLabel: {
    fontSize: 11,
    textTransform: 'uppercase',
    letterSpacing: 0.5,
    marginBottom: 4,
  },
  infoValue: {
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
  },
  developerCard: {
    marginBottom: 12,
  },
  developerName: {
    fontSize: 18,
    fontWeight: '600',
  },
  linkRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    borderTopWidth: 1,
  },
  linkIcon: {
    fontSize: 14,
    fontWeight: '600',
    width: 70,
  },
  linkValue: {
    flex: 1,
    fontSize: 14,
  },
  linkArrow: {
    fontSize: 16,
  },
  bitcoinRow: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(247, 147, 26, 0.08)',
    borderRadius: 12,
    padding: 14,
    gap: 10,
  },
  bitcoinLabel: {
    fontSize: 18,
    fontWeight: '600',
    color: '#f7931a',
  },
  bitcoinAddress: {
    flex: 1,
    fontSize: 11,
    fontFamily: 'monospace',
  },
  copyHint: {
    fontSize: 12,
    color: '#999999',
    minWidth: 50,
    textAlign: 'right',
  },
  copiedHint: {
    color: '#4CAF50',
    fontWeight: '600',
  },
  copyright: {
    alignItems: 'center',
    marginTop: 20,
    marginBottom: 20,
  },
  copyrightText: {
    fontSize: 12,
  },
})