import React, { useState } from 'react';
import { Text, TextInput, View, type TextInputProps } from 'react-native';

interface InputFieldProps extends TextInputProps {
  label?: string;
  /** 输入框左侧前缀文字，如 "+86" */
  prefix?: string;
  /** 输入框右侧操作按钮 */
  suffix?: React.ReactNode;
}

/**
 * 填充式输入框 — 遵循 "Ethereal Interface" 设计规范：
 * surface-container-low 底色，聚焦时切换为 surface-container-lowest + primary 微光边框
 */
export function InputField({ label, prefix, suffix, ...inputProps }: InputFieldProps) {
  const [focused, setFocused] = useState(false);

  return (
    <View className="mb-4">
      {label && (
        <Text className="text-xs font-bold tracking-wider text-outline uppercase mb-2 ml-1">
          {label}
        </Text>
      )}
      <View
        className={`flex-row items-center px-4 py-3.5 rounded-lg ${
          focused
            ? 'bg-surface-container-lowest border-2 border-primary/20'
            : 'bg-surface-container-low border-2 border-transparent'
        }`}
      >
        {prefix && (
          <>
            <Text className="text-on-surface font-semibold mr-3">{prefix}</Text>
            <View className="w-px h-4 bg-outline-variant/30 mr-3" />
          </>
        )}
        <TextInput
          className="flex-1 text-on-surface font-medium p-0 text-base"
          placeholderTextColor="#737686"
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
          {...inputProps}
        />
        {suffix}
      </View>
    </View>
  );
}
