import { watch, onUnmounted, type Ref, h } from 'vue';
import { storeToRefs } from 'pinia';
import { Modal, Input } from 'ant-design-vue';
import OlMap from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import LineString from 'ol/geom/LineString';
import Polygon from 'ol/geom/Polygon';
import Circle from 'ol/geom/Circle';
import { fromLonLat, toLonLat } from 'ol/proj';
import { getLength, getArea } from 'ol/sphere';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Fill from 'ol/style/Fill';
import CircleStyle from 'ol/style/Circle';
import Draw, { type DrawEvent } from 'ol/interaction/Draw';
import Select, { type SelectEvent } from 'ol/interaction/Select';
import Modify from 'ol/interaction/Modify';
import Translate from 'ol/interaction/Translate';
import Text from 'ol/style/Text';
import RegularShape from 'ol/style/RegularShape';
import { useMapStudioStore } from '../stores/mapStudioStore';
import { useUndoRedo } from './useUndoRedo';
import type { DrawStyle, SelectedDrawInfo, DrawToolType } from '../types';

/** 已绘制 feature 的自定义属性 key */
export const DRAW_FEATURE_ID_KEY = '_drawId';
export const DRAW_FEATURE_TYPE_KEY = '_drawType';
export const DRAW_FEATURE_TEXT_KEY = '_drawText';

let drawIdCounter = 0;
function nextDrawId(): string {
  return `draw_${Date.now()}_${++drawIdCounter}`;
}

/** Feature 上存储单个样式对象的属性 key */
const DS_FEATURE_KEY = '_drawPerStyle';

/**
 * 防止选中图形时同步样式触发不必要撤回步骤的标记。
 * updateSelectedDrawInfo 中设为 true，等待 Vue watch 队列消费完毕后自动恢复 false。
 */
let skipStyleCp = false;
/**
 * 样式变更的防抖定时器（150ms）。
 * 同一交互内的快速连续变更（如拖拽颜色滑块）合并为 1 个撤回步骤；
 * 不同用户操作（如修改颜色后修改字号）之间创建独立的撤回步骤。
 */
let styleCpTimer: ReturnType<typeof setTimeout> | null = null;

/** 根据 lineType 返回 lineDash 数组 */
function getLineDash(type: string): number[] | undefined {
  switch (type) {
    case 'dashed':
      return [10, 6];
    case 'dotted':
      return [3, 4];
    case 'dash-dot':
      return [10, 4, 3, 4];
    default:
      return undefined;
  }
}

/**
 * 管理自定义绘制工具（Draw/Modify/Select/Translate）
 *
 * 设计：
 *   - Select / Modify / Translate 始终存在（永久交互），非绘制状态也能选中/编辑
 *   - Draw 交互跟随 drawToolActive 增删，光标也由其驱动
 *   - 每个绘制的 feature 独立存储自己的样式对象，右侧抽屉修改仅影响当前选中的 feature
 */
/** 模块级 action 引用，由 useDrawTools 填充 */
export const drawActions = {
  deleteSelectedDraw: null as (() => void) | null,
  updateSelectedTextContent: null as ((text: string) => void) | null,
  getSerializedFeatures: null as (() => any[]) | null,
  clearAllDrawings: null as (() => void) | null,
  restoreDrawingsFromSave: null as
    | ((features: any[], style: any) => void)
    | null
};

export function useDrawTools(mapInstance: Ref<OlMap | null>) {
  const store = useMapStudioStore();
  const {
    drawToolActive,
    drawStyle,
    selectedDrawInfo,
    activeTab,
    selectedDrawStyle,
    selectedDrawText
  } = storeToRefs(store);
  // ── 图层 ──
  const drawSource = new VectorSource();
  const drawLayer = new VectorLayer({
    source: drawSource,
    style: createDrawStyleFunction,
    zIndex: 100
  });

  // 绘制图形增删即时记录撤回步骤
  // ⚠ OL 在 drawend 事件触发时尚未将图形添加到 source，
  // 因此不能依赖 drawend 内调用 checkpoint（会捕获添加前的状态，导致栈落后1个图形）
  // 改用 addfeature 事件（OL 将 finalized feature 添加到 source 后触发）来记录添加步骤
  const {
    drawCheckpoint: onDrawChange,
    setSuppressWatcher,
    beginDrawBatch
  } = useUndoRedo();
  drawSource.on('addfeature', evt => {
    const addedFeat = (evt as any).feature;
    // drawstart 阶段 OL 添加的 sketch feature 没有 DRAW_FEATURE_ID_KEY，过滤掉
    // drawend 完成后 OL 添加的 finalized feature 已有 DRAW_FEATURE_ID_KEY，记录 checkpoint
    // 文字工具跳过：addfeature 触发时文字内容还未录入，等 onOk 确认后再手动创建快照
    if (
      addedFeat &&
      addedFeat.get(DRAW_FEATURE_ID_KEY) &&
      addedFeat.get(DRAW_FEATURE_TYPE_KEY) !== 'text'
    ) {
      onDrawChange();
    }
  });
  drawSource.on('removefeature', evt => {
    const removedFeat = (evt as any).feature;
    // 只有真实绘制的 feature 才触发 checkpoint，过滤 OL 内部 sketch feature（问题7修复）
    if (removedFeat && removedFeat.get(DRAW_FEATURE_ID_KEY)) {
      onDrawChange();
    }
  });

  // ── 永久交互（Select / Modify / Translate）─
  const persistentInteractions: import('ol/interaction/Interaction')[] = [];
  let currentDrawInteraction: Draw | null = null;

  // ── Shift 键状态（用于约束直线/正方形/正圆绘制）──
  let shiftHeld = false;
  /** 当前绘制的 sketch feature（用于 shift 按住时强制更新预览） */
  let sketchFeature: Feature | null = null;
  /** 当前 geometryFunction（用于 shift 按住时重新计算几何） */
  let currentGeometryFunction:
    | ((coords: number[][], geom?: any) => any)
    | null = null;
  /** 最后一次传递给 geometryFunction 的原始坐标（用于 shift 按住时重新计算） */
  let lastRawSketchCoords: number[][] | null = null;

  // ── 样式工厂（从 feature 自身读取样式，fallback 到 drawStyle）──
  function createDrawStyleFunction(feature: Feature): Style[] {
    const perStyle = feature.get(DS_FEATURE_KEY) as
      | Partial<DrawStyle>
      | undefined;
    const strokeColor = perStyle?.strokeColor ?? drawStyle.value.strokeColor;
    const strokeWidth = perStyle?.strokeWidth ?? drawStyle.value.strokeWidth;
    const fillColor = perStyle?.fillColor ?? drawStyle.value.fillColor;
    const pointColor = perStyle?.pointColor ?? drawStyle.value.pointColor;
    const pointRadius = perStyle?.pointRadius ?? drawStyle.value.pointRadius;
    const lineType = perStyle?.lineType ?? drawStyle.value.lineType;
    const showArrow = perStyle?.showArrow ?? drawStyle.value.showArrow;
    const arrowPosition =
      perStyle?.arrowPosition ?? drawStyle.value.arrowPosition;
    const arrowSize = perStyle?.arrowSize ?? drawStyle.value.arrowSize;
    const fontSize = perStyle?.fontSize ?? drawStyle.value.fontSize;
    const fontFamily = perStyle?.fontFamily ?? drawStyle.value.fontFamily;
    const textColor = perStyle?.textColor ?? drawStyle.value.textColor;
    const textStrokeColor =
      perStyle?.textStrokeColor ?? drawStyle.value.textStrokeColor;
    const textStrokeWidth =
      perStyle?.textStrokeWidth ?? drawStyle.value.textStrokeWidth;
    const fontBold = perStyle?.fontBold ?? drawStyle.value.fontBold;

    const stroke =
      strokeWidth > 0
        ? new Stroke({
            color: strokeColor,
            width: strokeWidth,
            lineDash: getLineDash(lineType) || []
          })
        : undefined;

    const geomType = feature.getGeometry()?.getType();
    const textContent = feature.get(DRAW_FEATURE_TEXT_KEY) as
      | string
      | undefined;
    const drawTypeKey = feature.get(DRAW_FEATURE_TYPE_KEY) as
      | string
      | undefined;

    // ── 文字标注 ──
    if (textContent) {
      return [
        new Style({
          text: new Text({
            text: textContent,
            font: `${fontBold ? 'bold ' : ''}${Math.max(
              fontSize,
              12
            )}px ${fontFamily}`,
            fill: new Fill({ color: textColor }),
            stroke:
              textStrokeWidth > 0
                ? new Stroke({ color: textStrokeColor, width: textStrokeWidth })
                : undefined,
            offsetX: 0,
            offsetY: 0
          })
        })
      ];
    }

    // ── Point（标记点）──
    if (geomType === 'Point') {
      const imgStyle = new CircleStyle({
        radius: pointRadius,
        fill: new Fill({ color: pointColor })
      });
      if (stroke) imgStyle.setStroke(stroke);
      return [new Style({ image: imgStyle })];
    }

    const styles: Style[] = [];

    // ── LineString（折线）──
    if (geomType === 'LineString') {
      if (stroke) styles.push(new Style({ stroke }));

      // 箭头（自由手绘不显示箭头）
      if (showArrow && drawTypeKey !== 'freehand') {
        const lineGeom = feature.getGeometry() as LineString;
        const coords = lineGeom.getCoordinates();
        if (coords.length >= 2) {
          const arrowR =
            arrowSize === 'small' ? 6 : arrowSize === 'large' ? 12 : 9;

          // 结束箭头
          const last = coords[coords.length - 1];
          const prev = coords[coords.length - 2];
          const endAngle = Math.atan2(last[1] - prev[1], last[0] - prev[0]);
          styles.push(
            new Style({
              geometry: new Point(last),
              image: new RegularShape({
                points: 3,
                radius: arrowR,
                rotation: endAngle - Math.PI / 2,
                fill: new Fill({ color: strokeColor }),
                stroke: new Stroke({ color: strokeColor, width: 1 })
              })
            })
          );

          // 起始箭头
          if (arrowPosition === 'both' && coords.length >= 2) {
            const first = coords[0];
            const second = coords[1];
            const startAngle = Math.atan2(
              first[1] - second[1],
              first[0] - second[0]
            );
            styles.push(
              new Style({
                geometry: new Point(first),
                image: new RegularShape({
                  points: 3,
                  radius: arrowR,
                  rotation: startAngle - Math.PI / 2,
                  fill: new Fill({ color: strokeColor }),
                  stroke: new Stroke({ color: strokeColor, width: 1 })
                })
              })
            );
          }
        }
      }
    }

    // ── Polygon / Circle ──
    if (geomType === 'Polygon' || geomType === 'Circle') {
      const polyStyle = new Style({ fill: new Fill({ color: fillColor }) });
      if (stroke) polyStyle.setStroke(stroke);
      styles.push(polyStyle);
    }

    return styles.length > 0 ? styles : [];
  }

  // ── 计算几何信息 ──
  function computeGeomInfo(feature: Feature): SelectedDrawInfo {
    const geom = feature.getGeometry()!;
    const geomType = geom.getType();
    const id = (feature.get(DRAW_FEATURE_ID_KEY) as string) || nextDrawId();
    const drawTypeKey = (feature.get(DRAW_FEATURE_TYPE_KEY) as string) || '';
    const coords: number[] = [];

    if (geomType === 'Point') {
      const [lng, lat] = toLonLat((geom as Point).getCoordinates());
      coords.push(lng, lat);
    } else if (geomType === 'LineString') {
      const line = geom as LineString;
      line.getCoordinates().forEach(p => {
        const [lng, lat] = toLonLat(p);
        coords.push(lng, lat);
      });
    } else if (geomType === 'Polygon') {
      const poly = geom as Polygon;
      poly.getFirstCoordinate().forEach(p => {
        const [lng, lat] = toLonLat(p);
        coords.push(lng, lat);
      });
    } else if (geomType === 'Circle') {
      const center = toLonLat((geom as Circle).getCenter());
      coords.push(center[0], center[1]);
    }

    let length: number | undefined;
    let area: number | undefined;

    if (geomType === 'LineString') {
      length = getLength(geom as LineString);
    } else if (geomType === 'Polygon') {
      area = getArea(geom as Polygon);
    } else if (geomType === 'Circle') {
      area = Math.PI * (geom as Circle).getRadius() ** 2;
    }

    let displayType: SelectedDrawInfo['type'] = 'Point';
    if (geomType === 'LineString') displayType = 'LineString';
    else if (geomType === 'Polygon') displayType = 'Polygon';
    else if (geomType === 'Circle') displayType = 'Circle';

    return { id, type: displayType, drawTypeKey, coords, length, area };
  }

  let selectedFeatureId: string | null = null;

  /** 将 feature 存储的样式同步到 selectedDrawStyle */
  function syncPerStyleToSelected(feature: Feature | null) {
    if (!feature) {
      selectedDrawStyle.value = { ...drawStyle.value };
      selectedDrawText.value = '';
      return;
    }
    const stored = feature.get(DS_FEATURE_KEY) as
      | Partial<DrawStyle>
      | undefined;
    selectedDrawStyle.value = {
      strokeColor: stored?.strokeColor ?? drawStyle.value.strokeColor,
      strokeWidth: stored?.strokeWidth ?? drawStyle.value.strokeWidth,
      fillColor: stored?.fillColor ?? drawStyle.value.fillColor,
      pointColor: stored?.pointColor ?? drawStyle.value.pointColor,
      pointRadius: stored?.pointRadius ?? drawStyle.value.pointRadius,
      lineType: stored?.lineType ?? drawStyle.value.lineType,
      showArrow: stored?.showArrow ?? drawStyle.value.showArrow,
      arrowPosition: stored?.arrowPosition ?? drawStyle.value.arrowPosition,
      arrowSize: stored?.arrowSize ?? drawStyle.value.arrowSize,
      fontSize: stored?.fontSize ?? drawStyle.value.fontSize,
      fontFamily: stored?.fontFamily ?? drawStyle.value.fontFamily,
      textColor: stored?.textColor ?? drawStyle.value.textColor,
      textStrokeColor:
        stored?.textStrokeColor ?? drawStyle.value.textStrokeColor,
      textStrokeWidth:
        stored?.textStrokeWidth ?? drawStyle.value.textStrokeWidth,
      fontBold: stored?.fontBold ?? drawStyle.value.fontBold
    };
    selectedDrawText.value =
      (feature.get(DRAW_FEATURE_TEXT_KEY) as string) || '';
  }

  /** 强制刷新图层渲染 */
  function refreshLayerStyle() {
    drawLayer.changed();
  }

  /** 将 selectedDrawStyle 写回 feature 并刷新渲染 */
  function saveSelectedDrawStyleToFeature() {
    if (!selectedFeatureId) return;
    const feature = getSelectedFeature();
    if (!feature) return;
    const s = selectedDrawStyle.value;
    feature.set(DS_FEATURE_KEY, {
      strokeColor: s.strokeColor,
      strokeWidth: s.strokeWidth,
      fillColor: s.fillColor,
      pointColor: s.pointColor,
      pointRadius: s.pointRadius,
      lineType: s.lineType,
      showArrow: s.showArrow,
      arrowPosition: s.arrowPosition,
      arrowSize: s.arrowSize,
      fontSize: s.fontSize,
      fontFamily: s.fontFamily,
      textColor: s.textColor,
      textStrokeColor: s.textStrokeColor,
      textStrokeWidth: s.textStrokeWidth,
      fontBold: s.fontBold
    });
    refreshLayerStyle();

    // 用户主动编辑样式时创建撤回步骤（跳过选中 feature 时的首次同步）
    // 防抖 200ms：同一交互内的快速连续变更（如拖拽颜色滑块）合并为 1 个步骤，
    // 停止操作 200ms 后自动创建撤回步骤；不同用户操作之间产生独立步骤。
    if (!skipStyleCp) {
      if (styleCpTimer) {
        clearTimeout(styleCpTimer);
      }
      styleCpTimer = setTimeout(() => {
        styleCpTimer = null;
        onDrawChange();
      }, 200);
    }
  }

  // 监听 selectedDrawStyle 变化 → 自动保存到当前 feature
  const stopPerStyleWatch = watch(
    selectedDrawStyle,
    () => {
      saveSelectedDrawStyleToFeature();
    },
    { deep: true }
  );

  // 监听 drawStyle（全局默认）变化 → 刷新渲染
  const stopStyleWatch = watch(
    drawStyle,
    () => {
      refreshLayerStyle();
    },
    { deep: true }
  );

  // ── 更新 selectedDrawInfo ──
  function updateSelectedDrawInfo(feature: Feature | null) {
    // 选中/取消选中图形时同步样式，不应产生撤回步骤
    skipStyleCp = true;
    setTimeout(() => {
      skipStyleCp = false;
    }, 0);
    if (!feature) {
      selectedDrawInfo.value = null;
      selectedFeatureId = null;
      syncPerStyleToSelected(null);
      return;
    }
    selectedFeatureId = feature.get(DRAW_FEATURE_ID_KEY) as string;
    selectedDrawInfo.value = computeGeomInfo(feature);
    syncPerStyleToSelected(feature);
  }

  // ── 删除选中的绘制图形 ──
  function deleteSelectedDraw() {
    if (!selectedFeatureId) return;
    const feature = drawSource
      .getFeatures()
      .find(f => f.get(DRAW_FEATURE_ID_KEY) === selectedFeatureId);
    if (feature) drawSource.removeFeature(feature);
    selectedDrawInfo.value = null;
    selectedFeatureId = null;
  }

  function getSelectedFeature(): Feature | null {
    if (!selectedFeatureId) return null;
    return (
      drawSource
        .getFeatures()
        .find(f => f.get(DRAW_FEATURE_ID_KEY) === selectedFeatureId) || null
    );
  }

  /** 更新选中 feature 的文字内容 */
  function updateSelectedTextContent(text: string) {
    if (!selectedFeatureId) return;
    const feature = getSelectedFeature();
    if (!feature) return;
    feature.set(DRAW_FEATURE_TEXT_KEY, text);
    refreshLayerStyle();
    onDrawChange();
  }

  // ── 设置永久交互（Select / Modify / Translate）──────────────
  function setupPersistentInteractions() {
    if (persistentInteractions.length > 0) return; // 防重复
    const map = mapInstance.value;
    if (!map) return;

    // ── Select ──
    const selectInteraction = new Select({
      layers: [drawLayer],
      style: null
    });
    selectInteraction.on('select', (evt: SelectEvent) => {
      const feat = evt.selected.length > 0 ? evt.selected[0] : null;
      // 选中图形只切换 tab 展示内容，不应产生撤回步骤（问题6修复）
      beginDrawBatch();
      updateSelectedDrawInfo(feat);
      if (feat) {
        activeTab.value = 'draw';
      } else if (!evt.deselected.length) {
        // 点击空白 → 取消选中
        selectedDrawInfo.value = null;
        selectedFeatureId = null;
      }
    });
    map.addInteraction(selectInteraction);
    persistentInteractions.push(selectInteraction);

    // ── Modify ──
    const modifyInteraction = new Modify({
      source: drawSource,
      style: null
    });
    map.addInteraction(modifyInteraction);
    persistentInteractions.push(modifyInteraction);

    // ── Translate ──
    const translateInteraction = new Translate({
      layers: [drawLayer]
    });
    translateInteraction.on('translating', () => {
      if (selectedFeatureId) {
        const feat = drawSource
          .getFeatures()
          .find(f => f.get(DRAW_FEATURE_ID_KEY) === selectedFeatureId);
        if (feat) {
          selectedDrawInfo.value = computeGeomInfo(feat);
        }
      }
    });
    map.addInteraction(translateInteraction);
    persistentInteractions.push(translateInteraction);
  }

  // ── 同步 Draw 交互（跟随 drawToolActive）─────────────────────
  /** 根据当前工具生成 Draw 预览样式 */
  function createDrawPreviewStyle(): Style[] {
    const ds = drawStyle.value;
    const isPointTool = drawToolActive.value === 'point';
    const isLineTool =
      drawToolActive.value === 'line' || drawToolActive.value === 'freehand';
    const previewStroke =
      ds.strokeWidth > 0
        ? new Stroke({
            color: ds.strokeColor,
            width: ds.strokeWidth,
            lineDash: isLineTool ? getLineDash(ds.lineType) || [] : []
          })
        : undefined;
    return [
      new Style({
        stroke: previewStroke,
        fill: new Fill({ color: ds.fillColor }),
        image: isPointTool
          ? new CircleStyle({
              radius: ds.pointRadius,
              fill: new Fill({ color: ds.pointColor }),
              stroke: previewStroke || undefined
            })
          : undefined
      })
    ];
  }

  // ── Shift 约束的 geometryFunction ──
  /**
   * 椭圆/正圆 geometryFunction
   * 使用 type:'Circle'（click-drag-release），
   * 第一点为外接矩形左上角，第二点为右下角
   * 默认椭圆，按住 shift 为正圆
   */
  function createEllipseGeometryFunction(): (
    coords: number[][],
    geom?: any
  ) => any {
    return function (coords: number[][], geom?: any): any {
      // 保存原始坐标，用于 Shift 按住时强制更新预览
      lastRawSketchCoords = coords.map(c => [c[0], c[1]]);
      if (coords.length < 2) {
        const p = coords[0];
        const pts = 64;
        const ring: number[][] = [];
        for (let i = 0; i <= pts; i++) {
          const a = (i / pts) * 2 * Math.PI;
          ring.push([p[0], p[1]]);
        }
        if (geom) {
          geom.setCoordinates([ring]);
          return geom;
        }
        return new Polygon([ring]);
      }

      // 左上角 (x1,y1) → 右下角 (x2,y2)
      const x1 = coords[0][0],
        y1 = coords[0][1];
      const x2 = coords[1][0],
        y2 = coords[1][1];

      const cx = (x1 + x2) / 2;
      const cy = (y1 + y2) / 2;
      let rx = Math.abs(x2 - x1) / 2 || 1;
      let ry = Math.abs(y2 - y1) / 2 || 1;

      if (shiftHeld) {
        const r = Math.max(rx, ry);
        rx = r;
        ry = r;
      }

      const pts = 64;
      const ring: number[][] = [];
      for (let i = 0; i <= pts; i++) {
        const a = (i / pts) * 2 * Math.PI;
        ring.push([cx + rx * Math.cos(a), cy + ry * Math.sin(a)]);
      }

      if (geom) {
        geom.setCoordinates([ring]);
        return geom;
      }
      return new Polygon([ring]);
    };
  }

  /**
   * 矩形/正方形 geometryFunction
   * 第一点为左上角，第二点为右下角
   * 默认矩形，按住 shift 为正方形
   */
  function createRectGeometryFunction(): (
    coords: number[][],
    geom?: any
  ) => any {
    return function (coords: number[][], geom?: any): any {
      // 保存原始坐标，用于 Shift 按住时强制更新预览
      lastRawSketchCoords = coords.map(c => [c[0], c[1]]);
      if (coords.length < 2) {
        const p = coords[0];
        const ring: number[][] = [
          [p[0], p[1]],
          [p[0], p[1]],
          [p[0], p[1]],
          [p[0], p[1]],
          [p[0], p[1]]
        ];
        if (geom) {
          geom.setCoordinates([ring]);
          return geom;
        }
        return new Polygon([ring]);
      }

      // 左上角 (x1,y1) → 右下角 (x2,y2)
      const x1 = coords[0][0],
        y1 = coords[0][1];
      let x2 = coords[1][0],
        y2 = coords[1][1];

      if (shiftHeld) {
        const w = Math.abs(x2 - x1);
        const h = Math.abs(y2 - y1);
        const max = Math.max(w, h);
        if (w > h) {
          y2 = y1 + (y2 >= y1 ? 1 : -1) * max;
        } else {
          x2 = x1 + (x2 >= x1 ? 1 : -1) * max;
        }
      }

      const ring: number[][] = [
        [Math.min(x1, x2), Math.min(y1, y2)],
        [Math.min(x1, x2), Math.max(y1, y2)],
        [Math.max(x1, x2), Math.max(y1, y2)],
        [Math.max(x1, x2), Math.min(y1, y2)],
        [Math.min(x1, x2), Math.min(y1, y2)]
      ];

      if (geom) {
        geom.setCoordinates([ring]);
        return geom;
      }
      return new Polygon([ring]);
    };
  }

  function createShiftConstrainedGeometryFunction(): (
    coords: number[][],
    geom?: any
  ) => any {
    return function (coords: number[][], geom?: any): any {
      if (!geom) {
        geom = new LineString(coords);
      } else {
        geom.setCoordinates(coords);
      }

      if (shiftHeld && coords.length >= 2) {
        const c = geom.getCoordinates();
        const last = c[c.length - 1];
        const prev = c[c.length - 2];
        const dx = Math.abs(last[0] - prev[0]);
        const dy = Math.abs(last[1] - prev[1]);

        if (dx > dy) {
          last[1] = prev[1]; // 水平约束
        } else {
          last[0] = prev[0]; // 垂直约束
        }
        geom.setCoordinates(c);
      }

      return geom;
    };
  }

  function syncDrawInteraction() {
    const map = mapInstance.value;
    if (!map) return;

    // 暴力扫描移除所有 Draw 交互
    const interactions = map.getInteractions().getArray();
    for (let i = interactions.length - 1; i >= 0; i--) {
      if (interactions[i] instanceof Draw) {
        map.removeInteraction(interactions[i]);
      }
    }
    currentDrawInteraction = null;

    // 恢复默认光标
    map.getViewport().style.cursor = '';

    // 没有激活的工具 → 结束
    if (!drawToolActive.value) return;

    // 十字光标
    map.getViewport().style.cursor = 'crosshair';

    const tool = drawToolActive.value;
    let drawType: string;
    let geometryFunction: any | undefined;
    currentGeometryFunction = null; // 重置，仅 rect/circle 会赋值
    switch (tool) {
      case 'point':
        drawType = 'Point';
        break;
      case 'line':
        drawType = 'LineString';
        geometryFunction = createShiftConstrainedGeometryFunction();
        break;
      case 'polygon':
        drawType = 'Polygon';
        break;
      case 'rect':
        drawType = 'LineString';
        geometryFunction = createRectGeometryFunction();
        currentGeometryFunction = geometryFunction;
        break;
      case 'circle':
        drawType = 'LineString';
        geometryFunction = createEllipseGeometryFunction();
        currentGeometryFunction = geometryFunction;
        break;
      case 'freehand':
        drawType = 'LineString';
        break;
      case 'text':
        drawType = 'Point';
        break;
      default:
        return;
    }

    currentDrawInteraction = new Draw({
      source: drawSource,
      type: drawType as any,
      geometryFunction,
      maxPoints: tool === 'rect' || tool === 'circle' ? 2 : undefined,
      freehand: tool === 'freehand',
      freehandCondition: () => false,
      condition: () => true,
      style: createDrawPreviewStyle()
    });

    currentDrawInteraction.on('drawstart', (evt: DrawEvent) => {
      sketchFeature = evt.feature;
      lastRawSketchCoords = null;
    });
    currentDrawInteraction.on('drawend', () => {
      sketchFeature = null;
      lastRawSketchCoords = null;
      currentGeometryFunction = null;
    });

    currentDrawInteraction.on('drawend', (evt: DrawEvent) => {
      const feature = evt.feature;
      feature.set(DRAW_FEATURE_ID_KEY, nextDrawId());
      feature.set(DRAW_FEATURE_TYPE_KEY, tool);
      // 如果是文字工具，弹出 ant-design-vue Modal 输入框
      if (tool === 'text') {
        feature.set(DS_FEATURE_KEY, {
          strokeColor: drawStyle.value.strokeColor,
          strokeWidth: drawStyle.value.strokeWidth,
          fillColor: drawStyle.value.fillColor,
          pointColor: drawStyle.value.pointColor,
          pointRadius: drawStyle.value.pointRadius,
          lineType: drawStyle.value.lineType,
          showArrow: drawStyle.value.showArrow,
          arrowPosition: drawStyle.value.arrowPosition,
          arrowSize: drawStyle.value.arrowSize,
          fontSize: drawStyle.value.fontSize,
          fontFamily: drawStyle.value.fontFamily,
          textColor: drawStyle.value.textColor,
          textStrokeColor: drawStyle.value.textStrokeColor,
          textStrokeWidth: drawStyle.value.textStrokeWidth,
          fontBold: drawStyle.value.fontBold
        });
        // 先抑制 watcher（suppressUntil），避免 updateSelectedDrawInfo 触发的 checkpoint（问题5修复）
        beginDrawBatch();
        updateSelectedDrawInfo(feature);
        activeTab.value = 'draw';

        let tempText = '';
        Modal.confirm({
          title: '输入文字内容',
          content: () =>
            h(Input, {
              placeholder: '请输入文字内容',
              onInput: (e: any) => {
                tempText = e.target?.value ?? '';
              }
            }),
          onOk: () => {
            if (tempText && tempText.trim()) {
              feature.set(DRAW_FEATURE_TEXT_KEY, tempText.trim());
            } else {
              drawSource.removeFeature(feature);
              selectedDrawInfo.value = null;
              selectedFeatureId = null;
            }
            // 文字确认后手动创建撤回步骤（addfeature 阶段已跳过），捕获带文字内容的状态
            onDrawChange();
            // 同步样式不应产生额外撤回步骤（onDrawChange 已记录完整的文字+样式状态）
            skipStyleCp = true;
            setTimeout(() => {
              skipStyleCp = false;
            }, 0);
            syncPerStyleToSelected(feature);
            refreshLayerStyle();
          },
          onCancel: () => {
            drawSource.removeFeature(feature);
            selectedDrawInfo.value = null;
            selectedFeatureId = null;
          }
        });
        return;
      }
      // 存储当前默认样式到新绘制的 feature
      feature.set(DS_FEATURE_KEY, {
        strokeColor: drawStyle.value.strokeColor,
        strokeWidth: drawStyle.value.strokeWidth,
        fillColor: drawStyle.value.fillColor,
        pointColor: drawStyle.value.pointColor,
        pointRadius: drawStyle.value.pointRadius,
        lineType: drawStyle.value.lineType,
        showArrow: drawStyle.value.showArrow,
        arrowPosition: drawStyle.value.arrowPosition,
        arrowSize: drawStyle.value.arrowSize,
        fontSize: drawStyle.value.fontSize,
        fontFamily: drawStyle.value.fontFamily,
        textColor: drawStyle.value.textColor,
        textStrokeColor: drawStyle.value.textStrokeColor,
        textStrokeWidth: drawStyle.value.textStrokeWidth,
        fontBold: drawStyle.value.fontBold
      });
      beginDrawBatch();
      updateSelectedDrawInfo(feature);
      activeTab.value = 'draw';
      // ⚠ 不再在此处调用 onDrawChange()：
      // OL 在 drawend 时尚未将图形添加到 source，checkpoint 会捕获添加前的状态。
      // 改为由 addfeature 监听器（已在 setup 中注册）在 OL 添加图形后自动触发。
    });

    map.addInteraction(currentDrawInteraction);
  }

  // ── 监听工具切换 ──
  const stopToolWatch = watch(drawToolActive, () => {
    syncDrawInteraction();

    // 绘制工具激活时禁用 Select/Modify/Translate，防止与绘制交互冲突
    const isDrawing = drawToolActive.value !== null;
    for (const interaction of persistentInteractions) {
      interaction.setActive(!isDrawing);
    }
  });

  // ── 监听地图注入，添加图层 + 设置永久交互 ──
  const stopLayerWatch = watch(
    mapInstance,
    map => {
      if (!map) return;
      const layers = map.getLayers();
      if (!layers.getArray().includes(drawLayer)) {
        layers.push(drawLayer);
      }
      setupPersistentInteractions();
      syncDrawInteraction();
    },
    { immediate: true }
  );

  // ── Shift 键监听 ──
  /** 当 Shift 状态变化时，强制更新预览几何（让矩形/圆形立即受约束） */
  function updateDrawPreviewGeometry() {
    if (
      !sketchFeature ||
      !currentGeometryFunction ||
      !lastRawSketchCoords ||
      lastRawSketchCoords.length < 2
    )
      return;
    const existingGeom = sketchFeature.getGeometry();
    const newGeom = currentGeometryFunction(lastRawSketchCoords, existingGeom);
    if (newGeom && newGeom !== existingGeom) {
      sketchFeature.setGeometry(newGeom);
    }
  }
  function onShiftDown(e: KeyboardEvent) {
    if (e.key === 'Shift') {
      shiftHeld = true;
      updateDrawPreviewGeometry();
    }
  }
  function onShiftUp(e: KeyboardEvent) {
    if (e.key === 'Shift') {
      shiftHeld = false;
      updateDrawPreviewGeometry();
    }
  }
  document.addEventListener('keydown', onShiftDown);
  document.addEventListener('keyup', onShiftUp);

  // ── 键盘 Delete 键删除选中图形 ──
  function onKeyDown(e: KeyboardEvent) {
    if (e.key !== 'Delete' && e.key !== 'Backspace') return;
    if (
      e.target instanceof HTMLInputElement ||
      e.target instanceof HTMLTextAreaElement
    ) {
      return;
    }
    if (selectedFeatureId) deleteSelectedDraw();
  }
  document.addEventListener('keydown', onKeyDown);

  // ── 清理 ──
  function dispose() {
    stopLayerWatch();
    stopStyleWatch();
    stopToolWatch();
    stopPerStyleWatch();
    if (styleCpTimer !== null) {
      clearTimeout(styleCpTimer);
      styleCpTimer = null;
    }
    document.removeEventListener('keydown', onKeyDown);
    document.removeEventListener('keydown', onShiftDown);
    document.removeEventListener('keyup', onShiftUp);

    const map = mapInstance.value;
    if (!map) return;

    const interactions = map.getInteractions().getArray();
    for (let i = interactions.length - 1; i >= 0; i--) {
      if (interactions[i] instanceof Draw) {
        map.removeInteraction(interactions[i]);
      }
    }
    currentDrawInteraction = null;

    for (const interaction of persistentInteractions) {
      map.removeInteraction(interaction);
    }
    persistentInteractions.length = 0;

    map.removeLayer(drawLayer);
  }

  onUnmounted(() => dispose());

  // ── 从序列化数据创建几何体 ──
  function createGeometry(
    type: string,
    coords: any,
    radius?: number
  ): import('ol/geom/Geometry') | null {
    try {
      switch (type) {
        case 'Point':
          return new Point(fromLonLat(coords));
        case 'LineString':
          return new LineString(coords.map((p: number[]) => fromLonLat(p)));
        case 'Polygon':
          return new Polygon([coords.map((p: number[]) => fromLonLat(p))]);
        case 'Circle': {
          const center = fromLonLat(coords);
          const circle = new Circle(center, radius || 1000);
          return circle;
        }
        default:
          return null;
      }
    } catch {
      return null;
    }
  }

  // ── 清空所有绘制图形（恢复时使用） ──
  function clearAllDrawings() {
    drawSource.clear();
  }

  // ── 从保存的数据恢复绘制图形（编辑时使用） ──
  function restoreDrawingsFromSave(features: any[], globalStyle: any) {
    // 确保绘制图层已添加到地图
    if (mapInstance.value) {
      const layers = mapInstance.value.getLayers();
      if (!layers.getArray().includes(drawLayer)) {
        layers.push(drawLayer);
      }
    }

    for (const item of features) {
      const geom = createGeometry(item.type, item.coordinates, item.radius);
      if (!geom) continue;

      const feature = new Feature({ geometry: geom });
      feature.set(DRAW_FEATURE_ID_KEY, item.id || nextDrawId());
      feature.set(DRAW_FEATURE_TYPE_KEY, item.drawTypeKey || '');
      feature.set(DRAW_FEATURE_TEXT_KEY, item.text || '');
      if (item.style && Object.keys(item.style).length > 0) {
        feature.set(DS_FEATURE_KEY, { ...item.style });
      }
      drawSource.addFeature(feature);
    }
  }

  // ── 序列化所有绘制图形（用于保存） ──
  function getSerializedFeatures(): any[] {
    return drawSource.getFeatures().map(f => {
      const geom = f.getGeometry();
      const geomType = geom?.getType();
      let coords: any;
      let radius = 0;

      if (geomType === 'Point') {
        coords = toLonLat((geom as Point).getCoordinates());
      } else if (geomType === 'LineString') {
        coords = (geom as LineString).getCoordinates().map(p => toLonLat(p));
      } else if (geomType === 'Polygon') {
        coords = (geom as Polygon).getCoordinates()[0].map(p => toLonLat(p));
      } else if (geomType === 'Circle') {
        const circle = geom as Circle;
        coords = toLonLat(circle.getCenter());
        radius = circle.getRadius();
      }

      const perStyle = f.get(DS_FEATURE_KEY) || {};
      return {
        id: f.get(DRAW_FEATURE_ID_KEY),
        type: geomType,
        drawTypeKey: f.get(DRAW_FEATURE_TYPE_KEY) || '',
        text: f.get(DRAW_FEATURE_TEXT_KEY) || '',
        coordinates: coords,
        radius,
        style: { ...perStyle }
      };
    });
  }

  // 填充模块级 action 引用
  drawActions.deleteSelectedDraw = deleteSelectedDraw;
  drawActions.updateSelectedTextContent = updateSelectedTextContent;
  drawActions.getSerializedFeatures = getSerializedFeatures;
  drawActions.clearAllDrawings = clearAllDrawings;
  drawActions.restoreDrawingsFromSave = restoreDrawingsFromSave;

  return {
    drawLayer,
    drawSource,
    deleteSelectedDraw,
    getSelectedFeature,
    saveSelectedDrawStyleToFeature,
    updateSelectedTextContent,
    dispose
  };
}