import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Linking,
  Image,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import { PageHeader } from '@/components/PageHeader';

export default function AboutScreen() {
  const openURL = (url: string) => {
    Linking.openURL(url).catch(() => {});
  };

  return (
    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
      <PageHeader title="About" />
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.scrollContent}
      >
        {/* Header */}
        <View style={styles.header}>
          <Image
            source={require('@/assets/logo.png')}
            style={styles.logo}
            resizeMode="contain"
          />
          <Text style={styles.appName}>WellNuo</Text>
          <Text style={styles.tagline}>Caring for those who matter most</Text>
          <Text style={styles.version}>Version 1.0.0</Text>
        </View>

        {/* Description */}
        <View style={styles.card}>
          <Text style={styles.cardText}>
            WellNuo helps families stay connected with their loved ones through
            smart monitoring and AI-powered insights.
          </Text>
        </View>

        {/* Features */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Features</Text>
          <View style={styles.card}>
            <FeatureItem
              icon="pulse"
              title="Activity Monitoring"
              subtitle="24/7 wellness tracking"
            />
            <FeatureItem
              icon="notifications"
              title="Smart Alerts"
              subtitle="Instant emergency notifications"
            />
            <FeatureItem
              icon="bar-chart"
              title="Health Insights"
              subtitle="AI-powered pattern analysis"
            />
            <FeatureItem
              icon="people"
              title="Family Sharing"
              subtitle="Coordinate care together"
              last
            />
          </View>
        </View>

        {/* Links */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Links</Text>
          <View style={styles.card}>
            <LinkItem
              title="Website"
              onPress={() => openURL('https://wellnuo.com')}
            />
            <LinkItem
              title="Help Center"
              onPress={() => openURL('https://docs.wellnuo.com')}
            />
            <LinkItem
              title="Privacy Policy"
              onPress={() => openURL('https://wellnuo.com/privacy')}
            />
            <LinkItem
              title="Terms of Service"
              onPress={() => openURL('https://wellnuo.com/terms')}
              last
            />
          </View>
        </View>

        {/* Footer */}
        <Text style={styles.footer}>© 2026 WellNuo Inc.</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

function FeatureItem({ icon, title, subtitle, last }: {
  icon: string;
  title: string;
  subtitle: string;
  last?: boolean;
}) {
  return (
    <View style={[styles.featureItem, !last && styles.itemBorder]}>
      <View style={styles.featureIcon}>
        <Ionicons name={icon as any} size={20} color="#0A84FF" />
      </View>
      <View style={styles.featureContent}>
        <Text style={styles.featureTitle}>{title}</Text>
        <Text style={styles.featureSubtitle}>{subtitle}</Text>
      </View>
    </View>
  );
}

function LinkItem({ title, onPress, last }: {
  title: string;
  onPress: () => void;
  last?: boolean;
}) {
  return (
    <TouchableOpacity
      style={[styles.linkItem, !last && styles.itemBorder]}
      onPress={onPress}
      activeOpacity={0.6}
    >
      <Text style={styles.linkTitle}>{title}</Text>
      <Ionicons name="chevron-forward" size={18} color="#C7C7CC" />
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F2F2F7',
  },
  scrollContent: {
    paddingBottom: 40,
  },
  header: {
    alignItems: 'center',
    paddingVertical: 32,
    backgroundColor: '#FFFFFF',
  },
  logo: {
    width: 80,
    height: 80,
  },
  appName: {
    fontSize: 28,
    fontWeight: '700',
    color: '#000000',
    marginTop: 16,
  },
  tagline: {
    fontSize: 15,
    color: '#8E8E93',
    marginTop: 4,
  },
  version: {
    fontSize: 13,
    color: '#C7C7CC',
    marginTop: 8,
  },
  section: {
    marginTop: 24,
  },
  sectionTitle: {
    fontSize: 13,
    fontWeight: '600',
    color: '#8E8E93',
    textTransform: 'uppercase',
    letterSpacing: 0.5,
    marginLeft: 16,
    marginBottom: 8,
  },
  card: {
    backgroundColor: '#FFFFFF',
    marginHorizontal: 16,
    borderRadius: 12,
  },
  cardText: {
    fontSize: 15,
    lineHeight: 22,
    color: '#000000',
    padding: 16,
  },
  featureItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 14,
  },
  featureIcon: {
    width: 36,
    height: 36,
    borderRadius: 8,
    backgroundColor: 'rgba(10, 132, 255, 0.1)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  featureContent: {
    flex: 1,
    marginLeft: 12,
  },
  featureTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#000000',
  },
  featureSubtitle: {
    fontSize: 13,
    color: '#8E8E93',
    marginTop: 2,
  },
  linkItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 14,
    paddingHorizontal: 16,
  },
  linkTitle: {
    fontSize: 16,
    color: '#000000',
  },
  itemBorder: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#E5E5EA',
  },
  footer: {
    textAlign: 'center',
    fontSize: 13,
    color: '#8E8E93',
    marginTop: 32,
  },
});