import React, { useState } from "react";
import { StyleSheet, Text, View, TouchableOpacity, Alert } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

import { useRouter } from "expo-router";
import { useAuth } from "@/context/auth-context";

export default function SettingsScreen() {
  const router = useRouter()
  const { logout } = useAuth();
  const [theme, setTheme] = useState("light"); // light | dark | system

  const handleLogout = () => {
    Alert.alert("Logout", "Are you sure you want to logout?", [
      { text: "Cancel", style: "cancel" },
      {
        text: "Logout",
        style: "destructive",
        onPress: () => {
          // TODO: clear auth state here
          router.replace("/login");
            logout();
        },
      },
    ]);
  };

  const toggleTheme = (value) => {
    setTheme(value);
    // TODO: persist theme (AsyncStorage / context / zustand)
  };

  return (
    <SafeAreaView style={styles.screen} edges={["top", "bottom"]}>
      <View style={styles.content}>
        
        <Text style={styles.title}>Settings</Text>

        {/* Theme Selector */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Theme</Text>

          <View style={styles.row}>
            <ThemeButton
              label="Light"
              active={theme === "light"}
              onPress={() => toggleTheme("light")}
            />
            <ThemeButton
              label="Dark"
              active={theme === "dark"}
              onPress={() => toggleTheme("dark")}
            />
            <ThemeButton
              label="System"
              active={theme === "system"}
              onPress={() => toggleTheme("system")}
            />
          </View>
        </View>

        {/* Logout */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Account</Text>

          <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
            <Text style={styles.logoutText}>Log Out</Text>
          </TouchableOpacity>
        </View>

      </View>
    </SafeAreaView>
  );
}

function ThemeButton({ label, active, onPress }) {
  return (
    <TouchableOpacity
      onPress={onPress}
      style={[styles.themeButton, active && styles.themeButtonActive]}
    >
      <Text style={[styles.themeText, active && styles.themeTextActive]}>
        {label}
      </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: "#fff",
  },
  content: {
    flex: 1,
    paddingHorizontal: 16,
    paddingTop: 12,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 20,
  },

  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: "600",
    marginBottom: 10,
  },

  row: {
    flexDirection: "row",
    gap: 10,
  },

  themeButton: {
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: "#ccc",
  },
  themeButtonActive: {
    backgroundColor: "#111",
    borderColor: "#111",
  },
  themeText: {
    color: "#333",
    paddingHorizontal: 5,
  },
  themeTextActive: {
    color: "#fff",
  },

  logoutButton: {
    padding: 14,
    borderRadius: 10,
    backgroundColor: "#ff3b30",
    alignItems: "center",
  },
  logoutText: {
    color: "#fff",
    fontWeight: "600",
  },
});