import React, { useCallback } from 'react';
import { Animated, Image, StyleSheet, TouchableOpacity, View } from 'react-native';
import { ThemedText } from '../../components/themed-text';
import { ThemedView } from '../../components/themed-view';
import { IconSymbol } from '../../components/ui/icon-symbol';
import { Separator } from '../../components/ui/separator';
import { useApi } from '../../lib/network/api';
import { useThemeColor } from '../../lib/hooks/use-theme-color';
import { useBaseStore } from '../../lib/stores/base';
import { useThemedActionSheet } from '../../components/themed-sheet';

interface SettingsItem {
  id: number;
  title: string,
  onPress?: () => void;
};

const SettingsSection = ({ items }: { items: SettingsItem[] }) => {
  const cardColor = useThemeColor("card");
  const secondaryColor = useThemeColor("secondary");

  return (
    <ThemedView style={[styles.options, { backgroundColor: cardColor }]}>
      {items.map((item, index) => (
        <View key={item.id}>
          <TouchableOpacity onPress={item.onPress} activeOpacity={0.7}>
            <Animated.View style={styles.optionItem}>
              <ThemedText type="default">{item.title}</ThemedText>
              <IconSymbol name="chevron-right" size={20} color={secondaryColor} />
            </Animated.View>
          </TouchableOpacity>
          {index < items.length - 1 && <Separator thickness={2} />}
        </View>
      ))}
    </ThemedView>
  );
};

export default function Settings() {
  const { showActionSheetWithOptions } = useThemedActionSheet();
  const clearAuth = useBaseStore((s) => s.clearAuth);
  const setTheme = useBaseStore((s) => s.setTheme);
  const user = useBaseStore((s) => s.user);
  const api = useApi();

  const themeOptions = () => {
    showActionSheetWithOptions({
      title: "Theme",
      options: ["Automatic", "Dark", "Light"]
    }, (selectedIndex?: number) => {
      if (selectedIndex === undefined) return;
      const themes = ["auto", "dark", "light"] as const;
      setTheme(themes[selectedIndex]);
    });
  }

  const firstGroup: SettingsItem[] = [
    { id: 1, title: 'Account' },
    { id: 2, title: 'Profile' },
    { id: 3, title: 'Theme', onPress: themeOptions },
  ];

  const secondGroup: SettingsItem[] = [
    { id: 4, title: 'Switch Account' },
    { id: 5, title: 'Log Out', onPress: () => clearAuth() },
  ];

  return (
    <ThemedView style={styles.container}>
      <View style={styles.profileInfo}>
        <Image
          style={styles.avatar}
          source={api.getAvatarUrl(user?.id, user?.avatar)}
        />
        <View style={styles.usernameRow}>
          <ThemedText type="subtitle">{user?.username}</ThemedText>
          <ThemedText type="subtitle" style={styles.discriminator}>
            #{user?.discriminator}
          </ThemedText>
        </View>
      </View>

      <SettingsSection items={firstGroup} />
      <SettingsSection items={secondGroup} />
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    marginLeft: 20,
    marginRight: 20
  },
  profileInfo: {
    alignItems: "center",
    marginBottom: 12
  },
  usernameRow: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 5
  },
  discriminator: {
    opacity: 0.5,
    marginLeft: 2
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 1000,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 6 },
    shadowOpacity: 0.25,
    shadowRadius: 12,
  },
  options: {
    borderRadius: 6,
    marginBottom: 18
  },
  optionItem: {
    padding: 8,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  }
});
