import React from 'react';
import { View } from 'react-native';
import { useRouter } from 'expo-router';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { trpc } from '@/src/trpc-client';
import { tw, MyText, MyTouchableOpacity } from 'common-ui';

export default function UserAddressHeader() {
  const router = useRouter();
  const { data: defaultAddressResponse } = trpc.user.address.getDefaultAddress.useQuery();
  const defaultAddress = defaultAddressResponse?.data;

  // Use a cleaner, white aesthetic that doesn't dominate the eye but feels premium
  return (
    <View style={[
      tw`bg-white px-5 pt-3 pb-4 rounded-b-3xl z-50 border-b border-gray-50 shadow-sm`,
      { shadowColor: '#2E90FA', shadowOpacity: 0.08, shadowRadius: 10, shadowOffset: { width: 0, height: 4 } }
    ]}>
      <View style={tw`flex-row items-center mt-1`}>
        <MyTouchableOpacity
          activeOpacity={0.7}
          onPress={() => router.push('/(drawer)/(tabs)/me/addresses')}
          style={tw`flex-1`}
        >
          <View style={tw`flex-row items-center mb-0.5`}>
            {/* Small subtle brand indicator */}
            <View style={tw`w-1.5 h-1.5 rounded-full bg-blue-500 mr-2`} />

            <MyText style={tw`text-gray-500 text-[10px] font-bold uppercase tracking-widest`}>
              Delivering to
            </MyText>
            <MyText style={tw`text-gray-800 text-xs font-bold uppercase tracking-wide ml-1`}>
              {defaultAddress?.name ? defaultAddress.name.split(' ')[0] : 'Home'}
            </MyText>
            <MaterialIcons name="keyboard-arrow-down" size={14} color="#374151" style={tw`ml-0.5`} />
          </View>

          <MyText style={tw`text-gray-500 text-sm font-medium ml-3.5`} numberOfLines={1}>
            {defaultAddress ? `${defaultAddress.addressLine1}, ${defaultAddress.city}` : 'Add a delivery address'}
          </MyText>
        </MyTouchableOpacity>
      </View>
    </View>
  );
}