import {
  TouchableOpacity,
  StyleSheet,
  View,
  Switch,
} from "react-native";
import { Text } from '@/components/ui/Text';
import { useState } from "react";
import { router } from "expo-router";
import { Card } from "@/components/ui/Cards";
import { ScreenLayout } from "@/components/ui/ScreenLayout";
import { BorderRadius, Colors, Spacing, Typography } 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";
import { ConfirmModal } from "@/components/ui/ConfirmModal";
import { TimePicker } from "@/components/ui/TimePicker";
import { usePatchUserMe } from "@/hooks/useUserPreferences.queries";
import { useToast } from '@/context/ToastContext';
import { apiClient } from "@/lib/api";

export default function Settings() {
  const { user, logout, updateAuthUser } = useAuth();
  const [allowWeeklyInsights, setAllowWeeklyInsights] = useState(false);
  const [logoutVisible, setLogoutVisible] = useState(false);
  const [exportVisible, setExportVisible] = useState(false);
  const [exporting, setExporting] = useState(false);
  const { showToast } = useToast();

  const notificationsEnabled = user?.notificationsEnabled ?? true;
  const dailyReminderTime = user?.dailyReminderTime ?? "20:00";

  const patchUserMe = usePatchUserMe((updatedUser) => {
    updateAuthUser(updatedUser);
  });

  const handleNotificationToggle = (value: boolean) => {
    patchUserMe.mutate({ notificationsEnabled: value });
  };

  const handleTimeChange = (date: Date) => {
    const time = `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
    patchUserMe.mutate({ dailyReminderTime: time });
  };

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

  const handleLogout = () => {
    setLogoutVisible(true);
  };

  const handleProfilePress = () => {
    router.push("/profile");
  };

  const handleInvisibleMode = () => {};

  const handleDataExport = () => {
    setExportVisible(true);
  };

  const handleExportConfirm = async () => {
    setExporting(true);

    try {
      const { message } = await apiClient.exportData();

      setExportVisible(false);
      showToast(message, "success");
    } catch (error) {
      showToast(
        error instanceof Error
          ? error.message
          : "Não foi possível exportar seus dados",
        "error",
      );
    } finally {
      setExporting(false);
    }
  };

  return (
    <ScreenLayout
      userName={user?.firstName}
      userAvatar={user?.avatarURL}
      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.rowLabel, { width: '100%' }]}>Dados Pessoais</Text>
              <Text style={styles.rowSubtitle}>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, marginBottom: 5 },
              ]}
            >
              <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.rowLabel}>Lembrete diário de humor</Text>
              <Text style={styles.rowSubtitle}>
                {notificationsEnabled ? `Diário às ${dailyReminderTime}` : "Desativado"}
              </Text>
            </View>

            <Switch
              onValueChange={handleNotificationToggle}
              thumbColor={Colors.light.tint}
              trackColor={{
                false: Colors.light.disabled,
                true: Colors.light.gray,
              }}
              value={notificationsEnabled}
              disabled={patchUserMe.isPending}
            />
          </View>

          {notificationsEnabled && (
            <TimePicker
              value={(() => {
                const [h, m] = dailyReminderTime.split(":").map(Number);
                const d = new Date();
                d.setHours(h, m, 0, 0);
                return d;
              })()}
              onChange={handleTimeChange}
            />
          )}

          <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.rowLabel}>Indicadores semanais</Text>
              <Text style={styles.rowSubtitle}>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="Relatório" />
        <Card
          style={{ padding: Spacing.cardGap }}
          onPress={() => router.push("/report")}
        >
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <View style={{ flexDirection: "row", alignItems: "center" }}>
              <MaterialIcons
                name="picture-as-pdf"
                size={24}
                color={Colors.light.textSecondary}
              />
              <Text style={[styles.rowLabel, { marginLeft: 8 }]}>
                Gerar Relatório
              </Text>
            </View>
            <Ionicons name="chevron-forward" size={24} color={textColor} />
          </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={[styles.rowLabel, { marginLeft: 8 }]}>
                Privacidade
              </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={[styles.rowLabel, { marginLeft: 8 }]}>
                Exportar Meus Dados
              </Text>
            </View>

            <MaterialIcons
              name="file-download"
              size={24}
              color={Colors.light.textSecondary}
            />
          </TouchableOpacity>

          <View style={styles.divider} />

          <TouchableOpacity
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between",
            }}
            onPress={() => router.push("/terms")}
          >
            <View style={{ flexDirection: "row", alignItems: "center" }}>
              <MaterialIcons
                name="description"
                size={24}
                color={Colors.light.textSecondary}
              />

              <Text style={[styles.rowLabel, { marginLeft: 8 }]}>
                Termos e Condições
              </Text>
            </View>

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

      <Button
        title="Sair da Conta"
        onPress={handleLogout}
        variant="outline"
        style={{ borderColor: Colors.light.danger }}
        testID="button-logout"
        textStyle={{ color: Colors.light.danger }}
      />

      <ConfirmModal
        visible={logoutVisible}
        title="Sair da conta"
        message="Tem certeza que quer sair?"
        confirmLabel="Sair"
        cancelLabel="Cancelar"
        destructive
        onCancel={() => setLogoutVisible(false)}
        onConfirm={() => {
          setLogoutVisible(false);
          logout();
        }}
        testID="logout-confirm"
      />

      <ConfirmModal
        visible={exportVisible}
        title="Exportar meus dados"
        message={
          "Vamos preparar um arquivo com todos os seus dados e enviá-lo " +
          "para o e-mail abaixo. Pode levar alguns instantes."
        }
        detail={user?.email}
        confirmLabel="Exportar"
        cancelLabel="Cancelar"
        loading={exporting}
        onCancel={() => setExportVisible(false)}
        onConfirm={handleExportConfirm}
        testID="export-confirm"
      />
    </ScreenLayout>
  );
}

const styles = StyleSheet.create({
  cardIcon: {
    paddingVertical: 15,
    paddingHorizontal: 14,
    width: 48,
    borderRadius: BorderRadius.md,
  },
  rowLabel: {
    ...Typography.bodyLg,
    color: Colors.light.text,
  },
  rowSubtitle: {
    ...Typography.bodyMd,
    color: Colors.light.textSecondary,
  },
  divider: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: "#D1D5DB",
    marginVertical: 16,
  },
});