yingqing/core/frontend/src/components/overlays.tsx

import { useEffect, useState, type ReactNode } from "react";
import { createPortal } from "react-dom";
import { CheckCircle2, Inbox, Music, Shield, Trash2, X } from "lucide-react";

// 浮层打开时锁住 body 滚动(否则滚轮会滚动遮罩后面的页面,体感"遮罩没盖住")。
// 多浮层叠开用计数,最后一个关闭才解锁。
let scrollLockCount = 0;
export function useBodyScrollLock(active: boolean) {
  useEffect(() => {
    if (!active) return;
    scrollLockCount += 1;
    document.body.style.overflow = "hidden";
    return () => {
      scrollLockCount -= 1;
      if (scrollLockCount <= 0) { scrollLockCount = 0; document.body.style.overflow = ""; }
    };
  }, [active]);
}

// 浮层进出场过渡 + ESC 统一接管。
// 进场:挂载后「下一帧」再上 .show,让 CSS 的 scale(.96→1)/translateX 过渡真正跑起来
//      (此前直接挂 .show,首帧即终态 → 没有进场动画)。
// 退场:先撤 .show 播退场过渡,等过渡时长后再卸载。
// ESC:open 时监听 Escape → onClose(对齐 MediaLightbox 既有行为)。
export function useOverlayTransition(open: boolean, onClose?: () => void, durationMs = 260) {
  const [mounted, setMounted] = useState(open);
  const [show, setShow] = useState(false);
  useEffect(() => {
    let raf1 = 0;
    let raf2 = 0;
    let timer = 0;
    if (open) {
      setMounted(true);
      raf1 = requestAnimationFrame(() => { raf2 = requestAnimationFrame(() => setShow(true)); });
    } else {
      setShow(false);
      timer = window.setTimeout(() => setMounted(false), durationMs);
    }
    return () => { cancelAnimationFrame(raf1); cancelAnimationFrame(raf2); window.clearTimeout(timer); };
  }, [open, durationMs]);
  useEffect(() => {
    if (!open || !onClose) return;
    const onKey = (event: KeyboardEvent) => { if (event.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  return { mounted, show };
}

// 通用媒体预览灯箱:点击图片放大 / 点击视频弹窗播放 / 点击音频弹窗试听(复用 .np-lightbox 样式)
// 背景点击 / Esc / 关闭键都可关闭;点媒体本身不关闭。
export function MediaLightbox({ open, src, kind, name, close }: {
  open: boolean;
  src: string;
  kind?: "image" | "video" | "audio";
  name?: string;
  close: () => void;
}) {
  useBodyScrollLock(open && !!src);
  useEffect(() => {
    if (!open) return;
    const onKey = (event: KeyboardEvent) => { if (event.key === "Escape") close(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, close]);
  if (!open || !src) return null;
  // 挂到 body:脱离 .content(z-index:1)层叠上下文,遮罩才能盖住头部/侧栏
  return createPortal(
    <div className="np-lightbox show" onClick={close}>
      <button className="lb-x" type="button" aria-label="关闭" onClick={close}><X /></button>
      {kind === "video" ? (
        <video
          src={src}
          controls
          autoPlay
          playsInline
          onClick={(event) => event.stopPropagation()}
          style={{ maxWidth: "90vw", maxHeight: "88vh", borderRadius: "var(--r-md)", boxShadow: "0 20px 60px rgba(0,0,0,.5)", background: "#000", cursor: "default" }}
        />
      ) : kind === "audio" ? (
        <div className="lb-audio" onClick={(event) => event.stopPropagation()}>
          <Music aria-hidden="true" />
          <audio src={src} controls autoPlay />
        </div>
      ) : (
        <img src={src} alt={name || "预览"} onClick={(event) => event.stopPropagation()} style={{ cursor: "default" }} />
      )}
      {name && <div className="lb-name">{name}</div>}
    </div>,
    document.body,
  );
}

export function SettingRow({ title, desc, action, toggle, checked }: { title: string; desc: string; action?: string; toggle?: boolean; checked?: boolean }) {
  return (
    <div className="setting-row">
      <div><strong>{title}</strong><span>{desc}</span></div>
      {toggle ? <label className="switch"><input type="checkbox" defaultChecked={checked} /><span className="slider" /></label> : <button className="btn btn-sm" type="button">{action}</button>}
    </div>
  );
}

export function TeamModal({ open, title, subtitle, icon, close, children, footer }: {
  open: boolean;
  title: string;
  subtitle: string;
  icon: ReactNode;
  close: () => void;
  children: ReactNode;
  footer?: ReactNode;
}) {
  useBodyScrollLock(open);
  const { mounted, show } = useOverlayTransition(open, close);
  if (!mounted) return null;
  // 挂到 body:脱离 .content(z-index:1)层叠上下文,遮罩才能盖住头部/侧栏
  return createPortal(
    <div className={`modal-bg${show ? " show" : ""}`} onClick={close}>
      <div className="modal invite-modal" onClick={(event) => event.stopPropagation()}>
        <span className="corner-tr">+</span><span className="corner-bl">+</span>
        <div className="modal-h"><div className="ic-m">{icon}</div><div className="ti">{title}<span>{subtitle}</span></div><button className="x modal-x" type="button" onClick={close} aria-label="关闭"><X size={14} /></button></div>
        <div className="modal-b">{children}</div>
        <div className="modal-f"><button className="btn" type="button" onClick={close}>取消</button>{footer || <button className="btn btn-primary" type="button" onClick={close}>保存</button>}</div>
      </div>
    </div>,
    document.body,
  );
}

export function ConfirmModal({ open, title, detail, confirmText, subtitle = "// CONFIRM", icon, onCancel, onConfirm }: {
  open: boolean;
  title: string;
  detail: string;
  confirmText: string;
  subtitle?: string;
  icon?: ReactNode;
  onCancel: () => void;
  onConfirm: () => void | Promise<unknown>;
}) {
  useBodyScrollLock(open);
  const { mounted, show } = useOverlayTransition(open, onCancel);
  if (!mounted) return null;
  // 挂到 body:脱离 .content(z-index:1)层叠上下文,遮罩才能盖住头部/侧栏
  return createPortal(
    <div className={`modal-bg${show ? " show" : ""}`} onClick={onCancel}>
      <div className="modal" onClick={(event) => event.stopPropagation()}>
        <span className="corner-tr">+</span><span className="corner-bl">+</span>
        <div className="modal-h"><div className="ic-m">{icon ?? <Shield size={16} />}</div><div className="ti">{title}<span>{subtitle}</span></div></div>
        <div className="modal-b">{detail}</div>
        <div className="modal-f"><button className="btn" type="button" onClick={onCancel}>取消</button><button className="btn btn-primary" type="button" onClick={() => void onConfirm()}>{confirmText}</button></div>
      </div>
    </div>,
    document.body,
  );
}

/* 成功提示弹窗(复用 .modal 设计系统)· 标题 + 说明 + 自定义动作按钮组 */
export function SuccessModal({ open, title, detail, actions, close }: {
  open: boolean;
  title: string;
  detail: string;
  actions: ReactNode;
  close: () => void;
}) {
  useBodyScrollLock(open);
  const { mounted, show } = useOverlayTransition(open, close);
  if (!mounted) return null;
  return createPortal(
    <div className={`modal-bg${show ? " show" : ""}`} onClick={close}>
      <div className="modal" onClick={(event) => event.stopPropagation()}>
        <span className="corner-tr">+</span><span className="corner-bl">+</span>
        <div className="modal-h"><div className="ic-m"><CheckCircle2 size={16} /></div><div className="ti">{title}<span>// SUCCESS</span></div><button className="x modal-x" type="button" onClick={close} aria-label="关闭"><X size={14} /></button></div>
        <div className="modal-b">{detail}</div>
        <div className="modal-f">{actions}</div>
      </div>
    </div>,
    document.body,
  );
}

export function Drawer({ title, open, close, children }: { title: string; open: boolean; close: () => void; children: ReactNode }) {
  useBodyScrollLock(open);
  const { mounted, show } = useOverlayTransition(open, close);
  if (!mounted) return null;
  // 挂到 body:脱离 .content(z-index:1)层叠上下文,遮罩才能盖住头部/侧栏
  return createPortal(
    <>
      <div className={`drawer-bg${show ? " show" : ""}`} onClick={close} />
      <aside className={`drawer${show ? " show" : ""}`}>
        <div className="drawer-h"><h3>{title}</h3><button className="x" type="button" onClick={close} aria-label="关闭"><X size={14} /></button></div>
        <div className="drawer-b">{children}</div>
      </aside>
    </>,
    document.body,
  );
}

export function EmptyPanel({ title, action, onAction }: { title: string; action: string; onAction: () => void }) {
  return <div className="empty-state show"><span className="ic-empty"><Inbox size={22} strokeWidth={1.5} aria-hidden="true" /></span><h3>{title}</h3><p>// 先创建资料后进入下一步</p><button className="btn btn-primary" type="button" onClick={onAction}>{action}</button></div>;
}