import { createPortal } from "react-dom";
import { ArrowUpRight, TriangleAlert, X } from "lucide-react";
import { Button } from "@/shared/ui/button";
import type { ScadaAlertAtmosphereState } from "../hooks/use-scada-alert-notices";
import type { WorkbenchAlert } from "../types";

export type ScadaAlertIntensity = "soft" | "standard" | "strong";

/** Event-lifetime viewport warning with an independently dismissible visual layer. */
export function ScadaAlertAtmosphere({ atmosphere, onDismiss, onOpen, intensity = "standard" }: {
  atmosphere: ScadaAlertAtmosphereState | null;
  onDismiss: (id: string) => void;
  onOpen: (alert: WorkbenchAlert) => void;
  intensity?: ScadaAlertIntensity;
}) {
  if (!atmosphere) return null;
  const alert = atmosphere.alert;
  return createPortal(
    <div className="scada-alert-atmosphere status-tone-danger"
      data-testid="scada-alert-atmosphere" data-alert-id={atmosphere.id} data-preview={atmosphere.preview} data-intensity={intensity}>
      <div className="scada-alert-atmosphere-frame" aria-hidden="true" />
      <div className="scada-alert-atmosphere-light" aria-hidden="true" />
      <div role="status" aria-live="polite" className="scada-alert-atmosphere-notice glass-transient items-center gap-3 rounded-xl border p-3 text-foreground">
        <span className="grid size-9 shrink-0 place-items-center rounded-lg bg-[var(--status-soft)] text-[var(--status-foreground)]">
          <TriangleAlert size={19} aria-hidden="true" />
        </span>
        <div className="min-w-0 flex-1 space-y-0.5">
          <p className="text-[13px] leading-5 font-semibold">{atmosphere.preview ? "爆管告警效果预览"
            : (atmosphere.count ?? 1) > 1 ? `${atmosphere.count} 起爆管风险事件处理中` : "爆管风险调查中"}</p>
          <p className="text-[11px] leading-4 text-[var(--ink-muted)]">{atmosphere.preview ? "持续预览 · 可在 Dev 面板模拟结束" : "持续至事件处理结束"}</p>
        </div>
        {alert?.conditionId ? <Button type="button" size="sm" variant="ghost" className="scada-alert-atmosphere-action h-9 shrink-0 gap-1 px-2 text-xs"
          onClick={() => onOpen(alert)}>
          查看调查<ArrowUpRight size={14} aria-hidden="true" />
        </Button> : null}
        <Button type="button" size="sm" variant="outline" className="scada-alert-atmosphere-close h-9 shrink-0 gap-1.5 px-2.5 text-xs" aria-label="关闭告警灯效" title="关闭当前视觉警告"
          onClick={() => onDismiss(atmosphere.id)}><X size={14} aria-hidden="true" />关闭灯效</Button>
      </div>
    </div>, document.body
  );
}