import { SymbolView, type SymbolViewProps } from "expo-symbols";
import { useState } from "react";
import {
  Pressable,
  StyleSheet,
  TextInput,
  View,
  type TextInputProps,
} from "react-native";

import { Brand, BrandFont } from "@/constants/theme";

// Cross-platform symbol names so the icon renders on iOS, Android, and web.
// SF Symbols are iOS-only; Material symbols cover Android and web.
const ICON_NAME: Record<
  "leading" | "eye" | "eyeSlash",
  SymbolViewProps["name"]
> = {
  leading: { ios: "envelope", android: "mail", web: "mail" },
  eye: { ios: "eye", android: "visibility", web: "visibility" },
  eyeSlash: {
    ios: "eye.slash",
    android: "visibility_off",
    web: "visibility_off",
  },
};

export type BrandTextInputProps = Omit<TextInputProps, "style"> & {
  /** SF Symbol name to render on the leading edge. */
  leadingIcon?: string;
  /** When true, renders a show/hide eye toggle on the right edge. */
  secureToggle?: boolean;
  /** Optional helper text rendered below the input. */
  helperText?: string;
};

/**
 * Themed dark text input used for email, password, and the search bar. The
 * secureToggle is for password fields; everything else uses the same
 * `BrandTextInput` so the styling stays consistent.
 */
export function BrandTextInput({
  leadingIcon,
  secureToggle = false,
  helperText,
  secureTextEntry,
  ...rest
}: BrandTextInputProps) {
  const [hidden, setHidden] = useState(secureTextEntry ?? false);

  return (
    <View style={styles.wrapper}>
      <View style={styles.inputRow}>
        {leadingIcon ? (
          <SymbolView
            name={ICON_NAME.leading}
            tintColor={Brand.textMuted}
            size={18}
            style={styles.leadingIcon}
          />
        ) : null}
        <TextInput
          {...rest}
          secureTextEntry={hidden}
          placeholderTextColor={Brand.textFaint}
          selectionColor={Brand.accent}
          style={styles.input}
        />
        {secureToggle ? (
          <Pressable
            accessibilityRole="button"
            accessibilityLabel={hidden ? "Show password" : "Hide password"}
            hitSlop={8}
            onPress={() => setHidden((v) => !v)}
            style={styles.trailingIcon}
          >
            <SymbolView
              name={hidden ? ICON_NAME.eye : ICON_NAME.eyeSlash}
              tintColor={Brand.text}
              size={18}
            />
          </Pressable>
        ) : null}
      </View>
      {helperText ? <></> : null}
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    alignSelf: "stretch",
  },
  inputRow: {
    height: 45,
    borderRadius: 10,
    backgroundColor: Brand.inputBg,
    borderWidth: 1,
    borderColor: Brand.border,
    paddingHorizontal: 16,
    flexDirection: "row",
    alignItems: "center",
  },
  leadingIcon: {
    marginRight: 12,
  },
  trailingIcon: {
    height: 24,
    width: 24,
    marginLeft: 8,
    padding: 4,
  },
  input: {
    flex: 1,
    color: Brand.text,
    fontSize: 15,
    fontFamily: BrandFont.poppinsRegular,
    padding: 0,
  },
});
