<script setup lang="ts">
import { computed, onMounted, ref, nextTick } from 'vue'
import type { PlayerTreeNode } from '@engine/types'
import dagre from 'dagre'

const props = defineProps<{
  node: PlayerTreeNode | null
  scenes?: Record<string, { thumbnail?: string }>
}>()

const emit = defineEmits<{
  selectScene: [sceneId: string]
}>()

interface FlowNode {
  id: string
  sceneId: string
  label: string
  thumbnail?: string
  visited: boolean
  isMystery: boolean
  locked: boolean
  lockHint?: string
  x: number
  y: number
  w: number
  h: number
}

interface FlowEdge {
  from: string
  to: string
  visited: boolean
  points: { x: number; y: number }[]
}

const nodes = ref<FlowNode[]>([])
const edges = ref<FlowEdge[]>([])
const containerW = ref(800)
const containerH = ref(400)

function buildFlow(root: PlayerTreeNode) {
  const dagreNodes: { id: string; sceneId: string; thumbnail?: string; parent: string | null; label: string; visited: boolean; isMystery: boolean; locked: boolean; lockHint?: string }[] = []
  const dagreEdges: { from: string; to: string; visited: boolean }[] = []

  function walk(node: PlayerTreeNode, parentId: string | null) {
    if (node.visited) {
      const dagreId = parentId ? `${parentId}/${node.sceneId}` : node.sceneId
      dagreNodes.push({
        id: dagreId,
        sceneId: node.sceneId,
        thumbnail: props.scenes?.[node.sceneId]?.thumbnail,
        parent: parentId,
        label: node.label,
        visited: true,
        isMystery: false,
        locked: node.locked,
        lockHint: node.lockHint,
      })
      if (parentId) {
        dagreEdges.push({ from: parentId, to: dagreId, visited: true })
      }

      const unvisited: PlayerTreeNode[] = []
      for (const child of node.children) {
        if (child.visited) {
          walk(child, dagreId)
        } else {
          unvisited.push(child)
        }
      }

      if (unvisited.length > 0) {
        const mysteryId = `${dagreId}/__mystery`
        dagreNodes.push({
          id: mysteryId,
          sceneId: '',
          parent: dagreId,
          label: '? ?',
          visited: false,
          isMystery: true,
          locked: true,
        })
        dagreEdges.push({ from: dagreId, to: mysteryId, visited: false })
      }
    }
  }

  walk(root, null)

  if (dagreNodes.length === 0) return

  const g = new dagre.graphlib.Graph()
  g.setGraph({ rankdir: 'LR', nodesep: 40, ranksep: 80, marginx: 24, marginy: 24 })
  g.setDefaultEdgeLabel(() => ({}))

  const baseW = 128
  const baseH = 40
  const thumbH = 78

  for (const n of dagreNodes) {
    const hasThumb = !!n.thumbnail
    g.setNode(n.id, { width: hasThumb ? baseW + 20 : baseW, height: hasThumb ? baseH + thumbH + 8 : baseH })
  }
  for (const e of dagreEdges) {
    g.setEdge(e.from, e.to)
  }

  dagre.layout(g)

  const resultNodes: FlowNode[] = dagreNodes.map((n) => {
    const pos = g.node(n.id)
    const hasThumb = !!n.thumbnail
    const nw = hasThumb ? baseW + 20 : baseW
    const nh = hasThumb ? baseH + thumbH + 8 : baseH
    return {
      id: n.id,
      sceneId: n.sceneId,
      thumbnail: n.thumbnail,
      label: n.label,
      visited: n.visited,
      isMystery: n.isMystery,
      locked: n.locked,
      lockHint: n.lockHint,
      x: pos.x - nw / 2,
      y: pos.y - nh / 2,
      w: nw,
      h: nh,
    }
  })

  const resultEdges: FlowEdge[] = dagreEdges.map((e) => {
    const edge = g.edge(e.from, e.to)
    return {
      from: e.from,
      to: e.to,
      visited: e.visited,
      points: edge.points || [],
    }
  })

  nodes.value = resultNodes
  edges.value = resultEdges

  const maxX = resultNodes.reduce((m, n) => Math.max(m, n.x + n.w), 0) + 40
  const maxY = resultNodes.reduce((m, n) => Math.max(m, n.y + n.h), 0) + 40
  containerW.value = Math.max(400, maxX)
  containerH.value = Math.max(100, maxY)
}

function buildFromRoot() {
  if (props.node) buildFlow(props.node)
}

onMounted(() => {
  nextTick(buildFromRoot)
})

function edgePath(e: FlowEdge): string {
  if (e.points.length < 2) return ''
  const r = 6
  let d = `M ${e.points[0].x} ${e.points[0].y}`

  for (let i = 1; i < e.points.length - 1; i++) {
    const prev = e.points[i - 1]
    const curr = e.points[i]
    const next = e.points[i + 1]

    const dx1 = curr.x - prev.x
    const dy1 = curr.y - prev.y
    const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1) || 1

    const dx2 = next.x - curr.x
    const dy2 = next.y - curr.y
    const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1

    const rx = Math.min(r, len1 / 2, len2 / 2)
    const ax = curr.x - (dx1 / len1) * rx
    const ay = curr.y - (dy1 / len1) * rx
    const bx = curr.x + (dx2 / len2) * rx
    const by = curr.y + (dy2 / len2) * rx

    d += ` L ${ax} ${ay} Q ${curr.x} ${curr.y} ${bx} ${by}`
  }

  const last = e.points[e.points.length - 1]
  d += ` L ${last.x} ${last.y}`
  return d
}

const svgW = computed(() => containerW.value)
const svgH = computed(() => containerH.value)
</script>

<template>
  <div class="tree-flow">
    <div v-if="!node || nodes.length === 0" class="flow-empty">暂无故事数据</div>
    <svg
      v-else
      class="flow-svg"
      :viewBox="`0 0 ${svgW} ${svgH}`"
      :width="svgW"
      :height="svgH"
    >
      <g
        v-for="edge in edges"
        :key="edge.from + '-' + edge.to"
        class="flow-edge-group"
      >
        <path
          :d="edgePath(edge)"
          fill="none"
          :stroke="edge.visited ? '#c9a84c' : '#333'"
          :stroke-width="edge.visited ? 1.5 : 1"
          :stroke-dasharray="edge.visited ? '' : '4 3'"
        />
        <polygon
          v-if="edge.points.length >= 2"
          :points="(() => {
            const pts = edge.points
            const last = pts[pts.length - 1]
            const prev = pts[pts.length - 2]
            const angle = Math.atan2(last.y - prev.y, last.x - prev.x)
            const s = 5
            return [
              `${last.x + Math.cos(angle) * s} ${last.y + Math.sin(angle) * s}`,
              `${last.x + Math.cos(angle + 2.5) * s} ${last.y + Math.sin(angle + 2.5) * s}`,
              `${last.x + Math.cos(angle - 2.5) * s} ${last.y + Math.sin(angle - 2.5) * s}`,
            ].join(' ')
          })()"
          :fill="edge.visited ? '#c9a84c' : '#333'"
        />
      </g>
    </svg>

    <div class="flow-nodes" :style="{ width: svgW + 'px', height: svgH + 'px' }">
      <div
        v-for="n in nodes"
        :key="n.id"
        class="flow-node"
        :class="{ visited: n.visited, mystery: n.isMystery, locked: n.locked, clickable: n.visited && n.sceneId }"
        :style="{ left: n.x + 'px', top: n.y + 'px', width: n.w + 'px', height: n.h + 'px' }"
        :title="n.lockHint || ''"
        @click="n.visited && n.sceneId && emit('selectScene', n.sceneId)"
      >
        <img v-if="n.thumbnail" :src="n.thumbnail" class="node-thumb" />
        <span class="node-icon">{{ n.visited ? '✦' : n.isMystery ? '?' : '⬜' }}</span>
        <span class="node-label">{{ n.label }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tree-flow {
  position: relative;
  overflow: auto;
  max-height: 320px;
}

.flow-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.flow-nodes {
  position: relative;
  z-index: 1;
}

.flow-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px 6px;
  border-radius: 4px;
  font-size: 12px;
  transition: all 0.15s;
  overflow: hidden;
}

.flow-node:has(.node-thumb) {
  padding: 4px 4px 6px;
}

.node-thumb {
  width: 128px;
  height: 72px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.06);
}

.flow-node.clickable {
  cursor: pointer;
}

.flow-node.clickable:hover {
  background: rgba(201, 168, 76, 0.22);
  border-color: rgba(201, 168, 76, 0.5);
}

.flow-node.visited {
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.3);
}

.flow-node.locked {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.flow-node.mystery {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  justify-content: center;
}

.node-icon {
  font-size: 12px;
  flex-shrink: 0;
}

.flow-node.visited .node-icon {
  color: #c9a84c;
}

.flow-node.locked .node-icon,
.flow-node.mystery .node-icon {
  color: #444;
}

.node-label {
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flow-node.locked .node-label {
  color: #555;
}

.flow-node.mystery .node-label {
  color: #444;
}

.flow-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  font-size: 13px;
  color: #444;
}

.flow-edge-group {
  opacity: 0.6;
}
</style>
