import Button from "@/components/ui/Button";
import { useAuthHandler } from "@/hooks/useAuthHandler";
import { useAuthStore } from "@/providers/AuthStoreProviders";
import { useTranslations } from "@/providers/TranslationProviders";
import { router } from "expo-router";
import {
  CheckCircleIcon,
  ClockCounterClockwiseIcon,
  SignOutIcon,
} from "phosphor-react-native";
import { useEffect } from "react";
import { Linking, ScrollView, Text, View } from "react-native";
import Svg, { Path } from "react-native-svg";

export default function Waiting() {
  const { appInfo, logout, user } = useAuthStore((state: any) => state);
  const { tran } = useTranslations();
  const { redirect } = useAuthHandler();

  useEffect(() => {
    (async () => {
      if (user) {
        const redirectURL = await redirect(user);
        if (redirectURL && redirectURL !== "/waiting") {
          router.replace(redirectURL as any);
        }
      }
    })();
  }, [user, redirect]);

  return (
    <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
      <View className="flex-1 bg-slate-50 items-center justify-center min-h-screen p-4">
        <View className="w-full max-w-md rounded-2xl bg-white p-8 shadow-2xl">
          {/* Spinning Loader */}
          <View className="relative mx-auto mb-6 h-32 w-32">
            <View className="absolute inset-0 border-4 rounded-full border-t-primary border-r-primary/20 border-b-primary/20 border-l-primary/20 animate-spin" />

            <View className="absolute inset-0 flex items-center justify-center opacity-20">
              <Svg
                width={64}
                height={64}
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2}
                fill="none"
              >
                <Path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </Svg>
            </View>
          </View>

          {/* Title */}
          <Text className="text-2xl font-bold text-gray-800 mb-2 text-center">
            {tran("Awaiting Approval")}
          </Text>
          <Text className="text-gray-600 mb-6 text-center">
            {tran("Your account is under review. Please wait for approval.")}
          </Text>

          {/* Info Box */}
          <View className="bg-slate-100 rounded-lg p-4 mb-6">
            <View className="gap-y-3">
              {[
                tran("Your KYC verification is under review."),
                tran("You will receive a notification once your status is updated."),
                tran("Full access will be granted once your identity is verified."),
              ].map((text, i) => (
                <View key={i} className="flex-row items-start gap-x-2">
                  <CheckCircleIcon size={20} color="green" weight="fill" />
                  <Text className="text-gray-600 text-sm flex-1">{text}</Text>
                </View>
              ))}
            </View>
          </View>

          {/* Extra Info */}
          <View className="text-sm text-gray-500">
            <Text className="text-center">
              {tran("Expected approval time is between")}
              <Text className="font-medium text-slate-600">
                {" "}
                {appInfo?.application_info?.KYC_approval_time ||
                  "3-5 business days"}
              </Text>
            </Text>
            <Text className="text-center mt-1">
              {tran("For any inquiries, please contact us at")}{" "}
              <Text
                className="text-slate-600 underline"
                onPress={() =>
                  Linking.openURL(
                    `mailto:${
                      appInfo?.application_info?.company_info?.email ||
                      "hello@quizix.com"
                    }`,
                  )
                }
              >
                {appInfo?.application_info?.company_info?.email ||
                  "hello@quizix.com"}
              </Text>
            </Text>
          </View>

          {/* Buttons */}
          <View className="gap-3 pt-8 flex-row">
            <Button
              onPress={() => router.push("/(tabs)")}
              leftIcon={<ClockCounterClockwiseIcon size={20} color="white" />}
              text="Home"
              className="flex-1"
            />

            <Button
              type="secondary"
              onPress={logout}
              text="Logout"
              rightIcon={<SignOutIcon size={20} />}
              className="flex-1"
            />
          </View>
        </View>
      </View>
    </ScrollView>
  );
}
