Neon-Desk/components/notifications/task-notifications-trigger.tsx

'use client';

import { formatDistanceToNow } from 'date-fns';
import { Bell, BellRing, ChevronRight } from 'lucide-react';
import type { Task } from '@/lib/types';
import { Button } from '@/components/ui/button';
import { StatusPill } from '@/components/ui/status-pill';
import { taskTypeLabel } from '@/components/notifications/task-stage-helpers';
import { cn } from '@/lib/utils';

type TaskNotificationsTriggerProps = {
  unreadCount: number;
  isPopoverOpen: boolean;
  setIsPopoverOpen: (value: boolean) => void;
  activeTasks: Task[];
  awaitingReviewTasks: Task[];
  openDrawer: () => void;
  openTaskDetails: (taskId: string) => void;
  silenceTask: (taskId: string, silenced?: boolean) => Promise<void>;
  markTaskRead: (taskId: string, read?: boolean) => Promise<void>;
  className?: string;
  mobile?: boolean;
};

export function TaskNotificationsTrigger({
  unreadCount,
  isPopoverOpen,
  setIsPopoverOpen,
  activeTasks,
  awaitingReviewTasks,
  openDrawer,
  openTaskDetails,
  silenceTask,
  markTaskRead,
  className,
  mobile = false
}: TaskNotificationsTriggerProps) {
  const showPopover = !mobile;

  const button = (
    <button
      type="button"
      aria-label="Open notifications"
      onClick={() => {
        if (showPopover) {
          setIsPopoverOpen(!isPopoverOpen);
          return;
        }

        openDrawer();
      }}
      className={cn(
        'relative inline-flex items-center justify-center rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]',
        mobile ? 'min-w-0 flex-1 gap-1 px-2 py-1.5 text-[11px]' : 'h-10 w-10',
        className
      )}
    >
      {unreadCount > 0 ? <BellRing className="size-4" /> : <Bell className="size-4" />}
      {mobile ? <span>Alerts</span> : null}
      {unreadCount > 0 ? (
        <span className={cn(
          'absolute inline-flex min-w-[1.15rem] items-center justify-center rounded-full bg-[color:var(--accent)] px-1 text-[10px] font-semibold text-[#00241d]',
          mobile ? 'right-1 top-1' : '-right-1.5 -top-1.5'
        )}>
          {unreadCount > 99 ? '99+' : unreadCount}
        </span>
      ) : null}
    </button>
  );

  if (!showPopover) {
    return button;
  }

  return (
    <div className="relative">
      {button}
      {isPopoverOpen ? (
        <>
          <button
            type="button"
            aria-label="Close notifications popover"
            className="fixed inset-0 z-40 cursor-default bg-transparent"
            onClick={() => setIsPopoverOpen(false)}
          />
          <div className="absolute right-0 z-50 mt-2 w-[22rem] rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-3 shadow-[0_18px_50px_rgba(0,0,0,0.45)]">
            <div className="mb-2 flex items-center justify-between">
              <p className="text-xs uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">Job notifications</p>
              <span className="text-xs text-[color:var(--terminal-muted)]">{unreadCount} unread</span>
            </div>

            <div className="space-y-2">
              <p className="text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Active</p>
              {activeTasks.length === 0 ? (
                <p className="text-xs text-[color:var(--terminal-muted)]">No active jobs.</p>
              ) : (
                activeTasks.slice(0, 3).map((task) => (
                  <article key={task.id} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2">
                    <div className="flex items-center justify-between gap-2">
                      <p className="text-sm text-[color:var(--terminal-bright)]">{taskTypeLabel(task.task_type)}</p>
                      <StatusPill status={task.status} />
                    </div>
                    <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{task.stage_detail ?? 'Running in workflow engine.'}</p>
                    <div className="mt-2 flex items-center justify-between">
                      <button
                        type="button"
                        className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
                        onClick={() => openTaskDetails(task.id)}
                      >
                        Open details
                      </button>
                      <button
                        type="button"
                        className="text-xs text-[color:var(--terminal-muted)] transition hover:text-[color:var(--terminal-bright)]"
                        onClick={() => {
                          void silenceTask(task.id, true);
                        }}
                      >
                        Silence
                      </button>
                    </div>
                  </article>
                ))
              )}
            </div>

            <div className="mt-3 space-y-2">
              <p className="text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Awaiting review</p>
              {awaitingReviewTasks.length === 0 ? (
                <p className="text-xs text-[color:var(--terminal-muted)]">No unread finished jobs.</p>
              ) : (
                awaitingReviewTasks.slice(0, 3).map((task) => (
                  <article key={task.id} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2">
                    <div className="flex items-center justify-between gap-2">
                      <p className="text-sm text-[color:var(--terminal-bright)]">{taskTypeLabel(task.task_type)}</p>
                      <StatusPill status={task.status} />
                    </div>
                    <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">
                      {formatDistanceToNow(new Date(task.updated_at), { addSuffix: true })}
                    </p>
                    <div className="mt-2 flex items-center justify-between">
                      <button
                        type="button"
                        className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
                        onClick={() => openTaskDetails(task.id)}
                      >
                        Open details
                      </button>
                      <button
                        type="button"
                        className="text-xs text-[color:var(--terminal-muted)] transition hover:text-[color:var(--terminal-bright)]"
                        onClick={() => {
                          void markTaskRead(task.id, true);
                        }}
                      >
                        Mark read
                      </button>
                    </div>
                  </article>
                ))
              )}
            </div>

            <Button
              variant="secondary"
              className="mt-3 w-full"
              onClick={() => {
                setIsPopoverOpen(false);
                openDrawer();
              }}
            >
              Open notifications box
              <ChevronRight className="size-4" />
            </Button>
          </div>
        </>
      ) : null}
    </div>
  );
}