import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import React, { useCallback, useState } from 'react';
import {
  Dimensions,
  Image,
  Linking,
  Platform,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import AppLink from 'react-native-app-link';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Logo from 'screens/../../assets/bootsplash/logo.png';
import Bell from 'svg/Bell';
import Instagram from 'svg/Instagram';
import Telegram from 'svg/Telegram';
import InAppBrowser from './InAppBrowser';

const { width } = Dimensions.get('window');
const isSmallScreen = width < 360;

const Navbar = () => {
  const [browserUrl, setBrowserUrl] = useState('');
  const { top } = useSafeAreaInsets();
  const [modalVisible, setModalVisible] = useState(false);
  const navigation = useNavigation<NativeStackNavigationProp<any>>();

  const openTelegram = useCallback(async () => {
    try {
      await AppLink.maybeOpenURL('tg://resolve?domain=cpostuz', {
        appName: 'Telegram',
        appStoreId: 686449807,
        appStoreLocale: 'us',
        playStoreId: 'org.telegram.messenger',
      });
    } catch (err) {
      // Agar ilovani ham, store’ni ham ochib bo‘lmasa, fallback URL
      Linking.openURL('https://t.me/cpostuz');
    }
  }, []);

  const openInstagram = useCallback(async () => {
    try {
      await AppLink.maybeOpenURL('instagram://user?username=cpost_cargo', {
        appName: 'Instagram',
        appStoreId: 389801252,
        appStoreLocale: 'us',
        playStoreId: 'com.instagram.android',
      });
    } catch (err) {
      // Agar ilovani ham, store’ni ham ochib bo‘lmasa, fallback URL
      Linking.openURL('instagram://user?username=cpost_cargo');
    }
  }, []);

  const openFacebook = useCallback(async () => {
    try {
      await AppLink.maybeOpenURL('fb://user?username=cpost_cargo', {
        appName: 'Facebook',
        appStoreId: 284882215,
        appStoreLocale: 'us',
        playStoreId: 'com.facebook.katana',
      });
    } catch (err) {
      Linking.openURL('https://facebook.com/');
    }
  }, []);

  const handleCloseBrowser = useCallback(() => {
    setModalVisible(false);
  }, []);

  return (
    <>
      <View style={[styles.header, { marginTop: top }]}>
        <View style={styles.logo}>
          <Image source={Logo} style={styles.logoImage} />
          <Text style={styles.title}>CPOST</Text>
        </View>

        <View style={styles.links}>
          <TouchableOpacity onPress={openTelegram}>
            <Telegram color="#fff" width={24} height={24} />
          </TouchableOpacity>

          <TouchableOpacity onPress={openInstagram}>
            <Instagram color="#fff" width={24} height={24} />
          </TouchableOpacity>

          {/* <TouchableOpacity onPress={openFacebook}>
            <MaterialIcons
              name="facebook"
              color="#fff"
              size={iconSizes.facebook}
            />
          </TouchableOpacity> */}

          {Platform.OS === 'android' && (
            <TouchableOpacity
              onPress={() => navigation.navigate('Notifications')}
            >
              <Bell color="#fff" width={24} height={24} />
              {/* <View style={styles.bellDot} /> */}
            </TouchableOpacity>
          )}
        </View>
      </View>

      <InAppBrowser
        visible={modalVisible}
        url={browserUrl}
        onClose={handleCloseBrowser}
      />
    </>
  );
};

const styles = StyleSheet.create({
  header: {
    backgroundColor: '#28A7E8',
    height: 80,
    paddingHorizontal: 10,
    paddingVertical: 10,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  title: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
  },
  logo: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 5,
  },
  logoImage: {
    width: 40,
    height: 40,
    resizeMode: 'contain',
  },
  links: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
  },
  bellDot: {
    width: 10,
    height: 10,
    position: 'absolute',
    backgroundColor: 'red',
    right: 2,
    borderRadius: 100,
  },
});

export default Navbar;