WellNuo/app/(tabs)/beneficiaries/[id]/setup-wifi.tsx

import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Alert,
  ActivityIndicator,
  TextInput,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router, useLocalSearchParams } from 'expo-router';
import * as Device from 'expo-device';
import { useBLE } from '@/contexts/BLEContext';
import { api } from '@/services/api';
import type { WiFiNetwork } from '@/services/ble';
import {
  AppColors,
  BorderRadius,
  FontSizes,
  FontWeights,
  Spacing,
  Shadows,
} from '@/constants/theme';

export default function SetupWiFiScreen() {
  const { id, deviceId, deviceName, wellId } = useLocalSearchParams<{
    id: string;
    deviceId: string;
    deviceName: string;
    wellId: string;
  }>();

  const { getWiFiList, setWiFi, disconnectDevice } = useBLE();

  const [networks, setNetworks] = useState<WiFiNetwork[]>([]);
  const [isLoadingNetworks, setIsLoadingNetworks] = useState(false);
  const [selectedNetwork, setSelectedNetwork] = useState<WiFiNetwork | null>(null);
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [isConnecting, setIsConnecting] = useState(false);

  useEffect(() => {
    loadWiFiNetworks();
  }, []);

  const loadWiFiNetworks = async () => {
    setIsLoadingNetworks(true);

    try {
      const wifiList = await getWiFiList(deviceId!);
      setNetworks(wifiList);
    } catch (error: any) {
      console.error('[SetupWiFi] Failed to get WiFi list:', error);
      Alert.alert('Error', error.message || 'Failed to get WiFi networks. Please try again.');
    } finally {
      setIsLoadingNetworks(false);
    }
  };

  const handleSelectNetwork = (network: WiFiNetwork) => {
    setSelectedNetwork(network);
    setPassword('');
  };

  const handleConnect = async () => {
    if (!selectedNetwork) {
      Alert.alert('Error', 'Please select a WiFi network');
      return;
    }

    if (!password) {
      Alert.alert('Error', 'Please enter WiFi password');
      return;
    }

    setIsConnecting(true);

    try {
      // Step 1: Set WiFi on the device via BLE
      const success = await setWiFi(deviceId!, selectedNetwork.ssid, password);

      if (!success) {
        throw new Error('Failed to configure WiFi on sensor');
      }

      // Step 2: Attach device to beneficiary via API (skip in simulator/mock mode)
      const isSimulator = !Device.isDevice;

      if (!isSimulator) {
        const attachResponse = await api.attachDeviceToBeneficiary(
          id!,
          parseInt(wellId!, 10),
          selectedNetwork.ssid,
          password
        );

        if (!attachResponse.ok) {
          throw new Error('Failed to attach sensor to beneficiary');
        }
      } else {
        console.log('[SetupWiFi] Simulator mode - skipping API attach');
      }

      // Step 3: Disconnect BLE connection (sensor will reboot and connect to WiFi)
      await disconnectDevice(deviceId!);

      // Success!
      Alert.alert(
        'Success!',
        `${deviceName} has been configured and attached.\n\nThe sensor will now reboot and connect to "${selectedNetwork.ssid}". This may take a minute.`,
        [
          {
            text: 'Done',
            onPress: () => {
              // Navigate back to Equipment screen
              router.replace(`/(tabs)/beneficiaries/${id}/equipment` as any);
            },
          },
        ]
      );
    } catch (error: any) {
      console.error('[SetupWiFi] Failed to connect:', error);
      Alert.alert(
        'Connection Failed',
        error.message || 'Failed to configure WiFi. Please check the password and try again.'
      );
    } finally {
      setIsConnecting(false);
    }
  };

  const getSignalStrength = (rssi: number): string => {
    if (rssi >= -50) return 'Excellent';
    if (rssi >= -60) return 'Good';
    if (rssi >= -70) return 'Fair';
    return 'Weak';
  };

  const getSignalColor = (rssi: number) => {
    if (rssi >= -50) return AppColors.success;
    if (rssi >= -60) return AppColors.info;
    if (rssi >= -70) return AppColors.warning;
    return AppColors.error;
  };

  const getSignalIcon = (rssi: number) => {
    if (rssi >= -50) return 'wifi';
    if (rssi >= -60) return 'wifi';
    if (rssi >= -70) return 'wifi-outline';
    return 'wifi-outline';
  };

  return (
    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => {
            // Disconnect BLE before going back
            disconnectDevice(deviceId!);
            router.back();
          }}
        >
          <Ionicons name="arrow-back" size={24} color={AppColors.textPrimary} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Setup WiFi</Text>
        <View style={styles.placeholder} />
      </View>

      <ScrollView style={styles.content} contentContainerStyle={styles.scrollContent}>
        {/* Device Info Card */}
        <View style={styles.deviceCard}>
          <View style={styles.deviceIcon}>
            <Ionicons name="water" size={32} color={AppColors.primary} />
          </View>
          <View style={styles.deviceInfo}>
            <Text style={styles.deviceName}>{deviceName}</Text>
            <Text style={styles.deviceMeta}>Well ID: {wellId}</Text>
          </View>
        </View>

        {/* Instructions */}
        <View style={styles.instructionsCard}>
          <Text style={styles.instructionsText}>
            Select the WiFi network your sensor should connect to. Make sure the network has internet access.
          </Text>
        </View>

        {/* WiFi Networks List */}
        {isLoadingNetworks ? (
          <View style={styles.loadingContainer}>
            <ActivityIndicator size="large" color={AppColors.primary} />
            <Text style={styles.loadingText}>Scanning for WiFi networks...</Text>
          </View>
        ) : (
          <>
            <View style={styles.sectionHeader}>
              <Text style={styles.sectionTitle}>Available Networks ({networks.length})</Text>
              <TouchableOpacity style={styles.refreshButton} onPress={loadWiFiNetworks}>
                <Ionicons name="refresh" size={18} color={AppColors.primary} />
              </TouchableOpacity>
            </View>

            {networks.length === 0 ? (
              <View style={styles.emptyState}>
                <Ionicons name="wifi-outline" size={48} color={AppColors.textMuted} />
                <Text style={styles.emptyText}>No WiFi networks found</Text>
                <TouchableOpacity style={styles.retryButton} onPress={loadWiFiNetworks}>
                  <Text style={styles.retryText}>Try Again</Text>
                </TouchableOpacity>
              </View>
            ) : (
              <View style={styles.networksList}>
                {networks.map((network, index) => {
                  const isSelected = selectedNetwork?.ssid === network.ssid;

                  return (
                    <TouchableOpacity
                      key={`${network.ssid}-${index}`}
                      style={[
                        styles.networkCard,
                        isSelected && styles.networkCardSelected,
                      ]}
                      onPress={() => handleSelectNetwork(network)}
                      activeOpacity={0.7}
                    >
                      <View style={styles.networkInfo}>
                        <Ionicons
                          name={getSignalIcon(network.rssi)}
                          size={24}
                          color={getSignalColor(network.rssi)}
                        />
                        <View style={styles.networkDetails}>
                          <Text style={styles.networkName}>{network.ssid}</Text>
                          <Text style={[styles.signalText, { color: getSignalColor(network.rssi) }]}>
                            {getSignalStrength(network.rssi)} ({network.rssi} dBm)
                          </Text>
                        </View>
                      </View>
                      {isSelected && (
                        <Ionicons name="checkmark-circle" size={24} color={AppColors.primary} />
                      )}
                    </TouchableOpacity>
                  );
                })}
              </View>
            )}
          </>
        )}

        {/* Password Input (shown when network selected) */}
        {selectedNetwork && (
          <View style={styles.passwordCard}>
            <Text style={styles.passwordLabel}>WiFi Password</Text>
            <View style={styles.passwordInputContainer}>
              <TextInput
                style={styles.passwordInput}
                value={password}
                onChangeText={setPassword}
                placeholder="Enter password"
                secureTextEntry={!showPassword}
                autoCapitalize="none"
                autoCorrect={false}
              />
              <TouchableOpacity
                style={styles.togglePasswordButton}
                onPress={() => setShowPassword(!showPassword)}
              >
                <Ionicons
                  name={showPassword ? 'eye-off' : 'eye'}
                  size={20}
                  color={AppColors.textMuted}
                />
              </TouchableOpacity>
            </View>

            {/* Connect Button */}
            <TouchableOpacity
              style={[
                styles.connectButton,
                (!password || isConnecting) && styles.connectButtonDisabled,
              ]}
              onPress={handleConnect}
              disabled={!password || isConnecting}
            >
              {isConnecting ? (
                <>
                  <ActivityIndicator size="small" color={AppColors.white} />
                  <Text style={styles.connectButtonText}>Connecting...</Text>
                </>
              ) : (
                <>
                  <Ionicons name="checkmark" size={20} color={AppColors.white} />
                  <Text style={styles.connectButtonText}>Connect & Complete Setup</Text>
                </>
              )}
            </TouchableOpacity>
          </View>
        )}

        {/* Help Card */}
        <View style={styles.helpCard}>
          <View style={styles.helpHeader}>
            <Ionicons name="information-circle" size={20} color={AppColors.info} />
            <Text style={styles.helpTitle}>Important</Text>
          </View>
          <Text style={styles.helpText}>
            • The sensor will reboot after WiFi is configured{'\n'}
            • It may take up to 1 minute for the sensor to connect{'\n'}
            • Make sure the WiFi password is correct{'\n'}
            • The network must have internet access
          </Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: AppColors.background,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: Spacing.md,
    paddingVertical: Spacing.sm,
    borderBottomWidth: 1,
    borderBottomColor: AppColors.border,
  },
  backButton: {
    padding: Spacing.xs,
  },
  headerTitle: {
    fontSize: FontSizes.lg,
    fontWeight: FontWeights.semibold,
    color: AppColors.textPrimary,
  },
  placeholder: {
    width: 32,
  },
  content: {
    flex: 1,
  },
  scrollContent: {
    padding: Spacing.lg,
    paddingBottom: Spacing.xxl,
  },
  // Device Card
  deviceCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    padding: Spacing.lg,
    marginBottom: Spacing.lg,
    ...Shadows.sm,
  },
  deviceIcon: {
    width: 60,
    height: 60,
    borderRadius: BorderRadius.lg,
    backgroundColor: AppColors.primaryLighter,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: Spacing.md,
  },
  deviceInfo: {
    flex: 1,
  },
  deviceName: {
    fontSize: FontSizes.lg,
    fontWeight: FontWeights.semibold,
    color: AppColors.textPrimary,
    marginBottom: 2,
  },
  deviceMeta: {
    fontSize: FontSizes.sm,
    color: AppColors.textMuted,
  },
  // Instructions
  instructionsCard: {
    backgroundColor: AppColors.infoLight,
    borderRadius: BorderRadius.lg,
    padding: Spacing.md,
    marginBottom: Spacing.lg,
  },
  instructionsText: {
    fontSize: FontSizes.sm,
    color: AppColors.info,
    lineHeight: 20,
  },
  // Loading
  loadingContainer: {
    alignItems: 'center',
    padding: Spacing.xl,
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    ...Shadows.sm,
  },
  loadingText: {
    fontSize: FontSizes.base,
    color: AppColors.textSecondary,
    marginTop: Spacing.md,
  },
  // Section Header
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: Spacing.md,
  },
  sectionTitle: {
    fontSize: FontSizes.sm,
    fontWeight: FontWeights.semibold,
    color: AppColors.textSecondary,
    textTransform: 'uppercase',
    letterSpacing: 0.5,
  },
  refreshButton: {
    padding: Spacing.xs,
  },
  // Empty State
  emptyState: {
    alignItems: 'center',
    padding: Spacing.xl,
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    ...Shadows.sm,
  },
  emptyText: {
    fontSize: FontSizes.base,
    color: AppColors.textMuted,
    marginTop: Spacing.md,
    marginBottom: Spacing.md,
  },
  retryButton: {
    paddingVertical: Spacing.sm,
    paddingHorizontal: Spacing.lg,
  },
  retryText: {
    fontSize: FontSizes.base,
    fontWeight: FontWeights.semibold,
    color: AppColors.primary,
  },
  // Networks List
  networksList: {
    gap: Spacing.sm,
    marginBottom: Spacing.lg,
  },
  networkCard: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.lg,
    padding: Spacing.md,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    ...Shadows.xs,
  },
  networkCardSelected: {
    borderWidth: 2,
    borderColor: AppColors.primary,
  },
  networkInfo: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    gap: Spacing.md,
  },
  networkDetails: {
    flex: 1,
  },
  networkName: {
    fontSize: FontSizes.base,
    fontWeight: FontWeights.semibold,
    color: AppColors.textPrimary,
    marginBottom: 2,
  },
  signalText: {
    fontSize: FontSizes.xs,
    fontWeight: FontWeights.medium,
  },
  // Password Input
  passwordCard: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    padding: Spacing.lg,
    marginBottom: Spacing.lg,
    ...Shadows.sm,
  },
  passwordLabel: {
    fontSize: FontSizes.sm,
    fontWeight: FontWeights.semibold,
    color: AppColors.textSecondary,
    marginBottom: Spacing.sm,
  },
  passwordInputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: AppColors.background,
    borderRadius: BorderRadius.md,
    borderWidth: 1,
    borderColor: AppColors.border,
    marginBottom: Spacing.md,
  },
  passwordInput: {
    flex: 1,
    paddingVertical: Spacing.sm,
    paddingHorizontal: Spacing.md,
    fontSize: FontSizes.base,
    color: AppColors.textPrimary,
  },
  togglePasswordButton: {
    padding: Spacing.md,
  },
  // Connect Button
  connectButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: AppColors.primary,
    paddingVertical: Spacing.md,
    borderRadius: BorderRadius.lg,
    gap: Spacing.sm,
    ...Shadows.md,
  },
  connectButtonDisabled: {
    opacity: 0.5,
  },
  connectButtonText: {
    fontSize: FontSizes.base,
    fontWeight: FontWeights.semibold,
    color: AppColors.white,
  },
  // Help Card
  helpCard: {
    backgroundColor: AppColors.infoLight,
    borderRadius: BorderRadius.lg,
    padding: Spacing.md,
  },
  helpHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: Spacing.sm,
    marginBottom: Spacing.xs,
  },
  helpTitle: {
    fontSize: FontSizes.sm,
    fontWeight: FontWeights.semibold,
    color: AppColors.info,
  },
  helpText: {
    fontSize: FontSizes.sm,
    color: AppColors.info,
    lineHeight: 20,
  },
});