import React, { forwardRef, useState } from "react";
import {
  type NativeSyntheticEvent,
  Pressable,
  type TargetedEvent,
  TextInput,
  type TextInputProps,
  View,
  type ViewStyle,
} from "react-native";
import { cn } from "../utils/cn";
import { ErrorText, Label } from "./text";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";

export interface InputProps extends TextInputProps {
  className?: string;
  containerClassName?: string;
  label?: string;
  labelClassName?: string;
  error?: string;
  errorClassName?: string;
  /**
   * Render the input in the invalid (red border) state without showing
   * inline error text. Pair with a consolidated form-level error slot.
   */
  invalid?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  isPassword?: boolean;
  showPasswordToggle?: boolean;
  containerStyle?: ViewStyle;
}

export const Input = forwardRef<TextInput, InputProps>(
  (
    {
      className,
      containerClassName,
      label,
      labelClassName,
      error,
      errorClassName,
      invalid,
      leftIcon,
      rightIcon,
      isPassword = false,
      showPasswordToggle = true,
      containerStyle,
      onFocus,
      onBlur,
      secureTextEntry,
      ...props
    },
    ref
  ) => {
    const showInvalid = invalid || !!error;
    const [showPassword, setShowPassword] = useState(false);
    const [isFocused, setIsFocused] = useState(false);
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";

    const handleFocus = (e: NativeSyntheticEvent<TargetedEvent>) => {
      setIsFocused(true);
      onFocus?.(e);
    };

    const handleBlur = (e: NativeSyntheticEvent<TargetedEvent>) => {
      setIsFocused(false);
      onBlur?.(e);
    };

    const shouldShowPassword = isPassword && !showPassword;
    const showToggle = isPassword && showPasswordToggle;

    // Each border color carries an explicit `dark:` variant matching that CSS
    // variable's `.dark` value one-for-one (see button.tsx for why: a bare
    // CSS-var utility with no `dark:` variant has been observed stuck on its
    // light value on native regardless of actual system theme).
    //
    // Destructive is the one exception: `--destructive`'s dark value
    // (rgb(127 29 29), a fill-appropriate dark red) has too little contrast
    // as a 2px outline against a black surface. red-400 matches this
    // package's own convention for destructive text on dark (see
    // ErrorText in text.tsx) — legible, not just "technically correct."
    let borderClass: string;
    if (showInvalid) {
      borderClass = "border-2 border-destructive dark:border-red-400";
    } else if (isFocused) {
      borderClass = "border-2 border-primary dark:border-white";
    } else {
      borderClass = "border border-border dark:border-neutral-800";
    }

    return (
      <View className={cn("w-full", containerClassName)} style={containerStyle}>
        {label ? <Label className={cn("mb-2", labelClassName)}>{label}</Label> : null}

        <View
          className={cn(
            "h-12 flex-row items-center rounded-lg bg-card dark:bg-black pl-3",
            showToggle ? "pr-1" : "pr-3",
            borderClass,
            className
          )}
        >
          {leftIcon ? <View className="mr-2">{leftIcon}</View> : null}

          <TextInput
            ref={ref}
            className="flex-1 py-2 text-base text-foreground dark:text-white"
            placeholderTextColor={isDark ? "#737373" : "#A3A3A3"}
            onFocus={handleFocus}
            onBlur={handleBlur}
            secureTextEntry={secureTextEntry ?? shouldShowPassword}
            {...props}
          />

          {showToggle ? (
            <Pressable
              onPress={() => setShowPassword(!showPassword)}
              className="px-2 py-2"
              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
            >
              <Ionicons
                name={showPassword ? "eye-off-outline" : "eye-outline"}
                size={20}
                color={isDark ? "#A3A3A3" : "#737373"}
              />
            </Pressable>
          ) : null}

          {rightIcon && !showToggle ? <View className="ml-2">{rightIcon}</View> : null}
        </View>

        {error ? <ErrorText className={cn("mt-2", errorClassName)}>{error}</ErrorText> : null}
      </View>
    );
  }
);

Input.displayName = "Input";

export const SearchInput = forwardRef<TextInput, InputProps>(({ className, ...props }, ref) => {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  return (
    <Input
      ref={ref}
      className={className}
      leftIcon={<Ionicons name="search-outline" size={20} color={isDark ? "#A3A3A3" : "#737373"} />}
      placeholder="Search..."
      returnKeyType="search"
      {...props}
    />
  );
});

SearchInput.displayName = "SearchInput";

export const EmailInput = forwardRef<TextInput, InputProps>(({ className, ...props }, ref) => {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  return (
    <Input
      ref={ref}
      className={className}
      leftIcon={<Ionicons name="mail-outline" size={20} color={isDark ? "#A3A3A3" : "#737373"} />}
      placeholder="you@example.com"
      keyboardType="email-address"
      autoCapitalize="none"
      autoCorrect={false}
      textContentType="emailAddress"
      autoComplete="email"
      {...props}
    />
  );
});

EmailInput.displayName = "EmailInput";

export const PasswordInput = forwardRef<TextInput, InputProps>(({ className, ...props }, ref) => {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  return (
    <Input
      ref={ref}
      className={className}
      leftIcon={
        <Ionicons name="lock-closed-outline" size={20} color={isDark ? "#A3A3A3" : "#737373"} />
      }
      placeholder="••••••••"
      isPassword
      autoCapitalize="none"
      autoCorrect={false}
      textContentType="password"
      autoComplete="password"
      {...props}
    />
  );
});

PasswordInput.displayName = "PasswordInput";

export const TextArea = forwardRef<TextInput, InputProps>(
  ({ className, containerClassName, ...props }, ref) => {
    const [isFocused, setIsFocused] = useState(false);
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";

    const handleFocus = (e: NativeSyntheticEvent<TargetedEvent>) => {
      setIsFocused(true);
      props.onFocus?.(e);
    };

    const handleBlur = (e: NativeSyntheticEvent<TargetedEvent>) => {
      setIsFocused(false);
      props.onBlur?.(e);
    };

    return (
      <View className={cn("w-full", containerClassName)}>
        {props.label ? <Label className="mb-2">{props.label}</Label> : null}

        <View
          className={cn(
            "min-h-[100px] rounded-lg bg-background px-3 py-3 dark:bg-black",
            isFocused
              ? "border-2 border-foreground dark:border-white"
              : "border border-border dark:border-neutral-800",
            className
          )}
        >
          <TextInput
            ref={ref}
            className="text-base text-foreground dark:text-white"
            placeholderTextColor={isDark ? "#737373" : "#A3A3A3"}
            multiline
            numberOfLines={4}
            textAlignVertical="top"
            onFocus={handleFocus}
            onBlur={handleBlur}
            {...props}
          />
        </View>

        {props.error ? <ErrorText className="mt-2">{props.error}</ErrorText> : null}
      </View>
    );
  }
);

TextArea.displayName = "TextArea";