'use client'

import React from 'react'
import { type Area, imgUrl } from './types'

// ── 常量 ─────────────────────────────────────────────────────────────────────
export const ICON_SIZE = 80
export const CENTER_AXIS_Y = 180
export const OFFSET_Y = 40

// ── SVG 箭头 ──────────────────────────────────────────────────────────────────
const ChevronUp = () => (
  <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
    <polyline points="18 15 12 9 6 15" />
  </svg>
)
const ChevronDown = () => (
  <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
    <polyline points="6 9 12 15 18 9" />
  </svg>
)

// ── AreaNode ──────────────────────────────────────────────────────────────────

interface Props {
  area: Area
  index: number
  isHovered: boolean
  onHover: (id: string | null) => void
  onEdit: (id: string) => void
}

export default function AreaNode({ area, index, isHovered, onHover, onEdit }: Props) {
  const isUp = index % 2 === 0
  const boxTop = isUp ? CENTER_AXIS_Y - OFFSET_Y : CENTER_AXIS_Y + OFFSET_Y
  const thumb = imgUrl(area.thumbnailImage)

  return (
    // 固定高度容器，避免 hover 时触发画布 reflow
    <div
      style={{ flex: 1, minWidth: 0, height: 360, position: 'relative' }}
      onMouseEnter={() => onHover(area.id)}
      onMouseLeave={() => onHover(null)}
      onClick={() => onEdit(area.id)}
    >
      {/* 整体节点包裹（绝对定位，不参与 flex 布局计算）*/}
      <div
        className="dep-node-wrap"
        title={`点击编辑：${area.name}`}
        style={{ position: 'absolute', inset: 0 }}
      >
      {/* 引线 */}
      <svg
        style={{
          position: 'absolute', top: 0, left: '50%',
          transform: 'translateX(-50%)', width: 100, height: 400,
          overflow: 'visible', pointerEvents: 'none', zIndex: 0,
        }}
        viewBox="0 0 100 400"
      >
        <path
          d={`M 50 40 L 50 ${boxTop}`}
          fill="none"
          stroke={isHovered ? '#000' : '#f5f5f5'}
          strokeWidth={isHovered ? '2.5' : '1'}
          strokeDasharray={isHovered ? 'none' : '3,3'}
          className="dep-leader"
        />
        <circle cx="50" cy="40" r="2.5" fill={isHovered ? '#000' : '#e0e0e0'} />
        <circle cx="50" cy={boxTop} r={isHovered ? 4 : 2} fill={isHovered ? '#000' : '#e0e0e0'} />
      </svg>

      {/* 图标 */}
      <div
        className="dep-icon-node"
        style={{
          position: 'absolute',
          top: 0, left: '50%', transform: 'translateX(-50%)',
          display: 'flex', alignItems: 'center',
          justifyContent: 'center', width: ICON_SIZE, height: ICON_SIZE, zIndex: 10,
        }}
      >
        {thumb ? (
          <img
            src={thumb}
            style={{ width: 64, height: 64, objectFit: 'contain', zIndex: 10, position: 'relative' }}
            alt={area.name}
          />
        ) : (
          <div style={{
            width: 64, height: 64, display: 'flex', alignItems: 'center',
            justifyContent: 'center', border: '1px dashed #d4d4d4', background: '#fafafa',
          }}>
            <span style={{
              fontSize: 7, color: '#a3a3a3', textTransform: 'uppercase',
              fontWeight: 700, letterSpacing: '.1em', textAlign: 'center', lineHeight: 1.4,
            }}>NO<br />IMG</span>
          </div>
        )}
        <div className="dep-glow" />
      </div>

      {/* 标签 */}
      <div
        className="dep-label"
        style={{
          position: 'absolute', display: 'flex', flexDirection: 'column',
          alignItems: 'center', whiteSpace: 'nowrap',
          top: `${boxTop}px`, left: '50%',
          transform: `translateX(-50%)${isHovered ? (isUp ? ' translateY(-4px)' : ' translateY(4px)') : ''}`,
          zIndex: 30,
        }}
      >
        <div className="dep-terminal-dot" />
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6, opacity: 0.6 }}>
          {isUp ? <ChevronUp /> : <div style={{ width: 8 }} />}
          <span className="dep-code">CODE.{String(index + 1).padStart(2, '0')}</span>
          {!isUp ? <ChevronDown /> : <div style={{ width: 8 }} />}
        </div>
        <div className="dep-name">{area.name}</div>
      </div>
      </div>
    </div>
  )
}
