import React, { useEffect, useState } from "react";
import { ActivityIndicator, Pressable, ScrollView, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { usePalette } from "../utils/palette";
export function OnboardingWizard({ steps, onComplete, header, maxWidth = 440, showStepLabel = true, theme, skipLabel = "Skip for now", finishLabel = "Finish", continueLabel = "Continue", }) {
    const { palette } = usePalette();
    const c = {
        background: theme?.background ?? palette.background,
        card: theme?.card ?? palette.card,
        border: theme?.border ?? palette.border,
        foreground: theme?.foreground ?? palette.foreground,
        mutedForeground: theme?.mutedForeground ?? palette.mutedForeground,
        primary: theme?.primary ?? palette.primary,
        primaryForeground: theme?.primaryForeground ?? palette.primaryForeground,
    };
    // Start at the first not-done step; done steps before it are completed
    // milestones (filled dots, never rendered).
    const [index, setIndex] = useState(() => {
        const i = steps.findIndex((s) => !s.done);
        return i === -1 ? 0 : i;
    });
    const [finishing, setFinishing] = useState(false);
    const finish = async () => {
        setFinishing(true);
        try {
            await onComplete();
        }
        finally {
            setFinishing(false);
        }
    };
    // Every step satisfied — nothing to render; complete once.
    const allDone = steps.every((s) => s.done);
    useEffect(() => {
        if (allDone) {
            void finish();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [allDone]);
    const step = steps[index];
    // Next/prev among the not-done steps only (done ones are skipped over).
    const nextActive = steps.findIndex((s, i) => i > index && !s.done);
    const isLast = nextActive === -1;
    const next = async () => {
        if (isLast) {
            await finish();
            return;
        }
        setIndex(nextActive);
    };
    const back = () => {
        let prev = -1;
        for (let i = 0; i < index; i += 1) {
            if (!steps[i]?.done) {
                prev = i;
            }
        }
        if (prev >= 0) {
            setIndex(prev);
        }
    };
    const api = { next, back, index, total: steps.length, isLast };
    if (!step) {
        return null;
    }
    return (<SafeAreaView style={{ flex: 1, backgroundColor: c.background }}>
      <ScrollView contentContainerStyle={{
            flexGrow: 1,
            alignItems: "center",
            justifyContent: "center",
            padding: 24,
        }} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="handled">
        {/* constrained, centered column — an overlay card on web, full-width on phones */}
        <View style={{ width: "100%", maxWidth }}>
          {header ? <View style={{ alignItems: "center", marginBottom: 22 }}>{header}</View> : null}

          {/* progress: dots + step label */}
          <View style={{ alignItems: "center", gap: 8, marginBottom: 16 }}>
            <View style={{ flexDirection: "row", gap: 6 }}>
              {steps.map((s, i) => (<View key={s.key} style={{
                width: i === index ? 22 : 7,
                height: 7,
                borderRadius: 999,
                backgroundColor: i <= index || s.done ? c.primary : c.border,
            }}/>))}
            </View>
            {showStepLabel ? (<Text style={{ color: c.mutedForeground, fontFamily: "Geist-Medium", fontSize: 12 }}>
                Step {index + 1} of {steps.length}
              </Text>) : null}
          </View>

          {/* card panel */}
          <View style={{
            backgroundColor: c.card,
            borderRadius: 24,
            borderWidth: 1,
            borderColor: c.border,
            padding: 20,
            gap: 8,
        }}>
            <Text style={{ color: c.foreground, fontFamily: "Geist-Bold", fontSize: 22 }}>
              {step.title}
            </Text>
            {step.subtitle ? (<Text style={{
                color: c.mutedForeground,
                fontFamily: "Geist-Regular",
                fontSize: 14,
                lineHeight: 20,
            }}>
                {step.subtitle}
              </Text>) : null}
            <View style={{ marginTop: 10 }}>{step.content(api)}</View>

            <View style={{ gap: 10, marginTop: 14 }}>
              {!step.hidePrimary ? (<Pressable onPress={next} disabled={finishing || step.canContinue === false} style={{
                backgroundColor: c.primary,
                borderRadius: 14,
                paddingVertical: 15,
                alignItems: "center",
                opacity: finishing || step.canContinue === false ? 0.5 : 1,
            }}>
                  {finishing ? (<ActivityIndicator color={c.primaryForeground}/>) : (<Text style={{ color: c.primaryForeground, fontFamily: "Geist-Bold", fontSize: 16 }}>
                      {step.primaryLabel ?? (isLast ? finishLabel : continueLabel)}
                    </Text>)}
                </Pressable>) : null}
              {step.canSkip ? (<Pressable onPress={next} disabled={finishing} style={{ alignItems: "center", paddingVertical: 4 }}>
                  <Text style={{ color: c.mutedForeground, fontFamily: "Geist-Medium", fontSize: 14 }}>
                    {skipLabel}
                  </Text>
                </Pressable>) : null}
            </View>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>);
}
/**
 * Tappable card for onboarding step bodies — an icon tile, title + subtitle,
 * and optional trailing slot. Domain-agnostic; apps drop these into a wizard
 * step to offer choices (add passkey, connect a bank, …).
 */
export function OnboardingOptionCard({ icon, title, subtitle, right, onPress, selected, theme, }) {
    const { palette } = usePalette();
    const c = {
        card: theme?.card ?? palette.card,
        border: theme?.border ?? palette.border,
        foreground: theme?.foreground ?? palette.foreground,
        mutedForeground: theme?.mutedForeground ?? palette.mutedForeground,
        primary: theme?.primary ?? palette.primary,
        iconBackground: theme?.iconBackground ?? palette.muted,
    };
    return (<Pressable onPress={onPress} disabled={!onPress} style={{
            flexDirection: "row",
            alignItems: "center",
            gap: 12,
            padding: 16,
            borderRadius: 14,
            borderWidth: 1,
            borderColor: selected ? c.primary : c.border,
            backgroundColor: c.card,
            opacity: onPress ? 1 : 0.9,
        }}>
      {icon ? (<View style={{
                width: 42,
                height: 42,
                borderRadius: 12,
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: c.iconBackground,
            }}>
          {icon}
        </View>) : null}
      <View style={{ flex: 1 }}>
        <Text style={{ color: c.foreground, fontFamily: "Geist-Medium", fontSize: 15 }}>
          {title}
        </Text>
        {subtitle ? (<Text style={{ color: c.mutedForeground, fontFamily: "Geist-Regular", fontSize: 12 }}>
            {subtitle}
          </Text>) : null}
      </View>
      {right}
    </Pressable>);
}
export default OnboardingWizard;
//# sourceMappingURL=onboarding-wizard.jsx.map