WellNuo/app/(tabs)/beneficiaries/[id]/add-sensor.tsx

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Alert,
  ActivityIndicator,
} 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 { useBeneficiary } from '@/contexts/BeneficiaryContext';
import type { WPDevice } from '@/services/ble';
import {
  AppColors,
  BorderRadius,
  FontSizes,
  FontWeights,
  Spacing,
  Shadows,
} from '@/constants/theme';

export default function AddSensorScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const { currentBeneficiary } = useBeneficiary();
  const {
    foundDevices,
    isScanning,
    connectedDevices,
    isBLEAvailable,
    scanDevices,
    stopScan,
    connectDevice,
  } = useBLE();

  const [selectedDevice, setSelectedDevice] = useState<WPDevice | null>(null);
  const [isConnecting, setIsConnecting] = useState(false);

  const beneficiaryName = currentBeneficiary?.name || 'this person';

  const handleScan = async () => {
    try {
      await scanDevices();
    } catch (error: any) {
      console.error('[AddSensor] Scan failed:', error);
      Alert.alert('Scan Failed', error.message || 'Failed to scan for sensors. Please try again.');
    }
  };

  const handleConnect = async (device: WPDevice) => {
    setIsConnecting(true);
    setSelectedDevice(device);

    try {
      const success = await connectDevice(device.id);

      if (success) {
        // Navigate to Setup WiFi screen
        router.push({
          pathname: `/(tabs)/beneficiaries/${id}/setup-wifi` as any,
          params: {
            deviceId: device.id,
            deviceName: device.name,
            wellId: device.wellId?.toString() || '',
          },
        });
      } else {
        throw new Error('Connection failed');
      }
    } catch (error: any) {
      console.error('[AddSensor] Connection failed:', error);
      Alert.alert(
        'Connection Failed',
        `Failed to connect to ${device.name}. Please make sure the sensor is powered on and nearby.`
      );
    } finally {
      setIsConnecting(false);
      setSelectedDevice(null);
    }
  };

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

  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;
  };

  return (
    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
          <Ionicons name="arrow-back" size={24} color={AppColors.textPrimary} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Add Sensor</Text>
        <View style={styles.placeholder} />
      </View>

      {/* Simulator Warning */}
      {!isBLEAvailable && (
        <View style={styles.simulatorWarning}>
          <Ionicons name="information-circle" size={18} color={AppColors.warning} />
          <Text style={styles.simulatorWarningText}>
            Running in Simulator - showing mock sensors
          </Text>
        </View>
      )}

      <ScrollView style={styles.content} contentContainerStyle={styles.scrollContent}>
        {/* Instructions */}
        <View style={styles.instructionsCard}>
          <Text style={styles.instructionsTitle}>How to Add a Sensor</Text>
          <View style={styles.step}>
            <View style={styles.stepNumber}>
              <Text style={styles.stepNumberText}>1</Text>
            </View>
            <Text style={styles.stepText}>Make sure the WP sensor is powered on and nearby</Text>
          </View>
          <View style={styles.step}>
            <View style={styles.stepNumber}>
              <Text style={styles.stepNumberText}>2</Text>
            </View>
            <Text style={styles.stepText}>Tap "Scan for Sensors" to search for available devices</Text>
          </View>
          <View style={styles.step}>
            <View style={styles.stepNumber}>
              <Text style={styles.stepNumberText}>3</Text>
            </View>
            <Text style={styles.stepText}>Select your sensor from the list to connect</Text>
          </View>
          <View style={styles.step}>
            <View style={styles.stepNumber}>
              <Text style={styles.stepNumberText}>4</Text>
            </View>
            <Text style={styles.stepText}>Configure WiFi settings to complete setup</Text>
          </View>
        </View>

        {/* Scan Button */}
        {!isScanning && foundDevices.length === 0 && (
          <TouchableOpacity style={styles.scanButton} onPress={handleScan}>
            <Ionicons name="scan" size={24} color={AppColors.white} />
            <Text style={styles.scanButtonText}>Scan for Sensors</Text>
          </TouchableOpacity>
        )}

        {/* Scanning Indicator */}
        {isScanning && (
          <View style={styles.scanningCard}>
            <ActivityIndicator size="large" color={AppColors.primary} />
            <Text style={styles.scanningText}>Scanning for WP sensors...</Text>
            <TouchableOpacity style={styles.stopScanButton} onPress={stopScan}>
              <Text style={styles.stopScanText}>Stop Scan</Text>
            </TouchableOpacity>
          </View>
        )}

        {/* Found Devices */}
        {foundDevices.length > 0 && !isScanning && (
          <>
            <View style={styles.sectionHeader}>
              <Text style={styles.sectionTitle}>Found Sensors ({foundDevices.length})</Text>
              <TouchableOpacity style={styles.rescanButton} onPress={handleScan}>
                <Ionicons name="refresh" size={18} color={AppColors.primary} />
                <Text style={styles.rescanText}>Rescan</Text>
              </TouchableOpacity>
            </View>

            <View style={styles.devicesList}>
              {foundDevices.map((device) => {
                const isConnected = connectedDevices.has(device.id);
                const isConnectingThis = isConnecting && selectedDevice?.id === device.id;

                return (
                  <TouchableOpacity
                    key={device.id}
                    style={[
                      styles.deviceCard,
                      isConnected && styles.deviceCardConnected,
                    ]}
                    onPress={() => handleConnect(device)}
                    disabled={isConnectingThis || isConnected}
                    activeOpacity={0.7}
                  >
                    <View style={styles.deviceInfo}>
                      <View style={styles.deviceIcon}>
                        <Ionicons name="water" size={24} color={AppColors.primary} />
                      </View>
                      <View style={styles.deviceDetails}>
                        <Text style={styles.deviceName}>{device.name}</Text>
                        {device.wellId && (
                          <Text style={styles.deviceMeta}>Well ID: {device.wellId}</Text>
                        )}
                        <View style={styles.signalRow}>
                          <Ionicons
                            name={getSignalIcon(device.rssi)}
                            size={14}
                            color={getSignalColor(device.rssi)}
                          />
                          <Text style={[styles.signalText, { color: getSignalColor(device.rssi) }]}>
                            {device.rssi} dBm
                          </Text>
                        </View>
                      </View>
                    </View>

                    {isConnectingThis ? (
                      <ActivityIndicator size="small" color={AppColors.primary} />
                    ) : isConnected ? (
                      <View style={styles.connectedBadge}>
                        <Ionicons name="checkmark-circle" size={20} color={AppColors.success} />
                      </View>
                    ) : (
                      <Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
                    )}
                  </TouchableOpacity>
                );
              })}
            </View>
          </>
        )}

        {/* Empty State (after scan completed, no devices found) */}
        {!isScanning && foundDevices.length === 0 && (
          <View style={styles.emptyState}>
            <View style={styles.emptyIconContainer}>
              <Ionicons name="search-outline" size={48} color={AppColors.textMuted} />
            </View>
            <Text style={styles.emptyTitle}>No Sensors Found</Text>
            <Text style={styles.emptyText}>
              Make sure your WP sensor is powered on and within range, then try scanning again.
            </Text>
          </View>
        )}

        {/* Help Card */}
        <View style={styles.helpCard}>
          <View style={styles.helpHeader}>
            <Ionicons name="help-circle" size={20} color={AppColors.info} />
            <Text style={styles.helpTitle}>Troubleshooting</Text>
          </View>
          <Text style={styles.helpText}>
            • Sensor not showing up? Make sure it's powered on and the LED is blinking{'\n'}
            • Weak signal? Move closer to the sensor{'\n'}
            • Connection fails? Try restarting the sensor{'\n'}
            • Still having issues? Contact support for assistance
          </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,
  },
  simulatorWarning: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: AppColors.warningLight,
    paddingVertical: Spacing.xs,
    paddingHorizontal: Spacing.md,
    gap: Spacing.xs,
    borderBottomWidth: 1,
    borderBottomColor: AppColors.warning,
  },
  simulatorWarningText: {
    fontSize: FontSizes.xs,
    color: AppColors.warning,
    fontWeight: FontWeights.medium,
    flex: 1,
  },
  content: {
    flex: 1,
  },
  scrollContent: {
    padding: Spacing.lg,
    paddingBottom: Spacing.xxl,
  },
  // Instructions
  instructionsCard: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    padding: Spacing.lg,
    marginBottom: Spacing.lg,
    ...Shadows.sm,
  },
  instructionsTitle: {
    fontSize: FontSizes.base,
    fontWeight: FontWeights.semibold,
    color: AppColors.textPrimary,
    marginBottom: Spacing.md,
  },
  step: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginBottom: Spacing.sm,
    gap: Spacing.sm,
  },
  stepNumber: {
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: AppColors.primary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  stepNumberText: {
    fontSize: FontSizes.xs,
    fontWeight: FontWeights.bold,
    color: AppColors.white,
  },
  stepText: {
    flex: 1,
    fontSize: FontSizes.sm,
    color: AppColors.textSecondary,
    lineHeight: 20,
    paddingTop: 2,
  },
  // Scan Button
  scanButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: AppColors.primary,
    paddingVertical: Spacing.md,
    borderRadius: BorderRadius.lg,
    marginBottom: Spacing.lg,
    gap: Spacing.sm,
    ...Shadows.md,
  },
  scanButtonText: {
    fontSize: FontSizes.base,
    fontWeight: FontWeights.semibold,
    color: AppColors.white,
  },
  // Scanning
  scanningCard: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    padding: Spacing.xl,
    alignItems: 'center',
    marginBottom: Spacing.lg,
    ...Shadows.sm,
  },
  scanningText: {
    fontSize: FontSizes.base,
    color: AppColors.textSecondary,
    marginTop: Spacing.md,
    marginBottom: Spacing.md,
  },
  stopScanButton: {
    paddingVertical: Spacing.sm,
    paddingHorizontal: Spacing.lg,
  },
  stopScanText: {
    fontSize: FontSizes.sm,
    fontWeight: FontWeights.medium,
    color: AppColors.error,
  },
  // 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,
  },
  rescanButton: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  rescanText: {
    fontSize: FontSizes.sm,
    fontWeight: FontWeights.medium,
    color: AppColors.primary,
  },
  // Devices List
  devicesList: {
    gap: Spacing.md,
    marginBottom: Spacing.lg,
  },
  deviceCard: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.lg,
    padding: Spacing.md,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    ...Shadows.xs,
  },
  deviceCardConnected: {
    borderWidth: 2,
    borderColor: AppColors.success,
  },
  deviceInfo: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    gap: Spacing.md,
  },
  deviceIcon: {
    width: 48,
    height: 48,
    borderRadius: BorderRadius.lg,
    backgroundColor: AppColors.primaryLighter,
    justifyContent: 'center',
    alignItems: 'center',
  },
  deviceDetails: {
    flex: 1,
  },
  deviceName: {
    fontSize: FontSizes.base,
    fontWeight: FontWeights.semibold,
    color: AppColors.textPrimary,
    marginBottom: 2,
  },
  deviceMeta: {
    fontSize: FontSizes.xs,
    color: AppColors.textMuted,
    marginBottom: 4,
  },
  signalRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  signalText: {
    fontSize: FontSizes.xs,
    fontWeight: FontWeights.medium,
  },
  connectedBadge: {
    padding: Spacing.xs,
  },
  // Empty State
  emptyState: {
    alignItems: 'center',
    padding: Spacing.xl,
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    marginBottom: Spacing.lg,
    ...Shadows.sm,
  },
  emptyIconContainer: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: AppColors.surfaceSecondary,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: Spacing.md,
  },
  emptyTitle: {
    fontSize: FontSizes.lg,
    fontWeight: FontWeights.semibold,
    color: AppColors.textPrimary,
    marginBottom: Spacing.xs,
  },
  emptyText: {
    fontSize: FontSizes.sm,
    color: AppColors.textMuted,
    textAlign: 'center',
    lineHeight: 20,
  },
  // 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,
  },
});