import {
  useCallback,
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
  type CSSProperties,
  type PointerEvent as ReactPointerEvent,
} from 'react'
import { listPhotos, uploadPhoto, deletePhoto, fetchPhotoObjectUrl, type UploadError } from '../api/photos'

/* ════════════════════════════════════════════════════════════════
   照片墙 Photo Wall —— 互动式墙面照片展示。
   纯前端：照片/便签/装饰皆可拖拽、编辑，状态存 localStorage，可导出 PNG。
   设计文档见 docs（产品设计 v1.0）。本组件是其 React 重写版。
   ──────────────────────────────────────────────────────────────
   性能取舍：拖拽时直接改 DOM 的 transform（GPU 合成），不触发 React
   重渲染；松手后再一次性 commit 进状态。故拖拽过程中不得 setState。
   ════════════════════════════════════════════════════════════════ */

interface PhotoWallPageProps {
  /** 退出照片墙（清登录态 + 抹掉地址栏 #photo，回到导航页） */
  onExit: () => void
  /** 当前会话 JWT，供后续服务端图片接口使用（Task 6 正式消费） */
  token: string
}

type ElType = 'photo' | 'note' | 'tape' | 'sticker' | 'stamp' | 'doodle'

interface El {
  id: number
  type: ElType
  x: number
  y: number
  rot: number
  scale: number
  z: number
  // photo
  src?: string
  w?: number
  h?: number
  caption?: string
  fix?: 'tape' | 'pin' | 'tape2'
  fixColor?: string
  fixRot?: number
  // note
  text?: string
  color?: string
  /** 服务器图片 id（仅 type==='photo'），也是 localStorage 排版的 key */
  photoId?: string
  // sticker
  bg?: string
  // doodle
  path?: string
}

const STORAGE_KEY = 'photo-wall-state'
const HISTORY_LIMIT = 30
const H2C_SRC = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js'

const BACKGROUNDS = [
  { cls: 'pw-bg-cork', name: '软木板' },
  { cls: 'pw-bg-blackboard', name: '黑板' },
  { cls: 'pw-bg-wall', name: '白墙' },
  { cls: 'pw-bg-kraft', name: '牛皮纸' },
]
const PIN_COLORS = ['#E74C3C', '#3498DB', '#2ECC71', '#F1C40F', '#9B59B6', '#E67E22', '#1ABC9C', '#FF6FAE']
const NOTE_COLORS = ['#FFF9C4', '#C8E6C9', '#BBDEFB', '#F8BBD9', '#FFE0B2']
const TAPE_COLORS = [
  'rgba(255,224,102,0.55)', 'rgba(120,190,255,0.55)', 'rgba(255,120,120,0.55)',
  'rgba(130,220,150,0.55)', 'rgba(255,160,205,0.55)', 'rgba(255,190,120,0.55)',
]
const STICKERS = [
  '✨ 美好时光', '📸 拍立得', '🌸 春天', '☀️ 夏日', '🍂 秋天', '❄️ 冬日',
  '🎉 庆祝', '💕 最爱', '🌙 夜晚', '🏖️ 旅行', '👨‍👩‍👧 家人', '🐾 宠物',
]
const STAMP_TEXTS = ['MEMORIES', 'VINTAGE', '2024', 'PHOTO', 'LOVE', 'TRAVEL']

/* ── 小工具 ─────────────────────────────────────────────────── */
const rand = (a: number, b: number) => Math.random() * (b - a) + a
const randInt = (a: number, b: number) => Math.floor(rand(a, b + 1))
const pick = <T,>(arr: T[]): T => arr[randInt(0, arr.length - 1)]
const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v))

// #rrggbb 调亮/调暗（便签折角取底色更深 15%）。
function shade(hex: string, amt: number) {
  if (hex[0] !== '#' || hex.length < 7) return hex
  const ch = (i: number) =>
    clamp(Math.round(parseInt(hex.slice(i, i + 2), 16) + 255 * amt), 0, 255)
      .toString(16)
      .padStart(2, '0')
  return '#' + ch(1) + ch(3) + ch(5)
}

function transformOf(el: El, extraScale = 1) {
  return `translate(${el.x}px, ${el.y}px) rotate(${el.rot}deg) scale(${el.scale * extraScale})`
}

/** 每张照片的本地排版覆盖（按服务器图片 id 存浏览器） */
interface PhotoLayout {
  x: number
  y: number
  rot: number
  scale: number
  z: number
  w: number
  caption: string
}

interface SavedState {
  bgIndex: number
  decorations: El[]
  photoLayout: Record<string, PhotoLayout>
}

function loadInitial() {
  let decorations: El[] = []
  let photoLayout: Record<string, PhotoLayout> = {}
  let bgIndex = 0
  try {
    const raw = localStorage.getItem(STORAGE_KEY)
    if (raw) {
      const data = JSON.parse(raw) as Partial<SavedState> & { els?: El[] }
      if (typeof data.bgIndex === 'number') bgIndex = data.bgIndex
      if (Array.isArray(data.decorations)) {
        decorations = data.decorations
      } else if (Array.isArray(data.els)) {
        // 旧结构（照片带 base64 存本地）：只保留装饰，丢弃旧照片。
        decorations = data.els.filter((e) => e.type !== 'photo')
      }
      if (data.photoLayout && typeof data.photoLayout === 'object') {
        photoLayout = data.photoLayout
      }
    }
  } catch {
    /* 损坏的存档当作空墙 */
  }
  const nextId = decorations.reduce((m, e) => Math.max(m, e.id), 0) + 1
  const maxZ = Math.max(10, ...decorations.map((e) => e.z || 10))
  return { decorations, photoLayout, bgIndex, nextId, maxZ }
}

export function PhotoWallPage({ onExit, token }: PhotoWallPageProps) {
  const initial = useMemo(() => loadInitial(), [])

  const [els, setEls] = useState<El[]>(initial.decorations)
  // 每张图的本地排版（按服务器图片 id）。runtime 维护，保存时连同装饰一起落盘。
  const layoutRef = useRef<Record<string, PhotoLayout>>(initial.photoLayout)
  // 本组件创建的所有 objectURL，卸载时统一释放。
  const objUrls = useRef<string[]>([])
  const [bgIndex, setBgIndex] = useState(initial.bgIndex)
  const [menu, setMenu] = useState<{ x: number; y: number; id: number } | null>(null)
  const [editingId, setEditingId] = useState<number | null>(null)
  const [editText, setEditText] = useState('')
  const [decoOpen, setDecoOpen] = useState(false)
  const [customSticker, setCustomSticker] = useState('')
  const [doodleMode, setDoodleMode] = useState(false)
  const [dragHint, setDragHint] = useState(false)
  const [saveLabel, setSaveLabel] = useState('已保存')
  const [toast, setToast] = useState<string | null>(null)

  const wallRef = useRef<HTMLDivElement>(null)
  const nodeRefs = useRef(new Map<number, HTMLDivElement>())
  const menuRef = useRef<HTMLDivElement>(null)
  const fileRef = useRef<HTMLInputElement>(null)
  const idRef = useRef(initial.nextId)
  const zRef = useRef(initial.maxZ)
  const elsRef = useRef(els) // 给拖拽起点取快照用（避免闭包旧值）
  const undoRef = useRef<string[]>([])
  const redoRef = useRef<string[]>([])
  const doodleRef = useRef(false)
  const toastTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)

  // 拖拽起点取快照需要最新 els；ref 在 effect 里同步，避免渲染期写 ref。
  useEffect(() => {
    elsRef.current = els
  })

  const showToast = useCallback((msg: string) => {
    setToast(msg)
    clearTimeout(toastTimer.current)
    toastTimer.current = setTimeout(() => setToast(null), 1800)
  }, [])

  // 标记“有未保存改动”，由下方防抖 effect 在 1s 后落盘。
  const markDirty = useCallback(() => setSaveLabel('保存中…'), [])

  /* ── 历史栈 ──────────────────────────────────────────────── */
  const pushHistory = useCallback((prev: El[]) => {
    undoRef.current.push(JSON.stringify(prev))
    if (undoRef.current.length > HISTORY_LIMIT) undoRef.current.shift()
    redoRef.current.length = 0
  }, [])

  // 记一步历史并改状态。离散操作（增删改旋转）都走这里。
  const mutate = useCallback(
    (updater: (prev: El[]) => El[]) => {
      markDirty()
      setEls((prev) => {
        pushHistory(prev)
        return updater(prev)
      })
    },
    [pushHistory, markDirty],
  )

  const undo = useCallback(() => {
    markDirty()
    setEls((cur) => {
      if (!undoRef.current.length) return cur
      redoRef.current.push(JSON.stringify(cur))
      return JSON.parse(undoRef.current.pop() as string) as El[]
    })
  }, [markDirty])
  const redo = useCallback(() => {
    markDirty()
    setEls((cur) => {
      if (!redoRef.current.length) return cur
      undoRef.current.push(JSON.stringify(cur))
      return JSON.parse(redoRef.current.pop() as string) as El[]
    })
  }, [markDirty])

  /* ── 自动保存（防抖 1s）──────────────────────────────────────
     “保存中…”由各改动入口（mutate/undo/redo/拖拽/换背景）打标；
     本 effect 仅负责实际落盘并在完成后置“已保存”（均为异步，不级联渲染）。 */
  useEffect(() => {
    const t = setTimeout(() => {
      try {
        const decorations = els.filter((e) => e.type !== 'photo')
        // 从已知排版起步而非清空：未加载完/取图失败的照片其排版得以保留，
        // 已加载或移动过的照片在下面覆盖各自的 key（删除时 removeEl 已从 layoutRef 删键）。
        const photoLayout: Record<string, PhotoLayout> = { ...layoutRef.current }
        for (const e of els) {
          if (e.type === 'photo' && e.photoId) {
            photoLayout[e.photoId] = {
              x: e.x, y: e.y, rot: e.rot, scale: e.scale, z: e.z,
              w: e.w ?? 160, caption: e.caption ?? '',
            }
          }
        }
        layoutRef.current = photoLayout
        localStorage.setItem(STORAGE_KEY, JSON.stringify({ bgIndex, decorations, photoLayout }))
        setSaveLabel('已保存')
      } catch {
        setSaveLabel('保存失败')
        showToast('保存失败：存储空间可能已满')
      }
    }, 1000)
    return () => clearTimeout(t)
  }, [els, bgIndex, showToast])

  /* ── 懒加载 html2canvas（导出用，非阻塞）──────────────────── */
  useEffect(() => {
    if (document.querySelector(`script[src="${H2C_SRC}"]`)) return
    const s = document.createElement('script')
    s.src = H2C_SRC
    s.async = true
    document.head.appendChild(s)
  }, [])

  /* ── 元素创建 ────────────────────────────────────────────── */
  const spawnPos = useCallback((spread = 0) => {
    const r = wallRef.current?.getBoundingClientRect()
    const w = r?.width ?? window.innerWidth
    const h = r?.height ?? window.innerHeight
    return {
      x: rand(w * 0.12, w * 0.7) + rand(-spread, spread),
      y: rand(h * 0.12, h * 0.65) + rand(-spread, spread),
    }
  }, [])

  const addEl = useCallback(
    (partial: Omit<El, 'id' | 'z'>) => {
      const el: El = { ...partial, id: idRef.current++, z: ++zRef.current }
      mutate((prev) => [...prev, el])
    },
    [mutate],
  )

  // 登录后从服务器拉本用户图片：取字节为 objectURL，套用本地排版或自动散落。
  useEffect(() => {
    if (!token) return
    let alive = true
    ;(async () => {
      try {
        // 重新加载前清掉旧会话的照片，避免重复堆叠与 objectURL 泄漏
        for (const u of objUrls.current) URL.revokeObjectURL(u)
        objUrls.current = []
        setEls((prev) => prev.filter((e) => e.type !== 'photo'))
        const { items } = await listPhotos(token)
        for (const item of items) {
          let url: string
          try {
            url = await fetchPhotoObjectUrl(token, item.id)
          } catch {
            continue
          }
          if (!alive) {
            URL.revokeObjectURL(url)
            return
          }
          objUrls.current.push(url)
          const layout = layoutRef.current[item.id]
          // 取自然尺寸算宽高比；无本地排版时随机散落。
          const dims = await new Promise<{ w: number; h: number }>((resolve) => {
            const img = new Image()
            img.onload = () => resolve({ w: img.naturalWidth || 1, h: img.naturalHeight || 1 })
            img.onerror = () => resolve({ w: 1, h: 1 })
            img.src = url
          })
          if (!alive) return
          const ratio = dims.h / dims.w
          const roll = Math.random()
          const fix: El['fix'] = roll < 0.34 ? 'tape' : roll < 0.67 ? 'pin' : 'tape2'
          const pos = spawnPos(40)
          const base: El = layout
            ? {
                id: idRef.current++, type: 'photo', src: url, photoId: item.id,
                w: layout.w, h: Math.round(layout.w * ratio),
                x: layout.x, y: layout.y, rot: layout.rot, scale: layout.scale,
                z: layout.z, caption: layout.caption,
                fix, fixColor: pick(PIN_COLORS), fixRot: rand(-3, 3),
              }
            : {
                id: idRef.current++, type: 'photo', src: url, photoId: item.id,
                w: 170, h: Math.round(170 * ratio),
                x: pos.x, y: pos.y, rot: rand(-15, 15), scale: 1, z: ++zRef.current,
                caption: '', fix, fixColor: pick(PIN_COLORS), fixRot: rand(-3, 3),
              }
          if (layout) zRef.current = Math.max(zRef.current, layout.z)
          setEls((prev) => [...prev, base])
        }
      } catch {
        if (alive) showToast('图片加载失败（请重新登录或检查网络）')
      }
    })()
    return () => {
      alive = false
    }
    // 仅在挂载/换 token 时跑一次
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token])

  // 卸载时释放所有 objectURL
  useEffect(() => {
    return () => {
      for (const u of objUrls.current) URL.revokeObjectURL(u)
    }
  }, [])

  const makeNote = useCallback(() => {
    const pos = spawnPos(20)
    addEl({ type: 'note', text: '', color: pick(NOTE_COLORS), x: pos.x, y: pos.y, rot: rand(-6, 6), scale: 1 })
  }, [addEl, spawnPos])

  const makeTape = useCallback(() => {
    const pos = spawnPos(20)
    addEl({ type: 'tape', w: randInt(80, 140), color: pick(TAPE_COLORS), x: pos.x, y: pos.y, rot: rand(-20, 20), scale: 1 })
  }, [addEl, spawnPos])

  const makeSticker = useCallback(
    (text: string, bg = '') => {
      const pos = spawnPos(20)
      addEl({ type: 'sticker', text, bg, x: pos.x, y: pos.y, rot: rand(-8, 8), scale: 1 })
    },
    [addEl, spawnPos],
  )

  const makeStamp = useCallback(() => {
    const pos = spawnPos(20)
    addEl({
      type: 'stamp', text: pick(STAMP_TEXTS),
      color: Math.random() < 0.5 ? '#C0392B' : '#1A237E',
      x: pos.x, y: pos.y, rot: rand(-12, 12), scale: 1,
    })
  }, [addEl, spawnPos])

  /* ── 图片上传（按钮 / 拖入 / 粘贴）─────────────────────────── */
  const handleFiles = useCallback(
    (files: FileList | File[]) => {
      const list = Array.from(files)
      const imgs = list.filter((f) => f.type.startsWith('image/'))
      if (!imgs.length) {
        if (list.some((f) => /heic/i.test(f.type) || /\.heic$/i.test(f.name)))
          showToast('HEIC 格式需先转换为 JPG/PNG')
        return
      }
      imgs.forEach((file) => {
        if (file.size > 10 * 1024 * 1024) showToast('图片较大，建议压缩后上传')
        const reader = new FileReader()
        reader.onload = (ev) => {
          const src = ev.target?.result as string
          // 满 10 张直接拦下
          const count = elsRef.current.filter((e) => e.type === 'photo').length
          if (count >= 10) {
            showToast('每位用户最多 10 张照片')
            return
          }
          uploadPhoto(token, src)
            .then((id) => {
              const img = new Image()
              img.onload = () => {
                const w = randInt(140, 200)
                const h = Math.round(w * (img.height / img.width))
                const pos = spawnPos(40)
                const roll = Math.random()
                const fix: El['fix'] = roll < 0.34 ? 'tape' : roll < 0.67 ? 'pin' : 'tape2'
                addEl({
                  type: 'photo', src, photoId: id, w, h,
                  x: pos.x, y: pos.y, rot: rand(-15, 15), scale: 1,
                  caption: '', fix, fixColor: pick(PIN_COLORS), fixRot: rand(-3, 3),
                })
              }
              img.src = src
            })
            .catch((err: Error) => {
              const reason = err.message as UploadError
              showToast(
                reason === 'full' ? '每位用户最多 10 张照片'
                  : reason === 'too-large' ? '图片过大（上限 8MB）'
                    : reason === 'bad-type' ? '不支持的图片格式'
                      : '上传失败',
              )
            })
        }
        reader.readAsDataURL(file)
      })
    },
    [addEl, spawnPos, showToast, token],
  )

  useEffect(() => {
    const onPaste = (e: ClipboardEvent) => {
      const items = e.clipboardData?.items
      if (!items) return
      const files: File[] = []
      for (const it of items) if (it.type.startsWith('image/')) {
        const f = it.getAsFile()
        if (f) files.push(f)
      }
      if (files.length) handleFiles(files)
    }
    window.addEventListener('paste', onPaste)
    return () => window.removeEventListener('paste', onPaste)
  }, [handleFiles])

  /* ── 拖拽（Pointer Events，鼠标 + 触摸统一）──────────────────
     拖拽中只改 DOM，不 setState；松手后一次性 commit。 */
  const onElPointerDown = useCallback(
    (e: ReactPointerEvent, el: El) => {
      if (e.button === 2 || doodleRef.current) return
      const tgt = e.target as HTMLElement
      if (tgt.tagName === 'INPUT' || tgt.tagName === 'TEXTAREA') return
      e.preventDefault()
      const node = nodeRefs.current.get(el.id)
      if (!node) return

      const startX = e.clientX
      const startY = e.clientY
      const origX = el.x
      const origY = el.y
      let curX = origX
      let curY = origY
      let moved = false
      const newZ = ++zRef.current
      node.style.zIndex = String(newZ)
      node.classList.add('pw-dragging')
      const snapshot = JSON.stringify(elsRef.current)

      // 触摸长按 = 右键菜单
      let longPress: ReturnType<typeof setTimeout> | undefined
      if (e.pointerType === 'touch') {
        longPress = setTimeout(() => {
          cleanup()
          node.style.transform = transformOf(el)
          setMenu({ x: startX, y: startY, id: el.id })
        }, 500)
      }

      const move = (ev: PointerEvent) => {
        const dx = ev.clientX - startX
        const dy = ev.clientY - startY
        if (Math.abs(dx) > 4 || Math.abs(dy) > 4) {
          moved = true
          clearTimeout(longPress)
        }
        curX = origX + dx
        curY = origY + dy
        node.style.transform = transformOf({ ...el, x: curX, y: curY }, 1.02)
      }
      const cleanup = () => {
        clearTimeout(longPress)
        node.classList.remove('pw-dragging')
        window.removeEventListener('pointermove', move)
        window.removeEventListener('pointerup', up)
      }
      const up = () => {
        cleanup()
        if (moved) {
          markDirty()
          undoRef.current.push(snapshot)
          if (undoRef.current.length > HISTORY_LIMIT) undoRef.current.shift()
          redoRef.current.length = 0
          setEls((prev) => prev.map((p) => (p.id === el.id ? { ...p, x: curX, y: curY, z: newZ } : p)))
        } else {
          // 纯点击：仅把层级提到最前（不记历史）
          setEls((prev) => prev.map((p) => (p.id === el.id ? { ...p, z: newZ } : p)))
        }
      }
      window.addEventListener('pointermove', move)
      window.addEventListener('pointerup', up)
    },
    [markDirty],
  )

  /* ── 右键菜单动作 ────────────────────────────────────────── */
  const rotate = (id: number, d: number) =>
    mutate((p) => p.map((e) => (e.id === id ? { ...e, rot: e.rot + d } : e)))
  const scaleEl = (id: number, d: number) =>
    mutate((p) => p.map((e) => (e.id === id ? { ...e, scale: clamp(e.scale + d, 0.4, 4) } : e)))
  const resizePhoto = (id: number, d: number) =>
    mutate((p) =>
      p.map((e) => {
        if (e.id !== id || !e.w || !e.h) return e
        const ratio = e.h / e.w
        const w = clamp(e.w + d, 80, 600)
        return { ...e, w, h: Math.round(w * ratio) }
      }),
    )
  const toFront = (id: number) =>
    mutate((p) => p.map((e) => (e.id === id ? { ...e, z: ++zRef.current } : e)))
  const toBack = (id: number) =>
    mutate((p) => {
      const minZ = Math.min(...p.map((e) => e.z))
      return p.map((e) => (e.id === id ? { ...e, z: minZ - 1 } : e))
    })
  const recolorNote = (id: number, color: string) =>
    mutate((p) => p.map((e) => (e.id === id ? { ...e, color } : e)))
  const setRotation = (id: number, deg: number) =>
    mutate((p) => p.map((e) => (e.id === id ? { ...e, rot: deg } : e)))
  const setScale = (id: number, s: number) =>
    mutate((p) => p.map((e) => (e.id === id ? { ...e, scale: s } : e)))
  const removeEl = (id: number) => {
    const target = elsRef.current.find((e) => e.id === id)
    if (target?.type === 'photo' && target.photoId) {
      deletePhoto(token, target.photoId).catch(() => {})
      delete layoutRef.current[target.photoId]
      if (target.src?.startsWith('blob:')) {
        URL.revokeObjectURL(target.src)
        objUrls.current = objUrls.current.filter((u) => u !== target.src)
      }
    }
    mutate((p) => p.filter((e) => e.id !== id))
    nodeRefs.current.delete(id)
    setMenu(null)
  }

  // 菜单贴边自动翻转，避免超出视口
  useLayoutEffect(() => {
    if (!menu || !menuRef.current) return
    const m = menuRef.current
    const mw = m.offsetWidth
    const mh = m.offsetHeight
    let px = menu.x
    let py = menu.y
    if (px + mw > window.innerWidth) px = menu.x - mw
    if (py + mh > window.innerHeight) py = menu.y - mh
    m.style.left = Math.max(4, px) + 'px'
    m.style.top = Math.max(4, py) + 'px'
  }, [menu])

  // 点空白处关闭菜单/下拉
  useEffect(() => {
    const onDown = (e: globalThis.PointerEvent) => {
      const t = e.target as HTMLElement
      if (!t.closest('.pw-menu')) setMenu(null)
      if (!t.closest('.pw-deco')) setDecoOpen(false)
    }
    window.addEventListener('pointerdown', onDown)
    return () => window.removeEventListener('pointerdown', onDown)
  }, [])

  /* ── 双击编辑（照片标注 / 便签）──────────────────────────── */
  const startEdit = (el: El) => {
    setEditText(el.type === 'photo' ? el.caption ?? '' : el.text ?? '')
    setEditingId(el.id)
  }
  const commitEdit = (id: number) => {
    const val = editText
    mutate((p) =>
      p.map((e) =>
        e.id === id ? (e.type === 'photo' ? { ...e, caption: val.trim() } : { ...e, text: val }) : e,
      ),
    )
    setEditingId(null)
  }

  /* ── 手绘箭头：进入模式后在画布上拖动绘制 ──────────────────── */
  const startDoodle = () => {
    doodleRef.current = true
    setDoodleMode(true)
    setDecoOpen(false)
    showToast('在画布上按住拖动，绘制一条箭头')
  }
  const onWallPointerDown = (e: ReactPointerEvent) => {
    if (!doodleRef.current) return
    const t = e.target as HTMLElement
    if (t !== wallRef.current && !t.classList.contains('pw-drophint')) return
    const r = wallRef.current!.getBoundingClientRect()
    const sx = e.clientX - r.left
    const sy = e.clientY - r.top
    let ex = sx
    let ey = sy
    const move = (ev: PointerEvent) => {
      ex = ev.clientX - r.left
      ey = ev.clientY - r.top
    }
    const up = () => {
      window.removeEventListener('pointermove', move)
      window.removeEventListener('pointerup', up)
      doodleRef.current = false
      setDoodleMode(false)
      if (Math.hypot(ex - sx, ey - sy) < 12) return
      const pad = 12
      const minX = Math.min(sx, ex) - pad
      const minY = Math.min(sy, ey) - pad
      const w = Math.abs(ex - sx) + pad * 2
      const h = Math.abs(ey - sy) + pad * 2
      const x1 = sx - minX
      const y1 = sy - minY
      const x2 = ex - minX
      const y2 = ey - minY
      const mx = (x1 + x2) / 2 + (y2 - y1) * 0.18
      const my = (y1 + y2) / 2 - (x2 - x1) * 0.18
      addEl({
        type: 'doodle', x: minX, y: minY, w, h,
        path: `M${x1},${y1} Q${mx},${my} ${x2},${y2}`,
        color: Math.random() < 0.5 ? '#E57373' : '#42A5F5',
        rot: 0, scale: 1,
      })
    }
    window.addEventListener('pointermove', move)
    window.addEventListener('pointerup', up)
  }

  /* ── 拖入图片 ────────────────────────────────────────────── */
  const onDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    setDragHint(true)
  }
  const onDragLeave = (e: React.DragEvent) => {
    if (wallRef.current?.contains(e.relatedTarget as Node)) return
    setDragHint(false)
  }
  const onDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setDragHint(false)
    if (e.dataTransfer.files.length) handleFiles(e.dataTransfer.files)
  }

  /* ── 清空 / 背景 / 导出 ──────────────────────────────────── */
  const clearWall = () => {
    if (!els.length) return
    if (confirm('确定清空整面照片墙吗？')) {
      mutate(() => [])
      nodeRefs.current.clear()
    }
  }
  const cycleBg = () => { markDirty(); setBgIndex((i) => (i + 1) % BACKGROUNDS.length) }

  const exportImage = () => {
    type H2C = (el: HTMLElement, opts: Record<string, unknown>) => Promise<HTMLCanvasElement>
    const h2c = (window as unknown as { html2canvas?: H2C }).html2canvas
    if (!h2c || !wallRef.current) {
      showToast('导出库加载中，请稍候重试')
      return
    }
    setMenu(null)
    showToast('正在生成图片…')
    h2c(wallRef.current, { backgroundColor: null, scale: window.devicePixelRatio || 1, useCORS: true })
      .then((canvas) => {
        const d = new Date()
        const p = (n: number) => String(n).padStart(2, '0')
        const ts = `${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}`
        const a = document.createElement('a')
        a.download = `photo-wall-${ts}.png`
        a.href = canvas.toDataURL('image/png')
        a.click()
        showToast('已导出 PNG')
      })
      .catch(() => showToast('导出失败'))
  }

  /* ── 键盘快捷键 ──────────────────────────────────────────── */
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      const tag = (document.activeElement as HTMLElement | null)?.tagName
      if (tag === 'INPUT' || tag === 'TEXTAREA') return
      const mod = e.ctrlKey || e.metaKey
      const k = e.key.toLowerCase()
      if (mod && k === 'z' && !e.shiftKey) { e.preventDefault(); undo() }
      else if (mod && (k === 'y' || (k === 'z' && e.shiftKey))) { e.preventDefault(); redo() }
      else if (e.key === 'Escape') { setMenu(null); doodleRef.current = false; setDoodleMode(false) }
    }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  }, [undo, redo])

  /* ── 渲染单个元素 ────────────────────────────────────────── */
  const setNodeRef = (id: number) => (n: HTMLDivElement | null) => {
    if (n) nodeRefs.current.set(id, n)
    else nodeRefs.current.delete(id)
  }

  function renderInner(el: El) {
    switch (el.type) {
      case 'photo':
        return (
          <>
            <div className="pw-imgwrap" style={{ height: el.h }}>
              <img src={el.src} alt="" />
            </div>
            {editingId === el.id ? (
              <input
                className="pw-caption-input"
                autoFocus
                value={editText}
                placeholder="写点什么…"
                onChange={(e) => setEditText(e.target.value)}
                onBlur={() => commitEdit(el.id)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') { e.preventDefault(); commitEdit(el.id) }
                  e.stopPropagation()
                }}
              />
            ) : (
              <div className="pw-caption">{el.caption}</div>
            )}
            {el.fix === 'pin' && <div className="pw-fix-pin" style={{ background: el.fixColor }} />}
            {el.fix === 'tape2' && (
              <>
                <div className="pw-fix-tape pw-left" />
                <div className="pw-fix-tape pw-right" />
              </>
            )}
            {el.fix === 'tape' && (
              <div className="pw-fix-tape" style={{ transform: `translateX(-50%) rotate(${el.fixRot}deg)` }} />
            )}
          </>
        )
      case 'note':
        return (
          <>
            {editingId === el.id ? (
              <textarea
                className="pw-note-input"
                autoFocus
                value={editText}
                onChange={(e) => setEditText(e.target.value)}
                onBlur={() => commitEdit(el.id)}
                onKeyDown={(e) => e.stopPropagation()}
              />
            ) : (
              <div style={{ opacity: el.text ? 1 : 0.45 }}>{el.text || '双击编辑…'}</div>
            )}
            <div
              className="pw-note-fold"
              style={{ borderWidth: '0 0 20px 20px', borderColor: `transparent transparent ${shade(el.color || '#fff', -0.15)} transparent` }}
            />
          </>
        )
      case 'stamp':
        return (
          <svg width="110" height="110" viewBox="0 0 110 110" style={{ opacity: 0.75 }}>
            <circle cx="55" cy="55" r="50" fill="none" stroke={el.color} strokeWidth="4" />
            <circle cx="55" cy="55" r="40" fill="none" stroke={el.color} strokeWidth="1.5" />
            <text x="55" y="61" textAnchor="middle" fill={el.color} fontFamily="var(--font-sans)" fontSize="15" fontWeight="700" letterSpacing="2">
              {el.text}
            </text>
          </svg>
        )
      case 'doodle':
        return (
          <svg width={el.w} height={el.h} viewBox={`0 0 ${el.w} ${el.h}`}>
            <defs>
              <marker id={`pw-ah-${el.id}`} markerWidth="10" markerHeight="10" refX="7" refY="3" orient="auto" markerUnits="strokeWidth">
                <path d="M0,0 L8,3 L0,6 Z" fill={el.color} />
              </marker>
            </defs>
            <path d={el.path} fill="none" stroke={el.color} strokeWidth="3" strokeLinecap="round" markerEnd={`url(#pw-ah-${el.id})`} />
          </svg>
        )
      case 'sticker':
        return el.text
      case 'tape':
        return null
    }
  }

  function elClass(el: El) {
    const base = 'pw-el'
    const byType: Record<ElType, string> = {
      photo: 'pw-photo', note: 'pw-note', tape: 'pw-tape',
      sticker: 'pw-sticker', stamp: 'pw-stamp', doodle: 'pw-doodle',
    }
    return `${base} ${byType[el.type]}`
  }

  function elStyle(el: El): CSSProperties {
    const s: CSSProperties = { transform: transformOf(el), zIndex: el.z }
    if (el.type === 'photo') s.width = el.w
    if (el.type === 'tape') {
      s.width = el.w
      s.background = `repeating-linear-gradient(90deg, rgba(255,255,255,0.2) 0 2px, transparent 2px 4px), ${el.color}`
    }
    if (el.type === 'note') s.background = el.color
    if (el.type === 'sticker' && el.bg) s.background = el.bg
    if (el.type === 'doodle') { s.width = el.w; s.height = el.h }
    return s
  }

  const menuEl = menu ? els.find((e) => e.id === menu.id) : null

  return (
    <div className="pw-root">
      {/* ── 工具栏 ── */}
      <div className="pw-toolbar">
        <span className="pw-logo">📸 Photo Wall</span>
        <button className="pw-tbtn" onClick={() => fileRef.current?.click()}>上传照片</button>
        <button className="pw-tbtn" onClick={makeNote}>添加便签</button>

        <div className="pw-deco" style={{ position: 'relative' }}>
          <button
            className="pw-tbtn"
            onClick={(e) => { e.stopPropagation(); setDecoOpen((o) => !o) }}
          >
            添加装饰 ▾
          </button>
          {decoOpen && (
            <div className="pw-pop" style={{ position: 'absolute', top: 'calc(100% + 6px)', left: 0, minWidth: 200, zIndex: 31 }}>
              <div className="pw-item" onClick={() => { makeTape(); setDecoOpen(false) }}>🎀 胶带条</div>
              <div className="pw-sep" />
              <div className="pw-grid">
                {STICKERS.map((s) => (
                  <div key={s} className="pw-item" onClick={() => { makeSticker(s); setDecoOpen(false) }}>{s}</div>
                ))}
              </div>
              <div className="pw-rowin">
                <input
                  value={customSticker}
                  placeholder="自定义贴纸文字…"
                  maxLength={20}
                  onChange={(e) => setCustomSticker(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && customSticker.trim()) {
                      makeSticker(customSticker.trim()); setCustomSticker(''); setDecoOpen(false)
                    }
                  }}
                />
                <button
                  onClick={() => {
                    if (customSticker.trim()) { makeSticker(customSticker.trim()); setCustomSticker(''); setDecoOpen(false) }
                  }}
                >
                  加
                </button>
              </div>
              <div className="pw-sep" />
              <div className="pw-item" onClick={() => { makeStamp(); setDecoOpen(false) }}>🔖 印章</div>
              <div className="pw-item" onClick={startDoodle}>✏️ 手绘箭头（拖动绘制）</div>
            </div>
          )}
        </div>

        <button className="pw-tbtn pw-danger" onClick={clearWall}>清空画布</button>

        <span style={{ flex: 1 }} />

        <span className="pw-save">{saveLabel}</span>
        <button className="pw-tbtn" onClick={exportImage}>导出图片</button>
        <button className="pw-tbtn" onClick={cycleBg}>背景：{BACKGROUNDS[bgIndex].name}</button>
        <button className="pw-tbtn pw-danger" onClick={onExit}>退出</button>
      </div>

      {/* ── 画布 ── */}
      <div
        ref={wallRef}
        className={`pw-wall ${BACKGROUNDS[bgIndex].cls}`}
        style={doodleMode ? { cursor: 'crosshair' } : undefined}
        onPointerDown={onWallPointerDown}
        onDragOver={onDragOver}
        onDragEnter={onDragOver}
        onDragLeave={onDragLeave}
        onDrop={onDrop}
        onContextMenu={(e) => { if (e.target === wallRef.current) e.preventDefault() }}
      >
        {els.map((el) => (
          <div
            key={el.id}
            ref={setNodeRef(el.id)}
            className={elClass(el)}
            style={elStyle(el)}
            onPointerDown={(e) => onElPointerDown(e, el)}
            onDoubleClick={(e) => {
              if (el.type === 'photo' || el.type === 'note') { e.stopPropagation(); startEdit(el) }
            }}
            onContextMenu={(e) => {
              e.preventDefault()
              e.stopPropagation()
              setMenu({ x: e.clientX, y: e.clientY, id: el.id })
            }}
          >
            {renderInner(el)}
          </div>
        ))}
        {dragHint && <div className="pw-drophint">拖入图片即可添加到照片墙</div>}
      </div>

      {/* ── 右键菜单 ── */}
      {menu && menuEl && (
        <div ref={menuRef} className="pw-menu pw-pop" style={{ left: menu.x, top: menu.y, minWidth: 170 }}>
          {menuEl.type !== 'doodle' && (
            <>
              <div className="pw-item" onClick={() => { rotate(menu.id, 15); setMenu(null) }}>旋转 +15°</div>
              <div className="pw-item" onClick={() => { rotate(menu.id, -15); setMenu(null) }}>旋转 -15°</div>
              {menuEl.type === 'photo' ? (
                <>
                  <div className="pw-item" onClick={() => { resizePhoto(menu.id, 30); setMenu(null) }}>放大</div>
                  <div className="pw-item" onClick={() => { resizePhoto(menu.id, -30); setMenu(null) }}>缩小</div>
                </>
              ) : (
                <>
                  <div className="pw-item" onClick={() => { scaleEl(menu.id, 0.25); setMenu(null) }}>放大</div>
                  <div className="pw-item" onClick={() => { scaleEl(menu.id, -0.25); setMenu(null) }}>缩小</div>
                </>
              )}
              <div className="pw-sep" />
            </>
          )}
          <div className="pw-item" onClick={() => { toFront(menu.id); setMenu(null) }}>移到最前</div>
          <div className="pw-item" onClick={() => { toBack(menu.id); setMenu(null) }}>移到最后</div>
          {menuEl.type === 'note' && (
            <>
              <div className="pw-sep" />
              <div className="pw-colorrow">
                {NOTE_COLORS.map((c) => (
                  <div
                    key={c}
                    className="pw-sw"
                    style={{ background: c }}
                    onClick={() => { recolorNote(menu.id, c); setMenu(null) }}
                  />
                ))}
              </div>
            </>
          )}
          <div className="pw-sep" />
          <div className="pw-preset">
            <span className="pw-preset-label">旋转</span>
            {[0, 15, 30, 45, 90].map((d) => (
              <button key={d} className="pw-chip" onClick={() => { setRotation(menu.id, d); setMenu(null) }}>{d}°</button>
            ))}
          </div>
          <div className="pw-preset">
            <span className="pw-preset-label">比例</span>
            {[0.5, 0.75, 1, 1.5, 2].map((s) => (
              <button key={s} className="pw-chip" onClick={() => { setScale(menu.id, s); setMenu(null) }}>{s}×</button>
            ))}
          </div>
          <div className="pw-sep" />
          <div className="pw-item pw-danger" onClick={() => removeEl(menu.id)}>
            <span>删除</span>
            <span className="pw-kbd">Del</span>
          </div>
        </div>
      )}

      {toast && <div className="pw-toast">{toast}</div>}

      <input ref={fileRef} type="file" accept="image/*" multiple style={{ display: 'none' }}
        onChange={(e) => { if (e.target.files) handleFiles(e.target.files); e.target.value = '' }} />
    </div>
  )
}