'use client';

import React from 'react';
import {
  Indicator,
  ActionIcon,
  Popover,
  ScrollArea,
  Stack,
  Group,
  Text,
  Button,
  Center,
  Badge,
} from '@mantine/core';
import { IconBell, IconInbox } from '@tabler/icons-react';
import { useNotificationCenter } from '../../hooks/useNotificationCenter';
import { NotificationItem } from '../NotificationItem';

interface NotificationBellProps {
  position?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
  maxHeight?: number;
  emptyMessage?: string;
}

export function NotificationBell({
  position = 'bottom-end',
  maxHeight = 400,
  emptyMessage = "You're all caught up!",
}: NotificationBellProps) {
  const {
    isOpen,
    toggle,
    close,
    notifications,
    unreadCount,
    markAsRead,
    markAllAsRead,
    deleteNotification,
  } = useNotificationCenter();

  return (
    <Popover
      opened={isOpen}
      onClose={close}
      position={position}
      width={380}
      trapFocus
      withArrow
      shadow="md"
    >
      <Popover.Target>
        <Indicator
          inline
          label={unreadCount}
          size={16}
          disabled={unreadCount === 0}
          color="red"
          offset={7}
        >
          <ActionIcon
            variant="default"
            size="lg"
            onClick={toggle}
            aria-label="Notifications"
          >
            <IconBell size={20} />
          </ActionIcon>
        </Indicator>
      </Popover.Target>

      <Popover.Dropdown p={0}>
        <Stack gap={0}>
          <Group justify="space-between" p="md" pb="sm">
            <Group gap="xs">
              <Text fw={600} size="lg">Notifications</Text>
              {unreadCount > 0 && (
                <Badge color="red" variant="filled" size="sm">
                  {unreadCount} new
                </Badge>
              )}
            </Group>
            {notifications.length > 0 && (
              <Button
                variant="subtle"
                size="xs"
                onClick={markAllAsRead}
                disabled={unreadCount === 0}
              >
                Mark all as read
              </Button>
            )}
          </Group>

          {notifications.length === 0 ? (
            <Center p="xl">
              <Stack align="center" gap="xs">
                <IconInbox size={48} stroke={1} color="gray" />
                <Text c="dimmed" size="sm">{emptyMessage}</Text>
              </Stack>
            </Center>
          ) : (
            <ScrollArea h={maxHeight} offsetScrollbars>
              <Stack gap={0}>
                {notifications.map((notification) => (
                  <NotificationItem
                    key={notification.id}
                    notification={notification}
                    onRead={() => markAsRead(notification.id)}
                    onDismiss={() => deleteNotification(notification.id)}
                  />
                ))}
              </Stack>
            </ScrollArea>
          )}
        </Stack>
      </Popover.Dropdown>
    </Popover>
  );
}