import { useState, useMemo } from 'react'
import { useTreeEditorStore } from '@/store/treeEditorStore'
import { TreePreviewNode } from './TreePreviewNode'
import type { TreeStructure } from '@/types'

/** Map of targetNodeId -> array of {sourceNodeId, sourceNodeLabel} that link to it */
export type SharedLinksMap = Map<string, Array<{ id: string; label: string }>>

/**
 * Build a map of which nodes link to which targets
 * This helps identify shared nodes (multiple sources linking to same target)
 */
function buildSharedLinksMap(
  node: TreeStructure,
  map: SharedLinksMap = new Map()
): SharedLinksMap {
  const nodeLabel = node.type === 'decision' ? node.question : node.title

  // Check decision options
  if (node.type === 'decision' && node.options) {
    for (const opt of node.options) {
      if (opt.next_node_id) {
        const existing = map.get(opt.next_node_id) || []
        existing.push({ id: node.id, label: nodeLabel || 'Untitled' })
        map.set(opt.next_node_id, existing)
      }
    }
  }

  // Check action next_node_id
  if (node.type === 'action' && node.next_node_id) {
    const existing = map.get(node.next_node_id) || []
    existing.push({ id: node.id, label: nodeLabel || 'Untitled' })
    map.set(node.next_node_id, existing)
  }

  // Recurse into children
  if (node.children) {
    for (const child of node.children) {
      buildSharedLinksMap(child, map)
    }
  }

  return map
}

export function TreePreviewPanel() {
  const { treeStructure, name, selectedNodeId, selectNode, findNode } = useTreeEditorStore()
  const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null)

  // Build map of shared links (which nodes link to which targets)
  const sharedLinksMap = useMemo(() => {
    if (!treeStructure) return new Map()
    return buildSharedLinksMap(treeStructure)
  }, [treeStructure])

  if (!treeStructure) {
    return (
      <div className="flex h-full items-center justify-center p-4 text-sm text-white/40">
        No tree structure to preview
      </div>
    )
  }

  return (
    <div className="flex h-full flex-col">
      {/* Header */}
      <div className="border-b border-white/[0.06] px-4 py-2">
        <h3 className="text-sm font-semibold text-white">
          Preview: {name || 'Untitled Tree'}
        </h3>
        <p className="text-xs text-white/40">
          Click a node to select • Hover options to highlight targets
        </p>
      </div>

      {/* Tree Visualization */}
      <div className="flex-1 overflow-auto p-4">
        <div className="inline-block min-w-full">
          <TreePreviewNode
            node={treeStructure}
            selectedNodeId={selectedNodeId}
            onSelect={selectNode}
            depth={0}
            onHoverNodeId={setHoveredNodeId}
            hoveredNodeId={hoveredNodeId}
            findNode={findNode}
            sharedLinksMap={sharedLinksMap}
          />
        </div>
      </div>

      {/* Legend */}
      <div className="border-t border-white/[0.06] px-4 py-2">
        <div className="flex flex-wrap gap-4 text-xs text-white/40">
          <div className="flex items-center gap-1">
            <div className="h-3 w-3 rounded bg-blue-500/50" />
            <span>Decision</span>
          </div>
          <div className="flex items-center gap-1">
            <div className="h-3 w-3 rounded bg-yellow-500/50" />
            <span>Action</span>
          </div>
          <div className="flex items-center gap-1">
            <div className="h-3 w-3 rounded bg-green-500/50" />
            <span>Solution</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default TreePreviewPanel