import { Colors } from "@/constants/Colors";
import { Images } from "@/constants/images";
import { Image } from "expo-image";
import React, { useState } from "react";
import {
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View,
} from "react-native";

interface SearchBarProps {
  onSearch?: (keyword: string) => void;
}

export function SearchBar({ onSearch }: SearchBarProps) {
  const [keyword, setKeyword] = useState("");

  const handleSearch = () => {
    onSearch?.(keyword);
  };

  return (
    <View style={styles.container}>
      {/* Logo Area */}
      <View style={styles.logo}>
        {/* Use text logo for now to ensure theme match */}
        <Text style={styles.logoText}>
          CYBER<Text style={styles.logoTextHighlight}>MART</Text>
        </Text>
      </View>

      {/* Search Box */}
      <View style={styles.searchBox}>
        <TouchableOpacity onPress={handleSearch}>
          {/* Tint the search icon */}
          <Image
            source={Images.home.search}
            style={styles.searchIcon}
            contentFit="contain"
            tintColor={Colors.neonBlue}
          />
        </TouchableOpacity>
        <TextInput
          style={styles.input}
          placeholder="搜索装备..."
          placeholderTextColor={Colors.textTertiary}
          value={keyword}
          onChangeText={setKeyword}
          onSubmitEditing={handleSearch}
          returnKeyType="search"
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 15,
    paddingVertical: 10,
    backgroundColor: Colors.darkBg, // Ensure bg matches
  },
  logo: {
    marginRight: 20,
    justifyContent: "center",
  },
  logoText: {
    color: "#fff",
    fontWeight: "bold",
    fontSize: 18,
    fontStyle: "italic",
  },
  logoTextHighlight: {
    color: Colors.neonBlue,
  },
  searchBox: {
    flex: 1, // Take remaining width
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "rgba(255, 255, 255, 0.05)",
    borderRadius: 20,
    paddingHorizontal: 12,
    height: 36,
    borderWidth: 1,
    borderColor: "rgba(0, 243, 255, 0.3)", // Neon border
  },
  searchIcon: {
    width: 16,
    height: 16,
    marginRight: 8,
  },
  input: {
    flex: 1,
    color: Colors.textPrimary,
    fontSize: 14,
    padding: 0,
  },
});