WellNuo/app/(auth)/add-loved-one.tsx

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  TouchableOpacity,
  TextInput,
  Image,
  Alert,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router, useLocalSearchParams } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';
import { Button } from '@/components/ui/Button';
import { ErrorMessage } from '@/components/ui/ErrorMessage';
import { SetupProgressIndicator } from '@/components/SetupProgressIndicator';
import { AppColors, FontSizes, Spacing, BorderRadius, FontWeights } from '@/constants/theme';
import { api } from '@/services/api';

export default function AddLovedOneScreen() {
  const params = useLocalSearchParams<{ email: string; inviteCode: string }>();
  const inviteCode = params.inviteCode || '';

  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  const [avatarUri, setAvatarUri] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handlePickAvatar = async () => {
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== 'granted') {
      Alert.alert('Permission needed', 'Please allow access to your photo library.');
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: true,
      aspect: [1, 1],
      quality: 0.5,
    });

    if (!result.canceled && result.assets[0]) {
      setAvatarUri(result.assets[0].uri);
    }
  };

  const handleTakePhoto = async () => {
    const { status } = await ImagePicker.requestCameraPermissionsAsync();
    if (status !== 'granted') {
      Alert.alert('Permission needed', 'Please allow access to your camera.');
      return;
    }

    const result = await ImagePicker.launchCameraAsync({
      allowsEditing: true,
      aspect: [1, 1],
      quality: 0.5,
    });

    if (!result.canceled && result.assets[0]) {
      setAvatarUri(result.assets[0].uri);
    }
  };

  const handleAvatarPress = () => {
    Alert.alert(
      'Add Photo',
      'Choose how to add a photo',
      [
        { text: 'Take Photo', onPress: handleTakePhoto },
        { text: 'Choose from Library', onPress: handlePickAvatar },
        { text: 'Cancel', style: 'cancel' },
      ]
    );
  };

  const handleContinue = async () => {
    setError(null);

    const trimmedName = name.trim();

    if (!trimmedName) {
      setError('Please enter the name of your loved one');
      return;
    }

    setIsLoading(true);

    try {
      // Create beneficiary on server IMMEDIATELY
      const trimmedAddress = address.trim();
      const result = await api.createBeneficiary({
        name: trimmedName,
        address: trimmedAddress || undefined,
      });

      if (!result.ok || !result.data) {
        setError(result.error?.message || 'Failed to create beneficiary');
        return;
      }

      const beneficiaryId = result.data.id;

      // Upload avatar if selected
      if (avatarUri) {
        const avatarResult = await api.updateBeneficiaryAvatar(beneficiaryId, avatarUri);
        if (!avatarResult.ok) {
          // Continue anyway - avatar is not critical
        }
      }

      // Navigate to the purchase/subscription screen with beneficiary ID
      router.replace({
        pathname: '/(auth)/purchase',
        params: {
          beneficiaryId: String(beneficiaryId),
          lovedOneName: trimmedName,
          lovedOneAddress: address.trim(),
          inviteCode,
        },
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Something went wrong');
    } finally {
      setIsLoading(false);
    }
  };

  const handleSkip = async () => {
    // Mark onboarding as completed so we don't redirect back here
    await api.setOnboardingCompleted(true);
    // Skip and go to main app without adding loved one
    router.replace('/(tabs)');
  };

  const nameInitial = name.trim() ? name.trim().charAt(0).toUpperCase() : '+';

  return (
    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
      <KeyboardAvoidingView
        style={styles.keyboardView}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      >
        <ScrollView
          contentContainerStyle={styles.scrollContent}
          keyboardShouldPersistTaps="handled"
          showsVerticalScrollIndicator={false}
        >
          {/* Setup Progress */}
          <SetupProgressIndicator currentStep="beneficiary" />

          {/* Header */}
          <View style={styles.header}>
            <Text style={styles.title}>Add a Loved One</Text>
            <Text style={styles.subtitle}>
              Tell us about the person you want to care for
            </Text>
          </View>

          {/* Error Message */}
          {error && (
            <ErrorMessage
              message={error}
              onDismiss={() => setError(null)}
            />
          )}

          {/* Avatar Section */}
          <TouchableOpacity style={styles.avatarSection} onPress={handleAvatarPress}>
            <View style={styles.avatarContainer}>
              {avatarUri ? (
                <Image source={{ uri: avatarUri }} style={styles.avatarImage} />
              ) : (
                <Text style={styles.avatarText}>{nameInitial}</Text>
              )}
              <View style={styles.avatarEditBadge}>
                <Ionicons name="camera" size={18} color={AppColors.white} />
              </View>
            </View>
            <Text style={styles.avatarHint}>Tap to add photo</Text>
          </TouchableOpacity>

          {/* Form */}
          <View style={styles.form}>
            <View style={styles.inputGroup}>
              <Text style={styles.inputLabel}>Name *</Text>
              <View style={styles.inputContainer}>
                <Ionicons name="person-outline" size={20} color={AppColors.textMuted} />
                <TextInput
                  style={styles.input}
                  value={name}
                  onChangeText={(text) => {
                    setName(text);
                    setError(null);
                  }}
                  placeholder="e.g., Grandma Julia"
                  placeholderTextColor={AppColors.textMuted}
                  autoCapitalize="words"
                  autoCorrect={false}
                  editable={!isLoading}
                />
              </View>
            </View>

            <View style={styles.inputGroup}>
              <Text style={styles.inputLabel}>Address (optional)</Text>
              <View style={styles.inputContainer}>
                <Ionicons name="location-outline" size={20} color={AppColors.textMuted} />
                <TextInput
                  style={styles.input}
                  value={address}
                  onChangeText={setAddress}
                  placeholder="123 Main St, City, State"
                  placeholderTextColor={AppColors.textMuted}
                  editable={!isLoading}
                />
              </View>
            </View>
          </View>

          {/* Continue Button */}
          <View style={styles.buttonContainer}>
            <Button
              title="Continue"
              onPress={handleContinue}
              loading={isLoading}
              fullWidth
              size="lg"
            />
          </View>

          {/* Info */}
          <View style={styles.infoContainer}>
            <Text style={styles.infoText}>
              You'll be able to add more loved ones later and invite family members to help care for them
            </Text>
          </View>

          {/* Skip Button */}
          <TouchableOpacity style={styles.skipButton} onPress={handleSkip}>
            <Text style={styles.skipText}>Skip for now</Text>
          </TouchableOpacity>
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: AppColors.background,
  },
  keyboardView: {
    flex: 1,
  },
  scrollContent: {
    flexGrow: 1,
    paddingHorizontal: Spacing.lg,
    paddingTop: Spacing.xl,
    paddingBottom: Spacing.lg,
  },
  header: {
    alignItems: 'center',
    marginBottom: Spacing.xl,
  },
  title: {
    fontSize: FontSizes['2xl'],
    fontWeight: FontWeights.bold,
    color: AppColors.textPrimary,
    marginBottom: Spacing.md,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: FontSizes.base,
    color: AppColors.textSecondary,
    textAlign: 'center',
  },
  avatarSection: {
    alignItems: 'center',
    marginBottom: Spacing.xl,
  },
  avatarContainer: {
    width: 120,
    height: 120,
    borderRadius: 60,
    backgroundColor: AppColors.primaryLight,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
  },
  avatarImage: {
    width: 120,
    height: 120,
    borderRadius: 60,
  },
  avatarText: {
    fontSize: FontSizes['3xl'],
    fontWeight: FontWeights.bold,
    color: AppColors.primary,
  },
  avatarEditBadge: {
    position: 'absolute',
    bottom: 4,
    right: 4,
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: AppColors.primary,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 3,
    borderColor: AppColors.background,
  },
  avatarHint: {
    fontSize: FontSizes.sm,
    color: AppColors.textMuted,
    marginTop: Spacing.sm,
  },
  form: {
    marginBottom: Spacing.lg,
  },
  inputGroup: {
    marginBottom: Spacing.lg,
  },
  inputLabel: {
    fontSize: FontSizes.sm,
    fontWeight: FontWeights.medium,
    color: AppColors.textSecondary,
    marginBottom: Spacing.sm,
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.lg,
    paddingHorizontal: Spacing.md,
    borderWidth: 1,
    borderColor: AppColors.border,
  },
  input: {
    flex: 1,
    fontSize: FontSizes.base,
    color: AppColors.textPrimary,
    paddingVertical: Spacing.md,
    marginLeft: Spacing.sm,
  },
  buttonContainer: {
    marginTop: Spacing.md,
  },
  infoContainer: {
    alignItems: 'center',
    marginTop: Spacing.lg,
    paddingHorizontal: Spacing.md,
  },
  infoText: {
    fontSize: FontSizes.sm,
    color: AppColors.textMuted,
    textAlign: 'center',
    lineHeight: 20,
  },
  skipButton: {
    alignItems: 'center',
    paddingVertical: Spacing.lg,
    marginTop: Spacing.xl,
  },
  skipText: {
    fontSize: FontSizes.base,
    color: AppColors.textSecondary,
    textDecorationLine: 'underline',
  },
});