import { CutsceneStartNode, EndNode } from '../../../types/dialogue';
import { useDialogueStore } from '../../../store/dialogueStore';
import styles from '../RightPanel.module.css';

interface CutsceneProps {
  node: CutsceneStartNode;
  dialogueId: string;
}

export function CutsceneStartInspector({ node, dialogueId }: CutsceneProps) {
  const { updateNode, deleteNode, file } = useDialogueStore();
  const dialogue = file?.dialogues.find(d => d.id === dialogueId);
  const nodeIds = dialogue?.nodes.map(n => n.id) ?? [];

  return (
    <div className={styles.inspector}>
      <div className={styles.inspectorHeader}>
        <span className={styles.nodeTypeBadge} style={{ background: '#4a4a5a' }}>CutsceneStart</span>
        <span className={styles.nodeIdLabel}>{node.id}</span>
        <button className={styles.deleteNodeBtn} onClick={() => deleteNode(dialogueId, node.id)} title="Delete node">🗑</button>
      </div>
      <div>
        <label className={styles.label}>Node ID</label>
        <input className={styles.input} value={node.id} readOnly />
      </div>
      <div style={{ marginTop: 8 }}>
        <label className={styles.label}>Cutscene ID</label>
        <input
          className={styles.input}
          value={node.cutsceneId}
          placeholder="cutscene_id"
          onChange={e => updateNode(dialogueId, node.id, { cutsceneId: e.target.value })}
        />
      </div>
      <div style={{ marginTop: 8 }}>
        <label className={styles.label}>Next node</label>
        <input
          className={styles.input}
          value={node.next}
          placeholder="node_id"
          onChange={e => updateNode(dialogueId, node.id, { next: e.target.value })}
          list={`nodelist-cs-${node.id}`}
        />
        <datalist id={`nodelist-cs-${node.id}`}>
          {nodeIds.map(id => <option key={id} value={id} />)}
        </datalist>
      </div>
    </div>
  );
}

interface EndProps {
  node: EndNode;
  dialogueId: string;
}

export function EndInspector({ node, dialogueId }: EndProps) {
  const { deleteNode } = useDialogueStore();

  return (
    <div className={styles.inspector}>
      <div className={styles.inspectorHeader}>
        <span className={styles.nodeTypeBadge} style={{ background: '#f38ba8', color: '#1e1e2e' }}>End</span>
        <span className={styles.nodeIdLabel}>{node.id}</span>
        <button className={styles.deleteNodeBtn} onClick={() => deleteNode(dialogueId, node.id)} title="Delete node">🗑</button>
      </div>
      <div>
        <label className={styles.label}>Node ID</label>
        <input className={styles.input} value={node.id} readOnly />
      </div>
      <div className={styles.emptyHint} style={{ marginTop: 12 }}>
        This is a terminal node. Dialogue ends here.
      </div>
    </div>
  );
}