import type { JSX } from "react";
import { useState } from "react";
import { Pressable, View } from "react-native";
import { useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { Button, SearchField, Typography, useThemeColor } from "heroui-native";
import { useWallet } from "@/state/wallet";
import { useModals } from "@/state/modals";

export function TopNav(): JSX.Element {
  const router = useRouter();
  const accentForeground = useThemeColor("accent-foreground");
  const { connected, address, disconnect } = useWallet();
  const { openWalletConnect } = useModals();
  const [search, setSearch] = useState("");

  return (
    <View className="hidden h-16 flex-row items-center gap-4 border-b border-border bg-background px-6 md:flex">
      <Pressable onPress={() => router.push("/")} className="flex-row items-center gap-2">
        <View className="size-6 items-center justify-center rounded-md bg-accent">
          <Ionicons name="list" size={14} color={accentForeground} />
        </View>
        <Typography type="h6">Volana</Typography>
      </Pressable>

      <View className="max-w-[320px] flex-1">
        <SearchField value={search} onChange={setSearch}>
          <SearchField.Group>
            <SearchField.SearchIcon />
            <SearchField.Input
              placeholder="Search listings…"
              onSubmitEditing={() => router.push("/browse")}
            />
          </SearchField.Group>
        </SearchField>
      </View>

      <View className="flex-1" />

      <Button variant="ghost" size="sm" onPress={() => router.push("/browse")}>
        <Button.Label>Browse</Button.Label>
      </Button>
      <Button variant="ghost" size="sm" onPress={() => router.push("/orders")}>
        <Button.Label>My Orders</Button.Label>
      </Button>

      {connected ? (
        <Button variant="secondary" size="sm" onPress={disconnect}>
          <Button.Label>{address}</Button.Label>
        </Button>
      ) : (
        <Button size="sm" onPress={openWalletConnect}>
          <Button.Label>Connect Wallet</Button.Label>
        </Button>
      )}
    </View>
  );
}