"use client";

import {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
  type ChangeEvent,
  type PointerEvent as ReactPointerEvent,
} from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Slider } from "@/components/ui/slider";
import { cn } from "@/lib/utils";
import {
  Eraser,
  Loader2,
  Paintbrush,
  Square,
  Circle as CircleIcon,
  Slash,
  Upload,
  RefreshCw,
  Sparkles,
  Trash2,
  Download,
  Undo2,
  Redo2,
  Send,
  X,
} from "lucide-react";
import { toast } from "sonner";

type RealtimeConfig = {
  transport: {
    throttleInterval: number;
    maxBuffering: number;
  };
  image: {
    maxInputResolution: number;
    jpegQuality: number;
  };
  model: {
    id: string;
    defaults: {
      steps: number;
      cfgScale: number;
      strength: number;
      imageSize: "square" | "square_hd";
    };
  };
  behavior?: {
    strictSketch?: boolean;
  };
};

type RealtimeStatus = "idle" | "connecting" | "live" | "error";

type RealtimeCanvasDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  initialImageUrl?: string | null;
  onApplyResult: (payload: { imageUrl: string; prompt: string }) => void;
  standalone?: boolean;
};

const FALLBACK_PROMPT =
  "严格按照输入草图生成：保持主体轮廓、位置、比例和数量一致，只做材质与光影细化；禁止改变构图，禁止新增无关背景纹理。";
const CANVAS_BACKGROUND = "#ffffff";
const BRUSH_COLOR_PRESETS = [
  "#18181b",
  "#ef4444",
  "#f59e0b",
  "#22c55e",
  "#3b82f6",
  "#a855f7",
] as const;
const CANVAS_BACKGROUND_PRESETS = ["#ffffff", "#f4f4f5", "#fdf2f8", "#ecfeff", "#f0fdf4"] as const;

const defaultRealtimeConfig: RealtimeConfig = {
  transport: {
    throttleInterval: 100,
    maxBuffering: 2,
  },
  image: {
    maxInputResolution: 1024,
    jpegQuality: 0.55,
  },
  model: {
    id: "runware:101@1",
    defaults: {
      steps: 8,
      cfgScale: 7,
      strength: 0.32,
      imageSize: "square",
    },
  },
  behavior: {
    strictSketch: true,
  },
};

function isShapeMode(mode: "brush" | "eraser" | "rect" | "circle" | "line") {
  return mode === "rect" || mode === "circle" || mode === "line";
}

function createSessionSeed() {
  return Math.floor(Math.random() * 2147483647);
}

async function canvasToJpegDataUri(
  canvas: HTMLCanvasElement,
  maxInputResolution: number,
  jpegQuality: number,
  backgroundColor: string,
  options?: {
    autoCrop?: boolean;
  }
): Promise<{ dataUri: string; width: number; height: number }> {
  type CropBox = {
    x: number;
    y: number;
    width: number;
    height: number;
    foregroundRatio: number;
  };

  const parseColor = (rawColor: string) => {
    const tempCanvas = document.createElement("canvas");
    tempCanvas.width = 1;
    tempCanvas.height = 1;
    const tempCtx = tempCanvas.getContext("2d");
    if (!tempCtx) {
      return { r: 255, g: 255, b: 255 };
    }

    tempCtx.fillStyle = rawColor;
    const normalized = String(tempCtx.fillStyle || "").trim().toLowerCase();
    if (normalized.startsWith("#")) {
      const hex = normalized.slice(1);
      if (hex.length === 3) {
        return {
          r: Number.parseInt(hex[0] + hex[0], 16),
          g: Number.parseInt(hex[1] + hex[1], 16),
          b: Number.parseInt(hex[2] + hex[2], 16),
        };
      }
      if (hex.length >= 6) {
        return {
          r: Number.parseInt(hex.slice(0, 2), 16),
          g: Number.parseInt(hex.slice(2, 4), 16),
          b: Number.parseInt(hex.slice(4, 6), 16),
        };
      }
    }

    const rgbMatch = normalized.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);
    if (rgbMatch) {
      return {
        r: Number(rgbMatch[1]),
        g: Number(rgbMatch[2]),
        b: Number(rgbMatch[3]),
      };
    }

    return { r: 255, g: 255, b: 255 };
  };

  const findForegroundBox = (): CropBox | null => {
    const sourceWidth = canvas.width;
    const sourceHeight = canvas.height;
    const longestSide = Math.max(sourceWidth, sourceHeight);
    const analysisScale = longestSide > 320 ? 320 / longestSide : 1;
    const analysisWidth = Math.max(48, Math.round(sourceWidth * analysisScale));
    const analysisHeight = Math.max(48, Math.round(sourceHeight * analysisScale));
    const analysisCanvas = document.createElement("canvas");
    analysisCanvas.width = analysisWidth;
    analysisCanvas.height = analysisHeight;
    const analysisCtx = analysisCanvas.getContext("2d", { willReadFrequently: true });
    if (!analysisCtx) return null;
    analysisCtx.fillStyle = backgroundColor;
    analysisCtx.fillRect(0, 0, analysisWidth, analysisHeight);
    analysisCtx.drawImage(canvas, 0, 0, analysisWidth, analysisHeight);

    const imageData = analysisCtx.getImageData(0, 0, analysisWidth, analysisHeight);
    const data = imageData.data;
    const totalPixels = analysisWidth * analysisHeight;
    const mask = new Uint8Array(totalPixels);
    const bg = parseColor(backgroundColor);
    const tolerance = 18;

    let minX = analysisWidth;
    let minY = analysisHeight;
    let maxX = -1;
    let maxY = -1;
    let foregroundPixels = 0;

    for (let y = 0; y < analysisHeight; y += 1) {
      for (let x = 0; x < analysisWidth; x += 1) {
        const pixelIndex = y * analysisWidth + x;
        const offset = pixelIndex * 4;
        const alpha = data[offset + 3];
        if (alpha < 16) continue;
        const dr = Math.abs(data[offset] - bg.r);
        const dg = Math.abs(data[offset + 1] - bg.g);
        const db = Math.abs(data[offset + 2] - bg.b);
        const isForeground = dr > tolerance || dg > tolerance || db > tolerance;
        if (!isForeground) continue;

        mask[pixelIndex] = 1;
        foregroundPixels += 1;
        if (x < minX) minX = x;
        if (x > maxX) maxX = x;
        if (y < minY) minY = y;
        if (y > maxY) maxY = y;
      }
    }

    if (foregroundPixels <= 0 || maxX < minX || maxY < minY) {
      return null;
    }

    const visited = new Uint8Array(totalPixels);
    const queue = new Uint32Array(totalPixels);
    const minComponentArea = Math.max(9, Math.floor(foregroundPixels * 0.0015));
    let bestArea = 0;
    let bestMinX = minX;
    let bestMinY = minY;
    let bestMaxX = maxX;
    let bestMaxY = maxY;

    for (let idx = 0; idx < totalPixels; idx += 1) {
      if (!mask[idx] || visited[idx]) continue;
      let head = 0;
      let tail = 0;
      queue[tail] = idx;
      tail += 1;
      visited[idx] = 1;
      let area = 0;
      let componentMinX = analysisWidth;
      let componentMinY = analysisHeight;
      let componentMaxX = -1;
      let componentMaxY = -1;

      while (head < tail) {
        const current = queue[head];
        head += 1;
        const x = current % analysisWidth;
        const y = Math.floor(current / analysisWidth);
        area += 1;
        if (x < componentMinX) componentMinX = x;
        if (x > componentMaxX) componentMaxX = x;
        if (y < componentMinY) componentMinY = y;
        if (y > componentMaxY) componentMaxY = y;

        const startY = Math.max(0, y - 1);
        const endY = Math.min(analysisHeight - 1, y + 1);
        const startX = Math.max(0, x - 1);
        const endX = Math.min(analysisWidth - 1, x + 1);

        for (let ny = startY; ny <= endY; ny += 1) {
          for (let nx = startX; nx <= endX; nx += 1) {
            const neighbor = ny * analysisWidth + nx;
            if (!mask[neighbor] || visited[neighbor]) continue;
            visited[neighbor] = 1;
            queue[tail] = neighbor;
            tail += 1;
          }
        }
      }

      if (area >= minComponentArea && area > bestArea) {
        bestArea = area;
        bestMinX = componentMinX;
        bestMinY = componentMinY;
        bestMaxX = componentMaxX;
        bestMaxY = componentMaxY;
      }
    }

    if (bestArea > 0) {
      minX = bestMinX;
      minY = bestMinY;
      maxX = bestMaxX;
      maxY = bestMaxY;
    } else {
      bestArea = foregroundPixels;
    }

    const rowCounts = new Uint32Array(analysisHeight);
    const colCounts = new Uint32Array(analysisWidth);
    for (let y = minY; y <= maxY; y += 1) {
      for (let x = minX; x <= maxX; x += 1) {
        const idx = y * analysisWidth + x;
        if (!mask[idx]) continue;
        rowCounts[y] += 1;
        colCounts[x] += 1;
      }
    }

    const trimPixels = Math.max(0, Math.floor(bestArea * 0.008));
    if (trimPixels > 0) {
      let cumulative = 0;
      for (let x = minX; x <= maxX; x += 1) {
        cumulative += colCounts[x];
        if (cumulative > trimPixels) {
          minX = x;
          break;
        }
      }

      cumulative = 0;
      for (let x = maxX; x >= minX; x -= 1) {
        cumulative += colCounts[x];
        if (cumulative > trimPixels) {
          maxX = x;
          break;
        }
      }

      cumulative = 0;
      for (let y = minY; y <= maxY; y += 1) {
        cumulative += rowCounts[y];
        if (cumulative > trimPixels) {
          minY = y;
          break;
        }
      }

      cumulative = 0;
      for (let y = maxY; y >= minY; y -= 1) {
        cumulative += rowCounts[y];
        if (cumulative > trimPixels) {
          maxY = y;
          break;
        }
      }
    }

    const scaleX = sourceWidth / analysisWidth;
    const scaleY = sourceHeight / analysisHeight;
    const boxX = Math.max(0, Math.floor(minX * scaleX));
    const boxY = Math.max(0, Math.floor(minY * scaleY));
    const boxRight = Math.min(sourceWidth, Math.ceil((maxX + 1) * scaleX));
    const boxBottom = Math.min(sourceHeight, Math.ceil((maxY + 1) * scaleY));

    const boxWidth = Math.max(1, boxRight - boxX);
    const boxHeight = Math.max(1, boxBottom - boxY);
    const foregroundRatio = Math.min(1, bestArea / totalPixels);
    const paddingRatio = foregroundRatio < 0.08 ? 0.34 : foregroundRatio < 0.2 ? 0.28 : 0.22;
    const padding = Math.max(16, Math.floor(Math.max(boxWidth, boxHeight) * paddingRatio));
    const x = Math.max(0, boxX - padding);
    const y = Math.max(0, boxY - padding);
    const right = Math.min(sourceWidth, boxRight + padding);
    const bottom = Math.min(sourceHeight, boxBottom + padding);

    return {
      x,
      y,
      width: Math.max(1, right - x),
      height: Math.max(1, bottom - y),
      foregroundRatio,
    };
  };

  const sourceWidth = canvas.width;
  const sourceHeight = canvas.height;
  const cropBox = options?.autoCrop ? findForegroundBox() : null;
  const drawSourceX = cropBox?.x || 0;
  const drawSourceY = cropBox?.y || 0;
  const drawSourceWidth = cropBox?.width || sourceWidth;
  const drawSourceHeight = cropBox?.height || sourceHeight;

  const autoCropEnabled = Boolean(options?.autoCrop && cropBox);
  const longestSide = Math.max(drawSourceWidth, drawSourceHeight);
  const scale = longestSide > maxInputResolution ? maxInputResolution / longestSide : 1;
  const exportWidth = autoCropEnabled
    ? Math.max(512, maxInputResolution)
    : Math.max(1, Math.round(drawSourceWidth * scale));
  const exportHeight = autoCropEnabled
    ? Math.max(512, maxInputResolution)
    : Math.max(1, Math.round(drawSourceHeight * scale));

  const exportCanvas = document.createElement("canvas");
  exportCanvas.width = exportWidth;
  exportCanvas.height = exportHeight;
  const exportCtx = exportCanvas.getContext("2d");
  if (!exportCtx) {
    throw new Error("无法初始化导出画布");
  }

  exportCtx.fillStyle = backgroundColor;
  exportCtx.fillRect(0, 0, exportWidth, exportHeight);

  if (autoCropEnabled) {
    const fitRatio = (cropBox?.foregroundRatio || 0) < 0.12 ? 0.9 : 0.94;
    const fitScale = Math.min((exportWidth * fitRatio) / drawSourceWidth, (exportHeight * fitRatio) / drawSourceHeight);
    const targetWidth = Math.max(1, Math.round(drawSourceWidth * fitScale));
    const targetHeight = Math.max(1, Math.round(drawSourceHeight * fitScale));
    const targetX = Math.round((exportWidth - targetWidth) / 2);
    const targetY = Math.round((exportHeight - targetHeight) / 2);
    exportCtx.imageSmoothingEnabled = true;
    exportCtx.imageSmoothingQuality = "high";
    exportCtx.drawImage(
      canvas,
      drawSourceX,
      drawSourceY,
      drawSourceWidth,
      drawSourceHeight,
      targetX,
      targetY,
      targetWidth,
      targetHeight
    );
    if ((cropBox?.foregroundRatio || 0) < 0.28) {
      exportCtx.save();
      exportCtx.globalAlpha = 0.22;
      exportCtx.drawImage(
        canvas,
        drawSourceX,
        drawSourceY,
        drawSourceWidth,
        drawSourceHeight,
        targetX,
        targetY,
        targetWidth,
        targetHeight
      );
      exportCtx.restore();
    }
  } else {
    exportCtx.drawImage(
      canvas,
      drawSourceX,
      drawSourceY,
      drawSourceWidth,
      drawSourceHeight,
      0,
      0,
      exportWidth,
      exportHeight
    );
  }

  const blob = await new Promise<Blob | null>((resolve) => {
    exportCanvas.toBlob(resolve, "image/jpeg", jpegQuality);
  });
  if (!blob) {
    throw new Error("导出图片失败");
  }

  const dataUri = await new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(String(reader.result || ""));
    reader.onerror = () => reject(new Error("读取导出图片失败"));
    reader.readAsDataURL(blob);
  });

  return {
    dataUri,
    width: exportWidth,
    height: exportHeight,
  };
}

type FlushMode = "preview" | "refine";

type NormalizedRegion = {
  x: number;
  y: number;
  width: number;
  height: number;
};

function clamp01(value: number) {
  return Math.min(1, Math.max(0, value));
}

function mergeRegion(
  current: NormalizedRegion | null,
  next: NormalizedRegion
): NormalizedRegion {
  if (!current) return next;
  const x1 = Math.min(current.x, next.x);
  const y1 = Math.min(current.y, next.y);
  const x2 = Math.max(current.x + current.width, next.x + next.width);
  const y2 = Math.max(current.y + current.height, next.y + next.height);
  return {
    x: clamp01(x1),
    y: clamp01(y1),
    width: clamp01(x2 - x1),
    height: clamp01(y2 - y1),
  };
}

function toNormalizedRegion(
  canvas: HTMLCanvasElement,
  rect: {
    minX: number;
    minY: number;
    maxX: number;
    maxY: number;
  }
): NormalizedRegion | null {
  const bounds = canvas.getBoundingClientRect();
  const width = Math.max(1, bounds.width);
  const height = Math.max(1, bounds.height);
  const x = clamp01(rect.minX / width);
  const y = clamp01(rect.minY / height);
  const right = clamp01(rect.maxX / width);
  const bottom = clamp01(rect.maxY / height);
  const regionWidth = right - x;
  const regionHeight = bottom - y;
  if (regionWidth <= 0 || regionHeight <= 0) return null;
  return { x, y, width: regionWidth, height: regionHeight };
}

async function createMaskDataUri(
  width: number,
  height: number,
  region: NormalizedRegion
) {
  const canvas = document.createElement("canvas");
  canvas.width = Math.max(1, width);
  canvas.height = Math.max(1, height);
  const ctx = canvas.getContext("2d");
  if (!ctx) {
    throw new Error("无法初始化遮罩画布");
  }

  const basePad = Math.max(12, Math.floor(Math.max(width, height) * 0.02));
  let x = Math.floor(region.x * width) - basePad;
  let y = Math.floor(region.y * height) - basePad;
  let regionWidth = Math.ceil(region.width * width) + basePad * 2;
  let regionHeight = Math.ceil(region.height * height) + basePad * 2;

  const minPatch = Math.max(40, Math.floor(Math.max(width, height) * 0.1));
  if (regionWidth < minPatch) {
    const delta = Math.ceil((minPatch - regionWidth) / 2);
    x -= delta;
    regionWidth += delta * 2;
  }
  if (regionHeight < minPatch) {
    const delta = Math.ceil((minPatch - regionHeight) / 2);
    y -= delta;
    regionHeight += delta * 2;
  }

  x = Math.max(0, x);
  y = Math.max(0, y);
  const right = Math.min(width, x + regionWidth);
  const bottom = Math.min(height, y + regionHeight);

  ctx.fillStyle = "#000000";
  ctx.fillRect(0, 0, width, height);
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(x, y, Math.max(1, right - x), Math.max(1, bottom - y));

  return canvas.toDataURL("image/png");
}

export function RealtimeCanvasDialog({
  open,
  onOpenChange,
  initialImageUrl,
  onApplyResult,
  standalone = false,
}: RealtimeCanvasDialogProps) {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const previewCanvasRef = useRef<HTMLCanvasElement | null>(null);
  const canvasWrapRef = useRef<HTMLDivElement | null>(null);
  const connectionRef = useRef<any>(null);
  const pointerDownRef = useRef(false);
  const lastPointRef = useRef<{ x: number; y: number } | null>(null);
  const shapeStartPointRef = useRef<{ x: number; y: number } | null>(null);
  const pendingFlushTimerRef = useRef<number | null>(null);
  const flushInFlightRef = useRef(false);
  const dirtyRef = useRef(false);
  const dirtyRegionRef = useRef<NormalizedRegion | null>(null);
  const draftVersionRef = useRef(0);
  const pendingFlushModeRef = useRef<FlushMode | null>(null);
  const pendingFlushForceRef = useRef(false);
  const latencyEmaRef = useRef<number | null>(null);
  const baseThrottleMsRef = useRef<number>(defaultRealtimeConfig.transport.throttleInterval);
  const pumpFlushRef = useRef<(() => void) | null>(null);
  const warningMessageRef = useRef("");
  const seqRef = useRef(0);
  const requestStartMapRef = useRef<Map<string, number>>(new Map());
  const lastRenderedSeqRef = useRef(0);
  const metricsQueueRef = useRef<any[]>([]);
  const sessionIdRef = useRef(`rt-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`);
  const seedRef = useRef<number>(createSessionSeed());
  const hasLoadedInitialImageRef = useRef(false);
  const canvasBackgroundRef = useRef(CANVAS_BACKGROUND);
  
  // History Management
  const historyRef = useRef<ImageData[]>([]);
  const historyIndexRef = useRef(-1);
  const cursorRef = useRef<HTMLDivElement>(null);
  const uploadInputRef = useRef<HTMLInputElement | null>(null);
  const [canUndo, setCanUndo] = useState(false);
  const [canRedo, setCanRedo] = useState(false);

  const [config, setConfig] = useState<RealtimeConfig>(defaultRealtimeConfig);
  const [status, setStatus] = useState<RealtimeStatus>("idle");
  const [statusMessage, setStatusMessage] = useState("等待连接");
  const [prompt, setPrompt] = useState(FALLBACK_PROMPT);
  const [previewUrl, setPreviewUrl] = useState("");
  const [brushMode, setBrushMode] = useState<"brush" | "eraser" | "rect" | "circle" | "line">("brush");
  const [brushColor, setBrushColor] = useState<string>(BRUSH_COLOR_PRESETS[0]);
  const [canvasBackground, setCanvasBackground] = useState<string>(canvasBackgroundRef.current);
  const [brushSize, setBrushSize] = useState(6);
  const [adaptiveThrottleMs, setAdaptiveThrottleMs] = useState<number>(
    defaultRealtimeConfig.transport.throttleInterval
  );
  const [refreshToken, setRefreshToken] = useState(0);

  const statusBadge = useMemo(() => {
    if (status === "live") return { label: "实时中", className: "bg-emerald-50 text-emerald-700" };
    if (status === "connecting") {
      return { label: "连接中", className: "bg-blue-50 text-blue-700" };
    }
    if (status === "error") return { label: "异常", className: "bg-rose-50 text-rose-700" };
    return { label: "待启动", className: "bg-zinc-100 text-zinc-600" };
  }, [status]);

  const pushMetric = useCallback((event: any) => {
    metricsQueueRef.current.push(event);
    if (metricsQueueRef.current.length > 120) {
      metricsQueueRef.current = metricsQueueRef.current.slice(-80);
    }
  }, []);

  const flushMetrics = useCallback(async () => {
    if (!open || metricsQueueRef.current.length === 0) return;
    const events = metricsQueueRef.current.splice(0, metricsQueueRef.current.length);
    try {
      await fetch("/api/realtime/metrics", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          sessionId: sessionIdRef.current,
          events,
        }),
      });
    } catch {
      metricsQueueRef.current.unshift(...events.slice(-20));
    }
  }, [open]);

  const saveHistory = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d", { willReadFrequently: true });
    if (!ctx) return;

    // If we are not at the end of history, truncate future history
    if (historyIndexRef.current < historyRef.current.length - 1) {
      historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1);
    }

    try {
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      historyRef.current.push(imageData);
      historyIndexRef.current = historyRef.current.length - 1;
    } catch (error) {
      console.warn("[RealtimeCanvas] saveHistory skipped:", error);
      return;
    }

    // Limit history size
    if (historyRef.current.length > 50) {
      historyRef.current.shift();
      historyIndexRef.current--;
    }

    setCanUndo(historyIndexRef.current > 0);
    setCanRedo(false);
  }, []);

  const markCanvasDirty = useCallback((region?: NormalizedRegion | null) => {
    dirtyRef.current = true;
    draftVersionRef.current += 1;
    if (!region) {
      dirtyRegionRef.current = { x: 0, y: 0, width: 1, height: 1 };
      return;
    }
    dirtyRegionRef.current = mergeRegion(dirtyRegionRef.current, region);
  }, []);

  const markCanvasDirtyRect = useCallback(
    (rect: { minX: number; minY: number; maxX: number; maxY: number }) => {
      const canvas = canvasRef.current;
      if (!canvas) return;
      const region = toNormalizedRegion(canvas, rect);
      if (!region) return;
      markCanvasDirty(region);
    },
    [markCanvasDirty]
  );

  const markCanvasDirtyStroke = useCallback(
    (from: { x: number; y: number }, to: { x: number; y: number }, lineWidth: number) => {
      const pad = Math.max(6, Math.ceil(lineWidth * 1.2));
      markCanvasDirtyRect({
        minX: Math.min(from.x, to.x) - pad,
        minY: Math.min(from.y, to.y) - pad,
        maxX: Math.max(from.x, to.x) + pad,
        maxY: Math.max(from.y, to.y) + pad,
      });
    },
    [markCanvasDirtyRect]
  );

  const flushFrame = useCallback(
    async (mode: FlushMode, force = false) => {
      if (!open) return;
      if (!connectionRef.current) return;
      if (flushInFlightRef.current) return;
      if (!dirtyRef.current && !force) return;

      const canvas = canvasRef.current;
      if (!canvas) return;

      flushInFlightRef.current = true;
      const seq = seqRef.current + 1;
      seqRef.current = seq;
      const requestId = `${sessionIdRef.current}-${seq}`;
      requestStartMapRef.current.set(requestId, Date.now());
      const draftVersionAtSend = draftVersionRef.current;
      const dirtyRegionAtSend = dirtyRegionRef.current
        ? { ...dirtyRegionRef.current }
        : null;

      try {
        const exportedImage = await canvasToJpegDataUri(
          canvas,
          config.image.maxInputResolution,
          config.image.jpegQuality,
          canvasBackgroundRef.current,
          { autoCrop: false }
        );
        const imageDataUri = exportedImage.dataUri;
        const shouldUseMask =
          Boolean(dirtyRegionAtSend) &&
          mode !== "refine" &&
          (dirtyRegionAtSend?.width || 0) * (dirtyRegionAtSend?.height || 0) < 0.92;
        const maskImageUrl =
          shouldUseMask && dirtyRegionAtSend
            ? await createMaskDataUri(
                exportedImage.width,
                exportedImage.height,
                dirtyRegionAtSend
              )
            : undefined;

        const activeConnection = connectionRef.current;
        if (!activeConnection) {
          requestStartMapRef.current.delete(requestId);
          setStatus("connecting");
          setStatusMessage("连接重建中，正在重试...");
          return;
        }

        setStatus("connecting");
        setStatusMessage("正在请求实时生成...");

        const response = await fetch("/api/realtime/generate", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            requestId,
            imageUrl: imageDataUri,
            prompt: prompt.trim() || FALLBACK_PROMPT,
            seed: seedRef.current,
            strictSketch: config.behavior?.strictSketch !== false,
            imageSize: config.model.defaults.imageSize,
            steps: config.model.defaults.steps,
            cfgScale: config.model.defaults.cfgScale,
            strength: config.model.defaults.strength,
            qualityProfile: mode,
            maskImageUrl,
            roi: dirtyRegionAtSend || undefined,
          }),
        });

        const payload = (await response.json().catch(() => ({}))) as {
          imageUrl?: string;
          imageDataURI?: string;
          cost?: number;
          transport?: string;
          warning?: string;
          message?: string;
          error?: string;
        };

        if (!response.ok) {
          throw new Error(payload.message || payload.error || "实时生成失败");
        }

        const nextPreviewUrl = String(payload.imageDataURI || payload.imageUrl || "");
        if (!nextPreviewUrl) {
          throw new Error("实时生成未返回图像");
        }

        const startedAt = requestStartMapRef.current.get(requestId) || Date.now();
        const latencyMs = Date.now() - startedAt;
        requestStartMapRef.current.delete(requestId);

        if (seq > 0 && seq < lastRenderedSeqRef.current) {
          return;
        }

        lastRenderedSeqRef.current = Math.max(lastRenderedSeqRef.current, seq);
        setPreviewUrl(nextPreviewUrl);
        setStatus("live");
        setStatusMessage(
          payload.transport === "ws" ? "实时渲染中（WS）" : "实时渲染中（HTTP）"
        );
        const upstreamWarning = String(payload.warning || "").trim();
        if (upstreamWarning && upstreamWarning !== warningMessageRef.current) {
          warningMessageRef.current = upstreamWarning;
          toast.warning(upstreamWarning);
        }
        if (draftVersionAtSend === draftVersionRef.current) {
          dirtyRef.current = false;
          dirtyRegionRef.current = null;
        }

        const previousLatency = latencyEmaRef.current;
        const nextLatency =
          previousLatency === null ? latencyMs : previousLatency * 0.72 + latencyMs * 0.28;
        latencyEmaRef.current = nextLatency;
        const computedThrottle = Math.round(
          Math.max(baseThrottleMsRef.current, Math.min(520, nextLatency * 0.45))
        );
        setAdaptiveThrottleMs((prev) =>
          Math.abs(prev - computedThrottle) >= 8 ? computedThrottle : prev
        );

        pushMetric({
          name: "frame_send",
          ts: Date.now(),
          seq,
        });
        pushMetric({
          name: "frame_result",
          ts: Date.now(),
          seq,
          latencyMs,
          queueDepth: Number(payload.cost || 0),
          qualityProfile: mode,
          hasMask: Boolean(maskImageUrl),
          transport: payload.transport || "unknown",
        });
      } catch (error) {
        requestStartMapRef.current.delete(requestId);
        console.error("[RealtimeCanvas] flush frame failed:", error);
        setStatus("error");
        setStatusMessage(error instanceof Error ? error.message : "发送失败");
      } finally {
        flushInFlightRef.current = false;
        if (pendingFlushModeRef.current) {
          if (pendingFlushTimerRef.current) {
            window.clearTimeout(pendingFlushTimerRef.current);
            pendingFlushTimerRef.current = null;
          }
          const shouldDelay = pendingFlushModeRef.current === "preview";
          if (shouldDelay) {
            pendingFlushTimerRef.current = window.setTimeout(() => {
              pendingFlushTimerRef.current = null;
              pumpFlushRef.current?.();
            }, adaptiveThrottleMs);
          } else {
            pumpFlushRef.current?.();
          }
        }
      }
    },
    [adaptiveThrottleMs, config, open, prompt, pushMetric]
  );

  const pumpFlush = useCallback(() => {
    if (flushInFlightRef.current) return;
    const mode = pendingFlushModeRef.current;
    const force = pendingFlushForceRef.current;
    if (!mode) return;
    pendingFlushModeRef.current = null;
    pendingFlushForceRef.current = false;
    void flushFrame(mode, force);
  }, [flushFrame]);

  const scheduleFlush = useCallback(
    (force = false, markDirty = true, mode?: FlushMode) => {
      if (markDirty) {
        markCanvasDirty(null);
      }
      const nextMode: FlushMode = mode || (force ? "refine" : "preview");
      if (pendingFlushModeRef.current === "refine" || nextMode === "refine") {
        pendingFlushModeRef.current = "refine";
      } else {
        pendingFlushModeRef.current = "preview";
      }
      pendingFlushForceRef.current = pendingFlushForceRef.current || force;

      if (!dirtyRef.current && !pendingFlushForceRef.current) {
        pendingFlushModeRef.current = null;
        pendingFlushForceRef.current = false;
        return;
      }

      if (force || pendingFlushModeRef.current === "refine") {
        if (pendingFlushTimerRef.current) {
          window.clearTimeout(pendingFlushTimerRef.current);
          pendingFlushTimerRef.current = null;
        }
        pumpFlush();
        return;
      }
      if (pendingFlushTimerRef.current) return;
      pendingFlushTimerRef.current = window.setTimeout(() => {
        pendingFlushTimerRef.current = null;
        pumpFlush();
      }, adaptiveThrottleMs);
    },
    [adaptiveThrottleMs, markCanvasDirty, pumpFlush]
  );

  const scheduleFlushRef = useRef(scheduleFlush);
  const flushMetricsRef = useRef(flushMetrics);

  useEffect(() => {
    scheduleFlushRef.current = scheduleFlush;
  }, [scheduleFlush]);

  useEffect(() => {
    pumpFlushRef.current = pumpFlush;
  }, [pumpFlush]);

  useEffect(() => {
    flushMetricsRef.current = flushMetrics;
  }, [flushMetrics]);

  const clearPreviewCanvas = useCallback(() => {
    const previewCanvas = previewCanvasRef.current;
    if (!previewCanvas) return;
    const previewCtx = previewCanvas.getContext("2d");
    if (!previewCtx) return;
    previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);
  }, []);

  const undo = useCallback(() => {
    if (historyIndexRef.current <= 0) return;
    
    historyIndexRef.current--;
    const imageData = historyRef.current[historyIndexRef.current];
    const canvas = canvasRef.current;
    const ctx = canvas?.getContext("2d");
    
    if (canvas && ctx && imageData) {
      ctx.putImageData(imageData, 0, 0);
      setCanUndo(historyIndexRef.current > 0);
      setCanRedo(historyIndexRef.current < historyRef.current.length - 1);
      scheduleFlush(true);
    }
  }, [scheduleFlush]);

  const redo = useCallback(() => {
    if (historyIndexRef.current >= historyRef.current.length - 1) return;

    historyIndexRef.current++;
    const imageData = historyRef.current[historyIndexRef.current];
    const canvas = canvasRef.current;
    const ctx = canvas?.getContext("2d");

    if (canvas && ctx && imageData) {
      ctx.putImageData(imageData, 0, 0);
      setCanUndo(historyIndexRef.current > 0);
      setCanRedo(historyIndexRef.current < historyRef.current.length - 1);
      scheduleFlush(true);
    }
  }, [scheduleFlush]);

  const resetCanvas = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;
    ctx.save();
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = canvasBackgroundRef.current;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.restore();
    
    // Clear history and save initial state
    historyRef.current = [];
    historyIndexRef.current = -1;
    saveHistory();
  }, [saveHistory]);

  const drawInitialImage = useCallback(async () => {
    if (!open || !initialImageUrl || hasLoadedInitialImageRef.current) return false;
    const canvas = canvasRef.current;
    if (!canvas) return false;
    const ctx = canvas.getContext("2d");
    if (!ctx) return false;

    const image = new Image();
    image.crossOrigin = "anonymous";
    await new Promise<void>((resolve, reject) => {
      image.onload = () => resolve();
      image.onerror = () => reject(new Error("加载初始图片失败"));
      image.src = initialImageUrl;
    });

    const scale = Math.min(canvas.width / image.width, canvas.height / image.height);
    const drawWidth = image.width * scale;
    const drawHeight = image.height * scale;
    const offsetX = (canvas.width - drawWidth) / 2;
    const offsetY = (canvas.height - drawHeight) / 2;

    ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);
    hasLoadedInitialImageRef.current = true;
    markCanvasDirty(null);
    saveHistory(); // Save initial image state
    return true;
  }, [initialImageUrl, markCanvasDirty, open, saveHistory]);

  const initializeCanvas = useCallback(() => {
    const canvas = canvasRef.current;
    const previewCanvas = previewCanvasRef.current;
    const wrap = canvasWrapRef.current;
    if (!canvas || !previewCanvas || !wrap) return;
    const rect = wrap.getBoundingClientRect();
    const dpr = Math.max(1, window.devicePixelRatio || 1);
    canvas.width = Math.max(640, Math.floor(rect.width * dpr));
    canvas.height = Math.max(480, Math.floor(rect.height * dpr));
    canvas.style.width = `${Math.floor(rect.width)}px`;
    canvas.style.height = `${Math.floor(rect.height)}px`;
    previewCanvas.width = canvas.width;
    previewCanvas.height = canvas.height;
    previewCanvas.style.width = canvas.style.width;
    previewCanvas.style.height = canvas.style.height;
    const ctx = canvas.getContext("2d");
    const previewCtx = previewCanvas.getContext("2d");
    if (!ctx) return;
    if (!previewCtx) return;
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.scale(dpr, dpr);
    previewCtx.setTransform(1, 0, 0, 1, 0, 0);
    previewCtx.scale(dpr, dpr);
    previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);
    resetCanvas();
    hasLoadedInitialImageRef.current = false;
  }, [resetCanvas]);

  const getCanvasPoint = useCallback((event: ReactPointerEvent<HTMLCanvasElement>) => {
    const canvas = canvasRef.current;
    if (!canvas) return null;
    const rect = canvas.getBoundingClientRect();
    return {
      x: event.clientX - rect.left,
      y: event.clientY - rect.top,
    };
  }, []);

  const drawStroke = useCallback(
    (from: { x: number; y: number }, to: { x: number; y: number }) => {
      const canvas = canvasRef.current;
      if (!canvas) return;
      const ctx = canvas.getContext("2d");
      if (!ctx) return;

      ctx.save();
      if (brushMode === "eraser") {
        ctx.globalCompositeOperation = "destination-out";
        ctx.strokeStyle = "rgba(0,0,0,1)";
        ctx.lineWidth = brushSize * 1.45;
      } else {
        ctx.globalCompositeOperation = "source-over";
        ctx.strokeStyle = brushColor;
        ctx.lineWidth = brushSize;
      }
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
      ctx.beginPath();
      ctx.moveTo(from.x, from.y);
      ctx.lineTo(to.x, to.y);
      ctx.stroke();
      ctx.restore();
    },
    [brushMode, brushColor, brushSize]
  );

  const drawShape = useCallback(
    (
      from: { x: number; y: number },
      to: { x: number; y: number },
      targetCtx?: CanvasRenderingContext2D | null
    ) => {
      const defaultCtx = canvasRef.current?.getContext("2d");
      const ctx = targetCtx || defaultCtx;
      if (!ctx) return;

      const minX = Math.min(from.x, to.x);
      const minY = Math.min(from.y, to.y);
      const width = Math.abs(to.x - from.x);
      const height = Math.abs(to.y - from.y);

      ctx.save();
      ctx.globalCompositeOperation = "source-over";
      ctx.strokeStyle = brushColor;
      ctx.lineWidth = Math.max(1, brushSize * 0.9);
      ctx.lineCap = "round";
      ctx.lineJoin = "round";

      if (brushMode === "rect") {
        ctx.strokeRect(minX, minY, width, height);
      } else if (brushMode === "circle") {
        const centerX = minX + width / 2;
        const centerY = minY + height / 2;
        const radiusX = width / 2;
        const radiusY = height / 2;
        ctx.beginPath();
        ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, Math.PI * 2);
        ctx.stroke();
      } else if (brushMode === "line") {
        ctx.beginPath();
        ctx.moveTo(from.x, from.y);
        ctx.lineTo(to.x, to.y);
        ctx.stroke();
      }
      ctx.restore();
    },
    [brushMode, brushColor, brushSize]
  );

  const handlePointerDown = useCallback(
    (event: ReactPointerEvent<HTMLCanvasElement>) => {
      event.preventDefault();
      const point = getCanvasPoint(event);
      if (!point) return;
      pointerDownRef.current = true;
      lastPointRef.current = point;
      if (isShapeMode(brushMode)) {
        shapeStartPointRef.current = point;
        clearPreviewCanvas();
      } else {
        drawStroke(point, point);
        const lineWidth = brushMode === "eraser" ? brushSize * 1.45 : brushSize;
        markCanvasDirtyStroke(point, point, lineWidth);
        scheduleFlush(false, false, "preview");
      }
      event.currentTarget.setPointerCapture(event.pointerId);
    },
    [
      brushMode,
      brushSize,
      clearPreviewCanvas,
      drawStroke,
      getCanvasPoint,
      markCanvasDirtyStroke,
      scheduleFlush,
    ]
  );

  const handlePointerLeave = useCallback(() => {
    const wasDrawing = pointerDownRef.current;
    if (cursorRef.current) {
      cursorRef.current.style.opacity = '0';
    }
    pointerDownRef.current = false;
    lastPointRef.current = null;
    shapeStartPointRef.current = null;
    clearPreviewCanvas();
    if (wasDrawing) {
      scheduleFlush(true, false, "refine");
    }
  }, [clearPreviewCanvas, scheduleFlush]);

  const handlePointerEnter = useCallback(() => {
    if (cursorRef.current) {
      cursorRef.current.style.opacity = brushMode === "brush" || brushMode === "eraser" ? "1" : "0";
    }
  }, [brushMode]);

  const handlePointerMove = useCallback(
    (event: ReactPointerEvent<HTMLCanvasElement>) => {
      event.preventDefault();
      // Update cursor
      const point = getCanvasPoint(event);
      if (point && cursorRef.current) {
         const showCursor = brushMode === "brush" || brushMode === "eraser";
         if (showCursor) {
           cursorRef.current.style.opacity = "1";
           cursorRef.current.style.transform = `translate(${point.x - brushSize / 2}px, ${point.y - brushSize / 2}px)`;
           cursorRef.current.style.width = `${brushSize}px`;
           cursorRef.current.style.height = `${brushSize}px`;
         } else {
           cursorRef.current.style.opacity = "0";
         }
      }

      if (!pointerDownRef.current) return;
      if (!point || !lastPointRef.current) return;
      if (isShapeMode(brushMode) && shapeStartPointRef.current) {
        const previewCanvas = previewCanvasRef.current;
        const previewCtx = previewCanvas?.getContext("2d");
        if (previewCanvas && previewCtx) {
          previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);
          drawShape(shapeStartPointRef.current, point, previewCtx);
        }
      } else {
        drawStroke(lastPointRef.current, point);
        const lineWidth = brushMode === "eraser" ? brushSize * 1.45 : brushSize;
        markCanvasDirtyStroke(lastPointRef.current, point, lineWidth);
      }
      lastPointRef.current = point;
      scheduleFlush(false, false, "preview");
    },
    [
      drawShape,
      drawStroke,
      getCanvasPoint,
      scheduleFlush,
      brushMode,
      brushSize,
      markCanvasDirtyStroke,
    ]
  );

  const handlePointerUp = useCallback(
    (event: ReactPointerEvent<HTMLCanvasElement>) => {
      event.preventDefault();
      pointerDownRef.current = false;
      const endPoint = getCanvasPoint(event);
      const shapeStart = shapeStartPointRef.current;
      if (isShapeMode(brushMode) && endPoint && shapeStart) {
        drawShape(shapeStart, endPoint);
        const lineWidth = Math.max(1, brushSize * 0.9);
        const pad = Math.max(6, Math.ceil(lineWidth * 1.2));
        markCanvasDirtyRect({
          minX: Math.min(shapeStart.x, endPoint.x) - pad,
          minY: Math.min(shapeStart.y, endPoint.y) - pad,
          maxX: Math.max(shapeStart.x, endPoint.x) + pad,
          maxY: Math.max(shapeStart.y, endPoint.y) + pad,
        });
        clearPreviewCanvas();
      }
      lastPointRef.current = null;
      shapeStartPointRef.current = null;
      try {
        event.currentTarget.releasePointerCapture(event.pointerId);
      } catch {
        // ignore
      }
      saveHistory(); // Save state after stroke
      scheduleFlush(true, false, "refine");
    },
    [
      brushMode,
      brushSize,
      clearPreviewCanvas,
      drawShape,
      getCanvasPoint,
      markCanvasDirtyRect,
      saveHistory,
      scheduleFlush,
    ]
  );

  useEffect(() => {
    clearPreviewCanvas();
  }, [brushMode, clearPreviewCanvas]);

  // Shortcuts
  useEffect(() => {
    if (!open) return;
    const handleKeyDown = (e: KeyboardEvent) => {
      // Undo/Redo
      if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
        e.preventDefault();
        if (e.shiftKey) {
           redo();
        } else {
           undo();
        }
      }
      // Brush Size
      if (e.key === '[') {
         setBrushSize(prev => Math.max(2, prev - 2));
      }
      if (e.key === ']') {
         setBrushSize(prev => Math.min(50, prev + 2));
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [open, undo, redo]);

  useEffect(() => {
    if (!open) return;
    seedRef.current = createSessionSeed();
    sessionIdRef.current = `rt-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
    seqRef.current = 0;
    lastRenderedSeqRef.current = 0;
    requestStartMapRef.current.clear();
    draftVersionRef.current = 0;
    dirtyRef.current = false;
    dirtyRegionRef.current = null;
    pendingFlushModeRef.current = null;
    pendingFlushForceRef.current = false;
    latencyEmaRef.current = null;
    warningMessageRef.current = "";
    metricsQueueRef.current = [];
  }, [open]);

  useEffect(() => {
    if (!open) return;
    initializeCanvas();
    void drawInitialImage().then((hasInitialImage) => {
      if (hasInitialImage) {
        scheduleFlushRef.current(true, false);
      }
    });
    const onResize = () => initializeCanvas();
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("resize", onResize);
    };
  }, [drawInitialImage, initializeCanvas, open]);

  useEffect(() => {
    if (!open) return;

    let cancelled = false;
    setStatus("connecting");
    setStatusMessage("正在初始化实时连接...");

    const start = async () => {
      try {
        let configResponse: Response | null = null;
        let configJson: Partial<RealtimeConfig> & { message?: string; retryAfter?: number } = {};

        for (let attempt = 0; attempt < 3; attempt += 1) {
          configResponse = await fetch("/api/realtime/config", { cache: "no-store" });
          configJson = (await configResponse.json().catch(() => ({}))) as Partial<RealtimeConfig> & {
            message?: string;
            retryAfter?: number;
          };
          if (configResponse.ok) break;

          const retryAfterSeconds = Number(configJson.retryAfter || 0);
          const shouldRetry429 = configResponse.status === 429 && attempt < 2;
          if (!shouldRetry429) {
            throw new Error(configJson.message || "无法加载实时配置");
          }

          const retryDelay = retryAfterSeconds > 0 ? retryAfterSeconds * 1000 : 700 * (attempt + 1);
          await new Promise((resolve) => window.setTimeout(resolve, retryDelay));
        }

        if (!configResponse?.ok) {
          throw new Error(configJson.message || "无法加载实时配置");
        }

        if (cancelled) return;
        const resolvedConfig: RealtimeConfig = {
          transport: {
            throttleInterval:
              configJson.transport?.throttleInterval ||
              defaultRealtimeConfig.transport.throttleInterval,
            maxBuffering:
              configJson.transport?.maxBuffering || defaultRealtimeConfig.transport.maxBuffering,
          },
          image: {
            maxInputResolution:
              configJson.image?.maxInputResolution || defaultRealtimeConfig.image.maxInputResolution,
            jpegQuality: configJson.image?.jpegQuality || defaultRealtimeConfig.image.jpegQuality,
          },
          model: {
            id: configJson.model?.id || defaultRealtimeConfig.model.id,
            defaults: {
              steps: configJson.model?.defaults?.steps || defaultRealtimeConfig.model.defaults.steps,
              cfgScale:
                configJson.model?.defaults?.cfgScale ||
                defaultRealtimeConfig.model.defaults.cfgScale,
              strength:
                configJson.model?.defaults?.strength ||
                defaultRealtimeConfig.model.defaults.strength,
              imageSize:
                configJson.model?.defaults?.imageSize ||
                defaultRealtimeConfig.model.defaults.imageSize,
            },
          },
          behavior: {
            strictSketch: configJson.behavior?.strictSketch !== false,
          },
        };

        setConfig(resolvedConfig);
        baseThrottleMsRef.current = resolvedConfig.transport.throttleInterval;
        setAdaptiveThrottleMs(resolvedConfig.transport.throttleInterval);

        if (cancelled) return;
        connectionRef.current = {
          provider: "runware",
          modelId: resolvedConfig.model.id,
          reconnectToken: refreshToken,
        };
        setStatus("live");
        setStatusMessage("实时服务已就绪");
      } catch (error) {
        if (cancelled) return;
        console.error("[RealtimeCanvas] init failed:", error);
        setStatus("error");
        setStatusMessage(error instanceof Error ? error.message : "实时初始化失败");
      }
    };

    void start();
    const metricTimer = window.setInterval(() => {
      void flushMetricsRef.current();
    }, 5000);

    return () => {
      cancelled = true;
      if (pendingFlushTimerRef.current) {
        window.clearTimeout(pendingFlushTimerRef.current);
        pendingFlushTimerRef.current = null;
      }
      window.clearInterval(metricTimer);
      void flushMetricsRef.current();
      connectionRef.current?.close?.();
      connectionRef.current = null;
      setStatus("idle");
      setStatusMessage("等待连接");
      pointerDownRef.current = false;
      lastPointRef.current = null;
      pendingFlushModeRef.current = null;
      pendingFlushForceRef.current = false;
    };
  }, [open, pushMetric, refreshToken]);

  const forceReconnect = useCallback(() => {
    connectionRef.current = null;
    setStatus("connecting");
    setStatusMessage("正在重连...");
    setRefreshToken((prev) => prev + 1);
  }, []);

  const clearSketch = useCallback(() => {
    resetCanvas();
    clearPreviewCanvas();
    scheduleFlush(true, true, "refine");
  }, [clearPreviewCanvas, resetCanvas, scheduleFlush]);

  const handleSketchUpload = useCallback(
    async (event: ChangeEvent<HTMLInputElement>) => {
      const file = event.target.files?.[0];
      if (!file) return;
      if (!file.type.startsWith("image/")) {
        toast.error("请上传图片文件");
        event.currentTarget.value = "";
        return;
      }

      try {
        const objectUrl = URL.createObjectURL(file);
        const image = new Image();
        await new Promise<void>((resolve, reject) => {
          image.onload = () => resolve();
          image.onerror = () => reject(new Error("图片加载失败"));
          image.src = objectUrl;
        });

        const canvas = canvasRef.current;
        const ctx = canvas?.getContext("2d");
        if (!canvas || !ctx) {
          URL.revokeObjectURL(objectUrl);
          throw new Error("画布未初始化");
        }

        const rect = canvas.getBoundingClientRect();
        const canvasWidth = Math.max(1, rect.width);
        const canvasHeight = Math.max(1, rect.height);
        const scale = Math.min(canvasWidth / image.width, canvasHeight / image.height);
        const drawWidth = image.width * scale;
        const drawHeight = image.height * scale;
        const offsetX = (canvasWidth - drawWidth) / 2;
        const offsetY = (canvasHeight - drawHeight) / 2;

        ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);
        URL.revokeObjectURL(objectUrl);
        saveHistory();
        scheduleFlush(true);
        toast.success("图片已导入绘画区");
      } catch (error) {
        toast.error(error instanceof Error ? error.message : "导入图片失败");
      } finally {
        event.currentTarget.value = "";
      }
    },
    [saveHistory, scheduleFlush]
  );

  const handleCanvasBackgroundChange = useCallback(
    (nextColor: string) => {
      const canvas = canvasRef.current;
      if (!canvas) return;
      const ctx = canvas.getContext("2d");
      if (!ctx) return;

      const snapshot = document.createElement("canvas");
      snapshot.width = canvas.width;
      snapshot.height = canvas.height;
      const snapshotCtx = snapshot.getContext("2d");
      if (!snapshotCtx) return;
      snapshotCtx.drawImage(canvas, 0, 0);

      ctx.save();
      ctx.globalCompositeOperation = "source-over";
      ctx.fillStyle = nextColor;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(snapshot, 0, 0);
      ctx.restore();

      canvasBackgroundRef.current = nextColor;
      setCanvasBackground(nextColor);
      saveHistory();
      scheduleFlush(true);
    },
    [saveHistory, scheduleFlush]
  );

  const handleDownloadCanvas = useCallback(async () => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    try {
      const exportedImage = await canvasToJpegDataUri(
        canvas,
        2048,
        0.92,
        canvasBackgroundRef.current
      );
      const anchor = document.createElement("a");
      anchor.href = exportedImage.dataUri;
      anchor.download = `realtime-canvas-${Date.now()}.jpg`;
      anchor.click();
      toast.success("已保存当前画布");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "保存失败");
    }
  }, []);

  const handleApplyToCanvas = useCallback(() => {
    if (!previewUrl) {
      toast.error("请先生成预览结果");
      return;
    }

    onApplyResult({
      imageUrl: previewUrl,
      prompt: prompt.trim() || FALLBACK_PROMPT,
    });
    onOpenChange(false);
  }, [onApplyResult, onOpenChange, previewUrl, prompt]);

  const content = (
    <>
        {standalone ? (
          <div className="sr-only">
            <h2>实时画布</h2>
            <p>左侧绘制草图，右侧实时预览。</p>
          </div>
        ) : (
          <DialogHeader className="sr-only">
            <DialogTitle>实时画布</DialogTitle>
            <DialogDescription>左侧绘制草图，右侧实时预览。</DialogDescription>
          </DialogHeader>
        )}
        {standalone ? (
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="absolute right-4 top-4 z-[60] h-9 w-9 rounded-full bg-background/85 shadow-sm"
            onClick={() => onOpenChange(false)}
            title="返回画布"
          >
            <X className="h-5 w-5" />
          </Button>
        ) : null}
        {/* Top Header - Minimal */}
        <div className="absolute left-0 right-0 top-0 z-50 flex h-14 items-center justify-start px-6 bg-gradient-to-b from-black/20 to-transparent pointer-events-none">
          <div className="pointer-events-auto flex items-center gap-3 rounded-full bg-background/95 backdrop-blur-sm px-4 py-1.5 border border-border/50 shadow-sm">
            <span className="font-semibold text-sm">Realtime Canvas</span>
            <div className="h-4 w-[1px] bg-border" />
            <span className={cn("flex items-center gap-1.5 text-xs font-medium", statusBadge.className, "bg-transparent p-0")}>
              <div className={cn("h-2 w-2 rounded-full", status === "live" ? "bg-emerald-500 animate-pulse" : status === "error" ? "bg-rose-500" : "bg-zinc-400")} />
              {statusBadge.label}
            </span>
          </div>
        </div>

        {/* Main Canvas Area - Split View */}
        <div className="relative flex h-full w-full bg-[#f4f4f5] dark:bg-[#09090b]">
          {/* Left: Input Canvas */}
          <div className="relative flex-1 flex flex-col items-center justify-center overflow-hidden border-r border-border/10">
             <div ref={canvasWrapRef} className="relative h-full w-full flex items-center justify-center bg-white dark:bg-[#18181b]">
                <div className="absolute inset-0 pattern-grid-lg opacity-[0.03] pointer-events-none" />
                
                <div className="relative">
                    <canvas
                      ref={canvasRef}
                      className={cn(
                        "touch-none shadow-sm block",
                        brushMode === "brush" || brushMode === "eraser" ? "cursor-none" : "cursor-crosshair"
                      )}
                      onPointerDown={handlePointerDown}
                      onPointerMove={handlePointerMove}
                      onPointerUp={handlePointerUp}
                      onPointerCancel={handlePointerUp}
                      onPointerEnter={handlePointerEnter}
                      onPointerLeave={handlePointerLeave}
                    />
                    <canvas
                      ref={previewCanvasRef}
                      className="pointer-events-none absolute inset-0 touch-none"
                    />
                    {/* Custom Brush Cursor */}
                    <div 
                        ref={cursorRef}
                        className="pointer-events-none absolute top-0 left-0 rounded-full border border-zinc-500/50 bg-zinc-500/10 backdrop-invert transition-opacity duration-75 z-10"
                        style={{ 
                            width: brushSize, 
                            height: brushSize, 
                            opacity: 0,
                            willChange: 'transform, width, height'
                        }}
                    />
                </div>
             </div>
             <div className="absolute top-4 left-4 pointer-events-none z-10">
                <span className="text-xs font-medium text-zinc-400 bg-black/5 px-2 py-1 rounded-md backdrop-blur-sm">INPUT</span>
             </div>
          </div>

          {/* Right: Output Preview */}
          <div className="relative flex-1 flex flex-col items-center justify-center overflow-hidden bg-zinc-50 dark:bg-[#0c0c0e]">
            <div className="relative h-full w-full flex items-center justify-center">
              {previewUrl ? (
                <img src={previewUrl} alt="实时预览" className="max-h-full max-w-full object-contain shadow-sm" />
              ) : (
                <div className="flex flex-col items-center justify-center text-zinc-400 gap-3">
                   {status === "connecting" ? (
                      <>
                        <Loader2 className="h-8 w-8 animate-spin opacity-50" />
                        <span className="text-sm">Connecting...</span>
                      </>
                   ) : (
                      <>
                        <Sparkles className="h-8 w-8 opacity-20" />
                        <span className="text-sm">Start drawing to generate</span>
                      </>
                   )}
                </div>
              )}
            </div>
            <div className="absolute top-4 right-4 pointer-events-none">
                <span className="text-xs font-medium text-zinc-400 bg-black/5 px-2 py-1 rounded-md backdrop-blur-sm">OUTPUT</span>
             </div>
          </div>
        </div>

        {/* Floating Toolbar - Top (Lovart-like) */}
        <div className="absolute left-1/2 top-[72px] z-20 -translate-x-1/2 pointer-events-none">
          <div className="pointer-events-auto flex items-center gap-1 rounded-[30px] border border-black/10 bg-white/90 p-2 shadow-xl backdrop-blur-xl">
            <Button
              size="icon"
              variant="ghost"
              className={cn(
                "h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100",
                brushMode === "brush" && "bg-black text-white hover:bg-black"
              )}
              onClick={() => setBrushMode("brush")}
              title="画笔"
            >
              <Paintbrush className="h-5 w-5" />
            </Button>
            <Button
              size="icon"
              variant="ghost"
              className={cn(
                "h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100",
                brushMode === "eraser" && "bg-black text-white hover:bg-black"
              )}
              onClick={() => setBrushMode("eraser")}
              title="橡皮"
            >
              <Eraser className="h-5 w-5" />
            </Button>
            <Button
              size="icon"
              variant="ghost"
              className={cn(
                "h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100",
                brushMode === "rect" && "bg-black text-white hover:bg-black"
              )}
              onClick={() => setBrushMode("rect")}
              title="矩形"
            >
              <Square className="h-5 w-5" />
            </Button>
            <Button
              size="icon"
              variant="ghost"
              className={cn(
                "h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100",
                brushMode === "circle" && "bg-black text-white hover:bg-black"
              )}
              onClick={() => setBrushMode("circle")}
              title="圆形"
            >
              <CircleIcon className="h-5 w-5" />
            </Button>
            <Button
              size="icon"
              variant="ghost"
              className={cn(
                "h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100",
                brushMode === "line" && "bg-black text-white hover:bg-black"
              )}
              onClick={() => setBrushMode("line")}
              title="直线"
            >
              <Slash className="h-5 w-5" />
            </Button>

            <div className="mx-1 h-7 w-px bg-black/10" />

            <div className="flex items-center gap-1 px-1">
              {BRUSH_COLOR_PRESETS.map((color) => (
                <button
                  key={color}
                  type="button"
                  className={cn(
                    "h-5 w-5 rounded-full border border-black/15 transition-all",
                    brushColor === color && "scale-110 ring-2 ring-black/25"
                  )}
                  style={{ backgroundColor: color }}
                  onClick={() => setBrushColor(color)}
                  title={color}
                />
              ))}
              <input
                type="color"
                value={brushColor}
                onChange={(event) => setBrushColor(event.target.value)}
                className="h-5 w-5 cursor-pointer rounded-full border border-black/15 bg-transparent p-0"
                title="自定义颜色"
              />
            </div>

            <div className="mx-1 h-7 w-px bg-black/10" />

            <div className="w-[88px] px-1">
              <Slider
                value={[brushSize]}
                min={2}
                max={50}
                step={1}
                onValueChange={([val]) => setBrushSize(val)}
              />
            </div>

            <div className="mx-1 h-7 w-px bg-black/10" />

            <div className="flex items-center gap-1">
              {CANVAS_BACKGROUND_PRESETS.map((color) => (
                <button
                  key={color}
                  type="button"
                  className={cn(
                    "h-4 w-4 rounded border border-black/15 transition-all",
                    canvasBackground === color && "scale-110 ring-2 ring-black/20"
                  )}
                  style={{ backgroundColor: color }}
                  onClick={() => handleCanvasBackgroundChange(color)}
                  title="画布底色"
                />
              ))}
            </div>

            <div className="mx-1 h-7 w-px bg-black/10" />

            <Button
              size="icon"
              variant="ghost"
              className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100"
              onClick={() => uploadInputRef.current?.click()}
              title="上传图片"
            >
              <Upload className="h-5 w-5" />
            </Button>
            <Button
              size="icon"
              variant="ghost"
              className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100"
              onClick={clearSketch}
              title="清空"
            >
              <Trash2 className="h-5 w-5" />
            </Button>
            <Button
              size="icon"
              variant="ghost"
              className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100"
              onClick={undo}
              disabled={!canUndo}
              title="撤销"
            >
              <Undo2 className="h-5 w-5" />
            </Button>
            <Button
              size="icon"
              variant="ghost"
              className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100"
              onClick={redo}
              disabled={!canRedo}
              title="重做"
            >
              <Redo2 className="h-5 w-5" />
            </Button>
            <Button
              size="icon"
              variant="ghost"
              className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100"
              onClick={() => scheduleFlush(true)}
              disabled={status === "connecting"}
              title="生成"
            >
              {status === "connecting" ? (
                <Loader2 className="h-5 w-5 animate-spin" />
              ) : (
                <Sparkles className="h-5 w-5" />
              )}
            </Button>
            <Button
              size="icon"
              variant="ghost"
              className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100"
              onClick={handleDownloadCanvas}
              title="保存"
            >
              <Download className="h-5 w-5" />
            </Button>
            <Button
              size="icon"
              variant="ghost"
              className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100"
              onClick={forceReconnect}
              title="重连"
            >
              <RefreshCw className="h-5 w-5" />
            </Button>
          </div>
          <input
            ref={uploadInputRef}
            type="file"
            accept="image/*"
            className="hidden"
            onChange={handleSketchUpload}
          />
        </div>

        {/* Floating Toolbar - Bottom (Prompt) */}
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 w-full max-w-2xl px-4 z-20 pointer-events-none">
           <div className="pointer-events-auto flex flex-col gap-2 p-1.5 bg-background/80 backdrop-blur-xl border border-border/50 shadow-2xl rounded-[24px]">
              <div className="flex items-center gap-2 pl-2 pr-1.5 py-1">
                 <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary">
                    <Sparkles className="h-4 w-4" />
                 </div>
                 <Input
                    value={prompt}
                    onChange={(e) => setPrompt(e.target.value)}
                    onBlur={() => scheduleFlush(true, false)}
                    placeholder="Describe what you want to create..."
                    className="flex-1 h-10 border-0 bg-transparent focus-visible:ring-0 px-2 text-base shadow-none"
                 />
                 <Button 
                    size="sm" 
                    className="h-9 rounded-xl px-4 font-medium"
                    onClick={() => scheduleFlush(true)}
                    disabled={status === 'connecting'}
                 >
                    {status === 'connecting' ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Generate'}
                 </Button>
                 <Button
                    size="sm"
                    variant="outline"
                    className="h-9 rounded-xl px-4 font-medium"
                    onClick={handleApplyToCanvas}
                    disabled={!previewUrl}
                 >
                    <Send className="h-4 w-4 mr-1.5" />
                    发送到画布
                 </Button>
              </div>
           </div>
           <div className="text-center mt-2">
              <span className="text-[10px] text-white/50 bg-black/40 px-3 py-1 rounded-full backdrop-blur-sm">
                 {statusMessage} • Latency: {adaptiveThrottleMs}ms
              </span>
           </div>
        </div>
    </>
  );

  if (standalone) {
    return (
      <div className="h-dvh w-full overflow-hidden bg-background">
        <div className="relative h-full w-full overflow-hidden bg-background">{content}</div>
      </div>
    );
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="h-[95vh] w-[98vw] max-w-[1800px] overflow-hidden rounded-[20px] border-0 bg-background p-0 shadow-2xl sm:rounded-[20px] md:rounded-[24px]">
        {content}
      </DialogContent>
    </Dialog>
  );
}