import BackButtonTitle from "@/components/ui/BackButtonTitle";
import CustomSwitch from "@/components/ui/Switch";
import { useQueryMutation } from "@/hooks/mutate/useQueryMutation";
import { useColor } from "@/hooks/useColor";
import { useAuthStore } from "@/providers/AuthStoreProviders";
import { showToast } from "@/utils/toast";
import { router } from "expo-router";
import {
  CheckCircleIcon,
  LockKeyIcon,
  ShieldCheckIcon,
  XCircleIcon,
} from "phosphor-react-native";
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export default function SecurityScreen() {
  const { user, getUser } = useAuthStore((state) => state);
  const { primary } = useColor();

  const { mutate: toggle2FA } = useQueryMutation({
    url: "/client/profile/personal-info",
    isUpdateMethod: true,
  });

  const enableTwoFactorAuth = () => {
    toggle2FA(
      {
        is_2fa_enabled: !user?.is_2fa_enabled,
      },
      {
        onSuccess: () => {
          showToast({
            type: "success",
            text: "Two factor authentication updated successfully",
          });
          getUser();
        },
      },
    );
  };

  return (
    <ScrollView className="bg-white px-4">
      <SafeAreaView>
        <BackButtonTitle title="Security Settings" />

        <View className="mt-6 gap-y-4">
          {/* 2FA Toggle */}
          <View className="p-5 rounded-2xl border border-slate-100 bg-slate-50">
            <View className="flex-row items-center justify-between">
              <View className="flex-row items-center gap-4 flex-1">
                <View
                  className="w-12 h-12 rounded-xl items-center justify-center"
                  style={{
                    backgroundColor: user?.is_2fa_enabled
                      ? "#dcfce7"
                      : "#f3f4f6",
                  }}
                >
                  <ShieldCheckIcon
                    size={22}
                    color={user?.is_2fa_enabled ? "#16a34a" : "#9ca3af"}
                    weight="fill"
                  />
                </View>
                <View className="flex-1">
                  <Text className="text-[16px] font-manrope-bold text-slate-800">
                    Two-Factor Authentication
                  </Text>
                  <Text
                    className={`text-sm font-manrope mt-0.5 ${user?.is_2fa_enabled ? "text-green-600" : "text-slate-500"}`}
                  >
                    {user?.is_2fa_enabled ? "Enabled" : "Disabled"}
                  </Text>
                </View>
              </View>
              <CustomSwitch
                active={user?.is_2fa_enabled}
                onPress={enableTwoFactorAuth}
              />
            </View>
          </View>

          {/* Change Password */}
          <TouchableOpacity
            onPress={() => router.push("/change-password")}
            className="p-5 rounded-2xl border border-slate-100 bg-slate-50"
            activeOpacity={0.7}
          >
            <View className="flex-row items-center justify-between">
              <View className="flex-row items-center gap-4 flex-1">
                <View
                  className="w-12 h-12 rounded-xl items-center justify-center"
                  style={{ backgroundColor: "#dcfce7" }}
                >
                  <LockKeyIcon size={22} color="#16a34a" weight="fill" />
                </View>
                <View className="flex-1">
                  <Text className="text-[16px] font-manrope-bold text-slate-800">
                    Change Password
                  </Text>
                  <Text className="text-sm font-manrope text-slate-500 mt-0.5">
                    Secure your account
                  </Text>
                </View>
              </View>
              <View
                className="px-4 py-2 rounded-xl"
                style={{ backgroundColor: primary.base }}
              >
                <Text className="text-xs font-manrope-bold text-white">
                  Change
                </Text>
              </View>
            </View>
          </TouchableOpacity>

          {/* Verification Summary */}
          <View
            className="mt-4 p-5 rounded-2xl border border-slate-100"
            style={{ backgroundColor: primary[5] }}
          >
            <Text className="text-[15px] font-manrope-bold text-slate-800 mb-4">
              Security Overview
            </Text>

            <View className="gap-y-3">
              <SecurityRow
                label="Email Verified"
                isVerified={!!user?.email_verified_at}
              />
              <SecurityRow
                label="Phone Verified"
                isVerified={!!user?.phone_verified_at}
              />
              <SecurityRow
                label="KYC Verified"
                isVerified={!!user?.is_kyc_verified}
              />
              <SecurityRow
                label="2FA Enabled"
                isVerified={!!user?.is_2fa_enabled}
              />
            </View>
          </View>
        </View>

        <View className="h-10" />
      </SafeAreaView>
    </ScrollView>
  );
}

function SecurityRow({
  label,
  isVerified,
}: {
  label: string;
  isVerified: boolean;
}) {
  return (
    <View className="flex-row items-center justify-between py-2">
      <Text className="text-sm font-manrope-semibold text-slate-700">
        {label}
      </Text>
      <View className="flex-row items-center gap-1.5">
        {isVerified ? (
          <CheckCircleIcon size={18} color="#16a34a" weight="fill" />
        ) : (
          <XCircleIcon size={18} color="#dc2626" weight="fill" />
        )}
        <Text
          className="text-xs font-manrope-bold"
          style={{ color: isVerified ? "#16a34a" : "#dc2626" }}
        >
          {isVerified ? "Active" : "Inactive"}
        </Text>
      </View>
    </View>
  );
}
