'use client';

import { formatDistanceToNow } from 'date-fns';
import { Bell, BellRing, LoaderCircle } from 'lucide-react';
import type { Task } from '@/lib/types';
import { StatusPill } from '@/components/ui/status-pill';
import { cn } from '@/lib/utils';

type TaskNotificationsTriggerProps = {
  unreadCount: number;
  isPopoverOpen: boolean;
  setIsPopoverOpen: (value: boolean) => void;
  isLoading: boolean;
  activeTasks: Task[];
  visibleFinishedTasks: Task[];
  awaitingReviewTasks: Task[];
  showReadFinished: boolean;
  setShowReadFinished: (value: boolean) => void;
  openTaskDetails: (taskId: string) => void;
  openTaskAction: (task: Task, actionId?: string | null) => void;
  silenceTask: (taskId: string, silenced?: boolean) => Promise<void>;
  markTaskRead: (taskId: string, read?: boolean) => Promise<void>;
  className?: string;
};

function ProgressBar({ task }: { task: Task }) {
  const progress = task.notification.progress;
  if (!progress) {
    return null;
  }

  return (
    <div className="mt-2">
      <div className="mb-1 flex items-center justify-between text-[11px] text-[color:var(--terminal-muted)]">
        <span>{progress.current}/{progress.total} {progress.unit}</span>
        <span>{progress.percent ?? 0}%</span>
      </div>
      <div className="h-1.5 rounded-full bg-[color:rgba(255,255,255,0.08)]">
        <div
          className="h-full rounded-full bg-[color:var(--accent)] transition-[width] duration-300"
          style={{ width: `${progress.percent ?? 0}%` }}
        />
      </div>
    </div>
  );
}

function StatChips({ task }: { task: Task }) {
  if (task.notification.stats.length === 0) {
    return null;
  }

  return (
    <div className="mt-2 flex flex-wrap gap-1.5">
      {task.notification.stats.map((stat) => (
        <span
          key={`${stat.label}:${stat.value}`}
          className="inline-flex items-center rounded-full border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-2 py-1 text-[11px] text-[color:var(--terminal-muted)]"
        >
          {stat.label}: {stat.value}
        </span>
      ))}
    </div>
  );
}

export function TaskNotificationsTrigger({
  unreadCount,
  isPopoverOpen,
  setIsPopoverOpen,
  isLoading,
  activeTasks,
  visibleFinishedTasks,
  awaitingReviewTasks,
  showReadFinished,
  setShowReadFinished,
  openTaskDetails,
  openTaskAction,
  silenceTask,
  markTaskRead,
  className
}: TaskNotificationsTriggerProps) {
  const button = (
    <button
      type="button"
      aria-label="Open notifications"
      onClick={() => setIsPopoverOpen(!isPopoverOpen)}
      className={cn(
        'relative inline-flex h-10 w-10 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)]',
        className
      )}
    >
      {unreadCount > 0 ? <BellRing className="size-4" /> : <Bell className="size-4" />}
      {unreadCount > 0 ? (
        <span className="absolute -right-1.5 -top-1.5 inline-flex min-w-[1.15rem] items-center justify-center rounded-full bg-[color:var(--accent)] px-1 text-[10px] font-semibold text-[#16181c]">
          {unreadCount > 99 ? '99+' : unreadCount}
        </span>
      ) : null}
    </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={cn(
              'absolute right-0 z-50 mt-2 h-[34rem] max-h-[calc(100vh-8rem)] w-[min(27rem,calc(100vw-2rem))] 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>
            <label className="mb-2 flex items-center justify-between gap-2 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-xs text-[color:var(--terminal-muted)]">
              <span>Show read finished jobs</span>
              <input
                type="checkbox"
                checked={showReadFinished}
                onChange={(event) => setShowReadFinished(event.target.checked)}
                className="h-4 w-4 accent-[color:var(--accent)]"
              />
            </label>
            <div className="mb-2 text-xs text-[color:var(--terminal-muted)]">Unread finished: {awaitingReviewTasks.length}</div>

            {isLoading ? (
              <div className="space-y-2">
                <div className="flex items-center gap-2 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-xs text-[color:var(--terminal-muted)]">
                  <LoaderCircle className="size-3.5 animate-spin" />
                  Loading notifications...
                </div>
                {Array.from({ length: 4 }).map((_, index) => (
                  <div key={index} className="animate-pulse rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
                    <div className="h-3 w-2/5 rounded bg-[color:var(--panel-bright)]" />
                    <div className="mt-2 h-2 w-4/5 rounded bg-[color:var(--panel-bright)]" />
                    <div className="mt-2 h-2 w-3/5 rounded bg-[color:var(--panel-bright)]" />
                  </div>
                ))}
              </div>
            ) : (
              <div className="h-[calc(100%-5.5rem)] space-y-3 overflow-y-auto pr-1">
                <section className="space-y-2">
                  <p className="text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Active jobs</p>
                  {activeTasks.length === 0 ? (
                    <p className="text-xs text-[color:var(--terminal-muted)]">No active jobs.</p>
                  ) : (
                    activeTasks.map((task) => (
                      <article key={task.id} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2.5">
                        <div className="flex items-center justify-between gap-2">
                          <p className="text-sm text-[color:var(--terminal-bright)]">{task.notification.title}</p>
                          <StatusPill status={task.status} />
                        </div>
                        <p className="mt-1 text-xs text-[color:var(--terminal-bright)]">{task.notification.statusLine}</p>
                        {task.notification.detailLine ? (
                          <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{task.notification.detailLine}</p>
                        ) : null}
                        <ProgressBar task={task} />
                        <StatChips task={task} />
                        <p className="mt-1 text-[11px] text-[color:var(--terminal-muted)]">
                          {formatDistanceToNow(new Date(task.updated_at), { addSuffix: true })}
                        </p>
                        <div className="mt-2 flex flex-wrap items-center gap-3">
                          {task.notification.actions
                            .filter((action) => action.primary && action.id !== 'open_details')
                            .slice(0, 1)
                            .map((action) => (
                              <button
                                key={action.id}
                                type="button"
                                className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
                                onClick={() => openTaskAction(task, action.id)}
                              >
                                {action.label}
                              </button>
                            ))}
                          <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>
                    ))
                  )}
                </section>

                <section className="space-y-2">
                  <p className="text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Awaiting review</p>
                  {visibleFinishedTasks.length === 0 ? (
                    <p className="text-xs text-[color:var(--terminal-muted)]">No finished jobs to review.</p>
                  ) : (
                    visibleFinishedTasks.map((task) => {
                      const isRead = task.notification_read_at !== null;

                      return (
                        <article key={task.id} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2.5">
                          <div className="flex items-center justify-between gap-2">
                            <p className="text-sm text-[color:var(--terminal-bright)]">{task.notification.title}</p>
                            <StatusPill status={task.status} />
                          </div>
                          <p className="mt-1 text-xs text-[color:var(--terminal-bright)]">{task.notification.statusLine}</p>
                          {task.notification.detailLine ? (
                            <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{task.notification.detailLine}</p>
                          ) : null}
                          <ProgressBar task={task} />
                          <StatChips task={task} />
                          <p className="mt-1 text-[11px] text-[color:var(--terminal-muted)]">
                            {formatDistanceToNow(new Date(task.updated_at), { addSuffix: true })}
                          </p>
                          <div className="mt-2 flex flex-wrap items-center gap-3">
                            {task.notification.actions
                              .filter((action) => action.primary && action.id !== 'open_details')
                              .slice(0, 1)
                              .map((action) => (
                                <button
                                  key={action.id}
                                  type="button"
                                  className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
                                  onClick={() => openTaskAction(task, action.id)}
                                >
                                  {action.label}
                                </button>
                              ))}
                            <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, !isRead);
                              }}
                            >
                              {isRead ? 'Mark unread' : 'Mark read'}
                            </button>
                          </div>
                        </article>
                      );
                    })
                  )}
                </section>
              </div>
            )}
          </div>
        </>
      ) : null}
    </div>
  );
}