import React from 'react';
import { XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Button } from '@tamagui/button';
import { Bell, Settings } from 'lucide-react';
import { useAppearance } from '@/hooks/use-appearance';

type TopBarProps = {
  eventName: string;
  onProfilePress?: () => void;
  onNotificationsPress?: () => void;
  notificationCount?: number;
};

export default function TopBar({
  eventName,
  onProfilePress,
  onNotificationsPress,
  notificationCount = 0,
}: TopBarProps) {
  const { resolved } = useAppearance();
  const isDark = resolved === 'dark';

  return (
    <XStack
      alignItems="center"
      justifyContent="space-between"
      paddingHorizontal="$4"
      paddingVertical="$3"
      style={{
        backgroundColor: isDark ? 'rgba(10, 14, 28, 0.72)' : 'rgba(255, 255, 255, 0.85)',
        backdropFilter: 'saturate(160%) blur(18px)',
        WebkitBackdropFilter: 'saturate(160%) blur(18px)',
      }}
    >
      <Text
        fontSize="$6"
        fontFamily="$display"
        fontWeight="$8"
        numberOfLines={1}
        style={{ textShadow: '0 6px 18px rgba(2, 6, 23, 0.7)' }}
      >
        {eventName}
      </Text>
      <XStack gap="$2" alignItems="center">
        <Button
          size="$3"
          circular
          borderWidth={1}
          borderColor={isDark ? 'rgba(255, 255, 255, 0.14)' : 'rgba(15, 23, 42, 0.14)'}
          style={{
            backgroundColor: isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(15, 23, 42, 0.06)',
            boxShadow: isDark ? '0 8px 18px rgba(2, 6, 23, 0.4)' : '0 8px 18px rgba(15, 23, 42, 0.12)',
            position: 'relative',
          }}
          onPress={onNotificationsPress}
        >
          <Bell size={16} color={isDark ? '#F8FAFF' : '#0F172A'} />
          {notificationCount > 0 ? (
            <span
              style={{
                position: 'absolute',
                top: -2,
                right: -2,
                width: 18,
                height: 18,
                borderRadius: 999,
                backgroundColor: '#F97316',
                color: '#0B101E',
                fontSize: 10,
                fontWeight: 700,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              {notificationCount > 9 ? '9+' : notificationCount}
            </span>
          ) : null}
        </Button>
        <Button
          size="$3"
          circular
          borderWidth={1}
          borderColor={isDark ? 'rgba(255, 255, 255, 0.14)' : 'rgba(15, 23, 42, 0.14)'}
          style={{
            backgroundColor: isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(15, 23, 42, 0.06)',
            boxShadow: isDark ? '0 8px 18px rgba(2, 6, 23, 0.4)' : '0 8px 18px rgba(15, 23, 42, 0.12)',
          }}
          onPress={onProfilePress}
        >
          <Settings size={16} color={isDark ? '#F8FAFF' : '#0F172A'} />
        </Button>
      </XStack>
    </XStack>
  );
}