import React, { useState } from 'react';
import {
  Trash2,
  Copy,
  X,
  Check,
  Move,
  Layers,
  ArrowRight,
  Sliders,
  Maximize2,
} from 'lucide-react';
import type { NetworkModel, InpNode, InpPipe } from './inpModel';
import type { MultiSelectionState, SelectionTarget } from './types';
import {
  m3DayToFlow,
  metersToLength,
  millimetersToDiameter,
  type DisplayUnitMode,
} from './unitSystem';

export interface BatchPropertyEditorProps {
  model: NetworkModel;
  multiSelection: MultiSelectionState;
  selectedTarget: SelectionTarget;
  displayUnitMode?: DisplayUnitMode;
  onUpdatePipes: (pipeIds: string[], updates: Partial<InpPipe>) => void;
  onUpdateNodes: (nodeIds: string[], updater: (node: InpNode) => Partial<InpNode>) => void;
  onMoveNodes: (nodeIds: string[], dx: number, dy: number) => void;
  onDeleteSelected: () => void;
  onClearSelection: () => void;
  onSelectTarget: (target: SelectionTarget) => void;
  onCopyClipboard?: () => void;
}

export const BatchPropertyEditor: React.FC<BatchPropertyEditorProps> = ({
  model,
  multiSelection,
  selectedTarget,
  displayUnitMode = 'korean',
  onUpdatePipes,
  onUpdateNodes,
  onMoveNodes,
  onDeleteSelected,
  onClearSelection,
  onSelectTarget,
  onCopyClipboard,
}) => {
  // Extract all currently selected node IDs and pipe IDs
  const selectedNodeIds = Array.from(
    new Set([
      ...multiSelection.nodes,
      ...(selectedTarget?.type === 'node' ? [selectedTarget.id] : []),
    ])
  );

  const selectedPipeIds = Array.from(
    new Set([
      ...multiSelection.links,
      ...(selectedTarget?.type === 'link' ? [selectedTarget.id] : []),
    ])
  );

  // Pipe batch state
  const [batchDiameter, setBatchDiameter] = useState<string>('');
  const [batchRoughness, setBatchRoughness] = useState<string>('');
  const [batchStatus, setBatchStatus] = useState<string>('OPEN');
  const [batchMinorLoss, setBatchMinorLoss] = useState<string>('');
  const [batchTag, setBatchTag] = useState<string>('');
  const [batchDesc, setBatchDesc] = useState<string>('');

  // Node batch state
  const [batchElevMode, setBatchElevMode] = useState<'set' | 'offset'>('offset');
  const [batchElevValue, setBatchElevValue] = useState<string>('');
  const [batchDemandMode, setBatchDemandMode] = useState<'set' | 'mult'>('mult');
  const [batchDemandValue, setBatchDemandValue] = useState<string>('1.0');
  const [batchPattern, setBatchPattern] = useState<string>('');

  // Move offset state
  const [moveDx, setMoveDx] = useState<string>('0');
  const [moveDy, setMoveDy] = useState<string>('0');

  // Success flash messages
  const [flashMsg, setFlashMsg] = useState<string | null>(null);

  const notify = (msg: string) => {
    setFlashMsg(msg);
    setTimeout(() => setFlashMsg(null), 2500);
  };

  // 1. Pipe actions
  // The batch editor's inputs are always entered in the fixed Korean/metric
  // display units shown in its labels (mm / m / m³/day), regardless of the
  // app-wide displayUnitMode toggle, so they always go through the display ->
  // model conversion (never a raw pass-through).
  const applyDiameter = (diamMm: number) => {
    if (!Number.isFinite(diamMm) || diamMm <= 0) return;
    const sourceUnits = model.options.units || 'LPS';
    const internalDiam = millimetersToDiameter(diamMm, sourceUnits);
    onUpdatePipes(selectedPipeIds, { diameter: internalDiam });
    notify(`관경 D${diamMm} 일괄 적용 (${selectedPipeIds.length}개 관로)`);
  };

  const applyRoughness = (roughness: number) => {
    if (!Number.isFinite(roughness) || roughness <= 0) return;
    onUpdatePipes(selectedPipeIds, { roughness });
    notify(`조도계수 C=${roughness} 일괄 적용 (${selectedPipeIds.length}개 관로)`);
  };
  const applyStatus = (status: 'OPEN' | 'CLOSED' | 'CV') => {
    onUpdatePipes(selectedPipeIds, { status });
    notify(`관로 상태 '${status}' 일괄 적용 (${selectedPipeIds.length}개 관로)`);
  };

  const applyMinorLoss = () => {
    const val = parseFloat(batchMinorLoss);
    if (!Number.isFinite(val) || val < 0) return;
    onUpdatePipes(selectedPipeIds, { minorLoss: val });
    notify(`미소손실계수 ${val} 일괄 적용 (${selectedPipeIds.length}개 관로)`);
  };

  const applyTagDesc = () => {
    const updates: Partial<InpPipe> = {};
    if (batchTag.trim()) updates.tag = batchTag.trim();
    if (batchDesc.trim()) updates.description = batchDesc.trim();
    if (Object.keys(updates).length === 0) return;
    onUpdatePipes(selectedPipeIds, updates);
    notify(`태그/설명 일괄 적용 (${selectedPipeIds.length}개 관로)`);
  };

  // 2. Node actions
  const applyElevation = () => {
    const val = parseFloat(batchElevValue);
    if (!Number.isFinite(val)) return;
    const sourceUnits = model.options.units || 'LPS';
    // batchElevValue is always entered in meters (display); convert the
    // set-value / offset-delta into the model's native length unit (m or ft).
    const modelVal = metersToLength(val, sourceUnits);
    onUpdateNodes(selectedNodeIds, (node) => {
      if (batchElevMode === 'set') {
        return { elevation: modelVal };
      } else {
        return { elevation: Math.round((node.elevation + modelVal) * 100) / 100 };
      }
    });
    notify(
      batchElevMode === 'set'
        ? `지반고 ${val}m 일괄 설정 (${selectedNodeIds.length}개 절점)`
        : `지반고 ${val >= 0 ? `+${val}` : val}m 일괄 증감 (${selectedNodeIds.length}개 절점)`
    );
  };

  const applyDemand = () => {
    const val = parseFloat(batchDemandValue);
    if (!Number.isFinite(val)) return;
    const sourceUnits = model.options.units || 'LPS';
    onUpdateNodes(selectedNodeIds, (node) => {
      if (batchDemandMode === 'set') {
        // batchDemandValue (set mode) is entered in m³/day (display);
        // convert into the model's native flow unit before storing.
        return { demand: m3DayToFlow(val, sourceUnits) };
      } else {
        // Multiplier is dimensionless; applies directly to the stored value.
        const curDemand = node.demand ?? 0;
        return { demand: Math.round(curDemand * val * 1000) / 1000 };
      }
    });
    notify(
      batchDemandMode === 'set'
        ? `기본수요량 ${val} m³/day 일괄 설정 (${selectedNodeIds.length}개 절점)`
        : `기본수요량 ×${val}배 일괄 곱셈 (${selectedNodeIds.length}개 절점)`
    );
  };

  const applyPattern = () => {
    if (!batchPattern) return;
    onUpdateNodes(selectedNodeIds, () => ({ pattern: batchPattern }));
    notify(`수요 패턴 '${batchPattern}' 일괄 지정 (${selectedNodeIds.length}개 절점)`);
  };

  const applyMoveOffset = () => {
    const dx = parseFloat(moveDx) || 0;
    const dy = parseFloat(moveDy) || 0;
    if (dx === 0 && dy === 0) return;
    onMoveNodes(selectedNodeIds, dx, dy);
    notify(`절점 ${selectedNodeIds.length}개 일괄 이동 완료 (ΔX: ${dx}, ΔY: ${dy})`);
  };

  const patterns = Object.keys(model.patterns || {});

  return (
    <div
      style={{
        background: 'var(--bg-panel)',
        borderRadius: 'var(--r-sm)',
        border: '1px solid var(--border-strong)',
        overflow: 'hidden',
        fontSize: '12px',
        boxShadow: 'var(--shadow-sm)',
      }}
    >
      {/* Header with Element Counts & Global Multi Actions */}
      <div
        style={{
          padding: '10px 12px',
          background: 'var(--bg-subtle)',
          borderBottom: '1px solid var(--border)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          gap: '6px',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
          <Layers size={15} style={{ color: 'var(--accent)' }} />
          <strong style={{ color: 'var(--text)', fontSize: '13px' }}>
            다중 선택 일괄 편집기
          </strong>
          <span
            style={{
              fontSize: '11px',
              padding: '1px 6px',
              borderRadius: '10px',
              background: 'var(--accent-wash)',
              color: 'var(--accent)',
              fontWeight: 600,
            }}
          >
            총 {selectedNodeIds.length + selectedPipeIds.length}개
          </span>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
          {onCopyClipboard && (
            <button
              type="button"
              className="btn btn-secondary"
              onClick={onCopyClipboard}
              title="선택된 요소 복사 (Ctrl+C)"
              style={{ height: '24px', padding: '0 6px', fontSize: '11px', display: 'inline-flex', alignItems: 'center', gap: '3px' }}
            >
              <Copy size={11} />
              복사
            </button>
          )}
          <button
            type="button"
            onClick={onDeleteSelected}
            className="btn btn-danger"
            title="선택된 요소 일괄 삭제"
            style={{
              height: '24px',
              padding: '0 6px',
              fontSize: '11px',
              display: 'inline-flex',
              alignItems: 'center',
              gap: '3px',
              background: 'var(--crit-wash)',
              color: 'var(--crit)',
              border: '1px solid var(--crit)',
            }}
          >
            <Trash2 size={11} />
            삭제
          </button>
          <button
            type="button"
            className="btn btn-secondary"
            onClick={onClearSelection}
            title="전체 선택 해제 (ESC)"
            style={{ height: '24px', padding: '0 6px', fontSize: '11px' }}
          >
            <X size={11} />
          </button>
        </div>
      </div>

      {/* Toast Flash Notice */}
      {flashMsg && (
        <div
          style={{
            padding: '6px 12px',
            background: 'var(--good-wash)',
            color: 'var(--good)',
            borderBottom: '1px solid var(--good)',
            fontSize: '11px',
            fontWeight: 600,
            display: 'flex',
            alignItems: 'center',
            gap: '4px',
          }}
        >
          <Check size={13} />
          {flashMsg}
        </div>
      )}

      {/* Selected Items ID Chips Preview */}
      <div
        style={{
          padding: '6px 12px',
          background: 'var(--bg-app)',
          borderBottom: '1px solid var(--border)',
          display: 'flex',
          flexWrap: 'wrap',
          gap: '4px',
          maxHeight: '75px',
          overflowY: 'auto',
        }}
      >
        {selectedNodeIds.map((id) => (
          <span
            key={`node-chip-${id}`}
            onClick={() => onSelectTarget({ type: 'node', id })}
            style={{
              cursor: 'pointer',
              fontSize: '10px',
              padding: '1px 5px',
              borderRadius: '3px',
              background: selectedTarget?.type === 'node' && selectedTarget.id === id ? 'var(--accent)' : 'var(--accent-wash)',
              color: selectedTarget?.type === 'node' && selectedTarget.id === id ? '#fff' : 'var(--accent)',
              fontFamily: 'var(--font-mono)',
            }}
            title="클릭 시 대표 요소로 포커스"
          >
            절점 {id}
          </span>
        ))}
        {selectedPipeIds.map((id) => (
          <span
            key={`pipe-chip-${id}`}
            onClick={() => onSelectTarget({ type: 'link', id })}
            style={{
              cursor: 'pointer',
              fontSize: '10px',
              padding: '1px 5px',
              borderRadius: '3px',
              background: selectedTarget?.type === 'link' && selectedTarget.id === id ? 'var(--good)' : 'var(--good-wash)',
              color: selectedTarget?.type === 'link' && selectedTarget.id === id ? '#fff' : 'var(--good)',
              fontFamily: 'var(--font-mono)',
            }}
            title="클릭 시 대표 요소로 포커스"
          >
            관로 {id}
          </span>
        ))}
      </div>

      <div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
        {/* ======================================================== */}
        {/* 1. PIPE BATCH EDIT CARD                                  */}
        {/* ======================================================== */}
        {selectedPipeIds.length > 0 && (
          <div
            style={{
              background: 'var(--bg-subtle)',
              border: '1px solid var(--border)',
              borderRadius: 'var(--r-sm)',
              padding: '10px',
              display: 'flex',
              flexDirection: 'column',
              gap: '8px',
            }}
          >
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontWeight: 600, color: 'var(--text)' }}>
                관로 일괄 속성 변경 ({selectedPipeIds.length}개 관로)
              </span>
            </div>

            {/* Pipe Diameter */}
            <div>
              <label style={{ display: 'block', fontSize: '11px', color: 'var(--text-secondary)', marginBottom: '3px' }}>
                관경 (Diameter mm)
              </label>
              <div style={{ display: 'flex', gap: '4px', marginBottom: '4px' }}>
                <input
                  type="number"
                  step="10"
                  value={batchDiameter}
                  onChange={(e) => setBatchDiameter(e.target.value)}
                  placeholder="예: 150"
                  style={{ width: '100%', padding: '3px 6px', fontSize: '11px', border: '1px solid #cbd5e1', borderRadius: '4px' }}
                />
                <button
                  type="button"
                  className="btn btn-secondary"
                  disabled={!batchDiameter}
                  onClick={() => applyDiameter(parseFloat(batchDiameter))}
                  style={{ whiteSpace: 'nowrap', padding: '0 8px', fontSize: '11px' }}
                >
                  적용
                </button>
              </div>
              <div style={{ display: 'flex', gap: '3px', flexWrap: 'wrap' }}>
                {[80, 100, 150, 200, 250, 300, 400, 500].map((d) => (
                  <button
                    key={`diam-${d}`}
                    type="button"
                    onClick={() => {
                      setBatchDiameter(String(d));
                      applyDiameter(d);
                    }}
                    style={{
                      padding: '2px 5px',
                      fontSize: '10px',
                      background: 'var(--bg-panel)',
                      border: '1px solid var(--border)',
                      borderRadius: '3px',
                      cursor: 'pointer',
                      fontFamily: 'var(--font-mono)',
                    }}
                  >
                    D{d}
                  </button>
                ))}
              </div>
            </div>

            {/* Roughness Presets */}
            <div style={{ borderTop: '1px solid var(--border)', paddingTop: '6px' }}>
              <label style={{ display: 'block', fontSize: '11px', color: 'var(--text-secondary)', marginBottom: '3px' }}>
                Hazen-Williams 조도계수 (Roughness C)
              </label>
              <div style={{ display: 'flex', gap: '4px', marginBottom: '4px' }}>
                <input
                  type="number"
                  step="5"
                  value={batchRoughness}
                  onChange={(e) => setBatchRoughness(e.target.value)}
                  placeholder="예: 130"
                  style={{ width: '100%', padding: '3px 6px', fontSize: '11px', border: '1px solid #cbd5e1', borderRadius: '4px' }}
                />
                <button
                  type="button"
                  className="btn btn-secondary"
                  disabled={!batchRoughness}
                  onClick={() => applyRoughness(parseFloat(batchRoughness))}
                  style={{ whiteSpace: 'nowrap', padding: '0 8px', fontSize: '11px' }}
                >
                  적용
                </button>
              </div>
              <div style={{ display: 'flex', gap: '3px', flexWrap: 'wrap' }}>
                {[
                  { name: '주철관 (100)', val: 100 },
                  { name: '강관 (110)', val: 110 },
                  { name: '닥타일주철 (130)', val: 130 },
                  { name: 'PVC/PE (140)', val: 140 },
                ].map((preset) => (
                  <button
                    key={`rough-${preset.val}`}
                    type="button"
                    onClick={() => {
                      setBatchRoughness(String(preset.val));
                      applyRoughness(preset.val);
                    }}
                    style={{
                      padding: '2px 5px',
                      fontSize: '10px',
                      background: 'var(--bg-panel)',
                      border: '1px solid var(--border)',
                      borderRadius: '3px',
                      cursor: 'pointer',
                    }}
                  >
                    {preset.name}
                  </button>
                ))}
              </div>
            </div>

            {/* Pipe Status */}
            <div style={{ borderTop: '1px solid var(--border)', paddingTop: '6px' }}>
              <label style={{ display: 'block', fontSize: '11px', color: 'var(--text-secondary)', marginBottom: '3px' }}>
                관로 개폐 상태 (Status)
              </label>
              <div style={{ display: 'flex', gap: '4px' }}>
                <button
                  type="button"
                  onClick={() => applyStatus('OPEN')}
                  className="btn btn-secondary"
                  style={{ flex: 1, padding: '4px', fontSize: '11px', color: 'var(--good)' }}
                >
                  전체 열림 (OPEN)
                </button>
                <button
                  type="button"
                  onClick={() => applyStatus('CLOSED')}
                  className="btn btn-secondary"
                  style={{ flex: 1, padding: '4px', fontSize: '11px', color: 'var(--crit)' }}
                >
                  전체 닫힘 (CLOSED)
                </button>
                <button
                  type="button"
                  onClick={() => applyStatus('CV')}
                  className="btn btn-secondary"
                  style={{ flex: 1, padding: '4px', fontSize: '11px', color: 'var(--accent)' }}
                >
                  체크밸브 (CV)
                </button>
              </div>
            </div>

            {/* Minor Loss & Tag */}
            <div style={{ borderTop: '1px solid var(--border)', paddingTop: '6px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px' }}>
              <div>
                <label style={{ display: 'block', fontSize: '10px', color: 'var(--text-muted)' }}>미소손실 K</label>
                <div style={{ display: 'flex', gap: '2px' }}>
                  <input
                    type="number"
                    step="0.1"
                    value={batchMinorLoss}
                    onChange={(e) => setBatchMinorLoss(e.target.value)}
                    placeholder="0.0"
                    style={{ width: '100%', padding: '2px 4px', fontSize: '11px', border: '1px solid #cbd5e1', borderRadius: '3px' }}
                  />
                  <button type="button" className="btn btn-secondary" onClick={applyMinorLoss} style={{ padding: '0 4px', fontSize: '10px' }}>
                    적용
                  </button>
                </div>
              </div>
              <div>
                <label style={{ display: 'block', fontSize: '10px', color: 'var(--text-muted)' }}>설명/태그</label>
                <div style={{ display: 'flex', gap: '2px' }}>
                  <input
                    type="text"
                    value={batchTag}
                    onChange={(e) => setBatchTag(e.target.value)}
                    placeholder="배수관로"
                    style={{ width: '100%', padding: '2px 4px', fontSize: '11px', border: '1px solid #cbd5e1', borderRadius: '3px' }}
                  />
                  <button type="button" className="btn btn-secondary" onClick={applyTagDesc} style={{ padding: '0 4px', fontSize: '10px' }}>
                    적용
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* ======================================================== */}
        {/* 2. NODE BATCH EDIT CARD                                  */}
        {/* ======================================================== */}
        {selectedNodeIds.length > 0 && (
          <div
            style={{
              background: 'var(--bg-subtle)',
              border: '1px solid var(--border)',
              borderRadius: 'var(--r-sm)',
              padding: '10px',
              display: 'flex',
              flexDirection: 'column',
              gap: '8px',
            }}
          >
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontWeight: 600, color: 'var(--text)' }}>
                절점 일괄 속성 변경 ({selectedNodeIds.length}개 절점)
              </span>
            </div>

            {/* Node Elevation */}
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '3px' }}>
                <label style={{ fontSize: '11px', color: 'var(--text-secondary)' }}>
                  지반고 (Elevation m)
                </label>
                <div style={{ display: 'flex', gap: '6px', fontSize: '10px' }}>
                  <label style={{ cursor: 'pointer' }}>
                    <input
                      type="radio"
                      name="batchElevMode"
                      checked={batchElevMode === 'offset'}
                      onChange={() => setBatchElevMode('offset')}
                    />{' '}
                    증감 가감 (±)
                  </label>
                  <label style={{ cursor: 'pointer' }}>
                    <input
                      type="radio"
                      name="batchElevMode"
                      checked={batchElevMode === 'set'}
                      onChange={() => setBatchElevMode('set')}
                    />{' '}
                    값 고정
                  </label>
                </div>
              </div>
              <div style={{ display: 'flex', gap: '4px' }}>
                <input
                  type="number"
                  step="0.5"
                  value={batchElevValue}
                  onChange={(e) => setBatchElevValue(e.target.value)}
                  placeholder={batchElevMode === 'offset' ? '+1.5 또는 -0.5' : '30.0'}
                  style={{ width: '100%', padding: '3px 6px', fontSize: '11px', border: '1px solid #cbd5e1', borderRadius: '4px' }}
                />
                <button
                  type="button"
                  className="btn btn-secondary"
                  disabled={!batchElevValue}
                  onClick={applyElevation}
                  style={{ whiteSpace: 'nowrap', padding: '0 8px', fontSize: '11px' }}
                >
                  적용
                </button>
              </div>
            </div>

            {/* Node Demand */}
            <div style={{ borderTop: '1px solid var(--border)', paddingTop: '6px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '3px' }}>
                <label style={{ fontSize: '11px', color: 'var(--text-secondary)' }}>
                  기본수요량 (Base Demand)
                </label>
                <div style={{ display: 'flex', gap: '6px', fontSize: '10px' }}>
                  <label style={{ cursor: 'pointer' }}>
                    <input
                      type="radio"
                      name="batchDemandMode"
                      checked={batchDemandMode === 'mult'}
                      onChange={() => setBatchDemandMode('mult')}
                    />{' '}
                    배율 곱셈 (×)
                  </label>
                  <label style={{ cursor: 'pointer' }}>
                    <input
                      type="radio"
                      name="batchDemandMode"
                      checked={batchDemandMode === 'set'}
                      onChange={() => setBatchDemandMode('set')}
                    />{' '}
                    값 고정
                  </label>
                </div>
              </div>
              <div style={{ display: 'flex', gap: '4px' }}>
                <input
                  type="number"
                  step="0.1"
                  value={batchDemandValue}
                  onChange={(e) => setBatchDemandValue(e.target.value)}
                  placeholder={batchDemandMode === 'mult' ? '1.2 (20% 증가)' : '100.0'}
                  style={{ width: '100%', padding: '3px 6px', fontSize: '11px', border: '1px solid #cbd5e1', borderRadius: '4px' }}
                />
                <button
                  type="button"
                  className="btn btn-secondary"
                  disabled={!batchDemandValue}
                  onClick={applyDemand}
                  style={{ whiteSpace: 'nowrap', padding: '0 8px', fontSize: '11px' }}
                >
                  적용
                </button>
              </div>
            </div>

            {/* Demand Pattern */}
            {patterns.length > 0 && (
              <div style={{ borderTop: '1px solid var(--border)', paddingTop: '6px' }}>
                <label style={{ display: 'block', fontSize: '11px', color: 'var(--text-secondary)', marginBottom: '3px' }}>
                  수요 패턴 (Pattern ID)
                </label>
                <div style={{ display: 'flex', gap: '4px' }}>
                  <select
                    value={batchPattern}
                    onChange={(e) => setBatchPattern(e.target.value)}
                    style={{ width: '100%', padding: '3px 6px', fontSize: '11px', border: '1px solid #cbd5e1', borderRadius: '4px' }}
                  >
                    <option value="">패턴 선택...</option>
                    {patterns.map((patId) => (
                      <option key={patId} value={patId}>
                        {patId} {model.patterns[patId]?.description ? `(${model.patterns[patId].description})` : ''}
                      </option>
                    ))}
                  </select>
                  <button
                    type="button"
                    className="btn btn-secondary"
                    disabled={!batchPattern}
                    onClick={applyPattern}
                    style={{ whiteSpace: 'nowrap', padding: '0 8px', fontSize: '11px' }}
                  >
                    적용
                  </button>
                </div>
              </div>
            )}

            {/* CAD Move Offset */}
            <div style={{ borderTop: '1px solid var(--border)', paddingTop: '6px' }}>
              <label style={{ display: 'block', fontSize: '11px', color: 'var(--text-secondary)', marginBottom: '3px' }}>
                절점 위치 일괄 평행이동 (CAD Move Offset)
              </label>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: '4px' }}>
                <div>
                  <input
                    type="number"
                    step="1"
                    value={moveDx}
                    onChange={(e) => setMoveDx(e.target.value)}
                    placeholder="ΔX (m)"
                    style={{ width: '100%', padding: '3px 6px', fontSize: '11px', border: '1px solid #cbd5e1', borderRadius: '4px' }}
                  />
                </div>
                <div>
                  <input
                    type="number"
                    step="1"
                    value={moveDy}
                    onChange={(e) => setMoveDy(e.target.value)}
                    placeholder="ΔY (m)"
                    style={{ width: '100%', padding: '3px 6px', fontSize: '11px', border: '1px solid #cbd5e1', borderRadius: '4px' }}
                  />
                </div>
                <button
                  type="button"
                  className="btn btn-secondary"
                  onClick={applyMoveOffset}
                  style={{ whiteSpace: 'nowrap', padding: '0 8px', fontSize: '11px', display: 'inline-flex', alignItems: 'center', gap: '3px' }}
                >
                  <Move size={11} />
                  이동
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};