/**
 * SearchBar — серый блок, в состоянии idle текст с иконкой 🔍 отцентрированы.
 *
 * Когда пользователь тапает/фокусирует — поле становится input-friendly, но
 * визуально рестайл не нужен: при наличии текста placeholder скрыт и
 * пользовательский ввод выравнивается влево автоматически (multiline off).
 */
import React, { useState } from 'react';
import { View, TextInput, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

export interface SearchBarProps {
  value: string;
  onChangeText: (v: string) => void;
  placeholder?: string;
  autoFocus?: boolean;
  onSubmitEditing?: () => void;
}

export function SearchBar({
  value, onChangeText, placeholder = 'Search', autoFocus, onSubmitEditing,
}: SearchBarProps) {
  const [focused, setFocused] = useState(false);

  // Placeholder центрируется пока нет фокуса И нет значения.
  // Как только юзер фокусируется или начинает печатать — иконка+текст
  // прыгают к левому краю, чтобы не мешать вводу.
  const centered = !focused && !value;

  return (
    <View
      style={{
        backgroundColor: '#1a1a1a',
        borderRadius: 999,
        paddingHorizontal: 14,
        paddingVertical: 9,
        minHeight: 36,
        justifyContent: 'center',
      }}
    >
      {centered ? (
        // ── Idle state — только текст+icon, отцентрированы.
        // Невидимый TextInput поверх ловит tap, чтобы не дергать focus вручную.
        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
          <Ionicons name="search" size={14} color="#8b8b8b" style={{ marginRight: 6 }} />
          <Text style={{ color: '#8b8b8b', fontSize: 14 }}>{placeholder}</Text>
          <TextInput
            value={value}
            onChangeText={onChangeText}
            autoFocus={autoFocus}
            onFocus={() => setFocused(true)}
            onSubmitEditing={onSubmitEditing}
            returnKeyType="search"
            style={{
              position: 'absolute', left: 0, right: 0, top: 0, bottom: 0,
              color: 'transparent',
              // Скрываем cursor в idle-режиме; при focus компонент перерисуется.
            }}
          />
        </View>
      ) : (
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <Ionicons name="search" size={14} color="#8b8b8b" style={{ marginRight: 8 }} />
          <TextInput
            value={value}
            onChangeText={onChangeText}
            placeholder={placeholder}
            placeholderTextColor="#8b8b8b"
            autoCapitalize="none"
            autoCorrect={false}
            autoFocus
            onFocus={() => setFocused(true)}
            onBlur={() => setFocused(false)}
            onSubmitEditing={onSubmitEditing}
            returnKeyType="search"
            style={{
              flex: 1,
              color: '#ffffff',
              fontSize: 14,
              padding: 0,
              includeFontPadding: false,
            }}
          />
        </View>
      )}
    </View>
  );
}