kcg-ai-monitoring/frontend/src/flow/components/NodeDetailPanel.tsx

import type { FlowEdge, FlowNode } from '../manifest';
import { KIND_LABELS, STATUS_LABELS, TRIGGER_LABELS } from '../manifest';
import { stageColor } from './nodeShapes';

interface Props {
  selectedNode: FlowNode | null;
  selectedEdge: FlowEdge | null;
  allNodes: FlowNode[];
  allEdges: FlowEdge[];
  onSelectNode: (id: string) => void;
}

export function NodeDetailPanel({
  selectedNode,
  selectedEdge,
  allNodes,
  allEdges,
  onSelectNode,
}: Props) {
  if (selectedEdge) {
    const source = allNodes.find((n) => n.id === selectedEdge.source);
    const target = allNodes.find((n) => n.id === selectedEdge.target);
    return (
      <div className="sf-detail">
        <div className="sf-detail-label">엣지</div>
        <h2>{selectedEdge.label || selectedEdge.id}</h2>
        <div className="sf-detail-id">{selectedEdge.id}</div>
        <div className="sf-badges">
          <span
            className="sf-badge"
            data-tone={
              selectedEdge.kind === 'feedback'
                ? 'warn'
                : selectedEdge.kind === 'trigger'
                  ? 'success'
                  : 'accent'
            }
          >
            {selectedEdge.kind ?? 'data'}
          </span>
        </div>
        {selectedEdge.detail && (
          <div className="sf-detail-section">
            <div className="sf-detail-label">설명</div>
            <div className="sf-detail-text">{selectedEdge.detail}</div>
          </div>
        )}
        <div className="sf-detail-section">
          <div className="sf-detail-label">Source → Target</div>
          {source && (
            <button className="sf-link-button" onClick={() => onSelectNode(source.id)}>
              ◀ {source.label}{' '}
              <span style={{ color: '#64748b', fontSize: 9 }}>{source.id}</span>
            </button>
          )}
          {target && (
            <button className="sf-link-button" onClick={() => onSelectNode(target.id)}>
              ▶ {target.label}{' '}
              <span style={{ color: '#64748b', fontSize: 9 }}>{target.id}</span>
            </button>
          )}
        </div>
      </div>
    );
  }

  if (!selectedNode) {
    return (
      <div className="sf-detail">
        <div className="sf-empty">
          노드 또는 엣지를 클릭하면
          <br />
          상세 정보가 표시됩니다.
        </div>
      </div>
    );
  }

  const accent = stageColor(selectedNode.stage);
  const incoming = allEdges.filter((e) => e.target === selectedNode.id);
  const outgoing = allEdges.filter((e) => e.source === selectedNode.id);

  return (
    <div className="sf-detail" style={{ ['--accent' as never]: accent }}>
      <div className="sf-detail-label">{selectedNode.stage}</div>
      <h2>{selectedNode.label}</h2>
      <div className="sf-detail-id">{selectedNode.id}</div>

      <div className="sf-badges">
        <span className="sf-badge" data-tone="accent">
          {KIND_LABELS[selectedNode.kind]}
        </span>
        <span className="sf-badge">{TRIGGER_LABELS[selectedNode.trigger]}</span>
        <span
          className="sf-badge"
          data-tone={
            selectedNode.status === 'implemented'
              ? 'success'
              : selectedNode.status === 'planned'
                ? 'warn'
                : undefined
          }
        >
          {STATUS_LABELS[selectedNode.status]}
        </span>
        {selectedNode.menu && (
          <span className="sf-badge">메뉴: {selectedNode.menu}</span>
        )}
      </div>

      {selectedNode.shortDescription && (
        <div className="sf-detail-section">
          <div className="sf-detail-label">개요</div>
          <div className="sf-detail-text">{selectedNode.shortDescription}</div>
        </div>
      )}

      {selectedNode.notes && (
        <div className="sf-detail-section">
          <div className="sf-detail-label">설명</div>
          <div className="sf-detail-text">{selectedNode.notes}</div>
        </div>
      )}

      {selectedNode.file && (
        <div className="sf-detail-section">
          <div className="sf-detail-label">코드</div>
          <code className="sf-code">{selectedNode.file}</code>
          {selectedNode.symbol && (
            <code className="sf-code" style={{ marginTop: 4 }}>
              {selectedNode.symbol}
            </code>
          )}
        </div>
      )}

      {selectedNode.actor && (
        <div className="sf-detail-section">
          <div className="sf-detail-label">담당자</div>
          <div className="sf-detail-text">{selectedNode.actor}</div>
        </div>
      )}

      {selectedNode.triggers && selectedNode.triggers.length > 0 && (
        <div className="sf-detail-section">
          <div className="sf-detail-label">발화 조건</div>
          <ul className="sf-list">
            {selectedNode.triggers.map((t, i) => (
              <li key={i}>{t}</li>
            ))}
          </ul>
        </div>
      )}

      {selectedNode.inputs && selectedNode.inputs.length > 0 && (
        <div className="sf-detail-section">
          <div className="sf-detail-label">입력 (Inputs)</div>
          <ul className="sf-list">
            {selectedNode.inputs.map((x, i) => (
              <li key={i}>{x}</li>
            ))}
          </ul>
        </div>
      )}

      {selectedNode.outputs && selectedNode.outputs.length > 0 && (
        <div className="sf-detail-section">
          <div className="sf-detail-label">출력 (Outputs)</div>
          <ul className="sf-list">
            {selectedNode.outputs.map((x, i) => (
              <li key={i}>{x}</li>
            ))}
          </ul>
        </div>
      )}

      {selectedNode.params && selectedNode.params.length > 0 && (
        <div className="sf-detail-section">
          <div className="sf-detail-label">파라미터</div>
          <ul className="sf-list">
            {selectedNode.params.map((x, i) => (
              <li key={i}>{x}</li>
            ))}
          </ul>
        </div>
      )}

      {selectedNode.rules && selectedNode.rules.length > 0 && (
        <div className="sf-detail-section">
          <div className="sf-detail-label">규칙</div>
          <ul className="sf-list">
            {selectedNode.rules.map((x, i) => (
              <li key={i}>{x}</li>
            ))}
          </ul>
        </div>
      )}

      {incoming.length > 0 && (
        <div className="sf-detail-section">
          <div className="sf-detail-label">들어오는 흐름 ({incoming.length})</div>
          {incoming.map((e) => {
            const src = allNodes.find((n) => n.id === e.source);
            return (
              <button
                key={e.id}
                className="sf-link-button"
                onClick={() => src && onSelectNode(src.id)}
              >
                ◀ {src?.label ?? e.source}
                {e.label && <span style={{ color: '#94a3b8' }}> · {e.label}</span>}
              </button>
            );
          })}
        </div>
      )}

      {outgoing.length > 0 && (
        <div className="sf-detail-section">
          <div className="sf-detail-label">나가는 흐름 ({outgoing.length})</div>
          {outgoing.map((e) => {
            const tgt = allNodes.find((n) => n.id === e.target);
            return (
              <button
                key={e.id}
                className="sf-link-button"
                onClick={() => tgt && onSelectNode(tgt.id)}
              >
                ▶ {tgt?.label ?? e.target}
                {e.label && <span style={{ color: '#94a3b8' }}> · {e.label}</span>}
              </button>
            );
          })}
        </div>
      )}

      {selectedNode.tags && selectedNode.tags.length > 0 && (
        <div className="sf-detail-section">
          <div className="sf-detail-label">태그</div>
          <div className="sf-filter-row">
            {selectedNode.tags.map((t) => (
              <span key={t} className="sf-chip">
                {t}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}