import React, { useCallback, useEffect, useState } from "react";
import { View } from "react-native";
import { useAuth } from "../../hooks/useAuth";
import { useNotificationContext } from "../../context/NotificationContext";
import AuthService from "../../services/auth.service";
import { Button } from "../button";
import { Card, CardContent } from "../card";
import { EmailInput, Input, PasswordInput } from "../input";
// FormLabelText, not FormLabel: FormLabel's Root renders a bare
// Pressable (it's meant to wrap an input for accessibility linking),
// not a Text component. Every use below is a plain static section
// caption with a string child and no press behavior — using the
// Pressable-based Root left these unstyled (no explicit color/size),
// inheriting a low-contrast platform default instead of the intended
// text-foreground/dark:text-white, which read as "fields have no
// labels" and "text color is wrong" on mobile.
import { FormLabelText as Label } from "../label";
/**
 * "Profile" tab body: edit display name + email. Drops in unchanged
 * between vault and bootstrap because every consumer of entropy-ui's
 * AuthProvider already supports the corresponding AuthService methods.
 */
export function ProfileTab({ visible }) {
    const { user, refreshUser } = useAuth();
    const { push } = useNotificationContext();
    const [displayName, setDisplayName] = useState("");
    const [displayNameLoading, setDisplayNameLoading] = useState(false);
    const [displayNameError, setDisplayNameError] = useState("");
    const [newEmail, setNewEmail] = useState("");
    const [emailPassword, setEmailPassword] = useState("");
    const [emailLoading, setEmailLoading] = useState(false);
    const [emailError, setEmailError] = useState("");
    useEffect(() => {
        if (visible) {
            return;
        }
        setDisplayName("");
        setDisplayNameError("");
        setNewEmail("");
        setEmailPassword("");
        setEmailError("");
    }, [visible]);
    const handleSaveDisplayName = useCallback(async () => {
        setDisplayNameError("");
        const trimmed = displayName.trim();
        if (!trimmed) {
            setDisplayNameError("Display name is required");
            return;
        }
        if (trimmed.length > 100) {
            setDisplayNameError("Max 100 characters");
            return;
        }
        setDisplayNameLoading(true);
        try {
            await AuthService.updateDisplayName(trimmed);
            await refreshUser();
            setDisplayName("");
            push({ level: "success", title: "Display name updated" });
        }
        catch (err) {
            setDisplayNameError(err instanceof Error ? err.message : "Failed to update");
        }
        finally {
            setDisplayNameLoading(false);
        }
    }, [displayName, refreshUser, push]);
    const handleSaveEmail = useCallback(async () => {
        setEmailError("");
        if (!AuthService.validateEmail(newEmail)) {
            setEmailError("Invalid email address");
            return;
        }
        if (!emailPassword) {
            setEmailError("Password is required");
            return;
        }
        setEmailLoading(true);
        try {
            await AuthService.changeEmail(newEmail, emailPassword);
            await refreshUser();
            setNewEmail("");
            setEmailPassword("");
            push({ level: "success", title: "Email updated" });
        }
        catch (err) {
            setEmailError(err instanceof Error ? err.message : "Failed to update email");
        }
        finally {
            setEmailLoading(false);
        }
    }, [newEmail, emailPassword, refreshUser, push]);
    return (<View className="gap-3">
      <Card>
        <CardContent className="p-4">
          <Label className="mb-3 text-xs font-semibold uppercase tracking-wider text-foreground dark:text-white">
            Display Name
          </Label>
          <Input value={displayName} onChangeText={setDisplayName} placeholder={user?.display_name || user?.username || "Display name"} autoCapitalize="words" maxLength={100} error={displayNameError}/>
          <Button variant="outline" size="sm" className="mt-3 self-end" onPress={handleSaveDisplayName} isLoading={displayNameLoading}>
            Save
          </Button>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4">
          <Label className="mb-3 text-xs font-semibold uppercase tracking-wider text-foreground dark:text-white">
            Email Address
          </Label>
          <EmailInput value={newEmail} onChangeText={setNewEmail} placeholder={user?.email || "New email address"} containerClassName="mb-2.5"/>
          <PasswordInput value={emailPassword} onChangeText={setEmailPassword} placeholder="Your current password" label="Confirm Password" error={emailError}/>
          <Button variant="outline" size="sm" className="mt-3 self-end" onPress={handleSaveEmail} isLoading={emailLoading}>
            Save
          </Button>
        </CardContent>
      </Card>
    </View>);
}
//# sourceMappingURL=ProfileTab.jsx.map