"use client"

import { Bell, Mail, MapPin, Terminal, Trash2, UserPlus, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { formatClientSocket, getTimeSince, type AdminNotification } from "./session-helpers"

interface AdminNotificationsPanelProps {
  notifications: AdminNotification[]
  unreadCount: number
  onClear: () => void
  onDismiss: (id: string) => void
  onSelectSession: (sessionDbId: string) => void
  onMarkRead: () => void
}

const KIND_STYLES: Record<
  AdminNotification["kind"],
  { icon: typeof Bell; className: string }
> = {
  new: { icon: UserPlus, className: "bg-stone-200 text-stone-700" },
  update: { icon: Bell, className: "bg-stone-200 text-stone-700" },
  credentials: { icon: Mail, className: "bg-stone-800 text-white" },
  command: { icon: Terminal, className: "bg-stone-200 text-stone-700" },
  removed: { icon: X, className: "bg-stone-200 text-stone-700" },
}

export function AdminNotificationsPanel({
  notifications,
  unreadCount,
  onClear,
  onDismiss,
  onSelectSession,
  onMarkRead,
}: AdminNotificationsPanelProps) {
  return (
    <div
      className="rounded-xl border border-stone-200 bg-white"
      onMouseEnter={onMarkRead}
      onFocus={onMarkRead}
    >
      <div className="flex items-center justify-between gap-2 border-b border-stone-100 px-4 py-3">
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium text-stone-800">Live client activity</span>
          {unreadCount > 0 ? (
            <span className="rounded-md bg-stone-100 px-1.5 py-0.5 text-[11px] font-medium text-stone-600">
              {unreadCount}
            </span>
          ) : null}
        </div>
        {notifications.length > 0 ? (
          <Button
            type="button"
            size="sm"
            variant="ghost"
            className="h-8 px-2 text-xs text-stone-500"
            onClick={onClear}
          >
            <Trash2 className="mr-1 h-3.5 w-3.5" />
            Clear
          </Button>
        ) : null}
      </div>

      <div className="max-h-[220px] overflow-y-auto p-2">
        {notifications.length === 0 ? (
          <p className="px-2 py-8 text-center text-xs text-stone-400">
            Visitor clicks, typing, and page changes appear here.
          </p>
        ) : (
          <ul className="space-y-1">
            {notifications.map((n) => {
              const style = KIND_STYLES[n.kind]
              const Icon = style.icon
              return (
                <li key={n.id}>
                  <div
                    role="button"
                    tabIndex={0}
                    className={`flex cursor-pointer gap-2 rounded-lg px-2.5 py-2 transition-colors ${
                      n.unread ? "bg-stone-50" : "hover:bg-stone-50"
                    }`}
                    onClick={() => {
                      if (n.sessionDbId) onSelectSession(n.sessionDbId)
                    }}
                    onKeyDown={(e) => {
                      if ((e.key === "Enter" || e.key === " ") && n.sessionDbId) {
                        e.preventDefault()
                        onSelectSession(n.sessionDbId)
                      }
                    }}
                  >
                    <span
                      className={`mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${style.className}`}
                    >
                      <Icon className="h-3.5 w-3.5" />
                    </span>
                    <div className="min-w-0 flex-1">
                      <p className="text-xs text-stone-700">{n.message}</p>
                      <p className="mt-0.5 flex flex-wrap items-center gap-x-2 text-[10px] text-stone-400">
                        <span>{getTimeSince(n.at)}</span>
                        {n.ip ? (
                          <span className="inline-flex items-center gap-0.5">
                            <MapPin className="h-2.5 w-2.5" />
                            {n.ip}
                          </span>
                        ) : null}
                        {n.socketId ? (
                          <span className="font-mono">{formatClientSocket(n.socketId)}</span>
                        ) : null}
                      </p>
                    </div>
                    <button
                      type="button"
                      className="shrink-0 self-start rounded p-1 text-stone-300 hover:bg-stone-100 hover:text-stone-500"
                      onClick={(e) => {
                        e.stopPropagation()
                        onDismiss(n.id)
                      }}
                      aria-label="Dismiss"
                    >
                      <X className="h-3.5 w-3.5" />
                    </button>
                  </div>
                </li>
              )
            })}
          </ul>
        )}
      </div>
    </div>
  )
}