import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { colors } from '../../../tokens/colors';
import { Ionicons } from '@expo/vector-icons';

export default function LifeHubScreen() {
  const router = useRouter();

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>Life Hub</Text>
      </View>
      <ScrollView style={styles.content}>
        <TouchableOpacity style={styles.card} onPress={() => router.push('/(app)/(life)/goals')}>
          <View style={styles.cardIcon}>
            <Ionicons name="target" size={24} color={colors.primary} />
          </View>
          <View style={styles.cardContent}>
            <Text style={styles.cardTitle}>Goals</Text>
            <Text style={styles.cardSubtitle}>Track your goals</Text>
          </View>
          <Ionicons name="chevron-forward" size={20} color={colors.muted} />
        </TouchableOpacity>

        <TouchableOpacity style={styles.card} onPress={() => router.push('/(app)/(life)/habits')}>
          <View style={styles.cardIcon}>
            <Ionicons name="refresh" size={24} color={colors.success} />
          </View>
          <View style={styles.cardContent}>
            <Text style={styles.cardTitle}>Habits</Text>
            <Text style={styles.cardSubtitle}>Build better habits</Text>
          </View>
          <Ionicons name="chevron-forward" size={20} color={colors.muted} />
        </TouchableOpacity>

        <TouchableOpacity style={styles.card} onPress={() => router.push('/(app)/(life)/balance')}>
          <View style={styles.cardIcon}>
            <Ionicons name="analytics" size={24} color={colors.warning} />
          </View>
          <View style={styles.cardContent}>
            <Text style={styles.cardTitle}>Life Balance</Text>
            <Text style={styles.cardSubtitle}>Monitor your balance</Text>
          </View>
          <Ionicons name="chevron-forward" size={20} color={colors.muted} />
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.bgDark,
  },
  header: {
    paddingHorizontal: 20,
    paddingVertical: 16,
  },
  headerTitle: {
    fontSize: 28,
    fontWeight: 'bold',
    color: 'white',
  },
  content: {
    flex: 1,
    paddingHorizontal: 20,
  },
  card: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.cardDark,
    padding: 16,
    borderRadius: 12,
    marginBottom: 12,
    borderWidth: 1,
    borderColor: colors.borderDark,
  },
  cardIcon: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: colors.cardDark,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 16,
  },
  cardContent: {
    flex: 1,
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: 'white',
    marginBottom: 4,
  },
  cardSubtitle: {
    fontSize: 13,
    color: colors.muted,
  },
});
