import React, { useState, useEffect, useCallback } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Alert,
  TextInput,
  Modal,
} from 'react-native';
import { router } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useAuth } from '@/contexts/AuthContext';
import { api } from '@/services/api';
import { AppColors, BorderRadius, FontSizes, Spacing } from '@/constants/theme';

interface MenuItemProps {
  icon: keyof typeof Ionicons.glyphMap;
  iconColor?: string;
  iconBgColor?: string;
  title: string;
  subtitle?: string;
  onPress?: () => void;
  showChevron?: boolean;
}

function MenuItem({
  icon,
  iconColor = AppColors.primary,
  iconBgColor = '#DBEAFE',
  title,
  subtitle,
  onPress,
  showChevron = true,
}: MenuItemProps) {
  return (
    <TouchableOpacity style={styles.menuItem} onPress={onPress}>
      <View style={[styles.menuIconContainer, { backgroundColor: iconBgColor }]}>
        <Ionicons name={icon} size={20} color={iconColor} />
      </View>
      <View style={styles.menuTextContainer}>
        <Text style={styles.menuTitle}>{title}</Text>
        {subtitle && <Text style={styles.menuSubtitle}>{subtitle}</Text>}
      </View>
      {showChevron && (
        <Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
      )}
    </TouchableOpacity>
  );
}

export default function ProfileScreen() {
  const { user, logout } = useAuth();
  const [deploymentId, setDeploymentId] = useState<string>('');
  const [showDeploymentModal, setShowDeploymentModal] = useState(false);
  const [tempDeploymentId, setTempDeploymentId] = useState('');

  // Load saved deployment ID
  useEffect(() => {
    const loadDeploymentId = async () => {
      const saved = await api.getDeploymentId();
      if (saved) {
        setDeploymentId(saved);
      }
    };
    loadDeploymentId();
  }, []);

  const openDeploymentModal = useCallback(() => {
    setTempDeploymentId(deploymentId);
    setShowDeploymentModal(true);
  }, [deploymentId]);

  const saveDeploymentId = useCallback(async () => {
    const trimmed = tempDeploymentId.trim();
    if (trimmed) {
      await api.setDeploymentId(trimmed);
      setDeploymentId(trimmed);
    } else {
      await api.clearDeploymentId();
      setDeploymentId('');
    }
    setShowDeploymentModal(false);
  }, [tempDeploymentId]);

  const openTerms = () => {
    router.push('/terms');
  };

  const openPrivacy = () => {
    router.push('/privacy');
  };

  const handleLogout = () => {
    Alert.alert(
      'Logout',
      'Are you sure you want to logout?',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Logout',
          style: 'destructive',
          onPress: async () => {
            await logout();
            router.replace('/(auth)/login');
          },
        },
      ],
      { cancelable: true }
    );
  };

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      <ScrollView showsVerticalScrollIndicator={false}>
        {/* Header */}
        <View style={styles.header}>
          <Text style={styles.headerTitle}>Profile</Text>
        </View>

        {/* User Info */}
        <View style={styles.userCard}>
          <View style={styles.avatarContainer}>
            <Text style={styles.avatarText}>
              {user?.user_name?.charAt(0).toUpperCase() || 'U'}
            </Text>
          </View>
          <View style={styles.userInfo}>
            <Text style={styles.userName}>{user?.user_name || 'User'}</Text>
          </View>
        </View>

        {/* Settings */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Settings</Text>
          <View style={styles.menuCard}>
            <MenuItem
              icon="server-outline"
              title="Deployment ID"
              subtitle={deploymentId || 'Not set (auto)'}
              onPress={openDeploymentModal}
            />
          </View>
        </View>

        {/* Legal - Required for App Store */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Legal</Text>
          <View style={styles.menuCard}>
            <MenuItem
              icon="document-text-outline"
              title="Terms of Service"
              onPress={openTerms}
            />
            <View style={styles.menuDivider} />
            <MenuItem
              icon="shield-outline"
              title="Privacy Policy"
              onPress={openPrivacy}
            />
          </View>
        </View>

        {/* Logout Button */}
        <View style={styles.section}>
          <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
            <Ionicons name="log-out-outline" size={20} color={AppColors.error} />
            <Text style={styles.logoutText}>Logout</Text>
          </TouchableOpacity>
        </View>

        {/* Version */}
        <Text style={styles.version}>WellNuo v1.0.0</Text>
      </ScrollView>

      {/* Deployment ID Modal */}
      <Modal
        visible={showDeploymentModal}
        transparent
        animationType="fade"
        onRequestClose={() => setShowDeploymentModal(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>Deployment ID</Text>
            <Text style={styles.modalDescription}>
              Enter the deployment ID to connect to a specific device. Leave empty for automatic detection.
            </Text>
            <TextInput
              style={styles.modalInput}
              placeholder="e.g., 21"
              placeholderTextColor={AppColors.textMuted}
              value={tempDeploymentId}
              onChangeText={setTempDeploymentId}
              keyboardType="numeric"
              autoFocus
            />
            <View style={styles.modalButtons}>
              <TouchableOpacity
                style={styles.modalButtonCancel}
                onPress={() => setShowDeploymentModal(false)}
              >
                <Text style={styles.modalButtonCancelText}>Cancel</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.modalButtonSave}
                onPress={saveDeploymentId}
              >
                <Text style={styles.modalButtonSaveText}>Save</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: AppColors.surface,
  },
  header: {
    paddingHorizontal: Spacing.lg,
    paddingVertical: Spacing.md,
    backgroundColor: AppColors.background,
    borderBottomWidth: 1,
    borderBottomColor: AppColors.border,
  },
  headerTitle: {
    fontSize: FontSizes.xl,
    fontWeight: '700',
    color: AppColors.textPrimary,
  },
  userCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: AppColors.background,
    padding: Spacing.lg,
    marginBottom: Spacing.md,
  },
  avatarContainer: {
    width: 64,
    height: 64,
    borderRadius: BorderRadius.full,
    backgroundColor: AppColors.primary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  avatarText: {
    fontSize: FontSizes['2xl'],
    fontWeight: '600',
    color: AppColors.white,
  },
  userInfo: {
    flex: 1,
    marginLeft: Spacing.md,
  },
  userName: {
    fontSize: FontSizes.lg,
    fontWeight: '600',
    color: AppColors.textPrimary,
  },
  editButton: {
    width: 40,
    height: 40,
    borderRadius: BorderRadius.full,
    backgroundColor: AppColors.surface,
    justifyContent: 'center',
    alignItems: 'center',
  },
  section: {
    marginBottom: Spacing.md,
  },
  sectionTitle: {
    fontSize: FontSizes.sm,
    fontWeight: '600',
    color: AppColors.textSecondary,
    paddingHorizontal: Spacing.lg,
    paddingVertical: Spacing.sm,
    textTransform: 'uppercase',
  },
  menuCard: {
    backgroundColor: AppColors.background,
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: Spacing.md,
    paddingHorizontal: Spacing.lg,
  },
  menuIconContainer: {
    width: 36,
    height: 36,
    borderRadius: BorderRadius.md,
    justifyContent: 'center',
    alignItems: 'center',
  },
  menuTextContainer: {
    flex: 1,
    marginLeft: Spacing.md,
  },
  menuTitle: {
    fontSize: FontSizes.base,
    fontWeight: '500',
    color: AppColors.textPrimary,
  },
  menuSubtitle: {
    fontSize: FontSizes.xs,
    color: AppColors.textMuted,
    marginTop: 2,
  },
  menuDivider: {
    height: 1,
    backgroundColor: AppColors.border,
    marginLeft: Spacing.lg + 36 + Spacing.md,
  },
  logoutButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: AppColors.background,
    paddingVertical: Spacing.md,
    marginHorizontal: Spacing.lg,
    borderRadius: BorderRadius.lg,
  },
  logoutText: {
    fontSize: FontSizes.base,
    fontWeight: '600',
    color: AppColors.error,
    marginLeft: Spacing.sm,
  },
  version: {
    textAlign: 'center',
    fontSize: FontSizes.xs,
    color: AppColors.textMuted,
    paddingVertical: Spacing.xl,
  },
  // Modal styles
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
    padding: Spacing.lg,
  },
  modalContent: {
    backgroundColor: AppColors.background,
    borderRadius: BorderRadius.lg,
    padding: Spacing.lg,
    width: '100%',
    maxWidth: 400,
  },
  modalTitle: {
    fontSize: FontSizes.lg,
    fontWeight: '600',
    color: AppColors.textPrimary,
    marginBottom: Spacing.sm,
  },
  modalDescription: {
    fontSize: FontSizes.sm,
    color: AppColors.textSecondary,
    marginBottom: Spacing.md,
  },
  modalInput: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.md,
    paddingHorizontal: Spacing.md,
    paddingVertical: Spacing.sm + 4,
    fontSize: FontSizes.base,
    color: AppColors.textPrimary,
    borderWidth: 1,
    borderColor: AppColors.border,
    marginBottom: Spacing.md,
  },
  modalButtons: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    gap: Spacing.sm,
  },
  modalButtonCancel: {
    paddingHorizontal: Spacing.md,
    paddingVertical: Spacing.sm,
  },
  modalButtonCancelText: {
    fontSize: FontSizes.base,
    color: AppColors.textSecondary,
  },
  modalButtonSave: {
    backgroundColor: AppColors.primary,
    paddingHorizontal: Spacing.lg,
    paddingVertical: Spacing.sm,
    borderRadius: BorderRadius.md,
  },
  modalButtonSaveText: {
    fontSize: FontSizes.base,
    fontWeight: '600',
    color: AppColors.white,
  },
});