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";

export interface PasswordGeneratorProps {
  /** Called when the user taps "Use Password" (only shown when `onSelect` is provided). */
  onSelect?: (password: string) => void;
  /** Hide the copy button (useful in embedded / inline mode). */
  hideCopy?: boolean;
}

/**
 * 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,
}: PasswordGeneratorProps) {
  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;

interface CharsetCheckboxProps {
  label: string;
  checked: boolean;
  onToggle: () => void;
  isDark: boolean;
}

function CharsetCheckbox({ label, checked, onToggle, isDark }: CharsetCheckboxProps) {
  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>
  );
}