import type { NodeKind, NodeStatus, NodeTrigger } from '../manifest';
import { ALL_MENUS, ALL_STAGES, KIND_LABELS, STATUS_LABELS, TRIGGER_LABELS } from '../manifest';

export interface FilterState {
  search: string;
  stage: string; // '전체' or stage name
  menu: string; // '전체' or menu name
  kinds: Set<NodeKind>;
  triggers: Set<NodeTrigger>;
  statuses: Set<NodeStatus>;
}

interface Props {
  filter: FilterState;
  onChange: (next: FilterState) => void;
  groupBy: 'stage' | 'menu';
  onGroupByChange: (g: 'stage' | 'menu') => void;
  meta: { version: string; releaseDate?: string; nodeCount?: number; edgeCount?: number };
}

const ALL_KINDS: NodeKind[] = [
  'source',
  'cache',
  'pipeline',
  'algorithm',
  'output',
  'storage',
  'api',
  'ui',
  'decision',
  'external',
];

const ALL_TRIGGERS: NodeTrigger[] = [
  'scheduled',
  'event',
  'user_action',
  'on_demand',
];

const ALL_STATUSES: NodeStatus[] = [
  'implemented',
  'partial',
  'planned',
  'deprecated',
];

export function FilterBar({ filter, onChange, groupBy, onGroupByChange, meta }: Props) {
  const toggleKind = (k: NodeKind) => {
    const next = new Set(filter.kinds);
    if (next.has(k)) next.delete(k);
    else next.add(k);
    onChange({ ...filter, kinds: next });
  };

  const toggleTrigger = (t: NodeTrigger) => {
    const next = new Set(filter.triggers);
    if (next.has(t)) next.delete(t);
    else next.add(t);
    onChange({ ...filter, triggers: next });
  };

  const toggleStatus = (s: NodeStatus) => {
    const next = new Set(filter.statuses);
    if (next.has(s)) next.delete(s);
    else next.add(s);
    onChange({ ...filter, statuses: next });
  };

  return (
    <header className="sf-header">
      <h1>KCG AI Monitoring · System Flow</h1>
      <div className="sf-meta">
        v{meta.version} · {meta.releaseDate} · 노드 {meta.nodeCount} · 엣지 {meta.edgeCount}
      </div>
      <div className="sf-spacer" />
      <input aria-label="검색 (label, file, symbol, tag)"
        type="text"
        placeholder="검색 (label, file, symbol, tag)"
        value={filter.search}
        onChange={(e) => onChange({ ...filter, search: e.target.value })}
      />
      <select
        value={filter.stage}
        onChange={(e) => onChange({ ...filter, stage: e.target.value })}
      >
        <option value="전체">단계: 전체</option>
        {ALL_STAGES.map((s) => (
          <option key={s} value={s}>
            {s}
          </option>
        ))}
      </select>
      <select
        value={filter.menu}
        onChange={(e) => onChange({ ...filter, menu: e.target.value })}
      >
        <option value="전체">메뉴: 전체</option>
        {ALL_MENUS.map((m) => (
          <option key={m} value={m}>
            {m}
          </option>
        ))}
      </select>
      <div className="sf-toggle">
        <button
          data-active={groupBy === 'stage'}
          onClick={() => onGroupByChange('stage')}
        >
          단계 기준
        </button>
        <button data-active={groupBy === 'menu'} onClick={() => onGroupByChange('menu')}>
          메뉴 기준
        </button>
      </div>
      <details style={{ position: 'relative' }}>
        <summary
          style={{
            cursor: 'pointer',
            fontSize: 12,
            color: '#94a3b8',
            padding: '6px 10px',
            background: '#1e293b',
            border: '1px solid rgba(148,163,184,0.24)',
            borderRadius: 6,
            listStyle: 'none',
          }}
        >
          상세 필터
        </summary>
        <div
          style={{
            position: 'absolute',
            top: '100%',
            right: 0,
            marginTop: 6,
            background: '#0f172a',
            border: '1px solid rgba(148,163,184,0.24)',
            borderRadius: 6,
            padding: 12,
            zIndex: 100,
            minWidth: 280,
          }}
        >
          <div className="sf-detail-label">종류</div>
          <div className="sf-filter-row">
            {ALL_KINDS.map((k) => (
              <button
                key={k}
                className="sf-chip"
                data-active={filter.kinds.has(k)}
                onClick={() => toggleKind(k)}
              >
                {KIND_LABELS[k]}
              </button>
            ))}
          </div>
          <div className="sf-detail-label" style={{ marginTop: 12 }}>
            트리거
          </div>
          <div className="sf-filter-row">
            {ALL_TRIGGERS.map((t) => (
              <button
                key={t}
                className="sf-chip"
                data-active={filter.triggers.has(t)}
                onClick={() => toggleTrigger(t)}
              >
                {TRIGGER_LABELS[t]}
              </button>
            ))}
          </div>
          <div className="sf-detail-label" style={{ marginTop: 12 }}>
            상태
          </div>
          <div className="sf-filter-row">
            {ALL_STATUSES.map((s) => (
              <button
                key={s}
                className="sf-chip"
                data-active={filter.statuses.has(s)}
                onClick={() => toggleStatus(s)}
              >
                {STATUS_LABELS[s]}
              </button>
            ))}
          </div>
        </div>
      </details>
    </header>
  );
}
