/**
 * 表单样式控制模块
 * 用于在自动填写过程中，对匹配到的表单字段容器设置背景色高亮反馈
 * 颜色含义：green=填写成功（淡绿色）、red=填写失败/必填未填（淡红色）、yellow=非必填跳过（淡黄色）
 */

/** 高亮颜色类型 */
export type HighlightColor = "green" |"greenTwo" | "red" | "yellow"

/** 颜色映射表（淡色系，不影响文字可读性） */
const COLOR_MAP: Record<HighlightColor, string> = {
  green: "#b7ffc5",   // 淡绿色
  greenTwo: "#b7ffc6",   // 淡绿色2
  red: "#ffb7b7",     // 淡红色
  yellow: "transparent",  // 透明色
}

/** 常见的表单项容器选择器（与 formMatcher.ts 保持一致） */
const FORM_ITEM_SELECTORS = [
  ".form-item", ".form-group", ".form-field",
  ".el-form-item", ".ant-form-item", ".ant-row",
  ".arco-form-item", ".t-form-item", ".n-form-item",
  ".ivu-form-item", ".v-input", ".MuiFormControl-root",
  "[class*='form-item']", "[class*='form-group']", "[class*='formItem']",
]

// ============ 必填红*标记检测 ============

/**
 * 非必填字段的红*标记样式特征排除配置
 * 用于兼容不同网站：某些网站的红*标记不代表必填，通过此配置排除误判
 *
 * 使用场景：特殊网站中某些 label 带红*但实际非必填，可以把这些特征加进来排除
 *
 * @property containerClassExcludes - 如果表单项容器包含这些 class 片段则跳过必填判定
 * @property labelClassExcludes - 如果标签元素包含这些 class 片段则跳过必填判定
 * @property labelTextExcludes - 如果标签文字包含这些关键词则跳过必填判定
 */
export interface RequiredMarkExcludeConfig {
  /** 容器 class 排除特征（className 中包含任一则视为非必填） */
  containerClassExcludes?: string[]
  /** 标签 class 排除特征 */
  labelClassExcludes?: string[]
  /** 标签文字排除关键词 */
  labelTextExcludes?: string[]
}

/**
 * 检测表单字段是否有红*必填标记
 *
 * 检测策略（按优先级）：
 * 1. input 元素自身的 required 属性 / aria-required="true"
 * 2. 表单项容器 class 包含 required / is-required 等关键词
 * 3. 标签元素或其子元素中存在纯文字 "*" 的红色节点
 * 4. 标签元素或其相邻元素的 ::before / ::after 伪元素 content 包含 "*"
 *
 * @param labelElement - 标签 DOM 元素（从 MatchedFormField.labelElement 获取）
 * @param inputElement - 输入框 DOM 元素（从 MatchedFormField.inputElement 获取）
 * @param excludeConfig - 排除配置（预留给特殊网站兼容）
 * @returns true=该字段有必填标记，false=未检测到必填标记
 */
export function isRequiredField(
  labelElement: Element | null,
  inputElement: HTMLInputElement | HTMLTextAreaElement | null,
  excludeConfig?: RequiredMarkExcludeConfig
): boolean {
  // ---- 策略1：input 自身 required 属性 ----
  if (inputElement) {
    if (inputElement.hasAttribute("required") || inputElement.getAttribute("aria-required") === "true") {
      return true
    }
  }

  // ---- 找到表单项容器 ----
  const formItemContainer = findFormItemContainer(labelElement, inputElement)

  // ---- 排除配置检查 ----
  if (excludeConfig && formItemContainer) {
    const containerClass = formItemContainer.className || ""
    if (excludeConfig.containerClassExcludes?.some((cls) => containerClass.includes(cls))) {
      return false
    }
  }
  if (excludeConfig && labelElement) {
    const labelClass = (labelElement as HTMLElement).className || ""
    if (excludeConfig.labelClassExcludes?.some((cls) => labelClass.includes(cls))) {
      return false
    }
    const labelText = labelElement.textContent?.trim() || ""
    if (excludeConfig.labelTextExcludes?.some((kw) => labelText.includes(kw))) {
      return false
    }
  }

  // ---- 策略2：容器 class 包含 required 关键词 ----
  if (formItemContainer) {
    const containerClass = formItemContainer.className || ""
    if (/\brequired\b|is-required|isRequired|form-item--required/.test(containerClass)) {
      return true
    }
  }

  // ---- 策略3：标签元素内或附近的红色 "*" 文本节点 ----
  // 搜索范围：标签元素自身 + 表单项容器内的前几个子元素
  const searchElements: Element[] = []
  if (labelElement) searchElements.push(labelElement)
  if (formItemContainer) {
    // 在容器内寻找标签附近的小元素（span/em/i 等可能放红*的标签）
    const smallEls = formItemContainer.querySelectorAll("span, em, i, sup, label")
    for (const el of Array.from(smallEls)) {
      // 只看标签元素前后附近的（DOM 位置接近的）
      if (labelElement && isNearLabel(el, labelElement)) {
        searchElements.push(el)
      }
    }
  }

  for (const el of searchElements) {
    if (hasRedAsteriskText(el)) return true
  }

  // ---- 策略4：伪元素 ::before / ::after 检测 ----
  if (labelElement && labelElement instanceof HTMLElement) {
    if (hasPseudoElementAsterisk(labelElement)) return true
  }
  // 也检查容器内的 label 标签（有些框架把伪元素放在 label 上）
  if (formItemContainer) {
    const labels = formItemContainer.querySelectorAll("label, [class*='label']")
    for (const lbl of Array.from(labels)) {
      if (lbl instanceof HTMLElement && hasPseudoElementAsterisk(lbl)) return true
    }
  }

  return false
}

/**
 * 查找标签/输入框所在的表单项容器
 * 与 formMatcher.ts 中 findNearestInput 使用的容器选择器一致
 */
function findFormItemContainer(
  labelElement: Element | null,
  inputElement: Element | null
): Element | null {
  // 优先从 labelElement 向上找
  if (labelElement) {
    for (const sel of FORM_ITEM_SELECTORS) {
      const container = labelElement.closest(sel)
      if (container) return container
    }
  }
  // fallback：从 inputElement 向上找
  if (inputElement) {
    for (const sel of FORM_ITEM_SELECTORS) {
      const container = inputElement.closest(sel)
      if (container) return container
    }
  }
  // 最后兜底：labelElement 的父级（最多向上3层）
  let parent = labelElement?.parentElement || inputElement?.parentElement || null
  for (let i = 0; i < 3 && parent; i++) {
    if (parent !== document.body) return parent
    parent = parent.parentElement
  }
  return null
}

/**
 * 判断元素是否在标签元素附近（DOM 距离近）
 */
function isNearLabel(el: Element, labelElement: Element): boolean {
  // 如果是标签的子元素或标签本身
  if (labelElement.contains(el) || el.contains(labelElement)) return true
  // 如果是标签的前后兄弟
  if (el.previousElementSibling === labelElement || el.nextElementSibling === labelElement) return true
  // 如果和标签在同一个父元素内且距离不超过3个节点
  if (el.parentElement === labelElement.parentElement) return true
  return false
}

/**
 * 检测元素内是否有红色的 "*" 文本
 * 遍历元素的子节点，查找包含 "*" 的文本节点，并检查其颜色是否为红色系
 */
function hasRedAsteriskText(el: Element): boolean {
  // 检查元素自身的直接文本子节点
  for (const child of Array.from(el.childNodes)) {
    if (child.nodeType === Node.TEXT_NODE) {
      const text = child.textContent || ""
      if (text.includes("*")) {
        // 检查该文本所在元素的颜色
        const color = getComputedColor(el)
        if (isRedColor(color)) return true
      }
    }
  }
  // 检查子元素（如 <span>*</span>）
  for (const child of Array.from(el.children)) {
    const text = child.textContent?.trim() || ""
    if (text === "*" || text === "* " || text === " *") {
      const color = getComputedColor(child)
      if (isRedColor(color)) return true
    }
  }
  return false
}

/**
 * 检测元素的 ::before 或 ::after 伪元素是否包含 "*"
 * 这是最常见的必填标记实现方式（如 Element UI、Ant Design）
 */
function hasPseudoElementAsterisk(el: HTMLElement): boolean {
  for (const pseudo of ["::before", "::after"] as const) {
    const style = window.getComputedStyle(el, pseudo)
    const content = style.getPropertyValue("content")
    // content 格式形如 '"*"' 或 '"* "' 或 '"\uff0a"'（全角星号）
    if (content && (content.includes("*") || content.includes("\\*") || content.includes("\uff0a"))) {
      // 进一步确认颜色是红色系（排除装饰性星号）
      const color = style.getPropertyValue("color")
      if (isRedColor(color)) return true
      // 有些情况不设颜色但 content 确实是 "*"，也认为是必填
      if (content.replace(/['"\\s ]/g, "") === "*") return true
    }
  }
  return false
}

/** 获取元素的计算颜色值 */
function getComputedColor(el: Element): string {
  if (!(el instanceof HTMLElement)) return ""
  return window.getComputedStyle(el).getPropertyValue("color")
}

/**
 * 判断颜色值是否为红色系
 * 支持 rgb / rgba / hex 格式
 */
function isRedColor(color: string): boolean {
  if (!color) return false
  // rgb(r, g, b) 或 rgba(r, g, b, a) 格式
  const rgbMatch = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/)
  if (rgbMatch) {
    const r = parseInt(rgbMatch[1])
    const g = parseInt(rgbMatch[2])
    const b = parseInt(rgbMatch[3])
    // 红色系：R 通道较高，G 和 B 通道较低
    return r > 150 && g < 100 && b < 100
  }
  // 常见红色关键词
  if (color === "red" || color.includes("#f5222d") || color.includes("#ff4d4f") || color.includes("#e00")) return true
  return false
}

// ============ 背景高亮设置 ============

/**
 * 设置表单字段容器的背景高亮颜色
 * 通过行内样式直接覆盖原网页 class 中的背景色
 *
 * @param element - 要设置背景色的 HTML 元素（input / textarea / div 等）
 * @param color - 高亮颜色：green=成功 red=失败 yellow=跳过
 */
export function setFieldHighlight(element: Element | null, color: HighlightColor): void {
  if (!element || !(element instanceof HTMLElement)) return
  if (!element.isConnected) return // 元素已脱离 DOM 则跳过

  element.style.backgroundColor = COLOR_MAP[color]
}

/**
 * 清除表单字段容器的背景高亮颜色（恢复为透明）
 *
 * @param element - 要清除背景色的 HTML 元素
 */
export function clearFieldHighlight(element: Element | null): void {
  if (!element || !(element instanceof HTMLElement)) return
  if (!element.isConnected) return

  element.style.backgroundColor = ""
}

/**
 * 批量设置多个元素的背景高亮颜色
 *
 * @param elements - 要设置的元素数组
 * @param color - 高亮颜色
 */
export function setFieldsHighlight(elements: (Element | null)[], color: HighlightColor): void {
  for (const el of elements) {
    setFieldHighlight(el, color)
  }
}

/**
 * 批量清除多个元素的背景高亮颜色
 *
 * @param elements - 要清除的元素数组
 */
export function clearFieldsHighlight(elements: (Element | null)[]): void {
  for (const el of elements) {
    clearFieldHighlight(el)
  }
}