"use client";

import { useRef, useState, useEffect, useCallback, type MouseEvent } from "react";
import type { Annotation } from "@/lib/types";
import { generateId } from "@/lib/store";

type Tool = "rect" | "arrow" | "freehand" | "text";

interface AnnotationCanvasProps {
  imageUrl: string;
  onComplete: (annotations: Annotation[], snapshot: string) => void;
  onCancel: () => void;
}

export function AnnotationCanvas({ imageUrl, onComplete, onCancel }: AnnotationCanvasProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const imageRef = useRef<HTMLImageElement | null>(null);

  const [tool, setTool] = useState<Tool>("rect");
  const [annotations, setAnnotations] = useState<Annotation[]>([]);
  const [drawing, setDrawing] = useState(false);
  const [startPos, setStartPos] = useState<{ x: number; y: number } | null>(null);
  const [currentPos, setCurrentPos] = useState<{ x: number; y: number } | null>(null);
  const [freehandPoints, setFreehandPoints] = useState<{ x: number; y: number }[]>([]);
  const [editingAnnotation, setEditingAnnotation] = useState<string | null>(null);
  const [editText, setEditText] = useState("");
  const [undoStack, setUndoStack] = useState<Annotation[][]>([]);
  const [imgLoaded, setImgLoaded] = useState(false);

  // 获取鼠标相对于 canvas 的坐标（归一化到图片尺寸）
  const getRelPos = useCallback((e: MouseEvent): { x: number; y: number } | null => {
    const canvas = canvasRef.current;
    if (!canvas) return null;
    const rect = canvas.getBoundingClientRect();
    return {
      x: (e.clientX - rect.left) / rect.width,
      y: (e.clientY - rect.top) / rect.height,
    };
  }, []);

  // 加载图片
  useEffect(() => {
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => {
      imageRef.current = img;
      setImgLoaded(true);
    };
    img.src = imageUrl;
  }, [imageUrl]);

  // 渲染 canvas
  const render = useCallback(() => {
    const canvas = canvasRef.current;
    const img = imageRef.current;
    if (!canvas || !img) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;

    ctx.drawImage(img, 0, 0);

    const w = canvas.width;
    const h = canvas.height;

    // 绘制已有标注
    for (const ann of annotations) {
      drawAnnotation(ctx, ann, w, h, false);
    }

    // 绘制当前正在创建的标注
    if (drawing && startPos && currentPos) {
      ctx.strokeStyle = "#f43f5e";
      ctx.lineWidth = Math.max(2, w * 0.003);
      ctx.setLineDash([w * 0.005, w * 0.003]);

      if (tool === "rect") {
        const rx = startPos.x * w, ry = startPos.y * h;
        const rw = (currentPos.x - startPos.x) * w;
        const rh = (currentPos.y - startPos.y) * h;
        ctx.strokeRect(rx, ry, rw, rh);
      } else if (tool === "arrow") {
        ctx.beginPath();
        ctx.moveTo(startPos.x * w, startPos.y * h);
        ctx.lineTo(currentPos.x * w, currentPos.y * h);
        ctx.stroke();
        drawArrowHead(ctx, startPos.x * w, startPos.y * h, currentPos.x * w, currentPos.y * h, w * 0.015);
      } else if (tool === "freehand" && freehandPoints.length > 1) {
        ctx.beginPath();
        ctx.moveTo(freehandPoints[0].x * w, freehandPoints[0].y * h);
        for (let i = 1; i < freehandPoints.length; i++) {
          ctx.lineTo(freehandPoints[i].x * w, freehandPoints[i].y * h);
        }
        ctx.stroke();
      }

      ctx.setLineDash([]);
    }
  }, [annotations, drawing, startPos, currentPos, freehandPoints, tool]);

  useEffect(() => {
    if (imgLoaded) render();
  }, [imgLoaded, render]);

  // 鼠标事件
  const handleMouseDown = (e: MouseEvent) => {
    if (tool === "text") {
      const pos = getRelPos(e);
      if (!pos) return;
      const ann: Annotation = {
        id: generateId("ann-"),
        type: "text",
        x: pos.x,
        y: pos.y,
        text: "",
      };
      pushUndo();
      setAnnotations((prev) => [...prev, ann]);
      setEditingAnnotation(ann.id);
      setEditText("");
      return;
    }

    const pos = getRelPos(e);
    if (!pos) return;
    setDrawing(true);
    setStartPos(pos);
    setCurrentPos(pos);
    if (tool === "freehand") {
      setFreehandPoints([pos]);
    }
  };

  const handleMouseMove = (e: MouseEvent) => {
    if (!drawing) return;
    const pos = getRelPos(e);
    if (!pos) return;
    setCurrentPos(pos);
    if (tool === "freehand") {
      setFreehandPoints((prev) => [...prev, pos]);
    }
  };

  const handleMouseUp = () => {
    if (!drawing || !startPos || !currentPos) {
      setDrawing(false);
      return;
    }

    pushUndo();

    if (tool === "rect") {
      const ann: Annotation = {
        id: generateId("ann-"),
        type: "rect",
        x: Math.min(startPos.x, currentPos.x),
        y: Math.min(startPos.y, currentPos.y),
        w: Math.abs(currentPos.x - startPos.x),
        h: Math.abs(currentPos.y - startPos.y),
        text: "",
      };
      setAnnotations((prev) => [...prev, ann]);
      setEditingAnnotation(ann.id);
      setEditText("");
    } else if (tool === "arrow") {
      const ann: Annotation = {
        id: generateId("ann-"),
        type: "arrow",
        x: startPos.x,
        y: startPos.y,
        w: currentPos.x - startPos.x,
        h: currentPos.y - startPos.y,
        text: "",
      };
      setAnnotations((prev) => [...prev, ann]);
      setEditingAnnotation(ann.id);
      setEditText("");
    } else if (tool === "freehand") {
      const ann: Annotation = {
        id: generateId("ann-"),
        type: "freehand",
        x: freehandPoints[0]?.x ?? 0,
        y: freehandPoints[0]?.y ?? 0,
        points: [...freehandPoints],
        text: "",
      };
      setAnnotations((prev) => [...prev, ann]);
      setFreehandPoints([]);
    }

    setDrawing(false);
    setStartPos(null);
    setCurrentPos(null);
  };

  const pushUndo = () => {
    setUndoStack((prev) => [...prev, [...annotations]]);
  };

  const handleUndo = () => {
    if (undoStack.length === 0) return;
    const prev = undoStack[undoStack.length - 1];
    setUndoStack((s) => s.slice(0, -1));
    setAnnotations(prev);
    setEditingAnnotation(null);
  };

  const handleClear = () => {
    pushUndo();
    setAnnotations([]);
    setEditingAnnotation(null);
  };

  const commitText = () => {
    if (!editingAnnotation) return;
    setAnnotations((prev) =>
      prev.map((a) => (a.id === editingAnnotation ? { ...a, text: editText } : a))
    );
    setEditingAnnotation(null);
    setEditText("");
  };

  const handleComplete = () => {
    // 先提交正在编辑的文本
    let finalAnnotations = annotations;
    if (editingAnnotation) {
      finalAnnotations = annotations.map((a) =>
        a.id === editingAnnotation ? { ...a, text: editText } : a
      );
    }

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

    // 最终渲染一次（含所有文本）
    const img = imageRef.current;
    if (img) {
      const ctx = canvas.getContext("2d");
      if (ctx) {
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        ctx.drawImage(img, 0, 0);
        for (const ann of finalAnnotations) {
          drawAnnotation(ctx, ann, canvas.width, canvas.height, true);
        }
      }
    }

    const snapshot = canvas.toDataURL("image/png");
    onComplete(finalAnnotations, snapshot);
  };

  const TOOLS: { key: Tool; label: string; icon: string }[] = [
    { key: "rect", label: "矩形", icon: "□" },
    { key: "arrow", label: "箭头", icon: "→" },
    { key: "freehand", label: "画笔", icon: "✎" },
    { key: "text", label: "文字", icon: "T" },
  ];

  return (
    <div className="flex flex-col h-full">
      {/* 工具栏 */}
      <div className="flex items-center gap-1 px-3 py-2 border-b border-[var(--border)] bg-[var(--bg-tertiary)] flex-wrap">
        {TOOLS.map((t) => (
          <button
            key={t.key}
            onClick={() => setTool(t.key)}
            className={`px-2.5 py-1 text-xs rounded cursor-pointer transition-colors ${
              tool === t.key
                ? "bg-[var(--accent)] text-white"
                : "text-[var(--text-secondary)] hover:text-[var(--text-primary)] bg-[var(--bg-primary)]"
            }`}
            title={t.label}
          >
            {t.icon} {t.label}
          </button>
        ))}

        <div className="w-px h-4 bg-[var(--border)] mx-1" />

        <button
          onClick={handleUndo}
          disabled={undoStack.length === 0}
          className="px-2 py-1 text-xs rounded text-[var(--text-secondary)]
                     hover:text-[var(--text-primary)] bg-[var(--bg-primary)]
                     disabled:opacity-30 cursor-pointer"
        >
          撤销
        </button>
        <button
          onClick={handleClear}
          disabled={annotations.length === 0}
          className="px-2 py-1 text-xs rounded text-[var(--text-secondary)]
                     hover:text-[var(--text-primary)] bg-[var(--bg-primary)]
                     disabled:opacity-30 cursor-pointer"
        >
          清除
        </button>

        <div className="flex-1" />

        <button
          onClick={onCancel}
          className="px-2.5 py-1 text-xs rounded text-[var(--text-secondary)]
                     hover:text-[var(--text-primary)] cursor-pointer"
        >
          取消
        </button>
        <button
          onClick={handleComplete}
          className="px-3 py-1 text-xs rounded bg-[var(--accent)] text-white
                     hover:bg-[var(--accent-hover)] cursor-pointer"
        >
          完成标注
        </button>
      </div>

      {/* Canvas 区域 */}
      <div ref={containerRef} className="flex-1 overflow-auto p-3 relative">
        <canvas
          ref={canvasRef}
          className="max-w-full rounded-lg cursor-crosshair"
          onMouseDown={handleMouseDown}
          onMouseMove={handleMouseMove}
          onMouseUp={handleMouseUp}
          onMouseLeave={handleMouseUp}
        />

        {/* 文字输入弹出框 */}
        {editingAnnotation && (() => {
          const ann = annotations.find((a) => a.id === editingAnnotation);
          if (!ann) return null;
          const canvas = canvasRef.current;
          if (!canvas) return null;
          const rect = canvas.getBoundingClientRect();
          const container = containerRef.current;
          if (!container) return null;
          const containerRect = container.getBoundingClientRect();

          let px: number, py: number;
          if (ann.type === "rect") {
            px = (ann.x + (ann.w ?? 0)) * rect.width + (rect.left - containerRect.left);
            py = ann.y * rect.height + (rect.top - containerRect.top);
          } else {
            px = ann.x * rect.width + (rect.left - containerRect.left) + 10;
            py = ann.y * rect.height + (rect.top - containerRect.top);
          }

          return (
            <div
              className="absolute z-10 bg-[var(--bg-secondary)] border border-[var(--accent)]
                         rounded-lg shadow-lg p-2 min-w-[180px]"
              style={{ left: px, top: py }}
            >
              <input
                autoFocus
                value={editText}
                onChange={(e) => setEditText(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter") commitText();
                  if (e.key === "Escape") {
                    setAnnotations((prev) => prev.filter((a) => a.id !== editingAnnotation));
                    setEditingAnnotation(null);
                  }
                }}
                placeholder="输入批注..."
                className="w-full px-2 py-1 text-xs bg-[var(--bg-primary)] border border-[var(--border)]
                           rounded text-[var(--text-primary)] placeholder:text-[var(--text-secondary)]
                           focus:outline-none focus:border-[var(--accent)]"
              />
              <div className="flex justify-end gap-1 mt-1.5">
                <button
                  onClick={() => {
                    setAnnotations((prev) => prev.filter((a) => a.id !== editingAnnotation));
                    setEditingAnnotation(null);
                  }}
                  className="px-2 py-0.5 text-[10px] text-[var(--text-secondary)] cursor-pointer"
                >
                  取消
                </button>
                <button
                  onClick={commitText}
                  className="px-2 py-0.5 text-[10px] bg-[var(--accent)] text-white
                             rounded cursor-pointer"
                >
                  确定
                </button>
              </div>
            </div>
          );
        })()}
      </div>
    </div>
  );
}

// --- 绘制辅助函数 ---

function drawAnnotation(
  ctx: CanvasRenderingContext2D,
  ann: Annotation,
  w: number,
  h: number,
  isFinal: boolean,
) {
  const lineWidth = Math.max(2, w * 0.003);
  ctx.strokeStyle = "#f43f5e";
  ctx.fillStyle = "#f43f5e";
  ctx.lineWidth = lineWidth;
  ctx.setLineDash([]);

  switch (ann.type) {
    case "rect":
      ctx.strokeRect(ann.x * w, ann.y * h, (ann.w ?? 0) * w, (ann.h ?? 0) * h);
      break;
    case "arrow": {
      const x1 = ann.x * w, y1 = ann.y * h;
      const x2 = (ann.x + (ann.w ?? 0)) * w, y2 = (ann.y + (ann.h ?? 0)) * h;
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();
      drawArrowHead(ctx, x1, y1, x2, y2, w * 0.015);
      break;
    }
    case "freehand":
      if (ann.points && ann.points.length > 1) {
        ctx.beginPath();
        ctx.moveTo(ann.points[0].x * w, ann.points[0].y * h);
        for (let i = 1; i < ann.points.length; i++) {
          ctx.lineTo(ann.points[i].x * w, ann.points[i].y * h);
        }
        ctx.stroke();
      }
      break;
    case "text":
      break;
  }

  // 绘制文字标签
  if (ann.text) {
    const fontSize = Math.max(12, w * 0.018);
    ctx.font = `bold ${fontSize}px system-ui, sans-serif`;
    const metrics = ctx.measureText(ann.text);
    const padding = fontSize * 0.4;

    let tx: number, ty: number;
    if (ann.type === "rect") {
      tx = ann.x * w;
      ty = ann.y * h - padding;
    } else {
      tx = ann.x * w;
      ty = ann.y * h - padding;
    }

    // 文字背景
    ctx.fillStyle = "rgba(244, 63, 94, 0.85)";
    ctx.fillRect(
      tx - padding * 0.5,
      ty - fontSize,
      metrics.width + padding,
      fontSize + padding
    );

    // 文字
    ctx.fillStyle = "#ffffff";
    ctx.fillText(ann.text, tx, ty);
  }
}

function drawArrowHead(
  ctx: CanvasRenderingContext2D,
  fromX: number, fromY: number,
  toX: number, toY: number,
  size: number,
) {
  const angle = Math.atan2(toY - fromY, toX - fromX);
  ctx.beginPath();
  ctx.moveTo(toX, toY);
  ctx.lineTo(toX - size * Math.cos(angle - Math.PI / 6), toY - size * Math.sin(angle - Math.PI / 6));
  ctx.lineTo(toX - size * Math.cos(angle + Math.PI / 6), toY - size * Math.sin(angle + Math.PI / 6));
  ctx.closePath();
  ctx.fill();
}