import { router } from 'expo-router';
import { useState } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { LabeledField } from '../../src/components/LabeledField';
import { PrimaryButton } from '../../src/components/PrimaryButton';
import { useApp } from '../../src/context/AppContext';
import { colors } from '../../src/theme/colors';

export default function ReglagesScreen() {
  const insets = useSafeAreaInsets();
  const app = useApp();
  const [url, setUrl] = useState('');
  const [key, setKey] = useState('');
  const [msg, setMsg] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  return (
    <ScrollView
      contentContainerStyle={{
        padding: 20,
        paddingTop: 12,
        paddingBottom: insets.bottom + 32,
        backgroundColor: colors.bg,
      }}
    >
      <Text style={styles.h2}>Mode actuel</Text>
      <Text style={styles.p}>
        {app.runtimeMode === 'local' && 'Hors-ligne — données stockées sur l’appareil.'}
        {app.runtimeMode === 'cloud' && 'Supabase — synchronisation cloud.'}
        {app.runtimeMode === 'none' && 'Non initialisé.'}
      </Text>
      {app.user ? (
        <Text style={styles.p}>
          Compte : {app.user.email ?? app.user.id}
        </Text>
      ) : null}

      <Text style={[styles.h2, { marginTop: 24 }]}>Projet Supabase</Text>
      <Text style={styles.p}>
        URL et clé « anon » (Settings → API). Exécutez aussi la migration SQL du
        dépôt sur votre projet.
      </Text>
      <LabeledField
        label="URL du projet"
        autoCapitalize="none"
        value={url}
        onChangeText={setUrl}
        placeholder="https://xxxx.supabase.co"
      />
      <LabeledField
        label="Clé anon (public)"
        autoCapitalize="none"
        value={key}
        onChangeText={setKey}
        placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
      />
      {msg ? <Text style={styles.msg}>{msg}</Text> : null}
      <PrimaryButton
        title="Enregistrer et passer en mode cloud"
        loading={loading}
        onPress={async () => {
          setMsg(null);
          if (!url.trim() || !key.trim()) {
            setMsg('Renseignez URL et clé.');
            return;
          }
          setLoading(true);
          try {
            await app.saveCloudConfig({
              supabaseUrl: url.trim(),
              supabaseAnonKey: key.trim(),
            });
            setMsg('Configuration enregistrée. Connectez-vous ou créez un compte.');
            router.push('/auth/login');
          } catch {
            setMsg('Erreur lors de l’enregistrement.');
          } finally {
            setLoading(false);
          }
        }}
      />

      <PrimaryButton
        title="Activer le mode hors-ligne"
        variant="ghost"
        containerStyle={{ marginTop: 12 }}
        onPress={async () => {
          await app.enterLocalMode();
          setMsg('Mode hors-ligne activé.');
          router.replace('/(tabs)');
        }}
      />

      <PrimaryButton
        title="Déconnexion / quitter la session"
        variant="ghost"
        containerStyle={{ marginTop: 24 }}
        onPress={async () => {
          await app.signOut();
          router.replace('/');
        }}
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  h2: { color: colors.text, fontSize: 18, fontWeight: '700', marginBottom: 8 },
  p: { color: colors.textMuted, lineHeight: 20, marginBottom: 8 },
  msg: { color: colors.flash, marginBottom: 12, lineHeight: 20 },
});