"use client"

import { useEffect, useRef } from "react"
import { formatDistanceToNow } from "date-fns"
import { toast } from "sonner"
import {
  useNotificationStore,
  type StoredNotification,
} from "@/lib/stores/notification-store"

export function NotificationPanel({ onClose }: { onClose: () => void }) {
  const panelReference = useRef<HTMLDivElement>(null)
  const notifications = useNotificationStore((state) => state.notifications)
  const dismissNotification = useNotificationStore(
    (state) => state.dismissNotification
  )
  const clearAllNotifications = useNotificationStore(
    (state) => state.clearAllNotifications
  )
  const markAllAsViewed = useNotificationStore(
    (state) => state.markAllAsViewed
  )

  useEffect(() => {
    markAllAsViewed()
  }, [markAllAsViewed])

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      const target = event.target as Node
      if (
        panelReference.current &&
        !panelReference.current.contains(target) &&
        !(target instanceof HTMLElement && target.closest("[data-notification-toggle]"))
      ) {
        onClose()
      }
    }

    document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [onClose])

  function handleNotificationClick(notification: StoredNotification) {
    if (notification.actionUrl) {
      navigator.clipboard.writeText(notification.actionUrl)
      toast("link copied to clipboard")
    }
  }

  return (
    <div
      ref={panelReference}
      className="fixed bottom-16 left-2 z-[9998] w-80 max-w-[calc(100vw-1rem)] border border-border bg-background-secondary shadow-lg"
    >
      <div className="flex items-center justify-between border-b border-border px-3 py-2">
        <span className="text-text-primary">notifications</span>
        {notifications.length > 0 && (
          <button
            type="button"
            onClick={() => {
              clearAllNotifications()
              onClose()
            }}
            className="text-text-dim transition-colors hover:text-text-secondary"
          >
            clear all
          </button>
        )}
      </div>
      <div className="max-h-64 overflow-auto">
        {notifications.length === 0 ? (
          <p className="px-3 py-4 text-center text-text-dim">
            no notifications
          </p>
        ) : (
          notifications.map((notification: StoredNotification) => (
            <div
              key={notification.identifier}
              className={`flex items-start gap-2 border-b border-border px-3 py-2 last:border-b-0 ${
                notification.actionUrl
                  ? "cursor-pointer transition-colors hover:bg-background-tertiary"
                  : ""
              }`}
              onClick={
                notification.actionUrl
                  ? () => handleNotificationClick(notification)
                  : undefined
              }
            >
              <div className="min-w-0 flex-1">
                <p className="text-text-secondary">{notification.message}</p>
                {notification.actionUrl && (
                  <p className="mt-0.5 text-text-dim">
                    tap to copy link
                  </p>
                )}
                <p className="mt-0.5 text-text-dim">
                  {formatDistanceToNow(new Date(notification.timestamp), {
                    addSuffix: true,
                  })}
                </p>
              </div>
              <button
                type="button"
                onClick={(event) => {
                  event.stopPropagation()
                  dismissNotification(notification.identifier)
                }}
                className="shrink-0 px-1 text-text-dim transition-colors hover:text-text-secondary"
              >
                &times;
              </button>
            </div>
          ))
        )}
      </div>
    </div>
  )
}

export function useUnviewedNotificationCount(): number {
  const notifications = useNotificationStore((state) => state.notifications)
  const lastViewedAt = useNotificationStore((state) => state.lastViewedAt)

  if (!lastViewedAt) return notifications.length

  return notifications.filter(
    (notification) => notification.timestamp > lastViewedAt
  ).length
}