import Logo from '@/assets/images/logo.png';
import LogoText from '@/assets/images/navbar.png';
import { useTheme } from '@/components/ThemeContext';
import { user_api } from '@/screens/profile/lib/api';
import { useQuery } from '@tanstack/react-query';
import { router } from 'expo-router';
import { Bell, LogOut } from 'lucide-react-native';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useAuth } from '../AuthProvider';

export const CustomHeader = ({
  logoutbtn = false,
  notif = true,
}: {
  logoutbtn?: boolean;
  notif?: boolean;
}) => {
  const { isDark } = useTheme();
  const { logout } = useAuth();

  const { data, isLoading } = useQuery({
    queryKey: ['notification-list'],
    queryFn: () => user_api.notification_list({ page: 1, page_size: 1 }),
  });
  const unreadCount = data?.data?.data.unread_count ?? 0;

  return (
    <View style={[styles.container, isDark ? styles.darkBg : styles.lightBg]}>
      <View style={styles.logoWrapper}>
        <View style={styles.logoContainer}>
          <Image source={Logo} style={styles.logo} />
        </View>
        <Image source={LogoText} style={{ width: 160, height: 40, objectFit: 'cover' }} />
      </View>
      {logoutbtn && (
        <TouchableOpacity onPress={logout}>
          <LogOut color={'red'} />
        </TouchableOpacity>
      )}
      {notif && (
        <TouchableOpacity
          onPress={() => router.push('/profile/notification')} // yoki '/notifications' sahifasiga
          style={styles.bellContainer}
        >
          <Bell color={isDark ? '#e2e8f0' : '#334155'} size={24} />

          {unreadCount > 0 && (
            <View style={styles.badge}>
              <Text style={styles.badgeText}>{unreadCount > 99 ? '99+' : unreadCount}</Text>
            </View>
          )}

          {/* Agar yuklanayotgan bo'lsa kichik indikator (ixtiyoriy) */}
          {isLoading && unreadCount === 0 && <View style={styles.loadingDot} />}
        </TouchableOpacity>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 3,
  },

  darkBg: {
    backgroundColor: '#0f172a',
    borderBottomColor: '#1e293b',
  },

  lightBg: {
    backgroundColor: '#ffffff',
    borderBottomColor: '#e2e8f0',
  },

  logoWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    alignContent: 'center',
    gap: 5,
  },

  logoContainer: {
    width: 40,
    height: 40,
    borderRadius: 10,
    backgroundColor: 'rgba(59, 130, 246, 0.1)',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 4,
  },

  logo: {
    width: 32,
    height: 32,
    resizeMode: 'contain',
  },

  title: {
    fontSize: 20,
    fontWeight: '700',
    letterSpacing: 0.3,
  },

  darkText: {
    color: '#f8fafc',
  },

  lightText: {
    color: '#0f172a',
  },
  bellContainer: {
    position: 'relative',
  },

  badge: {
    position: 'absolute',
    top: -6,
    right: -6,
    minWidth: 18,
    height: 18,
    borderRadius: 9,
    backgroundColor: '#ef4444', // qizil badge
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 4,
    borderWidth: 1.5,
  },

  badgeText: {
    color: '#ffffff',
    fontSize: 10,
    fontWeight: 'bold',
  },

  loadingDot: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#3b82f6',
    opacity: 0.7,
  },
});