import { useState } from 'react';
import { LineNode } from '../../../types/dialogue';
import { useDialogueStore } from '../../../store/dialogueStore';
import { SpeakerField } from '../shared/SpeakerField';
import { AutoSaveTextArea } from '../shared/TextArea';
import { useValidation } from '../../../hooks/useValidation';
import styles from '../RightPanel.module.css';

interface Props {
  node: LineNode;
  dialogueId: string;
}

export function LineInspector({ node, dialogueId }: Props) {
  const { updateNode, deleteNode, file } = useDialogueStore();
  const { issuesByNodeId } = useValidation();
  const [showAdvanced, setShowAdvanced] = useState(false);
  const issues = issuesByNodeId[node.id] ?? [];

  const dialogue = file?.dialogues.find(d => d.id === dialogueId);
  const nodeIds = dialogue?.nodes.map(n => n.id) ?? [];

  function update(patch: Partial<LineNode>) {
    updateNode(dialogueId, node.id, patch);
  }

  function field(label: string, key: keyof LineNode, placeholder?: string) {
    const val = (node[key] as string) ?? '';
    return (
      <div>
        <label className={styles.label}>{label}</label>
        <input
          className={styles.input}
          value={val}
          placeholder={placeholder}
          onChange={e => update({ [key]: e.target.value } as Partial<LineNode>)}
          list={key === 'next' ? `nodelist-${node.id}` : undefined}
        />
        {key === 'next' && (
          <datalist id={`nodelist-${node.id}`}>
            {nodeIds.map(id => <option key={id} value={id} />)}
          </datalist>
        )}
      </div>
    );
  }

  return (
    <div className={styles.inspector}>
      <div className={styles.inspectorHeader}>
        <span className={styles.nodeTypeBadge} style={{ background: '#1e66f5' }}>Line</span>
        <span className={styles.nodeIdLabel}>{node.id}</span>
        <button className={styles.deleteNodeBtn} onClick={() => deleteNode(dialogueId, node.id)} title="Delete node">🗑</button>
      </div>

      {issues.length > 0 && (
        <div className={styles.issueList}>
          {issues.map((issue, i) => (
            <div key={i} className={issue.severity === 'error' ? styles.issueError : styles.issueWarning}>
              {issue.severity === 'error' ? '⚠' : '!'} {issue.message}
            </div>
          ))}
        </div>
      )}

      {field('Node ID', 'id')}
      <SpeakerField
        speaker={node.speaker}
        portrait={node.portrait}
        onSpeakerChange={(s, p) => update({ speaker: s, portrait: p })}
      />
      <AutoSaveTextArea
        label="Text"
        value={node.text}
        placeholder="Dialogue line text..."
        onSave={v => update({ text: v })}
      />
      {field('Next node', 'next', 'node_id')}

      {dialogue?.mobileMode && (
        <div>
          <label className={styles.label}>Chat Bubble</label>
          <select
            className={styles.select}
            value={node.chatBubble ?? ''}
            onChange={e => update({ chatBubble: e.target.value as 'in' | 'out' | undefined || undefined })}
          >
            <option value="">(auto)</option>
            <option value="in">in</option>
            <option value="out">out</option>
          </select>
        </div>
      )}

      <button
        className={styles.advancedToggle}
        onClick={() => setShowAdvanced(v => !v)}
      >
        {showAdvanced ? '▼' : '▶'} Advanced triggers
      </button>

      {showAdvanced && (
        <div className={styles.advancedSection}>
          {field('questUnlock', 'questUnlock', 'quest_id')}
          {field('objectiveComplete', 'objectiveComplete', 'group.objective')}
          {field('objectiveVisible', 'objectiveVisible', 'group.objective')}
          {field('questFail', 'questFail', 'quest_id')}
          {field('questComplete', 'questComplete', 'quest_id')}
          {field('luaCallback', 'luaCallback', 'on_event_name')}
        </div>
      )}
    </div>
  );
}