import { Stack } from 'expo-router';
import { View, Text, StyleSheet, ScrollView, TextInput, Switch, Pressable, Linking, Platform } from 'react-native';
import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as SecureStore from 'expo-secure-store';
import Constants from 'expo-constants';
import { useTimmy } from '@/context/TimmyContext';
import { Ionicons } from '@expo/vector-icons';
import { ConnectionBadge } from '@/components/ConnectionBadge';
import { Colors } from '@/constants/colors';

const STORAGE_KEYS = {
  SERVER_URL: 'settings_server_url',
  NOTIFICATIONS_JOB_COMPLETION: 'settings_notifications_job_completion',
  NOTIFICATIONS_LOW_BALANCE: 'settings_notifications_low_balance',
  NOSTR_PRIVATE_KEY: 'settings_nostr_private_key', // Use SecureStore for this
};

export default function SettingsScreen() {
  const { apiBaseUrl, setApiBaseUrl, isConnected, nostrPublicKey, connectNostr, disconnectNostr } = useTimmy();
  const C = Colors.dark;

  const [serverUrl, setServerUrl] = useState(apiBaseUrl);
  const [jobCompletionNotifications, setJobCompletionNotifications] = useState(false);
  const [lowBalanceWarning, setLowBalanceWarning] = useState(false);
  const [currentNpub, setCurrentNpub] = useState<string | null>(nostrPublicKey);

  useEffect(() => {
    // Load settings from AsyncStorage and SecureStore
    const loadSettings = async () => {
      const storedServerUrl = await AsyncStorage.getItem(STORAGE_KEYS.SERVER_URL);
      if (storedServerUrl) {
        setServerUrl(storedServerUrl);
      }
      const storedJobCompletion = await AsyncStorage.getItem(STORAGE_KEYS.NOTIFICATIONS_JOB_COMPLETION);
      if (storedJobCompletion !== null) {
        setJobCompletionNotifications(JSON.parse(storedJobCompletion));
      }
      const storedLowBalance = await AsyncStorage.getItem(STORAGE_KEYS.NOTIFICATIONS_LOW_BALANCE);
      if (storedLowBalance !== null) {
        setLowBalanceWarning(JSON.parse(storedLowBalance));
      }
      // Nostr npub is handled by TimmyContext, so we just use the provided nostrPublicKey
      setCurrentNpub(nostrPublicKey);
    };
    loadSettings();
  }, [nostrPublicKey]);

  // Update apiBaseUrl in context when serverUrl changes and is saved
  useEffect(() => {
    if (serverUrl !== apiBaseUrl) {
      setApiBaseUrl(serverUrl);
      AsyncStorage.setItem(STORAGE_KEYS.SERVER_URL, serverUrl);
    }
  }, [serverUrl, setApiBaseUrl, apiBaseUrl]);

  const handleServerUrlChange = (text: string) => {
    setServerUrl(text);
  };

  const toggleJobCompletionNotifications = async () => {
    const newValue = !jobCompletionNotifications;
    setJobCompletionNotifications(newValue);
    await AsyncStorage.setItem(STORAGE_KEYS.NOTIFICATIONS_JOB_COMPLETION, JSON.stringify(newValue));
  };

  const toggleLowBalanceWarning = async () => {
    const newValue = !lowBalanceWarning;
    setLowBalanceWarning(newValue);
    await AsyncStorage.setItem(STORAGE_KEYS.NOTIFICATIONS_LOW_BALANCE, JSON.stringify(newValue));
  };

  const handleConnectNostr = async () => {
    // This will ideally link to a dedicated Nostr connection flow
    console.log('Connect Nostr button pressed');
    // For now, simulate connection if not connected
    if (!currentNpub) {
      // This is a placeholder. Real implementation would involve generating/importing keys.
      const simulatedNpub = 'npub1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
      connectNostr(simulatedNpub, 'private_key_placeholder'); // Pass a placeholder private key
      setCurrentNpub(simulatedNpub);
      // In a real app, the private key would be securely stored and managed by the context
      // For now, just a placeholder to show connected state
    }
  };

  const handleDisconnectNostr = async () => {
    await disconnectNostr();
    setCurrentNpub(null);
  };

  const appVersion = Constants.expoConfig?.version || 'N/A';
  const buildCommitHash = Constants.expoConfig?.extra?.gitCommitHash || 'N/A';
  const giteaRepoUrl = 'http://143.198.27.163:3000/replit/timmy-tower';

  const openGiteaLink = () => {
    Linking.openURL(giteaRepoUrl);
  };

  return (
    <View style={styles.container}>
      <Stack.Screen options={{ title: 'Settings', headerShown: true, headerStyle: { backgroundColor: C.surface }, headerTintColor: C.text }} />
      <ScrollView contentContainerStyle={styles.scrollContent}>
        <Text style={styles.sectionHeader}>Connection</Text>
        <View style={styles.settingItem}>
          <Text style={styles.settingLabel}>Server URL</Text>
          <View style={styles.serverUrlContainer}>
            <TextInput
              style={[styles.input, { color: C.text, backgroundColor: C.field }]} // Apply text and background color from Colors
              value={serverUrl}
              onChangeText={handleServerUrlChange}
              placeholder="Enter server URL"
              placeholderTextColor={C.textMuted}
              autoCapitalize="none"
              autoCorrect={false}
            />
            <ConnectionBadge isConnected={isConnected} />
          </View>
        </View>

        <Text style={styles.sectionHeader}>Notifications</Text>
        <View style={styles.settingItem}>
          <Text style={styles.settingLabel}>Job Completion Push Notifications</Text>
          <Switch
            trackColor={{ false: C.surface, true: C.accentGlow }}
            thumbColor={Platform.OS === 'android' ? C.text : ''}
            ios_backgroundColor={C.field}
            onValueChange={toggleJobCompletionNotifications}
            value={jobCompletionNotifications}
          />
        </View>
        <View style={styles.settingItem}>
          <Text style={styles.settingLabel}>Low Balance Warning</Text>
          <Switch
            trackColor={{ false: C.surface, true: C.accentGlow }}
            thumbColor={Platform.OS === 'android' ? C.text : ''}
            ios_backgroundColor={C.field}
            onValueChange={toggleLowBalanceWarning}
            value={lowBalanceWarning}
          />
        </View>

        <Text style={styles.sectionHeader}>Identity</Text>
        <View style={styles.settingItem}>
          <Text style={styles.settingLabel}>Nostr Public Key</Text>
          <Text style={[styles.settingValue, { color: C.textMuted }]}>
            {currentNpub ? `${currentNpub.substring(0, 10)}...${currentNpub.substring(currentNpub.length - 5)}` : 'Not connected'}
          </Text>
        </View>
        <View style={styles.buttonContainer}>
          {!currentNpub ? (
            <Pressable onPress={handleConnectNostr} style={({ pressed }) => [styles.button, { backgroundColor: C.accent, opacity: pressed ? 0.8 : 1 }]}>
              <Text style={[styles.buttonText, { color: C.textInverted }]}>Connect Nostr</Text>
            </Pressable>
          ) : (
            <Pressable onPress={handleDisconnectNostr} style={({ pressed }) => [styles.button, { backgroundColor: C.destructive, opacity: pressed ? 0.8 : 1 }]}>
              <Text style={[styles.buttonText, { color: C.textInverted }]}>Disconnect Nostr</Text>
            </Pressable>
          )}
        </View>

        <Text style={styles.sectionHeader}>About</Text>
        <View style={styles.settingItem}>
          <Text style={styles.settingLabel}>App Version</Text>
          <Text style={[styles.settingValue, { color: C.text }]}>{appVersion}</Text>
        </View>
        <View style={styles.settingItem}>
          <Text style={styles.settingLabel}>Build Commit Hash</Text>
          <Text style={[styles.settingValue, { color: C.text }]}>{buildCommitHash}</Text>
        </View>
        <Pressable onPress={openGiteaLink} style={({ pressed }) => [styles.linkButton, { opacity: pressed ? 0.8 : 1 }]}>
          <Ionicons name="link" size={16} color={C.text} />
          <Text style={[styles.linkButtonText, { color: C.link }]}>View project on Gitea</Text>
        </Pressable>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark.background, // Use background color from Colors
  },
  scrollContent: {
    padding: 20,
    paddingBottom: 40,
  },
  sectionHeader: {
    fontSize: 18,
    fontWeight: 'bold',
    color: Colors.dark.text,
    marginTop: 20,
    marginBottom: 10,
  },
  settingItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 0.5,
    borderBottomColor: Colors.dark.border,
  },
  settingLabel: {
    fontSize: 16,
    color: Colors.dark.text,
    flex: 1,
  },
  settingValue: {
    fontSize: 16,
  },
  serverUrlContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 2,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    borderRadius: 8,
    padding: 8,
    fontSize: 14,
    marginRight: 10,
  },
  buttonContainer: {
    marginTop: 20,
    alignItems: 'flex-start',
  },
  button: {
    paddingVertical: 10,
    paddingHorizontal: 15,
    borderRadius: 8,
  },
  buttonText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  linkButton: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 15,
    paddingVertical: 8,
  },
  linkButtonText: {
    marginLeft: 5,
    fontSize: 16,
  },
});