import React from 'react';
import FieldLabel from './FieldLabel';

const POSITION_OPTIONS = [
  { value: 0, label: '角色定义之后' },
  { value: 1, label: '角色定义之前' },
  { value: 2, label: '示例对话之前' },
  { value: 3, label: '示例对话之后' },
  { value: 4, label: '系统提示/作者注释' },
  { value: 5, label: '作为系统消息' },
  { value: 6, label: '深度插入' },
  { value: 7, label: '宏替换' },
];

const ACTIVATION_OPTIONS = [
  { value: 'permanent', label: '永久激活' },
  { value: 'keyword', label: '关键词触发' },
  { value: 'rag', label: 'RAG 检索' },
];

export default function WorldbookInsertion({
  insertion,
  onUpdateInsertion,
  onUpdateRagConfig,
}) {
  const activation = insertion.activationType ?? 'permanent';

  return (
    <div className="studio-wb-insert">
      <h3 className="studio-wb-insert__title">世界书插入</h3>

      <div className="studio-wb-insert__fields">
        <label className="studio-edit-field">
          <span className="studio-edit-field-label">
            <FieldLabel tip="条目写入角色卡时的深度位置，影响模型读取上下文的顺序">
              插入位置
            </FieldLabel>
          </span>
          <select
            className="studio-edit-select"
            value={insertion.position ?? 1}
            onChange={(e) =>
              onUpdateInsertion('position', Number(e.target.value))
            }
          >
            {POSITION_OPTIONS.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </select>
        </label>

        <label className="studio-edit-field">
          <span className="studio-edit-field-label">
            <FieldLabel tip="永久激活始终注入；关键词/RAG 仅在匹配时注入">
              激活方式
            </FieldLabel>
          </span>
          <select
            className="studio-edit-select"
            value={activation}
            onChange={(e) =>
              onUpdateInsertion('activationType', e.target.value)
            }
          >
            {ACTIVATION_OPTIONS.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </select>
        </label>

        {activation === 'keyword' && (
          <>
            <label className="studio-edit-field">
              <span className="studio-edit-field-label">
                <FieldLabel tip="主关键词用于触发本条目进入上下文">主关键词</FieldLabel>
              </span>
              <input
                type="text"
                className="studio-edit-input"
                value={insertion.key ?? ''}
                onChange={(e) => onUpdateInsertion('key', e.target.value)}
                placeholder="触发本条目所需主词"
              />
            </label>
            <label className="studio-edit-field">
              <span className="studio-edit-field-label">
                <FieldLabel tip="可选，辅助匹配多个相关词">次要关键词</FieldLabel>
              </span>
              <input
                type="text"
                className="studio-edit-input"
                value={insertion.keysecondary ?? ''}
                onChange={(e) =>
                  onUpdateInsertion('keysecondary', e.target.value)
                }
                placeholder="可选，辅助匹配"
              />
            </label>
          </>
        )}

        {activation === 'rag' && (
          <>
            <label className="studio-edit-field">
              <span className="studio-edit-field-label">RAG 库 ID</span>
              <input
                type="text"
                className="studio-edit-input"
                value={insertion.ragConfig?.libraryId ?? ''}
                onChange={(e) =>
                  onUpdateRagConfig('libraryId', e.target.value)
                }
              />
            </label>
            <label className="studio-edit-field">
              <span className="studio-edit-field-label">相似度阈值</span>
              <input
                type="number"
                step="0.01"
                min="0"
                max="1"
                className="studio-edit-input"
                value={insertion.ragConfig?.threshold ?? 0.5}
                onChange={(e) =>
                  onUpdateRagConfig('threshold', Number(e.target.value))
                }
              />
            </label>
            <label className="studio-edit-field">
              <span className="studio-edit-field-label">最大条数</span>
              <input
                type="number"
                min="1"
                className="studio-edit-input"
                value={insertion.ragConfig?.maxEntries ?? 3}
                onChange={(e) =>
                  onUpdateRagConfig('maxEntries', Number(e.target.value))
                }
              />
            </label>
          </>
        )}

        <label className="studio-edit-field">
          <span className="studio-edit-field-label">
            <FieldLabel tip="写入世界书条目的说明注释，便于在编辑器中识别">备注</FieldLabel>
          </span>
          <input
            type="text"
            className="studio-edit-input"
            value={insertion.comment ?? ''}
            onChange={(e) => onUpdateInsertion('comment', e.target.value)}
            placeholder="写入世界书条目的说明注释"
          />
        </label>
      </div>
    </div>
  );
}
