import React, { useCallback, useEffect, useState } from "react";
import { Pressable, ScrollView, useWindowDimensions, View } from "react-native";
import { useAuth } from "../../hooks/useAuth";
import { cn } from "../../utils/cn";
import { Dialog } from "../dialog";
import { MutedText, Text } from "../text";
import { UserAvatar } from "../user-avatar";
import { ProfileTab } from "./ProfileTab";
import { SecurityTab } from "./SecurityTab";
/**
 * Account-management dialog with Profile / Security tabs. The avatar
 * strip across the top pulls from the entropy-ui `UserAvatar` (which
 * reads `useAuth().user`). Apps inject their MFA enrolment route via
 * `onEnableMfa` and (optionally) a key-rewrap hook for password change.
 */
export function ProfileDialog({ visible, onClose, initialTab, onEnableMfa, onComputeReWrap, }) {
    const { user } = useAuth();
    const { height: screenHeight } = useWindowDimensions();
    const [tab, setTab] = useState(initialTab ?? "profile");
    useEffect(() => {
        if (visible) {
            setTab(initialTab ?? "profile");
        }
    }, [visible, initialTab]);
    const handleClose = useCallback(() => {
        setTab("profile");
        onClose();
    }, [onClose]);
    return (<Dialog visible={visible} draggable onClose={handleClose} title="Manage Account" maxWidth={580}>
      <View className="mb-5 flex-row items-center gap-3.5">
        <UserAvatar size={52}/>
        <View className="flex-1">
          <Text className="text-base font-bold">
            {user?.display_name || user?.username || "User"}
          </Text>
          <MutedText className="mt-0.5 font-mono text-xs">{user?.email ?? ""}</MutedText>
        </View>
        <View className="rounded-xl bg-muted px-2.5 py-1 dark:bg-neutral-800">
          <MutedText className="text-xs font-medium uppercase tracking-wider">
            {user?.role ?? "User"}
          </MutedText>
        </View>
      </View>

      <View className="mb-5 flex-row border-b border-border dark:border-neutral-800">
        {["profile", "security"].map((t) => {
            const active = tab === t;
            return (<Pressable key={t} onPress={() => setTab(t)} className="mr-1" testID={`profile-tab-${t}`}>
              {(state) => {
                    // RN-Web extends PressableStateCallbackType with `hovered`;
                    // base RN doesn't, so widen via cast.
                    const hovered = state.hovered === true;
                    return (<View className={cn("-mb-px border-b-2 px-3.5 py-2", active ? "border-foreground dark:border-white" : "border-transparent")}>
                    <Text className={cn("text-sm font-medium", active || hovered
                            ? "text-foreground dark:text-white"
                            : "text-muted-foreground dark:text-neutral-400")}>
                      {t === "profile" ? "Profile" : "Security"}
                    </Text>
                  </View>);
                }}
            </Pressable>);
        })}
      </View>

      <ScrollView style={{ maxHeight: screenHeight * 0.55 }} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="handled">
        {tab === "profile" && <ProfileTab visible={visible}/>}
        {tab === "security" && (<SecurityTab visible={visible} onClose={handleClose} onEnableMfa={onEnableMfa} onComputeReWrap={onComputeReWrap}/>)}
      </ScrollView>
    </Dialog>);
}
//# sourceMappingURL=ProfileDialog.jsx.map