import React from 'react'
import {View, Text, StyleSheet, Pressable, Linking} from 'react-native'

interface AppInfoProps {
  onLinkPress?: (url: string) => void
}

export default function AppInfo({onLinkPress}: AppInfoProps) {
  const handleLinkPress = (url: string) => {
    if (onLinkPress) {
      onLinkPress(url)
    } else {
      Linking.openURL(url)
    }
  }

  return (
    <View style={styles.container}>
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>About This App</Text>
        <Text style={styles.paragraph}>
          This is a customized AT Protocol social networking client. It allows you to
          connect to any Personal Data Server (PDS) and participate in the decentralized
          social network.
        </Text>
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Key Features</Text>
        <View style={styles.list}>
          <Text style={styles.listItem}>• Connect to any AT Protocol PDS</Text>
          <Text style={styles.listItem}>• Post text, images, and videos</Text>
          <Text style={styles.listItem}>• Follow users and view timelines</Text>
          <Text style={styles.listItem}>• Customize feeds and moderation settings</Text>
          <Text style={styles.listItem}>• Direct messaging support</Text>
        </View>
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Open Source</Text>
        <Text style={styles.paragraph}>
          This application is based on the Bluesky social-app, licensed under the MIT
          License. The original source code is available at:
        </Text>
        <Pressable
          onPress={() =>
            handleLinkPress('https://github.com/bluesky-social/social-app')
          }>
          <Text style={styles.link}>github.com/bluesky-social/social-app</Text>
        </Pressable>
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>AT Protocol</Text>
        <Text style={styles.paragraph}>
          This app uses the AT Protocol (Authenticated Transfer Protocol), an open and
          decentralized standard for social applications.
        </Text>
        <Pressable onPress={() => handleLinkPress('https://atproto.com')}>
          <Text style={styles.link}>atproto.com</Text>
        </Pressable>
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>License</Text>
        <Text style={styles.paragraph}>
          Copyright 2023–2025 Bluesky Social PBC
        </Text>
        <Text style={styles.paragraph}>
          Permission is hereby granted, free of charge, to any person obtaining a copy
          of this software and associated documentation files (the "Software"), to deal
          in the Software without restriction, including without limitation the rights
          to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
          copies of the Software.
        </Text>
        <Text style={styles.paragraph}>
          THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND.
        </Text>
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Contact</Text>
        <Pressable onPress={() => handleLinkPress('https://syu.is')}>
          <Text style={styles.link}>https://syu.is</Text>
        </Pressable>
      </View>

      <View style={styles.section}>
        <Text style={styles.versionText}>Version 1.0.0</Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: '600',
    color: '#1d1d1f',
    marginBottom: 12,
  },
  paragraph: {
    fontSize: 15,
    lineHeight: 22,
    color: '#3a3a3c',
    marginBottom: 8,
  },
  list: {
    marginLeft: 8,
    marginTop: 8,
  },
  listItem: {
    fontSize: 15,
    lineHeight: 24,
    color: '#3a3a3c',
  },
  link: {
    fontSize: 15,
    color: '#007aff',
    textDecorationLine: 'underline',
    marginTop: 8,
  },
  versionText: {
    fontSize: 13,
    color: '#8e8e93',
    fontStyle: 'italic',
  },
})