import { useRouter } from "expo-router";
import { useEffect, useState } from "react";
import { ScrollView, StyleSheet, View } from "react-native";

import EnIcon from "@/assets/icons/en_icon.png";
import VnIcon from "@/assets/icons/vi_icon.png";
import RotateSwitch from "@/components/rotate-switch";
import { ThemeToggle } from "@/components/theme-toggle";
import { ThemedText } from "@/components/themed-text";
import { ThemedView } from "@/components/themed-view";
import { DOMAIN, TOKEN } from "@/constants";
import { useAppTheme } from "@/hooks/use-app-theme";
import { useI18n } from "@/hooks/use-i18n";
import { removeStorageItem } from "@/utils/storage";
import { SafeAreaView } from "react-native-safe-area-context";
type Todo = {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
};

export default function SettingScreen() {
  const router = useRouter();
  const [data, setData] = useState<Todo | null>(null);
  const { t, locale, setLocale } = useI18n();
  const { colors } = useAppTheme();
  const [isEnabled, setIsEnabled] = useState(locale === "vi");

  // Sync isEnabled state khi locale thay đổi
  useEffect(() => {
    setIsEnabled(locale === "vi");
  }, [locale]);

  const toggleSwitch = async () => {
    const newLocale = isEnabled ? "en" : "vi";
    await setLocale(newLocale);
  };

  return (
    <SafeAreaView style={styles.safeArea} edges={["top", "left", "right"]}>
      <ThemedView style={styles.container}>
        <ScrollView
          style={styles.scrollView}
          contentContainerStyle={styles.scrollContent}
          showsVerticalScrollIndicator={false}
        >
          <ThemedText type="title" style={styles.title}>
            {t("navigation.setting")}
          </ThemedText>

          {/* Theme Toggle Section */}
          <ThemeToggle style={styles.themeSection} />

          {/* Language Section */}
          <View
            style={[
              styles.settingItem,
              {
                backgroundColor: colors.surface,
                borderColor: colors.border,
              },
            ]}
          >
            <ThemedText type="default">{t("common.language")}</ThemedText>
            <RotateSwitch
              initialValue={isEnabled}
              onChange={toggleSwitch}
              size="sm"
              offImage={EnIcon}
              onImage={VnIcon}
            />
          </View>

          {/* Logout Button */}
          <ThemedView
            style={[styles.button, { backgroundColor: colors.primary }]}
            onTouchEnd={async () => {
              await removeStorageItem(TOKEN);
              await removeStorageItem(DOMAIN);
              router.navigate("/auth/login");
            }}
          >
            <ThemedText type="defaultSemiBold" style={styles.buttonText}>
              {t("auth.logout")}
            </ThemedText>
          </ThemedView>

          {data && (
            <ThemedView
              style={[styles.debugSection, { backgroundColor: colors.surface }]}
            >
              <ThemedText type="default">{data.title}</ThemedText>
              <ThemedText type="default">{data.completed}</ThemedText>
              <ThemedText type="default">{data.id}</ThemedText>
            </ThemedView>
          )}
        </ScrollView>
      </ThemedView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    paddingBottom: 5,
  },
  container: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    padding: 20,
    gap: 16,
  },
  title: {
    textAlign: "center",
    marginBottom: 20,
  },
  themeSection: {
    marginBottom: 8,
  },
  settingItem: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 16,
    paddingVertical: 16,
    borderRadius: 12,
    borderWidth: 1,
  },
  button: {
    marginTop: 20,
    paddingVertical: 14,
    paddingHorizontal: 20,
    borderRadius: 12,
    alignItems: "center",
    justifyContent: "center",
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
  },
  debugSection: {
    marginTop: 20,
    padding: 16,
    borderRadius: 12,
    gap: 8,
  },
});