import {

  TouchableOpacity,

  StyleSheet,

  Text,

  SectionList,

  View,

  Alert,

  Switch,

  Pressable,

} from "react-native";

import { useState } from "react";

import { router } from "expo-router";

import { Card } from "@/components/ui/Cards";

import ScreenLayout from "@/components/ui/ScreenLayout";

import { BorderRadius, Colors, Fonts, Spacing } from "@/constants/theme";

import { useThemeColor } from "@/hooks/use-theme-color";

import { useAuth } from "@/context/AuthContext";

import { Section, SectionHeader } from "@/components/ui/Sections";

import { Ionicons, MaterialIcons } from "@expo/vector-icons";

import { Button } from "@/components/ui/Button";

export default function Settings() {

  const { user, logout } = useAuth();

  const [allowNotifications, setAllowNotifications] = useState(false);

  const [allowWeeklyInsights, setAllowWeeklyInsights] = useState(false);

  const textColor = useThemeColor({}, "text");

  const onNotificationPress = () => {};

  const handleLogout = async () => {

    Alert.alert("Sair", "Tem certeza que quer sair?", [

      { text: "Cancelar", style: "cancel" },

      {

        text: "Sair",

        style: "destructive",

        onPress: logout,

      },

    ]);

  };

  const handleProfilePress = () => {

    router.push("/profile");

  };

  const handleInvisibleMode = () => {};

  const handleDataExport = () => {

    Alert.alert("Exportar dados", "Deseja exportar seus dados?", [

      { text: "Cancelar", style: "cancel" },

      {

        text: "Exportar",

        style: "destructive",

        onPress: () => {

          Alert.alert(

            "Exportar dados",

            "Você receberá um e-mail com os dados exportados.",

            [{ text: "OK", style: "default" }],

          );

        },

      },

    ]);

  };

  return (

    <ScreenLayout

      userName={user.firstName}

      userAvatar={user.avatarURL}

      onNotificationPress={onNotificationPress}

      showNotificationBadge={true}

    >

      <Section>

        <SectionHeader title="Perfil" />

        <Card style={{ padding: Spacing.cardGap }} onPress={handleProfilePress}>

          <View

            style={{

              flexDirection: "row",

              alignItems: "center",

              justifyContent: "space-between",

            }}

          >

            <View

              style={{

                flexDirection: "column",

                alignItems: "center",

                justifyContent: "space-between",

              }}

            >

              <Text style={styles.cardTitle}>Dados Pessoais</Text>

              <Text style={styles.cardSubtitle}>Nome, Email e senha</Text>

            </View>

            <Ionicons name="chevron-forward" size={24} color={textColor} />

          </View>

        </Card>

      </Section>

      <Section>

        <SectionHeader title="Notificações" />

        <Card style={{ padding: Spacing.cardGap }}>

          <View

            style={{

              flexDirection: "row",

              alignItems: "center",

              justifyContent: "space-between",

            }}

          >

            <View

              style={[

                styles.cardIcon,

                { backgroundColor: Colors.light.accentBlue },

              ]}

            >

              <Ionicons

                name="notifications-outline"

                size={20}

                color={Colors.light.black}

              />

            </View>

            <View

              style={{

                flexDirection: "column",

                alignItems: "flex-start",

                justifyContent: "space-between",

                marginLeft: 12,

                flex: 1,

              }}

            >

              <Text style={styles.cardTitle}>Notificações</Text>

              <Text>Diário as 20:00</Text>

            </View>

            <Switch

              onValueChange={setAllowNotifications}

              thumbColor={Colors.light.tint}

              trackColor={{

                false: Colors.light.disabled,

                true: Colors.light.gray,

              }}

              value={allowNotifications}

            />

          </View>

          <View style={styles.divider} />

          <View

            style={{

              flexDirection: "row",

              alignItems: "center",

              justifyContent: "space-between",

            }}

          >

            <View

              style={[

                styles.cardIcon,

                { backgroundColor: Colors.light.accentPurple },

              ]}

            >

              <Ionicons name="sparkles" size={20} color={Colors.light.black} />

            </View>

            <View

              style={{

                flexDirection: "column",

                alignItems: "flex-start",

                justifyContent: "space-between",

                marginLeft: 12,

                flex: 1,

              }}

            >

              <Text style={styles.cardTitle}>Indicadores semanais</Text>

              <Text>Relatórios de progressos</Text>

            </View>

            <Switch

              onValueChange={setAllowWeeklyInsights}

              value={allowWeeklyInsights}

              thumbColor={Colors.light.tint}

              trackColor={{

                false: Colors.light.disabled,

                true: Colors.light.gray,

              }}

            />

          </View>

        </Card>

      </Section>

      <Section>

        <SectionHeader title="Privacidade" />

        <Card style={{ padding: Spacing.cardGap }}>

          <TouchableOpacity

            style={{

              flexDirection: "row",

              alignItems: "center",

              justifyContent: "space-between",

            }}

            onPress={handleInvisibleMode}

          >

            <View style={{ flexDirection: "row", alignItems: "center" }}>

              <MaterialIcons

                name="lock"

                size={24}

                color={Colors.light.textSecondary}

              />

              <Text

                style={{

                  marginLeft: 8,

                  color: Colors.light.text,

                  fontSize: 14,

                  fontWeight: "500" as const,

                }}

              >

                Criptografia (EE2E)

              </Text>

            </View>

            <Ionicons name="chevron-forward" size={24} color={textColor} />

          </TouchableOpacity>

          <View style={styles.divider} />

          <TouchableOpacity

            style={{

              flexDirection: "row",

              alignItems: "center",

              justifyContent: "space-between",

            }}

            onPress={handleDataExport}

          >

            <View style={{ flexDirection: "row", alignItems: "center" }}>

              <MaterialIcons

                name="storage"

                size={24}

                color={Colors.light.textSecondary}

              />

              <Text

                style={{

                  marginLeft: 8,

                  color: Colors.light.text,

                  fontSize: 14,

                  fontWeight: "500" as const,

                }}

              >

                Exportar Meus Dados

              </Text>

            </View>

            <MaterialIcons

              name="file-download"

              size={24}

              color={Colors.light.textSecondary}

            />

          </TouchableOpacity>

        </Card>

      </Section>

      <Button

        title="Sair da Conta"

        onPress={handleLogout}

        variant="outline"

        style={{ borderColor: Colors.light.danger }}

        textStyle={{ color: Colors.light.danger }}

      />

    </ScreenLayout>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    marginHorizontal: 16,

    paddingTop: 10,

  },

  item: {

    paddingTop: 20,

    paddingBottom: 20,

  },

  header: {

    fontSize: 22,

    fontWeight: "bold",

  },

  cardIcon: {

    paddingVertical: 15,

    paddingHorizontal: 14,

    width: 48,

    borderRadius: BorderRadius.md,

  },

  cardTitle: {

    fontSize: 16,

    fontWeight: "bold",

  },

  cardSubtitle: {

    fontSize: 12,

    color: Colors.light.textSecondary,

  },

  logout: {

    color: "#FF2C2C",

  },

  divider: {

    height: StyleSheet.hairlineWidth,

    backgroundColor: "#D1D5DB",

    marginVertical: 16,

  },

});