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, type SecurityTabProps } from "./SecurityTab";

type Tab = "profile" | "security";

export interface ProfileDialogProps {
  visible: boolean;
  onClose: () => void;
  initialTab?: Tab;
  /** Wired to `SecurityTab`'s MFA-enrolment callback. */
  onEnableMfa: () => void;
  /**
   * Optional client-side key-rewrap hook for password changes. Vault
   * supplies `KeyManager.computeReWrap`; apps without a wrapped key
   * omit it.
   */
  onComputeReWrap?: SecurityTabProps["onComputeReWrap"];
}

/**
 * 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,
}: ProfileDialogProps) {
  const { user } = useAuth();
  const { height: screenHeight } = useWindowDimensions();

  const [tab, setTab] = useState<Tab>(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"] as Tab[]).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 as { hovered?: boolean }).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>
  );
}