import { useCallback } from 'react';
import DOMPurify from 'dompurify';
import { adaptAnnouncementColors } from '../lib/adaptAnnouncementColors';
import styles from './AnnouncementModal.module.css';

interface Props {
  /** 公告 HTML 内容(由父组件传入,本组件不自己 fetch)。 */
  content: string;
  /** 用户点关闭/我知道了时回调,父组件负责标记已读 + 关闭。 */
  onClose: () => void;
}

/**
 * 公告 modal — 纯展示组件。
 *
 * 数据来源 + 自动弹时机 + 标记已读 全部由 <GlobalAnnouncementGate /> 统一处理,
 * 本组件只负责渲染。HTML 内容用 DOMPurify 防 XSS。
 *
 * 强弹场景:用户必须点【关闭 ✕】或【我知道了】才能关闭,
 * 点遮罩外区域同样关闭(关闭后会标已读,不再弹)。
 */
export function AnnouncementModal({ content, onClose }: Props) {
  const handleClose = useCallback(() => {
    onClose();
  }, [onClose]);

  // 公告颜色自适应:strip 暗色/浅色专用灰度色,让继承主题文字色;彩色保留
  const safeHtml = DOMPurify.sanitize(adaptAnnouncementColors(content));

  return (
    <div
      className={styles.overlay}
      onMouseDown={(e) => { if (e.target === e.currentTarget) handleClose(); }}
    >
      <div className={styles.modal}>
        <div className={styles.header}>
          <span className={styles.title}>公告</span>
          <button className={styles.closeBtn} onClick={handleClose} aria-label="关闭公告">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <line x1="18" y1="6" x2="6" y2="18" />
              <line x1="6" y1="6" x2="18" y2="18" />
            </svg>
          </button>
        </div>
        <div
          className={styles.content}
          dangerouslySetInnerHTML={{ __html: `<style>li{margin-left:16px}</style>${safeHtml}` }}
        />
        <div className={styles.footer}>
          <button className={styles.confirmBtn} onClick={handleClose}>
            我知道了
          </button>
        </div>
      </div>
    </div>
  );
}
