import { useEffect } from 'react';
import { MindSpacePageEditablePreviewFrame } from './MindSpacePageEditablePreviewFrame';
import type { MindSpacePreviewChangeHighlight } from './MindSpacePageDraftPreviewFrame';

export function MindSpacePageFullscreenPreview({
  pageTitle,
  title,
  content,
  reloadKey,
  changeHighlight: _changeHighlight = null,
  canUndo = false,
  canRedo = false,
  onUndo,
  onRedo,
  onClose,
  onRefresh,
  refreshPending = false,
  onContentChange,
}: {
  pageTitle: string;
  title: string;
  content: string;
  reloadKey: number;
  changeHighlight?: MindSpacePreviewChangeHighlight | null;
  canUndo?: boolean;
  canRedo?: boolean;
  onUndo?: () => boolean;
  onRedo?: () => boolean;
  onClose: () => void;
  onRefresh: () => void;
  refreshPending?: boolean;
  onContentChange: (html: string) => void;
}) {
  useEffect(() => {
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = previousOverflow;
    };
  }, []);

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      const target = event.target;
      if (
        target instanceof HTMLInputElement ||
        target instanceof HTMLTextAreaElement ||
        target instanceof HTMLSelectElement
      ) {
        return;
      }

      const mod = event.metaKey || event.ctrlKey;
      if (mod && !event.altKey && event.key.toLowerCase() === 'z') {
        if (event.shiftKey) {
          if (canRedo && onRedo?.()) event.preventDefault();
        } else if (canUndo && onUndo?.()) {
          event.preventDefault();
        }
        return;
      }

      if (event.key === 'Escape') {
        onClose();
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [canRedo, canUndo, onClose, onRedo, onUndo]);

  return (
    <div className="mindspace-page-fullscreen-preview" role="dialog" aria-modal="true" aria-label="页面全屏预览编辑">
      <header className="mindspace-page-fullscreen-preview-toolbar">
        <div className="mindspace-page-fullscreen-preview-title">
          <span className="mindspace-eyebrow">VISUAL EDIT</span>
          <strong>{pageTitle || '全屏预览编辑'}</strong>
          <span className="mindspace-page-fullscreen-preview-hint">
            蓝框=文字 · 橙框=图片/媒体 · 紫框=链接 · 绿框=背景（预览内左上角可看完整图例）
          </span>
        </div>
        <div className="mindspace-page-fullscreen-preview-actions">
          <button type="button" onClick={onUndo} disabled={!canUndo} title="撤销 (⌘Z)">
            撤销
          </button>
          <button type="button" onClick={onRedo} disabled={!canRedo} title="重做 (⌘⇧Z)">
            重做
          </button>
          <button
            type="button"
            className={refreshPending ? 'is-refresh-pending' : undefined}
            onClick={onRefresh}
            title={refreshPending ? '草稿已有新内容，点击刷新预览' : '将当前草稿同步到预览'}
          >
            刷新预览{refreshPending ? ' · 有新修改' : ''}
          </button>
          <button type="button" className="mindspace-primary" onClick={onClose}>
            退出编辑
          </button>
        </div>
      </header>

      <div className="mindspace-page-fullscreen-preview-body">
        <MindSpacePageEditablePreviewFrame
          title={title}
          content={content}
          reloadKey={reloadKey}
          fillViewport
          className="mindspace-page-fullscreen-preview-frame"
          showHint={false}
          onContentChange={onContentChange}
        />
      </div>
    </div>
  );
}
