import React, { useState } from "react";
import { View, Text, StyleSheet, Pressable, Switch, ActivityIndicator } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import Header from "../components/Header";
import { useAuth } from "../contexts/AuthContext";

export default function SettingsScreen({ navigation }) {
  const { logout, user } = useAuth();
  const [notificationsEnabled, setNotificationsEnabled] = useState(true);
  const [highQuality, setHighQuality] = useState(false);
  const [loading, setLoading] = useState(false);

  const onLogout = async () => {
    setLoading(true);
    await logout();
    navigation.navigate("Home");
    setLoading(false);
  };

  return (
    <SafeAreaView style={styles.container}>
      <Pressable onPress={() => navigation.goBack()} style={styles.backBtn}>
        <Text style={styles.backText}>← Back</Text>
      </Pressable>

      <Header title="Settings" showIcons={true} />

      {user && (
        <View style={styles.row}>
          <Text style={styles.rowText}>{user.name}</Text>
          <Text style={styles.rowSubtext}>{user.email}</Text>
        </View>
      )}

      <View style={styles.row}>
        <Text style={styles.rowText}>Enable notifications</Text>
        <Switch
          value={notificationsEnabled}
          onValueChange={setNotificationsEnabled}
        />
      </View>

      <View style={styles.row}>
        <Text style={styles.rowText}>High quality streaming</Text>
        <Switch value={highQuality} onValueChange={setHighQuality} />
      </View>

      <Pressable
        style={styles.logoutBtn}
        onPress={onLogout}
        disabled={loading}
      >
        {loading ? (
          <ActivityIndicator color="#000" />
        ) : (
          <Text style={styles.logoutBtnText}>Log out</Text>
        )}
      </Pressable>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    paddingTop: 24,
    paddingHorizontal: 16,
  },
  backBtn: {
    marginBottom: 10,
    alignSelf: "flex-start",
  },
  backText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "600",
  },
  row: {
    backgroundColor: "#111827",
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 14,
    marginBottom: 10,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  rowText: {
    color: "#fff",
    fontSize: 16,
  },
  rowSubtext: {
    color: "#9ca3af",
    fontSize: 14,
  },
  logoutBtn: {
    borderRadius: 10,
    paddingVertical: 12,
    alignItems: "center",
    marginTop: 16,
    backgroundColor: "#e36d6d",
  },
  logoutBtnText: {
    color: "#000000",
    fontWeight: "700",
    fontSize: 16,
  },
});
