import React, { useState, useEffect, useCallback } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Alert,
  ActivityIndicator,
  RefreshControl,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router, useLocalSearchParams } from 'expo-router';
import { useBeneficiary } from '@/contexts/BeneficiaryContext';
import { api } from '@/services/api';
import {
  AppColors,
  BorderRadius,
  FontSizes,
  FontWeights,
  Spacing,
  Shadows,
} from '@/constants/theme';

interface Device {
  id: string;
  name: string;
  type: 'motion' | 'door' | 'temperature' | 'hub';
  status: 'online' | 'offline';
  lastSeen?: string;
  room?: string;
}

const deviceTypeConfig = {
  motion: {
    icon: 'body-outline' as const,
    label: 'Motion Sensor',
    color: AppColors.primary,
    bgColor: AppColors.primaryLighter,
  },
  door: {
    icon: 'enter-outline' as const,
    label: 'Door Sensor',
    color: AppColors.info,
    bgColor: AppColors.infoLight,
  },
  temperature: {
    icon: 'thermometer-outline' as const,
    label: 'Temperature',
    color: AppColors.warning,
    bgColor: AppColors.warningLight,
  },
  hub: {
    icon: 'git-network-outline' as const,
    label: 'Hub',
    color: AppColors.accent,
    bgColor: AppColors.accentLight,
  },
};

export default function EquipmentScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const { currentBeneficiary } = useBeneficiary();

  const [devices, setDevices] = useState<Device[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [isDetaching, setIsDetaching] = useState<string | null>(null);

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

  useEffect(() => {
    loadDevices();
  }, [id]);

  const loadDevices = async () => {
    if (!id) return;

    try {
      // For now, mock data - replace with actual API call
      // const response = await api.getDevices(id);

      // Mock devices for demonstration
      const mockDevices: Device[] = [
        {
          id: '1',
          name: 'Living Room Motion',
          type: 'motion',
          status: 'online',
          lastSeen: '2 min ago',
          room: 'Living Room',
        },
        {
          id: '2',
          name: 'Front Door',
          type: 'door',
          status: 'online',
          lastSeen: '5 min ago',
          room: 'Entrance',
        },
        {
          id: '3',
          name: 'Bedroom Motion',
          type: 'motion',
          status: 'offline',
          lastSeen: '2 hours ago',
          room: 'Bedroom',
        },
        {
          id: '4',
          name: 'Temperature Monitor',
          type: 'temperature',
          status: 'online',
          lastSeen: '1 min ago',
          room: 'Kitchen',
        },
        {
          id: '5',
          name: 'WellNuo Hub',
          type: 'hub',
          status: 'online',
          lastSeen: 'Just now',
        },
      ];

      setDevices(mockDevices);
    } catch (error) {
      console.error('Failed to load devices:', error);
      Alert.alert('Error', 'Failed to load devices');
    } finally {
      setIsLoading(false);
      setIsRefreshing(false);
    }
  };

  const handleRefresh = useCallback(() => {
    setIsRefreshing(true);
    loadDevices();
  }, [id]);

  const handleDetachDevice = (device: Device) => {
    Alert.alert(
      'Detach Device',
      `Are you sure you want to detach "${device.name}" from ${beneficiaryName}?\n\nThe device will become available for use with another person.`,
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Detach',
          style: 'destructive',
          onPress: async () => {
            setIsDetaching(device.id);
            try {
              // API call to detach device
              // await api.detachDevice(id, device.id);

              // Simulate API delay
              await new Promise(resolve => setTimeout(resolve, 1000));

              // Remove from local state
              setDevices(prev => prev.filter(d => d.id !== device.id));

              Alert.alert('Success', `${device.name} has been detached.`);
            } catch (error) {
              Alert.alert('Error', 'Failed to detach device. Please try again.');
            } finally {
              setIsDetaching(null);
            }
          },
        },
      ]
    );
  };

  const handleDetachAll = () => {
    if (devices.length === 0) {
      Alert.alert('No Devices', 'There are no devices to detach.');
      return;
    }

    Alert.alert(
      'Detach All Devices',
      `Are you sure you want to detach all ${devices.length} devices from ${beneficiaryName}?\n\nThis action cannot be undone.`,
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Detach All',
          style: 'destructive',
          onPress: async () => {
            setIsLoading(true);
            try {
              // API call to detach all devices
              // await api.detachAllDevices(id);

              // Simulate API delay
              await new Promise(resolve => setTimeout(resolve, 1500));

              setDevices([]);
              Alert.alert('Success', 'All devices have been detached.');
            } catch (error) {
              Alert.alert('Error', 'Failed to detach devices. Please try again.');
            } finally {
              setIsLoading(false);
            }
          },
        },
      ]
    );
  };

  const handleAddDevice = () => {
    router.push({
      pathname: '/(auth)/activate',
      params: { lovedOneName: beneficiaryName, beneficiaryId: id },
    });
  };

  if (isLoading) {
    return (
      <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
        <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}>Equipment</Text>
          <View style={styles.placeholder} />
        </View>
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color={AppColors.primary} />
          <Text style={styles.loadingText}>Loading devices...</Text>
        </View>
      </SafeAreaView>
    );
  }

  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}>Equipment</Text>
        <TouchableOpacity style={styles.addButton} onPress={handleAddDevice}>
          <Ionicons name="add" size={24} color={AppColors.primary} />
        </TouchableOpacity>
      </View>

      <ScrollView
        style={styles.content}
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
        refreshControl={
          <RefreshControl refreshing={isRefreshing} onRefresh={handleRefresh} />
        }
      >
        {/* Summary Card */}
        <View style={styles.summaryCard}>
          <View style={styles.summaryRow}>
            <View style={styles.summaryItem}>
              <Text style={styles.summaryValue}>{devices.length}</Text>
              <Text style={styles.summaryLabel}>Total Devices</Text>
            </View>
            <View style={styles.summaryDivider} />
            <View style={styles.summaryItem}>
              <Text style={[styles.summaryValue, { color: AppColors.success }]}>
                {devices.filter(d => d.status === 'online').length}
              </Text>
              <Text style={styles.summaryLabel}>Online</Text>
            </View>
            <View style={styles.summaryDivider} />
            <View style={styles.summaryItem}>
              <Text style={[styles.summaryValue, { color: AppColors.error }]}>
                {devices.filter(d => d.status === 'offline').length}
              </Text>
              <Text style={styles.summaryLabel}>Offline</Text>
            </View>
          </View>
        </View>

        {/* Devices List */}
        {devices.length === 0 ? (
          <View style={styles.emptyState}>
            <View style={styles.emptyIconContainer}>
              <Ionicons name="hardware-chip-outline" size={48} color={AppColors.textMuted} />
            </View>
            <Text style={styles.emptyTitle}>No Devices Connected</Text>
            <Text style={styles.emptyText}>
              Add sensors to start monitoring {beneficiaryName}'s wellness.
            </Text>
            <TouchableOpacity style={styles.addDeviceButton} onPress={handleAddDevice}>
              <Ionicons name="add" size={20} color={AppColors.white} />
              <Text style={styles.addDeviceButtonText}>Add Device</Text>
            </TouchableOpacity>
          </View>
        ) : (
          <>
            <Text style={styles.sectionTitle}>Connected Devices</Text>
            <View style={styles.devicesList}>
              {devices.map((device) => {
                const config = deviceTypeConfig[device.type];
                const isDetachingThis = isDetaching === device.id;

                return (
                  <View key={device.id} style={styles.deviceCard}>
                    <View style={styles.deviceInfo}>
                      <View style={[styles.deviceIcon, { backgroundColor: config.bgColor }]}>
                        <Ionicons name={config.icon} size={22} color={config.color} />
                      </View>
                      <View style={styles.deviceDetails}>
                        <Text style={styles.deviceName}>{device.name}</Text>
                        <View style={styles.deviceMeta}>
                          <View style={[
                            styles.statusDot,
                            { backgroundColor: device.status === 'online' ? AppColors.success : AppColors.error }
                          ]} />
                          <Text style={styles.deviceStatus}>
                            {device.status === 'online' ? 'Online' : 'Offline'}
                          </Text>
                          {device.room && (
                            <>
                              <Text style={styles.deviceMetaSeparator}>•</Text>
                              <Text style={styles.deviceRoom}>{device.room}</Text>
                            </>
                          )}
                        </View>
                      </View>
                    </View>

                    <TouchableOpacity
                      style={styles.detachButton}
                      onPress={() => handleDetachDevice(device)}
                      disabled={isDetachingThis}
                    >
                      {isDetachingThis ? (
                        <ActivityIndicator size="small" color={AppColors.error} />
                      ) : (
                        <Ionicons name="unlink-outline" size={20} color={AppColors.error} />
                      )}
                    </TouchableOpacity>
                  </View>
                );
              })}
            </View>

            {/* Detach All Button */}
            {devices.length > 1 && (
              <TouchableOpacity style={styles.detachAllButton} onPress={handleDetachAll}>
                <Ionicons name="trash-outline" size={20} color={AppColors.error} />
                <Text style={styles.detachAllText}>Detach All Devices</Text>
              </TouchableOpacity>
            )}
          </>
        )}

        {/* Info Section */}
        <View style={styles.infoCard}>
          <View style={styles.infoHeader}>
            <Ionicons name="information-circle" size={20} color={AppColors.info} />
            <Text style={styles.infoTitle}>About Equipment</Text>
          </View>
          <Text style={styles.infoText}>
            Detaching a device will remove it from {beneficiaryName}'s monitoring setup.
            You can then attach it to another person or re-attach it later using the activation code.
          </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,
  },
  addButton: {
    width: 40,
    height: 40,
    borderRadius: BorderRadius.md,
    backgroundColor: AppColors.primaryLighter,
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    flex: 1,
  },
  scrollContent: {
    padding: Spacing.lg,
    paddingBottom: Spacing.xxl,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: Spacing.md,
  },
  loadingText: {
    fontSize: FontSizes.base,
    color: AppColors.textSecondary,
  },
  // Summary Card
  summaryCard: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    padding: Spacing.lg,
    marginBottom: Spacing.lg,
    ...Shadows.sm,
  },
  summaryRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  summaryItem: {
    flex: 1,
    alignItems: 'center',
  },
  summaryValue: {
    fontSize: FontSizes['2xl'],
    fontWeight: FontWeights.bold,
    color: AppColors.textPrimary,
  },
  summaryLabel: {
    fontSize: FontSizes.xs,
    color: AppColors.textMuted,
    marginTop: 2,
  },
  summaryDivider: {
    width: 1,
    height: 32,
    backgroundColor: AppColors.border,
  },
  // Section Title
  sectionTitle: {
    fontSize: FontSizes.sm,
    fontWeight: FontWeights.semibold,
    color: AppColors.textSecondary,
    marginBottom: Spacing.md,
    textTransform: 'uppercase',
    letterSpacing: 0.5,
  },
  // Devices List
  devicesList: {
    gap: Spacing.md,
  },
  deviceCard: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.lg,
    padding: Spacing.md,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    ...Shadows.xs,
  },
  deviceInfo: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    gap: Spacing.md,
  },
  deviceIcon: {
    width: 48,
    height: 48,
    borderRadius: BorderRadius.lg,
    justifyContent: 'center',
    alignItems: 'center',
  },
  deviceDetails: {
    flex: 1,
  },
  deviceName: {
    fontSize: FontSizes.base,
    fontWeight: FontWeights.semibold,
    color: AppColors.textPrimary,
  },
  deviceMeta: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 2,
    gap: 4,
  },
  statusDot: {
    width: 6,
    height: 6,
    borderRadius: 3,
  },
  deviceStatus: {
    fontSize: FontSizes.xs,
    color: AppColors.textSecondary,
  },
  deviceMetaSeparator: {
    fontSize: FontSizes.xs,
    color: AppColors.textMuted,
  },
  deviceRoom: {
    fontSize: FontSizes.xs,
    color: AppColors.textMuted,
  },
  detachButton: {
    width: 40,
    height: 40,
    borderRadius: BorderRadius.md,
    backgroundColor: AppColors.errorLight,
    justifyContent: 'center',
    alignItems: 'center',
  },
  // Empty State
  emptyState: {
    alignItems: 'center',
    padding: Spacing.xl,
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    ...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',
    marginBottom: Spacing.lg,
  },
  addDeviceButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: AppColors.primary,
    paddingVertical: Spacing.sm,
    paddingHorizontal: Spacing.lg,
    borderRadius: BorderRadius.lg,
    gap: Spacing.xs,
  },
  addDeviceButtonText: {
    fontSize: FontSizes.base,
    fontWeight: FontWeights.semibold,
    color: AppColors.white,
  },
  // Detach All Button
  detachAllButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: AppColors.errorLight,
    paddingVertical: Spacing.md,
    borderRadius: BorderRadius.lg,
    marginTop: Spacing.lg,
    gap: Spacing.sm,
  },
  detachAllText: {
    fontSize: FontSizes.base,
    fontWeight: FontWeights.semibold,
    color: AppColors.error,
  },
  // Info Card
  infoCard: {
    backgroundColor: AppColors.infoLight,
    borderRadius: BorderRadius.lg,
    padding: Spacing.md,
    marginTop: Spacing.xl,
  },
  infoHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: Spacing.sm,
    marginBottom: Spacing.xs,
  },
  infoTitle: {
    fontSize: FontSizes.sm,
    fontWeight: FontWeights.semibold,
    color: AppColors.info,
  },
  infoText: {
    fontSize: FontSizes.sm,
    color: AppColors.info,
    lineHeight: 20,
  },
});