'use client';

/**
 * StatusBar — v3 V3StatusBar 미러
 * 좌측: Workflow icon + 룰 이름 + dirty + 노드/연결 카운트
 * 중간: 진행 dot (pulse) + 라텐시
 * 우측: 최근 실행 시간
 *
 * 실 데이터 없는 필드는 '—' fallback (시안 mock 글자 박지 않음)
 */

import { Workflow } from 'lucide-react';
import { useControlMode } from '../hooks/useControlMode';

interface StatusBarProps {
  selectedCard: Record<string, any>;
}

export function StatusBar({ selectedCard }: StatusBarProps) {
  void selectedCard;
  const mode = useControlMode((s) => s.mode);
  const ruleNodes = useControlMode((s) => s.ruleNodes);
  const ruleConnections = useControlMode((s) => s.ruleConnections);
  const activeRuleId = useControlMode((s) => s.activeRuleId);

  // 룰 이름 — store 에 룰 메타 없으면 '—' (룰 메타 API 연결 후 채워짐)
  const ruleName = activeRuleId ?? '—';

  return (
    <div className="ctrl-ide-statusbar">
      <span className="ctrl-status-rule">
        <Workflow size={11} style={{ color: 'rgb(var(--v5-primary-rgb))' }} />
        {ruleName}
        <span className="ctrl-status-ver">v0</span>
      </span>

      <span><b>NODES</b> <code>{ruleNodes.length}</code></span>
      <span><b>EDGES</b> <code>{ruleConnections.length}</code></span>
      <span><b>MODE</b> <code>{mode.toUpperCase()}</code></span>

      <div style={{ flex: 1 }} />

      <span className="ctrl-status-pulse" title="live" />
      <span><b>최근 실행</b> <code>—</code></span>
      <span><b>평균</b> <code>—ms</code></span>
    </div>
  );
}
