import React from "react";
import { ActivityIndicator, Pressable, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";
import Slider from "@react-native-community/slider";
import { Text } from "./text";
import { usePasswordGenerator } from "../hooks/usePasswordGenerator";
/**
 * UI shell over `utils/password.generatePassword`. Owns length slider,
 * character-set toggles, copy-to-clipboard (via shared util with auto-
 * clear), and a coarse strength indicator.
 */
export const PasswordGenerator = React.memo(function PasswordGenerator({ onSelect, hideCopy, }) {
    const { password, length, setLength, includeUppercase, setIncludeUppercase, includeLowercase, setIncludeLowercase, includeNumbers, setIncludeNumbers, includeSymbols, setIncludeSymbols, excludeSimilar, setExcludeSimilar, breach, strength: passwordStrength, handleGenerate, handleCopy, } = usePasswordGenerator();
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    return (<>
      <View className="mb-4 rounded-lg border border-border dark:border-neutral-800 bg-card p-4 dark:bg-neutral-900/50">
        <View className="mb-3 flex-row items-center justify-between">
          <Text className="text-sm font-medium text-muted-foreground dark:text-neutral-400">
            Generated Password
          </Text>
          <View className="flex-row items-center">
            <View className="h-2 w-2 rounded-full" style={{ backgroundColor: passwordStrength.color }}/>
            <Text className="ml-2 text-xs font-medium" style={{ color: passwordStrength.color }}>
              {passwordStrength.label}
            </Text>
          </View>
        </View>

        <View className="mb-2 rounded-lg bg-background dark:bg-black p-3">
          <Text className="font-mono text-base text-foreground dark:text-white" selectable numberOfLines={2} testID="generator-output">
            {password || "Press generate to create a password"}
          </Text>
        </View>

        {/* HIBP breach-check status. Fixed height so the layout never shifts. */}
        <View className="mb-3 h-4 flex-row items-center gap-1.5" testID="generator-breach-status">
          {breach === "checking" ? (<>
              <ActivityIndicator size="small" color={isDark ? "#a3a3a3" : "#737373"}/>
              <Text className="text-xs text-muted-foreground dark:text-neutral-400">
                Checking breach database…
              </Text>
            </>) : breach === "safe" ? (<>
              <Ionicons name="shield-checkmark" size={12} color="#22c55e"/>
              <Text className="text-xs" style={{ color: "#22c55e" }}>
                Not found in any known breach
              </Text>
            </>) : breach === "unverified" ? (<>
              <Ionicons name="cloud-offline-outline" size={12} color={isDark ? "#a3a3a3" : "#737373"}/>
              <Text className="text-xs text-muted-foreground dark:text-neutral-400">
                Couldn&apos;t check breaches (offline)
              </Text>
            </>) : null}
        </View>

        <View className="flex-row gap-2">
          <Pressable onPress={handleGenerate} className="active:scale-98 flex-1 rounded-lg bg-primary dark:bg-white px-4 py-3" accessibilityRole="button" accessibilityLabel="Generate password" testID="generator-generate">
            <View className="flex-row items-center justify-center">
              <Ionicons name="refresh" size={18} color={isDark ? "black" : "white"}/>
              <Text className="ml-2 font-semibold text-primary-foreground dark:text-black">
                Generate
              </Text>
            </View>
          </Pressable>

          {!hideCopy && (<Pressable onPress={handleCopy} disabled={!password} className="active:scale-98 rounded-lg bg-secondary dark:bg-neutral-800 px-4 py-3" accessibilityRole="button" accessibilityLabel="Copy password" accessibilityState={{ disabled: !password }}>
              <View className="flex-row items-center justify-center">
                <Ionicons name="copy-outline" size={18} color={isDark ? "white" : "black"}/>
                <Text className="ml-2 font-semibold text-foreground dark:text-white">Copy</Text>
              </View>
            </Pressable>)}

          {onSelect && (<Pressable onPress={() => onSelect(password)} disabled={!password} className="active:scale-98 rounded-lg bg-secondary dark:bg-neutral-800 px-4 py-3" accessibilityRole="button" accessibilityLabel="Use password" accessibilityState={{ disabled: !password }}>
              <View className="flex-row items-center justify-center">
                <Ionicons name="checkmark" size={18} color={isDark ? "white" : "black"}/>
                <Text className="ml-2 font-semibold text-foreground dark:text-white">Use</Text>
              </View>
            </Pressable>)}
        </View>
      </View>

      <View className="rounded-lg border border-border dark:border-neutral-800 bg-card p-4 dark:bg-neutral-900/50">
        <Text className="mb-4 text-base font-semibold text-foreground dark:text-white">
          Options
        </Text>

        <View className="mb-5">
          <View className="mb-2 flex-row items-center justify-between">
            <Text className="text-sm text-foreground dark:text-white">Password Length</Text>
            <Text className="font-mono text-sm font-semibold text-primary dark:text-white">
              {length}
            </Text>
          </View>
          <Slider value={length} onValueChange={setLength} onSlidingComplete={setLength} minimumValue={8} maximumValue={128} step={1} minimumTrackTintColor={isDark ? "white" : "black"} maximumTrackTintColor={isDark ? "#404040" : "#e5e5e5"} thumbTintColor={isDark ? "white" : "black"} accessibilityLabel={`Password length: ${length}`} accessibilityRole="adjustable"/>
          <View className="mt-1 flex-row justify-between">
            <Text className="text-xs text-muted-foreground dark:text-neutral-400">8</Text>
            <Text className="text-xs text-muted-foreground dark:text-neutral-400">128</Text>
          </View>
        </View>

        <View className="gap-3">
          <CharsetCheckbox label="Uppercase Letters (A-Z)" checked={includeUppercase} onToggle={() => setIncludeUppercase((v) => !v)} isDark={isDark}/>
          <CharsetCheckbox label="Lowercase Letters (a-z)" checked={includeLowercase} onToggle={() => setIncludeLowercase((v) => !v)} isDark={isDark}/>
          <CharsetCheckbox label="Numbers (0-9)" checked={includeNumbers} onToggle={() => setIncludeNumbers((v) => !v)} isDark={isDark}/>
          <CharsetCheckbox label="Symbols (!@#$%...)" checked={includeSymbols} onToggle={() => setIncludeSymbols((v) => !v)} isDark={isDark}/>
          <CharsetCheckbox label="Exclude Similar Characters" checked={excludeSimilar} onToggle={() => setExcludeSimilar((v) => !v)} isDark={isDark}/>
        </View>
      </View>
    </>);
});
export default PasswordGenerator;
function CharsetCheckbox({ label, checked, onToggle, isDark }) {
    return (<Pressable onPress={onToggle} className="flex-row items-center gap-3" accessibilityRole="checkbox" accessibilityLabel={label} accessibilityState={{ checked }}>
      <View style={{
            width: 20,
            height: 20,
            borderRadius: 4,
            borderWidth: 1.5,
            alignItems: "center",
            justifyContent: "center",
            borderColor: checked ? (isDark ? "#ffffff" : "#000000") : isDark ? "#525252" : "#d4d4d4",
            backgroundColor: checked ? (isDark ? "#ffffff" : "#000000") : "transparent",
        }}>
        {checked && <Ionicons name="checkmark" size={14} color={isDark ? "#000000" : "#ffffff"}/>}
      </View>
      <Text className="flex-1 text-sm text-foreground">{label}</Text>
    </Pressable>);
}
//# sourceMappingURL=password-generator.jsx.map