import { IconFlag, IconPlayerPlay, IconLink } from '@tabler/icons-react'
import { NODE_KIND, NODE_STATUS, isNodeOverdue } from '../../lib/roadmaps'

const STATUS_COLORS = {
  [NODE_STATUS.OPEN]: 'var(--text-muted, #94a3b8)',
  [NODE_STATUS.IN_PROGRESS]: '#fbbf24',
  [NODE_STATUS.DONE]: '#34d399',
}

/**
 * Knoten-Kachel im Steckbrett.
 * connectMode: Board wartet auf Zielauswahl; isValidTarget markiert erlaubte Ziele.
 */
export default function RoadmapNodeCard({
  node,
  selected,
  readOnly,
  connectSource,
  isValidTarget,
  onSelect,
  onStartConnect,
  nodeRef,
}) {
  const overdue = isNodeOverdue(node)
  const isStart = node.kind === NODE_KIND.START
  const isGoal = node.kind === NODE_KIND.GOAL
  const connecting = Boolean(connectSource)
  const isConnectSource = connectSource?.$id === node.$id

  const borderColor = isConnectSource
    ? 'var(--accent, #3b82f6)'
    : connecting && isValidTarget
      ? '#34d399'
      : selected
        ? 'var(--accent, #3b82f6)'
        : overdue
          ? 'var(--danger, #ef4444)'
          : 'var(--border)'

  return (
    <div
      ref={nodeRef}
      onClick={() => onSelect(node)}
      style={{
        position: 'relative',
        background: isGoal ? 'rgba(59,130,246,0.10)' : 'var(--surface-2, rgba(45,55,72,0.65))',
        border: `2px solid ${borderColor}`,
        borderRadius: 10,
        padding: '10px 12px',
        cursor: 'pointer',
        opacity: connecting && !isValidTarget && !isConnectSource ? 0.45 : 1,
        transition: 'border-color 0.15s ease, opacity 0.15s ease',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        {isStart && <IconPlayerPlay size={15} style={{ flexShrink: 0 }} />}
        {isGoal && <IconFlag size={15} style={{ flexShrink: 0, color: '#93c5fd' }} />}
        {!isStart && (
          <span
            title={`Status: ${node.status || 'open'}`}
            style={{
              width: 10, height: 10, borderRadius: 5, flexShrink: 0,
              background: STATUS_COLORS[node.status] || STATUS_COLORS.open,
            }}
          />
        )}
        <span style={{ fontWeight: 600, fontSize: 13, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {node.title}
        </span>
      </div>

      {(node.assignedName || node.deadline) && (
        <div style={{ display: 'flex', gap: 8, marginTop: 6, fontSize: 11 }} className="faint">
          {node.assignedName && <span>{node.assignedName}</span>}
          {node.deadline && (
            <span style={overdue ? { color: 'var(--danger, #ef4444)', fontWeight: 700 } : undefined}>
              bis {node.deadline.split('-').reverse().join('.')}
            </span>
          )}
        </div>
      )}

      {!readOnly && !isGoal && !connecting && (
        <button
          type="button"
          title="Verbindung von hier starten"
          onClick={(e) => { e.stopPropagation(); onStartConnect(node) }}
          style={{
            position: 'absolute', right: -11, top: '50%', transform: 'translateY(-50%)',
            width: 22, height: 22, borderRadius: 11,
            border: '1px solid var(--border)', background: 'var(--surface, #1e293b)',
            color: 'var(--text-muted)', display: 'flex', alignItems: 'center',
            justifyContent: 'center', cursor: 'crosshair', padding: 0,
          }}
        >
          <IconLink size={12} />
        </button>
      )}
    </div>
  )
}
