"use client";

import { type ReactNode } from "react";
import { useWebSocket } from "@/hooks/use-websocket";
import { useToast } from "@/providers/toast-provider";
import { Badge } from "./ui";
import { t } from "@/lib/i18n";
import type { WsNotification } from "@/types/view-models";

const severityColor: Record<WsNotification["severity"], string> = {
  info: "var(--color-accent)",
  warning: "var(--color-warning)",
  error: "var(--color-danger)",
};

const typeLabel: Record<WsNotification["type"], string> = {
  audit_alert: t("admin.notification.auditAlert"),
  abnormal_login: t("admin.notification.abnormalLogin"),
  system_error: t("admin.notification.systemError"),
  info: "系统通知",
};

export function NotificationPanel(): ReactNode {
  const { notifications, connected, dismiss, clear } = useWebSocket(20);
  const { show } = useToast();

  return (
    <div
      style={{
        position: "fixed",
        top: 16,
        right: 16,
        width: 320,
        maxHeight: "60vh",
        overflowY: "auto",
        background: "var(--bg-paper)",
        border: "1px solid var(--color-rule)",
        borderRadius: 8,
        boxShadow: "0 4px 16px rgba(0,0,0,0.08)",
        zIndex: 100,
      }}
      role="region"
      aria-label="通知中心"
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "10px 16px",
          borderBottom: "1px solid var(--color-rule)",
        }}
      >
        <h3
          style={{
            fontFamily: "var(--font-serif)",
            fontSize: 14,
            color: "var(--color-ink)",
            margin: 0,
          }}
        >
          {t("admin.notification.title")}
        </h3>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <Badge status={connected ? "healthy" : "down"} />
          {notifications.length > 0 && (
            <button
              onClick={clear}
              style={{
                background: "none",
                border: "none",
                color: "var(--color-ink-muted)",
                fontSize: 11,
                cursor: "pointer",
              }}
            >
              清空
            </button>
          )}
        </div>
      </div>

      <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
        {notifications.length === 0 && (
          <li
            style={{
              padding: "24px 16px",
              textAlign: "center",
              color: "var(--color-ink-muted)",
              fontSize: 12,
            }}
          >
            暂无通知
          </li>
        )}
        {notifications.map((notif) => (
          <li
            key={notif.id}
            style={{
              padding: "10px 16px",
              borderBottom: "1px solid var(--color-rule)",
              borderLeft: `3px solid ${severityColor[notif.severity]}`,
            }}
          >
            <button
              type="button"
              style={{
                background: "none",
                border: "none",
                cursor: "pointer",
                padding: 0,
                width: "100%",
                textAlign: "left",
              }}
              onClick={() => {
                show(
                  notif.severity === "error"
                    ? "error"
                    : notif.severity === "warning"
                      ? "warning"
                      : "info",
                  notif.title,
                  notif.message,
                );
                dismiss(notif.id);
              }}
              aria-label={`${typeLabel[notif.type]}: ${notif.message}`}
            >
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "baseline",
                }}
              >
                <span
                  style={{
                    fontSize: 13,
                    color: "var(--color-ink)",
                    fontWeight: 500,
                  }}
                >
                  {typeLabel[notif.type]}
                </span>
                <span style={{ fontSize: 10, color: "var(--color-ink-muted)" }}>
                  {new Date(notif.timestamp).toLocaleTimeString("zh-CN")}
                </span>
              </div>
              <p
                style={{
                  fontSize: 12,
                  color: "var(--color-ink-muted)",
                  margin: "4px 0 0 0",
                }}
              >
                {notif.message}
              </p>
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}