import React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useNavigation } from "../../context/NavigationContext";
import { StatusBar } from "expo-status-bar";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";
import Toast from "react-native-toast-message";
import { MutedText } from "../../components/text";
import { Button } from "../../components/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "../../components/card";
import AuthService from "../../services/auth.service";
import { useAuth } from "../../hooks/useAuth";
import { useAppConfig } from "../../context/AppConfigContext";
import { getErrorMessage } from "../../utils/error";

export interface ImportDataScreenProps {
  /**
   * Optional custom import flow. When provided, the screen renders this
   * instead of the default skip-only UI — call `onComplete` after a
   * successful import and the screen advances onboarding + navigates to
   * home. Vault wires its `parseBitwardenExport` + `VaultFacade` + key
   * manager unlock flow through this slot.
   */
  renderImport?: (props: { onComplete: () => void; onSkip: () => void }) => React.ReactNode;
}

export function ImportDataScreen({ renderImport }: ImportDataScreenProps = {}) {
  const router = useNavigation();
  const { refreshUser } = useAuth();
  const { appName, routes } = useAppConfig();
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  const completeAndNavigate = async () => {
    try {
      await AuthService.completeOnboarding();
      await refreshUser();
      router.replace(routes.home);
    } catch (e: unknown) {
      Toast.show({
        type: "error",
        text1: getErrorMessage(e, "Failed to complete onboarding"),
        visibilityTime: 3000,
      });
    }
  };

  if (renderImport) {
    return (
      <SafeAreaView className="flex-1 bg-background dark:bg-black">
        <StatusBar style={isDark ? "light" : "dark"} />
        {renderImport({ onComplete: completeAndNavigate, onSkip: completeAndNavigate })}
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView className="flex-1 bg-background dark:bg-black">
      <StatusBar style={isDark ? "light" : "dark"} />
      <ScrollView
        className="flex-1"
        contentContainerClassName="flex-1 items-center justify-center p-6"
        keyboardShouldPersistTaps="handled"
      >
        <Card className="w-full max-w-[420px]">
          <CardHeader className="items-center">
            <View className="mb-3 h-16 w-16 items-center justify-center rounded-full bg-secondary dark:bg-neutral-800">
              <Ionicons
                name="checkmark-done-outline"
                size={32}
                color={isDark ? "#FFFFFF" : "#000000"}
              />
            </View>
            <CardTitle className="text-center">You&apos;re all set</CardTitle>
            <CardDescription className="text-center">
              Your {appName} account is ready. Continue to start using it.
            </CardDescription>
          </CardHeader>

          <CardContent>
            <MutedText className="text-center text-sm">
              Nothing to migrate here — apps that need a data-import step wire a custom
              `renderImport` slot.
            </MutedText>
          </CardContent>

          <CardFooter className="border-t-0">
            <Button
              className="w-full"
              telemetryId="auth.import_data.complete_and_navigate"
              onPress={completeAndNavigate}
              accessibilityLabel={`Continue to ${appName}`}
              accessibilityRole="button"
              testID="import-continue"
            >
              Continue to {appName}
            </Button>
          </CardFooter>
        </Card>
      </ScrollView>
    </SafeAreaView>
  );
}

export default ImportDataScreen;