import { EditorView } from "@codemirror/view";
import type { ThemeColors } from "@/views/editor/theme/types";

/**
 * 创建 Markdown 预览面板的主题样式
 */
export function createMarkdownPreviewTheme(colors: ThemeColors) {
  // GitHub 官方颜色变量
  const isDark = colors.dark;
  
  // GitHub Light 主题颜色
  const lightColors = {
    fg: {
      default: "#1F2328",
      muted: "#656d76",
      subtle: "#6e7781"
    },
    border: {
      default: "#d0d7de",
      muted: "#d8dee4"
    },
    canvas: {
      default: "#ffffff",
      subtle: "#f6f8fa"
    },
    accent: {
      fg: "#0969da",
      emphasis: "#0969da"
    }
  };
  
  // GitHub Dark 主题颜色
  const darkColors = {
    fg: {
      default: "#e6edf3",
      muted: "#7d8590",
      subtle: "#6e7681"
    },
    border: {
      default: "#30363d",
      muted: "#21262d"
    },
    canvas: {
      default: "#0d1117",
      subtle: "#161b22"
    },
    accent: {
      fg: "#2f81f7",
      emphasis: "#2f81f7"
    }
  };
  
  const ghColors = isDark ? darkColors : lightColors;
  
  return EditorView.theme({
    // 面板容器
    ".cm-markdown-preview-panel": {
      position: "relative",
      display: "flex",
      flexDirection: "column",
      overflow: "hidden"
    },

    // 拖动调整大小的手柄
    ".cm-preview-resize-handle": {
      width: "100%",
      height: "3px",
      backgroundColor: colors.borderColor,
      cursor: "ns-resize",
      position: "relative",
      flexShrink: 0,
      transition: "background-color 0.2s ease",
      "&:hover": {
        backgroundColor: colors.selection
      },
      "&.dragging": {
        backgroundColor: colors.selection
      }
    },

      // 面板动画效果
      '.cm-panels.cm-panels-top': {
          borderBottom: '2px solid black'
      },
      '.cm-panels.cm-panels-bottom': {
          animation: 'panelSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
      },
      '@keyframes panelSlideUp': {
          from: {
              transform: 'translateY(100%)',
              opacity: '0'
          },
          to: {
              transform: 'translateY(0)',
              opacity: '1'
          }
      },
      '@keyframes panelSlideDown': {
          from: {
              transform: 'translateY(0)',
              opacity: '1'
          },
          to: {
              transform: 'translateY(100%)',
              opacity: '0'
          }
      },

    // 内容区域
    ".cm-preview-content": {
      flex: 1,
      padding: "45px",
      overflow: "auto",
      fontSize: "16px",
      lineHeight: "1.5",
      color: ghColors.fg.default,
      wordWrap: "break-word",
      fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
      boxSizing: "border-box",
      
      // Loading state
      "& .markdown-loading, & .markdown-error": {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        minHeight: "200px",
        fontSize: "14px",
        color: ghColors.fg.muted
      },
      
      "& .markdown-error": {
        color: "#f85149"
      },
      
      // ========== 标题样式 ==========
      "& h1, & h2, & h3, & h4, & h5, & h6": {
        marginTop: "24px",
        marginBottom: "16px",
        fontWeight: "600",
        lineHeight: "1.25",
        color: ghColors.fg.default
      },
      "& h1": {
        fontSize: "2em",
        borderBottom: `1px solid ${ghColors.border.muted}`,
        paddingBottom: "0.3em"
      },
      "& h2": {
        fontSize: "1.5em",
        borderBottom: `1px solid ${ghColors.border.muted}`,
        paddingBottom: "0.3em"
      },
      "& h3": {
        fontSize: "1.25em"
      },
      "& h4": {
        fontSize: "1em"
      },
      "& h5": {
        fontSize: "0.875em"
      },
      "& h6": {
        fontSize: "0.85em",
        color: ghColors.fg.muted
      },

      // ========== 段落和文本 ==========
      "& p": {
        marginTop: "0",
        marginBottom: "16px"
      },
      "& strong": {
        fontWeight: "600"
      },
      "& em": {
        fontStyle: "italic"
      },
      "& del": {
        textDecoration: "line-through",
        opacity: "0.7"
      },

      // ========== 列表 ==========
      "& ul, & ol": {
        paddingLeft: "2em",
        marginTop: "0",
        marginBottom: "16px"
      },
      "& ul ul, & ul ol, & ol ol, & ol ul": {
        marginTop: "0",
        marginBottom: "0"
      },
      "& li": {
        wordWrap: "break-all"
      },
      "& li > p": {
        marginTop: "16px"
      },
      "& li + li": {
        marginTop: "0.25em"
      },

      // 任务列表
      "& .task-list-item": {
        listStyleType: "none",
        position: "relative",
        paddingLeft: "1.5em"
      },
      "& .task-list-item + .task-list-item": {
        marginTop: "3px"
      },
      "& .task-list-item input[type='checkbox']": {
        font: "inherit",
        overflow: "visible",
        fontFamily: "inherit",
        fontSize: "inherit",
        lineHeight: "inherit",
        boxSizing: "border-box",
        padding: "0",
        margin: "0 0.2em 0.25em -1.6em",
        verticalAlign: "middle",
        cursor: "pointer"
      },

      // ========== 代码块 ==========
      "& code, & tt": {
        fontFamily: "SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace",
        fontSize: "85%",
        padding: "0.2em 0.4em",
        margin: "0",
        backgroundColor: isDark ? "rgba(110, 118, 129, 0.4)" : "rgba(27, 31, 35, 0.05)",
        borderRadius: "3px"
      },
      
      "& pre": {
        position: "relative",
        backgroundColor: isDark ? "#161b22" : "#f6f8fa",
        padding: "40px 16px 16px 16px",
        borderRadius: "6px",
        overflow: "auto",
        margin: "16px 0",
        fontSize: "85%",
        lineHeight: "1.45",
        wordWrap: "normal",
        
        // macOS 窗口样式 - 使用伪元素创建顶部栏
        "&::before": {
          content: '""',
          position: "absolute",
          top: "0",
          left: "0",
          right: "0",
          height: "28px",
          backgroundColor: isDark ? "#1c1c1e" : "#e8e8e8",
          borderBottom: `1px solid ${ghColors.border.default}`,
          borderRadius: "6px 6px 0 0"
        },
        
        // macOS 三个控制按钮
        "&::after": {
          content: '""',
          position: "absolute",
          top: "10px",
          left: "12px",
          width: "12px",
          height: "12px",
          borderRadius: "50%",
          backgroundColor: isDark ? "#ec6a5f" : "#ff5f57",
          boxShadow: `
            18px 0 0 0 ${isDark ? "#f4bf4f" : "#febc2e"},
            36px 0 0 0 ${isDark ? "#61c554" : "#28c840"}
          `
        }
      },
      
      "& pre code, & pre tt": {
        display: "inline",
        maxWidth: "auto",
        padding: "0",
        margin: "0",
        overflow: "visible",
        lineHeight: "inherit",
        wordWrap: "normal",
        backgroundColor: "transparent",
        border: "0",
        fontSize: "100%",
        color: ghColors.fg.default,
        wordBreak: "normal",
        whiteSpace: "pre"
      },

      // ========== 引用块 ==========
      "& blockquote": {
        margin: "16px 0",
        padding: "0 1em",
        color: isDark ? "#7d8590" : "#6a737d",
        borderLeft: isDark ? "0.25em solid #3b434b" : "0.25em solid #dfe2e5"
      },
      "& blockquote > :first-child": {
        marginTop: "0"
      },
      "& blockquote > :last-child": {
        marginBottom: "0"
      },

      // ========== 分割线 ==========
      "& hr": {
        height: "0.25em",
        padding: "0",
        margin: "24px 0",
        backgroundColor: isDark ? "#21262d" : "#e1e4e8",
        border: "0",
        overflow: "hidden",
        boxSizing: "content-box"
      },

      // ========== 表格 ==========
      "& table": {
        borderSpacing: "0",
        borderCollapse: "collapse",
        display: "block",
        width: "100%",
        overflow: "auto",
        marginTop: "0",
        marginBottom: "16px"
      },
      "& table tr": {
        backgroundColor: isDark ? "#0d1117" : "#ffffff",
        borderTop: isDark ? "1px solid #21262d" : "1px solid #c6cbd1"
      },
      "& table th, & table td": {
        padding: "6px 13px",
        border: isDark ? "1px solid #30363d" : "1px solid #dfe2e5"
      },
      "& table th": {
        fontWeight: "600"
      },

      // ========== 链接 ==========
      "& a, & .markdown-link": {
        color: isDark ? "#58a6ff" : "#0366d6",
        textDecoration: "none",
        cursor: "pointer",
        "&:hover": {
          textDecoration: "underline"
        }
      },

      // ========== 图片 ==========
      "& img": {
        maxWidth: "100%",
        height: "auto",
        borderRadius: "4px",
        margin: "16px 0"
      },

      // ========== 其他元素 ==========
      "& kbd": {
        display: "inline-block",
        padding: "3px 5px",
        fontSize: "11px",
        lineHeight: "10px",
        color: ghColors.fg.default,
        verticalAlign: "middle",
        backgroundColor: ghColors.canvas.subtle,
        border: `solid 1px ${isDark ? "rgba(110, 118, 129, 0.4)" : "rgba(175, 184, 193, 0.2)"}`,
        borderBottom: `solid 2px ${isDark ? "rgba(110, 118, 129, 0.4)" : "rgba(175, 184, 193, 0.2)"}`,
        borderRadius: "6px",
        boxShadow: "inset 0 -1px 0 rgba(175, 184, 193, 0.2)"
      },

      // 首个子元素去除上边距
      "& > *:first-child": {
        marginTop: "0 !important"
      },

      // 最后一个子元素去除下边距
      "& > *:last-child": {
        marginBottom: "0 !important"
      }
    }
  }, { dark: colors.dark });
}