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 { AppColors, BorderRadius, FontSizes, Spacing } from '@/constants/theme';
import { PageHeader } from '@/components/PageHeader';

interface InfoRowProps {
  label: string;
  value: string;
}

function InfoRow({ label, value }: InfoRowProps) {
  return (
    <View style={styles.infoRow}>
      <Text style={styles.infoLabel}>{label}</Text>
      <Text style={styles.infoValue}>{value}</Text>
    </View>
  );
}

interface LinkRowProps {
  icon: keyof typeof Ionicons.glyphMap;
  title: string;
  onPress: () => void;
}

function LinkRow({ icon, title, onPress }: LinkRowProps) {
  return (
    <TouchableOpacity style={styles.linkRow} onPress={onPress}>
      <Ionicons name={icon} size={20} color={AppColors.primary} />
      <Text style={styles.linkText}>{title}</Text>
      <Ionicons name="open-outline" size={16} color={AppColors.textMuted} />
    </TouchableOpacity>
  );
}

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

  return (
    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
      <PageHeader title="About WellNuo" />
      <ScrollView showsVerticalScrollIndicator={false}>
        {/* App Logo & Name */}
        <View style={styles.heroSection}>
          <Image
            source={require('@/assets/images/icon.png')}
            style={styles.logoImage}
            resizeMode="contain"
          />
          <Text style={styles.appTagline}>Caring for Those Who Matter Most</Text>
        </View>

        {/* Version Info */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>App Information</Text>
          <View style={styles.card}>
            <InfoRow label="Version" value="1.0.0" />
            <View style={styles.infoDivider} />
            <InfoRow label="Build" value="2024.12.001" />
            <View style={styles.infoDivider} />
            <InfoRow label="Platform" value="iOS / Android" />
            <View style={styles.infoDivider} />
            <InfoRow label="SDK" value="Expo SDK 54" />
            <View style={styles.infoDivider} />
            <InfoRow label="Last Updated" value="December 2024" />
          </View>
        </View>

        {/* Description */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>About</Text>
          <View style={styles.card}>
            <Text style={styles.description}>
              WellNuo is a comprehensive elderly care monitoring application designed to help
              families and caregivers stay connected with their loved ones. Using advanced
              sensor technology and AI-powered analytics, WellNuo provides real-time insights
              into daily activities, health patterns, and emergency situations.
            </Text>
            <Text style={styles.description}>
              Our mission is to bring peace of mind to families while preserving the independence
              and dignity of elderly individuals.
            </Text>
          </View>
        </View>

        {/* Features */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Key Features</Text>
          <View style={styles.card}>
            <View style={styles.featureItem}>
              <View style={[styles.featureIcon, { backgroundColor: '#DBEAFE' }]}>
                <Ionicons name="pulse" size={20} color="#3B82F6" />
              </View>
              <View style={styles.featureContent}>
                <Text style={styles.featureTitle}>Real-time Monitoring</Text>
                <Text style={styles.featureDescription}>24/7 activity and wellness tracking</Text>
              </View>
            </View>
            <View style={styles.featureItem}>
              <View style={[styles.featureIcon, { backgroundColor: '#FEE2E2' }]}>
                <Ionicons name="warning" size={20} color="#EF4444" />
              </View>
              <View style={styles.featureContent}>
                <Text style={styles.featureTitle}>Emergency Alerts</Text>
                <Text style={styles.featureDescription}>Instant notifications for falls and emergencies</Text>
              </View>
            </View>
            <View style={styles.featureItem}>
              <View style={[styles.featureIcon, { backgroundColor: '#D1FAE5' }]}>
                <Ionicons name="analytics" size={20} color="#10B981" />
              </View>
              <View style={styles.featureContent}>
                <Text style={styles.featureTitle}>AI-Powered Insights</Text>
                <Text style={styles.featureDescription}>Smart analysis of health patterns</Text>
              </View>
            </View>
            <View style={styles.featureItem}>
              <View style={[styles.featureIcon, { backgroundColor: '#FEF3C7' }]}>
                <Ionicons name="people" size={20} color="#F59E0B" />
              </View>
              <View style={styles.featureContent}>
                <Text style={styles.featureTitle}>Family Coordination</Text>
                <Text style={styles.featureDescription}>Share care with multiple caregivers</Text>
              </View>
            </View>
          </View>
        </View>

        {/* Links */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Resources</Text>
          <View style={styles.card}>
            <LinkRow
              icon="globe-outline"
              title="Visit Website"
              onPress={() => openURL('https://wellnuo.com')}
            />
            <View style={styles.linkDivider} />
            <LinkRow
              icon="document-text-outline"
              title="Documentation"
              onPress={() => openURL('https://docs.wellnuo.com')}
            />
            <View style={styles.linkDivider} />
            <LinkRow
              icon="logo-twitter"
              title="Follow on Twitter"
              onPress={() => openURL('https://twitter.com/wellnuo')}
            />
          </View>
        </View>

        {/* Footer */}
        <View style={styles.footer}>
          <Text style={styles.copyright}>© 2024 WellNuo Inc.</Text>
          <Text style={styles.footerText}>All rights reserved.</Text>
          <Text style={styles.madeWith}>
            Made with ❤️ for families worldwide
          </Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: AppColors.surface,
  },
  heroSection: {
    alignItems: 'center',
    paddingVertical: Spacing.xl,
    backgroundColor: AppColors.background,
  },
  logoImage: {
    width: 180,
    height: 100,
    marginBottom: Spacing.sm,
  },
  appTagline: {
    fontSize: FontSizes.base,
    color: AppColors.textSecondary,
    marginTop: Spacing.xs,
  },
  section: {
    marginTop: Spacing.md,
  },
  sectionTitle: {
    fontSize: FontSizes.sm,
    fontWeight: '600',
    color: AppColors.textSecondary,
    paddingHorizontal: Spacing.lg,
    paddingVertical: Spacing.sm,
    textTransform: 'uppercase',
  },
  card: {
    backgroundColor: AppColors.background,
    paddingVertical: Spacing.sm,
  },
  infoRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: Spacing.sm,
    paddingHorizontal: Spacing.lg,
  },
  infoLabel: {
    fontSize: FontSizes.base,
    color: AppColors.textSecondary,
  },
  infoValue: {
    fontSize: FontSizes.base,
    fontWeight: '500',
    color: AppColors.textPrimary,
  },
  infoDivider: {
    height: 1,
    backgroundColor: AppColors.border,
    marginHorizontal: Spacing.lg,
  },
  description: {
    fontSize: FontSizes.sm,
    color: AppColors.textSecondary,
    lineHeight: 22,
    paddingHorizontal: Spacing.lg,
    paddingVertical: Spacing.sm,
  },
  featureItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: Spacing.sm,
    paddingHorizontal: Spacing.lg,
  },
  featureIcon: {
    width: 40,
    height: 40,
    borderRadius: BorderRadius.md,
    justifyContent: 'center',
    alignItems: 'center',
  },
  featureContent: {
    flex: 1,
    marginLeft: Spacing.md,
  },
  featureTitle: {
    fontSize: FontSizes.base,
    fontWeight: '500',
    color: AppColors.textPrimary,
  },
  featureDescription: {
    fontSize: FontSizes.xs,
    color: AppColors.textMuted,
    marginTop: 2,
  },
  linkRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: Spacing.md,
    paddingHorizontal: Spacing.lg,
  },
  linkText: {
    flex: 1,
    fontSize: FontSizes.base,
    color: AppColors.primary,
    marginLeft: Spacing.md,
  },
  linkDivider: {
    height: 1,
    backgroundColor: AppColors.border,
    marginLeft: Spacing.lg + 20 + Spacing.md,
  },
  footer: {
    alignItems: 'center',
    paddingVertical: Spacing.xl,
    paddingBottom: Spacing.xxl,
  },
  copyright: {
    fontSize: FontSizes.sm,
    fontWeight: '500',
    color: AppColors.textPrimary,
  },
  footerText: {
    fontSize: FontSizes.xs,
    color: AppColors.textMuted,
    marginTop: 2,
  },
  madeWith: {
    fontSize: FontSizes.xs,
    color: AppColors.textSecondary,
    marginTop: Spacing.md,
  },
});