interface BindEntryProps {
  lobsterKeyDraft: string
  workspaceApiKeyConfigured: boolean
  saving: boolean
  bindingLabel: string
  onLobsterKeyChange: (value: string) => void
  onSave: () => void
}

export function BindEntry({
  lobsterKeyDraft,
  workspaceApiKeyConfigured,
  saving,
  bindingLabel,
  onLobsterKeyChange,
  onSave
}: BindEntryProps) {
  const bindingSteps = ["同步聊天配置", "启用专家与插件", "进入桌面协作工作台"]

  return (
    <div className="bind-entry bind-entry-elevated">
      <div className="bind-entry-copy">
        <span className="bind-entry-kicker">Lobster Key</span>
        <strong>绑定龙虾密钥</strong>
        <p>输入龙虾密钥后即可完成身份绑定，同步工作区配置并解锁专家对话、插件协作与运行时能力。</p>
      </div>
      <div className="bind-entry-benefits" aria-label="绑定后可用能力">
        {bindingSteps.map((step, index) => (
          <span key={step} className="bind-entry-benefit">
            <span className="bind-entry-benefit-index" aria-hidden="true">{index + 1}</span>
            <span>{step}</span>
          </span>
        ))}
      </div>
      <div className="bind-row">
        <input
          type="password"
          value={lobsterKeyDraft}
          placeholder={workspaceApiKeyConfigured ? "输入新龙虾密钥以更新绑定" : "请输入龙虾密钥"}
          onChange={(event) => onLobsterKeyChange(event.target.value)}
        />
        <button disabled={saving || lobsterKeyDraft.trim().length === 0} onClick={onSave}>
          {saving ? bindingLabel : "立即绑定"}
        </button>
      </div>
    </div>
  )
}
