import { useMemo } from 'react';
import { useAppStore } from '../../store/appStore';
import type { FlowNode } from '../../types/scripts';
import styles from './FakeDataInputs.module.css';

function collectFakeKeys(node: FlowNode, keys: Set<string>) {
  if (node.fakeInputKey) keys.add(node.fakeInputKey);
  for (const child of node.children) collectFakeKeys(child, keys);
}

export default function FakeDataInputs() {
  const { flowRoot, fakeData, setFakeData } = useAppStore();

  const keys = useMemo(() => {
    if (!flowRoot) return [];
    const set = new Set<string>();
    collectFakeKeys(flowRoot, set);
    return Array.from(set).sort();
  }, [flowRoot]);

  if (keys.length === 0) return null;

  return (
    <div className={styles.panel}>
      <div className={`${styles.title} font-cinzel`}>Fake Data</div>
      <div className={styles.hint}>
        Set values to highlight condition branches
      </div>
      {keys.map((key) => (
        <div key={key} className={styles.row}>
          <label className={styles.label}>{key}</label>
          <input
            type="text"
            className={styles.input}
            value={fakeData[key] ?? ''}
            placeholder="value…"
            onChange={(e) => setFakeData(key, e.target.value)}
          />
        </div>
      ))}
    </div>
  );
}
